Construction is a business theme designed specifically for construction, building companies and those that offer building services. The theme comes pre-packed with a drag and drop layout builder (Superhero Framework) to ensure you can easily design your website just how you like it.
| Folder | Description |
|---|---|
 | Demo Package install |
 | Documentation |
 | Files and folders used for installing theme only and other inConstructiontion and content you might need. |
 | Contains licenses for Drupal and included premium modules. |
(Please note this video tutorial is from our Drupal Me Install Demo, but this applies to all our themes)
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.
Provided with this package is a Drupal install profile (called Superhero Construction) which is used to quickly install new sites with the Construction theme. This profile will install all required modules and setup the Construction theme as the enabled theme.
To install Construction using the profile do the following:
The following explains how to install the theme with existing sites. In order to do this there are several steps that must be completed.
The install profile provides all contributed and Superhero modules required to create the Construction demo site and your own customised website using the Construction 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.
Even though Construction 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 Layout 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 Construction 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 Construction. 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 Construction 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.
Superhero sub themes such as Construction provide a complete layout 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 layout builder available in the backend of your theme when visiting Appearance > Construction > 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:
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 layout builder. This allows you to remove regions from being displayed on the site, even if the region is not empty.
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.
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.
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 Construction this is used by default for the feature section as this contains a full width image slideshow.
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 Construction 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.
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.
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'.
Within our Construction template we have created several classes which allows you to change the style of your Drupal theme.
Within our Construction 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 inConstructiontion on bootstrap, please goto: http://getbootstrap.com/
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.
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.
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.
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:
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 Constructiont 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.
Once the portfolio Constructiont 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.
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.phpYou can copy this to your theme directory and overwrite if you wish.
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.
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 Constructiont is Full HTML.
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.
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').
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 refers to the title of the accordion which is used to open and close the item.
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.
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.
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.
Construction 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 for purchasing the Drupal 7 Responsive Construction 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