Overview

Forma is a multifunctional, incredibly configurable Drupal theme which inherits its functionality from the CMS Superhero base theme. This theme provides tools to manage the full page layout of the site, the colour presets to use within the site and many other features to create sites of any kind.

Package Contents

Folder Description
Graphical Contents
Demo Package install
Documentation
Files and folders used for installing theme only and other information and content you might need.
Contains licenses for Drupal and included premium modules.

Installation

Demo Install

Video Tutorial

(Please note this video tutorial is from our Drupal Me Install Demo, but this applies to all our themes)

Demo Install Steps

Provided with the package is a copy of the full demo site with the sql database. In order to use this you can follow the below steps below or watch the vidoe tutorial above.

  1. Create a new database in your phpmyadmin/cPanel tools and create database user.
  2. Import the supplied database sql zip file (located in Extra folder) into this database.



  3. Copy the Demo folder contents into your site folder.



  4. Change the details in sites/default/settings.php to match the database name, user and password for your new created database.



  5. Admin account: username: admin, password: admin.
Note: It is important for any installation of the Forma theme to also have the Superhero theme also in the sites theme folder, as this provides all theme functionality. It is also important to install the Superhero Theme module as this provides the admin tools for the backend of the theme.

Installation Profile

Provided with this package is a Drupal install profile (called Superhero) which is used to quickly install new sites with the Forma theme. This profile will install all required modules and setup the Forma theme as the enabled theme.

To install Forma using the profile do the following:

  1. Create a new empty database in your phpmyadmin/cPanel tools and create database user.
  2. Download the latest version of Drupal 7 from Drupal.org
  3. Move your Drupal 7 folder contents to your site location.
  4. Copy the Superhero profile folder located in the Forma package (Extra/profiles) into your sites profiles folder.
  5. Visit the site URL that your files belong to and you will see the page shown below:
  6. The Superhero radio button should already be selected. If not make sure it is.
  7. Install Drupal normally making sure database credentials match those you created at Step 1.
  8. Once installed go to configuration > jQuery Update and set the version to at least 1.7.

Theme Only

The following explains how to install the theme with existing sites. In order to do this there are several steps that must be completed.

  1. Copy both the Forma and Superhero themes (located in your Forma package at Extra/themes) into your sites theme directory (sites/all/themes).
  2. Copy the module folders located in your Forma package at Extra/modules into your sites 'sites/all/modules' folder.
  3. NOTE: The Forma package contains the modules (in Extra/modules) in 3 folders which are contrib, premium and superhero_framework. The contrib folder contains all the modules that are used within the site that are available from drupal.org. Please only copy the modules from the Forma package that you have not already installed on your site. E.g. if you have already installed Views do not copy this into your sites/all/modules folder.

  4. Install and enable at least the "Superhero Theme" module from within your site.
    The jQuery Update will be required to install. Click "Continue".

  5. Make sure that at least jQuery version 1.7 is installed using jQuery Update module settings at Configuration > jQuery Update.


  6. Enable the Forma theme from Appearance menu.
  7. Once enabled you can configure the theme using the theme settings under Appearance.
NOTE: This method does not require you to import or remove any data from your database. Please do not use the database.zip file for this method of install.

Modules

The install profile provides all contributed and Superhero modules required to create the Forma demo site and your own customised website using the Forma template. The template uses modules for customised functionality, such as animated blocks, image slideshows, portfolio pages etc.

In order for CMS Superhero sub themes to work correctly, the following modules are required.

Delta

Even though Forma has a large list of customisation options, the theme can be further customised using the Delta Module. In its simplest form, Delta allows you to customise all the theme settings mentioned above for specific pages, or pages that match specific rules. This means that you can create for example multiple different homepage layouts, by creating a delta for each one and using the Page Builder mentioned earlier to completely reconfigure region positions and settings.

In order to use delta the following modules are required:

If you have installed our theme using the 'Demo Install' these modules are already installed.

Please read the documentsation below, but we have also created you a video tutorial to show you how to create individual pages and layouts using our theme:
(Go an make a cup of coffee, this is a long one)
(Please note this tutorial is from our Drupal Me Theme, but the same rules and principles apply to our Forma theme)

Once installed the first thing to do is to create your delta for the page you wish to customise. You can do this by going to Appearance > Delta. Once here you click on 'Add' which will show the below form.


Fill in the form and make sure that the Theme is set to Forma. We also recommend that you set the Operation mode to 'Only override different values'. This is the most efficient.

Once created you will be returned to your list of deltas. The above image shows an example of the deltas used on the demo site. Once created you can begin to configure all the theme settings for this delta by clicking on 'Configure' on your new created delta. The configure setting provides all the theme settings that belong to Forma however will only be applied on pages that are set to use it.

In order to use these new delta settings on your site you need to create a Context by going to Structure > Context.

Contexts are a set of actions that are carried out when specific conditions are met. In the case of Delta, the action carried out is the page will use all the theme settings specified in your new Delta, however, the condition can be whatever you like.

The below form shows the creation of a context which will allow you to assign your Delta theme settings to a specific path. In this case it is only applying a delta when the path matches the 'front' page. This means that the home page will have different settings to the main settings of the site.

The important parts of this are the conditions and the reactions. To apply a Delta you select 'Delta' from the list of reaction types. Once selected a list of all available Deltas will be visible (like above) so that you can select which one to use. The condition in this case is set to apply only when a path matches that set, however, this could easilly be set to specific node types or for specific user roles only etc.

Once saved, the page that matches the conditions set will utilise the Delta you specified. If you ever need to update the theme settings you can just update the specific delta being used by going to 'Configure' on the Appearance > Delta page.

Page Builder

Superhero sub themes such as Forma provide a complete page builder which allows you to manage manually the layout of your website using simple drag and drop tools. Using these tools you can specify the order of sections and regions; the widths of individual block regions; move regions to specific sections or remove from the site layout entirely.

The above shows the page builder available in the backend of your theme when visiting Appearance > Forma > Settings. Using the cross arrow icons, you can drag and drop the sections such as Content, Preface etc. vertically to place them wherever you would like them in your website work flow. Or you can use the same arrows per region, within each section, to change the order at which they are rendered.

For example, if you want your strapline to appear above your feature but also want your logo rendered before your menu, you can drag the strapline section above the feature and drag the logo before the menu (in the header section) and save the settings. Saving these settings will automatically apply these changes when you view the front end of your site.


By clicking the gear icon on each region you can manage additional settings specific to each region. These settings are:

  • The section the region belongs too.
  • The width of the region.
  • Whether to force the region to be rendered even if empty.

Section setting

This allows you to move the region to another section.

If set to 'none' the region will be moved to the unassigned section at the bottom of the page builder. This allows you to remove regions from being displayed on the site, even if the region is not empty.

Width setting

Based on Twitter Bootstraps 12 column system, you can specify the width of each section. This means that all regions within each section of the theme should add up to 12. Say for example you want a 3 column layout for a section, you would set each width to 'span4'.

Now integrated with Bootstrap 3 and its new and improved column system, column widths can now be set on a per screen display. For example a large desktop screen size can have a region be 10 columns wide but on a tablet only be 7 columns. This gives greater flexibility for design and layout of your website.

Force Setting

This is used to specify that the region should be rendered on the front end, even if no blocks or content is present in the region.

Section Settings

Each individual section of the website can be further customised through the Section Settings tab in the theme settings. This allows you to make sections full width, make them sticky and also add bootstrap classes to determine responsive visibility.

The Full Width setting provides the ability to make sections into a full width responsive layout, so that the content will be the full width of the browser. In Forma this is used by default for the feature section as this contains a full width image slideshow.


Note: Must only be used for the section at the top of the layout.

Specifically used for the top section of the design this allows you to make the section stick to the top of the screen permanently per page. In Forma this is used for the header section.


Each section also includes custom style settings. Using the colour picker, individual sections can have a background colour applied to them, without requiring any use of CSS. A margin and padding can also be applied to further configure the section without any coding knowledge.


As the Base theme integrates Twitter Bootstrap, it allows you to append responsive classes to each section to control the sections visibility based on the browser size.

Presets

By default several colour presets are provided by the theme so that you can easily change the colour scheme of the website.

The preset tools allow you to easily select the preset you wish to use and also provides the functionality to create your own so that you can have full control over the colour scheme of your website. Once you have clicked the coloured box of the preset you wish to use you can then set it as the default by clicking the radio button below it. Once you click save you will then change the current preset of the site. The system works this way so that you can customise the individual colours of presets before setting it as the default.

Other Settings

The settings under the Basic tab specify the global site wide layout settings of the site. The Responsive setting sets whether the site will be responsive or not, if for example your site does not require responsive layouts.

The layout style setting determines whether the site will be a boxed layout centred in the browser or if the site utilises the wide layout (default). The wide layout makes the site full width.

The theme direction allows your theme to rearrange the site for a different reading style. LTR refers to 'left to right' reading while RTL refers to 'right to left'.

CSS Classes

Within our Forma template we have created several classes which allows you to change the style of your Drupal theme.

  1. User blocks

    Here is a list of the css classes available for styling your blocks and titles.
    To use these classes select 'Configure Block' and enter the class in the 'CSS class(es)' input box :

Section Styles Styles

Misc Styles

Block Styles

View Style config

Responsive Shortcodes

Within our Forma theme you can even control the columns for bootstrap and the responsive layout with short codes within your editor, making sure that your theme works on all devices.

Below are a few examples of how to input the shortcode to get the different column widths for mobile devices:

[row]
[col class="col-lg-6 col-md-6 col-sm-6 col-xs-12"] 'Your Content here for first column' [/col]
[col class="col-lg-6 col-md-6 col-sm-6 col-xs-12"] ' Your Content here for second column' [/col]
[/row]

This example makes columns that are span 6 on large, medium and small devices and span 12 on small devices
So makes a 50/50 split of the columns on the screen.

 

[row]
[col class="col-lg-4 col-md-4 col-sm-4 col-xs-12"] 'Your Content here for first column' [/col]
[col class="col-lg-8 col-md-8 col-sm-8 col-xs-12"] ' Your Content here for second column' [/col]
[/row]

This example makes the first column span 4 on large, medium and small devices and span 12 on small devices,
them makes the second column span 8 on large, medium and small devices and span 12 on small devices.
So makes the left column 1/3 of the full width.

If you need more information on bootstrap, please goto: http://getbootstrap.com/

Superhero Modules

Included in the install profile and in the demo install are modules created specifically for Superhero sub themes. These modules greatly increase the functionality options of your website.

Superhero Theme

This is a helper module used for Superhero base themes. It is used to provide the drag and drop tools and format the backend of the theme settings to make it easier to use.

Superhero Block

The Superhero Block module allows any block in the system to utilise colour/image backgrounds and animate the content using CSS3 animations. The animations are used in combination with the jQuery appear plugin to allow animations to take place when the user scrolls to the block. Image backgrounds can also be used as Parallax scrolling backgrounds by using the Stellar.js plugin.

Requirements

Note: The Forma Theme by default has the main files for animate.css and jquery.appear.js

The use of the libraries module means that the files for Stellar.js can be placed in the libraries directory and can be independent of the module, therefore can easily be updated.

Once installed the Superhero block module provides a new fieldset in the form of every configurable block on your Drupal site. Using the options available in this fieldset you can customise the appearance and the appear effects of blocks to make them animated and add backgrounds and background effects to them.

The animation option allows you to specify the type of animation that the block will do when the block is viewed by the user on the front end. It is integrated with the effects provided by Animate.css, a third party, incredibly useful library. You can also specify the duration of the animation which will overwrite the default 1 second duration.


The background type settings allow you to specify the type of background that the block can have. The three available types are having a Colour background, an image background or no background at all. The colour option allows you to specify a hexadecimal value for the colour at which the background will be such as #FF0000 (red). This allows you to set a colour for the background of the block without requiring you to set the colour in css.


The image background type allows you to add an image as the background of the block and has two options, Fixed and Parallax. Integrated with the Media module you can easily select and insert an image which will be used for the background of the block.

Parallax backgrounds are image backgrounds where the image scrolls at a different rate to the window scroll, which further increases the aesthetic of your website. You can determine this rate by setting the Parallax Ratio.

You can also specify a top and bottom padding for the block which is especially useful for blocks with limited content using Parallax backgrounds.

Superhero Portfolio

The Superhero Portfolio module has been created to allow dynamic portfolio pages to be created quickly and easily. Built upon jQuery Isotope and integrated with Drupal Views module, the module provides an excellent starting point for those who want to build a portfolio.

Example:

Requirements

Note: The jQuery isotope library is provided in the libraries folder for the Forma install. It is an incredibly useful premium plugin which files must be placed in sites/all/libraries/isotope.

The module provides the following features on install.

The Superhero Portfolio module provides an incredibly quick way to get started from scratch with portfolios by providing all the necessary components required to construct a filterable Portfolio. Once installed the module will provide a content type to use 3 default page views and a taxonomy vocabulary to be used with your new content type.

First thing to do is to create your categories which will be used to identify the type of work that your portfolio content can fall under and can also be used to filter the list of results. The created taxonomy vocabulary is 'Portfolio Categories'

The above shows the categories available from the demo install. This list of categories will be used to categorise the portfolio content and be used for the dynamic filter on the portfolio page. The 'Show All' filter on the portfolio page will be added automatically.

Also provided by the module is a 'Superhero Portfolio' content type. This automatically has fields for a portfolio image and a term reference field to the 'Portfolio Categories' taxonomy vocabulary that you have just added categories too.

Once you have added content of type 'Superhero Portfolio' you can then use the page displays provided by Views, shown below:

This view provides 3 page displays by default each to reflect the number of possible columns your portfolio can contain.

The Superhero Portfolio module Views also utilise a bespoke format style (shown above) called 'Superhero Portfolio'. This provides custom settings specific to creating the portfolio. This includes the number of columns, whether to use a filter, and what taxonomy vocabulary to use for the filter. As you may have guessed the three portfolio displays created by this view will each have a different value for the 'Number of Columns' setting.


Note: It is vital that the content type to be displayed has a taxonomy term reference field linked to the chosen setting, otherwise the filter will not work. It is important to use the 'Portfolio Categories' taxonomy vocabulary for the Superhero Portfolio content type. This setting exists if you wish to use the portfolio display type for content of different types.

Once the portfolio format style settings have been set, you can then set up a filter on the views to filter by Superhero Portfolio content type. After this has been set, your portfolio pages will be ready to use.

Extra

By default the portfolio views use a bespoke view mode called Superhero Portfolio which utilises a custom image style to set up a standard size for the Portfolio images as seen under (manage display). Both the image style and the view mode template can be changed so that you can change the layout of each portfolio item to whatever you like.

The default template for this view mode can be located in the Superhero Portfolio module.

superhero_portfolio/theme/node--view--superhero_portfolio.tpl.php

You can copy this to your theme directory and overwrite if you wish.

Superhero Shortcode

The Superhero Shortcodes module integrates with the Shortcodes API module to add an assortment of shortcodes which can be used in textareas across the site which will automatically generate the markup around whatever content you wish to encapsulate in an accordion, carousel etc.

Enabling Shortcodes

First thing to do to enable shortcodes is to enable to Shortcodes API Module and also the Superhero Shortcode Module.

Through the use of the Shortcodes API module. The available shortcodes can be activated by going to Configuration > Text Formats > Full HTML > Configure. Once here you need to enable the Shortcodes filter. This will enable the module filter to be able to setup available shortcodes.


Once the Shortcode filter is enabled you can view all available shortcodes under Filter settings. From here you can individually enable which shortcodes you wish to use. Once enabled you can use them in your node forms. Please be aware though, that the shortcodes will only work when the text format is Full HTML.


Columns

The example on the right shows an example of the column shortcode in use. This is implemented using the following:

	[row]
		[col class="span4"]Column 1 Content[/col]
		[col class="span4"]Column 2 Content[/col]
		[col class="span4"]Column 3 Content[/col]
	[/row]

This uses both the Row and Column Shortcode to define a single row with 3 columns each with a width of 4 columns. As the shortcode module works with Twitter Bootstrap, the total number of columns available is 12 and therefore in this case, each column is a third of the width of the row.

Using this shortcode combination you can vary the widths and numbers of and widths of each column within a row.


Alerts

The examples on the right show the alert shortcode with the numerous different versions of alert that can be created using the shortcode.

[alert type="success"]
Success
Well done! You successfully read this important alert message.
[/alert]

The code above shows how to create the top green coloured alert. It is simply the shortcode with type set to success. The other types available are: ('warning','error' and 'info').


Accordion

The example on the left is an example of the accordion and accordion_item shortcodes.

	[accordion]
		[accordion_item title="Accordion 1 Title"]
			Accordion 1 Content
		[/accordion_item]
		[accordion_item title="Accordion 2 Title"]
			Accordion 2 Content
		[/accordion_item]
	[/accordion]

The above code shows how to add two accordions. The title attribute of each accordion_item tag refers to the title of the accordion which is used to open and close the item.

Carousel

The example here shows a carousel. Carousels are composed of the carousel, carousel_item and caption tags.

	[carousel]
		[carousel_item]
			IMAGE GOES HERE
			[caption]Caption Text[/caption]
		[/carousel_item]
		[carousel_item]
			IMAGE 2 GOES HERE
			[caption]Caption 2[/caption]
		[/carousel_item]
	[/carousel]

Each carousel item is enclosed in the carousel tags and within each carousel item will be your image and caption tags to define an image caption. Image captions however are optional.


Testimonials

The example here shows a testimonial. Testimonials make the use of the testimonial tag.

	[testimonial name="AUTHOR_NAME" 
		email="AUTHOR_EMAIL" 
		company="AUTHOR_COMPANY" 
		designation="AUTHOR_DESIGNATION"]
		Your Testimonial Text
	[/testimonial]

The available attributes of the testimonial tag are name, email, company and designation. These are used to make up the text placed at the base of the testimonial.


Icons

The icon shortcode shown in the example is a single shortcode that can use multiple classes to determine which icon to display. The icons are all from Font Awesome. Please use their website for reference of all the available icons

	[icon name="icon-glass"][/icon]
	[icon name="icon-heart"][/icon]
	[icon name="icon-film"][/icon]
	[icon name="icon-ok"][/icon]
	[icon name="icon-off"][/icon]
	[icon name="icon-home"][/icon]

Above are an example of several icons implemented using the icon shortcode.


Other Modules

Mega Slider

Forma implements the Mega Drupal Mega Slider which provides a fully featured image slideshow creation tool, that allows you to manage slides, animations, timing etc. You can create a new slider by going to "add new slider" under admin/structure/md-slider. The documentation for this module is available in the md_slider folder and you can also use the video below for reference.

Thank you

Thank you for purchasing the Drupal 7 Responsive Forma theme. If you have any issues or feedback please contact us via our Themeforest author page.

©2013 CMS Superheroes, c/o Red Fern Media Ltd, JoomEXP