Hammer

Details: Documentation (Joomla); 03 December 2015; 6148

Installation
Customization
Adding New Position
Update
Module Variations
Text Editor ^Important
Breadcrumbs
Thin Stroke Icons 7
Font Awesome Icons
Buttons
Home Page
About Page
Services Page
Projects Page
Footer Section
Extensions

Installation

The most important decision to make before proceeding with your installation is whether you should install the template manually, or if you can use the Quickstart package, which will install everything for you.

Which installation method you should use depends on the current status of your site. Also, before installing either the template manually or the Quickstart Package, please make sure you meet the Joomla! and the template requirements.

Requirements

Apache 2.2+ or Microsoft IIS 7 (Apache strongly recommended)
PHP 5.4+ (PHP 5.5+ Recommended)
MySQL 5.1+
Joomla 3.4+

Also, please have a look at the Joomla requirements. Basically, they are the same as the above, but you will find some additional details there.

Quickstart Installation

The Quickstart Package consist of a full installation of Joomla! that installs Joomla itself, the template, the extensions, the demo content and the database data to match our demo layout. Have in mind that as this is a full Joomla! installation it may only be used on a clean server; the package cannot be installed in an existing Joomla installation. It can only be used when you start a new project/website.

99% of the customers purchase Joomla Templates because of the Quickstart Package. They just install it, replace the demo content with theirs and the site is ready. Installing the Quickstart Package will save you a lot of work.

Installing the Quickstart Package is a fairly simple process. Generally, a Quickstart install will consist of these small steps:

Ensure you have installed an FTP client and prepared a database for your server, or have the credentials for an existing database.
Download and extract the Quickstart Package.
FTP the extracted Quickstart contents to your preferred install location.
Open your browser to the install location on your server to begin the Joomla! installation process, entering the database credentials where required.

Once this final step is complete you will have a fresh install of Joomla!, along with the template and all the settings and content needed to match the demo, including sample article content. However, the images from the demo will NOT be included, as they are licensed via a third party. Instead, blank placeholder images will be included so that you can customize the content easily with your own images. For some users, the above steps are all that is needed for a successful installation of the Quickstart Package, but for those who are less experienced with this process, we recorded the following video.

Manual Installation

Manual Installation refers to installing the template on your Joomla! powered website. This means you already have a website with content items, modules, extensions, so you just decided you want to improve the design of your website.

Manual installation steps:

Download the template-only file, which will be called tpl_it_TEMPLATE-NAME.zip.
Go to Joomla administration > Extensions > Manage > click on the Browse button > locate the template file > install the template.
Finally go to Extensions > Template manager > and set the template as default.

If you install just the template over an existing Joomla website you will need to install and configure all extensions that are installed in the demo site and configure them absolutely the same way as they are configured in the demo site in order for your website to look like the demo site. For this purpose you will still need to install the Quickstart Package on another location, see how everything is configured there and just duplicate it on your installation.

Customization

All your customization (custom code) should be placed in your "Custom Style Sheet" file. This is the custom.css file. By default, the custom.css file does not exists, so you will need to create it. You need to create this file in root/templates/TEMPLATE_NAME/css/custom.css.

Customizations from the template settings page

First you need to go to Joomla administration > Extensions > Template manager > and choose the template you're using (it will be called it_TEMPLATE-NAME - Default). You will find 9 tabs as follows:

Basic (basic template options)
Presets (define main color theme)
Layout (template layout and module positions)
Menu (menu options)
Typography (define heading, menu and content fonts)
Custom Code (add custom css or js)
Advanced (cache and LESS settings)
Blog (comments, social share and post format)
Assignment (assign the template to specific menus)

1. Basic Tab:

Header:

Sticky Header - enable fixed/sticky header
Favicon - change the default Joomla favicon (you can also replace the favicon.ico file in root/templates/TEMPLATE_NAME/images/)

Boxed Layout: choose between boxed or full-width layout.

Logo:

Logo Type - choose between image logo or text logo
Module position - from the drop down menu you can choose in which position to load the logo
Image - select your logo image (you need to first upload it in root/images/ folder)
Retina Logo - choose a logo image which needs to be 2x bigger than the original logo image
Mobile Logo - choose logo image which will appear on mobile devices

Body Background Image:

Select Image - choose the main background image (mostly used for boxed versions)
Background Repeat - choose if the background image will be repeated or not
Background Size - choose the size attribute of the image
Background Attachement - choose the attachement atribute
Background Position - choose the image position

Footer:

Copyright - show or hide the copyright information in the footer
Module Position - select the module position in which you will load the footer settings
Copyright Notice - if the Copyright option is enabled you need to fill this field with your information

Social Icons:

Social Icons - show or hide the social icons
Module Position - select the module position in which you will load the social icons
All following fields will show the coresponding icon on the site's frontend if you add your social media link

Contact Information:

Enable - choose either to show or hide the contact information
Module Position - select the module position in which you will load the contanct information
Phone - add your phone
Email - add contact email

Coming Soon:

Coming Soon Mode - enable or disable the mode
Coming Soon Title - write your coming soon title
Date - add the date on which your site will be online
Content - this is the place to add your coming soon message if you want to have one

2. Presets:

By default you have 4 preset styles with color schemes included. By default you can choose 3 main colors:

Background Color - by default it's white (#ffffff)
Text Color - your content and headings color
Major Color - this is the main color theme that your site will use

Please note that all the colors will work if the LESS option from the Advanced tab is enabled! This way the LESS files will automatically generate your CSS files with those colors.

3. Layout:

By default in the Layout tab you will find the preset modle positions and template layout. You can either use the created module positions or create your own module positions.

Customizing module position or entire row from the template settings:

Customize entire row settings: click on the Settings button on the right of the row you want to customize and change the options depending to your needs. For example, you can change the row background, text color, add background image, or disable it on desktop, tablet or mobile views.

Same applies for a module position: by clicking on the 3 cogs icon you will load the settings applied to this particular module position.

4. Menu:

Select Menu - choose which of your menus will be loaded in the menu position
Menu Type - here you choose from Mega Menu (which is only the menu), Off Canvas Menu (only the menu toggler) or combination of both
Dropdown width - choose the width of the dropdown menu
Dropdown animation - choose the dropdown animation

5. Typography:

From this tab you can choose different fonts for different headings, menu, content or add a custom font which can be assigned to specific classes.

6. Custom Code: here you can add custom lines of code if needed

7. Advanced:

Cache Settings:

Compress CSS - enable or disable CSS compression
Compress Javascript - enable or disable JS files compression
Exclude Javascript - you can exclude some JS files from compression

Compile LESS to CSS: with this option enalbed the CSS files will be autogenerated from the LESS files

8. Blog:

Post Format/ Show icon - by enabling this option you can display a little icon before the article's title in the blog layout
Comments Settings - choose different comment plugins to run on your site
Social share - add the most popular social sharing buttons to your articles

9. Assignments: assign any of your menus to the template

This option is used mostly when you want to display different preset on a different menu.

If you want to have a different color theme on any of your menus you need to:

Duplicate the template from Template Manager
Open the duplicated template and rename it, for example "Template Color 2"
Click on the Presets tab and choose different preset (for example "Preset 2")
Change the colors depending on your needs
Click on the Assignment tab and select the menu on which you want to display the different color
Finally save the settings and test your menus

Adding New Module Position

Layout Builder

You can open the Layout Builder from Joomla admin > Extensions > Template manager > it_hammer > click on the Layout tab. You can create new rows or change the columns layout of a current position. You can change both columns settings and column/position settings.

To create new module positions you need to:

Open root/templates/it_hammer/templateDetails.xml and locate the following lines:

<positions>
  <position>title</position>
  <position>logo</position>

Copy one line - for example title and paste it below the other one, then rename it (in this example the new position will be called "newposition"):

<positions>
  <position>title</position>
  <position>newposition</position>
  <position>logo</position>

Save and close the file
Open the Layout tab in the template settings > choose where you want to place the new position (the position should first have a row and then click on the cogs icon) > when you click on the cogs icon you'll see the drop down list "Module Position" > choose the "newposition" from the list and save.
Go to root/templates/it_hammer/less/theme.less and add the new css style for the new position. The class of the new position should be:

#sp-newposition

Finally create a module and publish it in the new position

Update

Updating the template is really easy. Here are the steps you need to perform:

Download the new version of the template from the "Download" section on our website
Go to "Extensions" -> "Manage" and click on the "Browse" button
Select the template file you downloaded in step 1. It will usually be called tpl_it_TEMPLATE_NAME.zip
Click on the "Upload & Install" button

IMPORTANT: If you have customized some of the original LESS or CSS files of the template, after the update you will most probably lose those changes, the files will be overwritten. We recommend to create a custom.css file in the root/templates/TEMPLATE_NAME/css/ folder where you can add all your customizations, without worring that you might lose them.

We also recommend to make a full site backup, after major customizations or after adding big amount of content.

Module Variations

Hammer comes with 6 preset module variations (Module Class Suffixes):

title1 - with this class the module will be clean and plain with only a custom image element below the title, the heading and element are centered
title2 - again a plain module style with colored dot on the left side of the module title. The color is same as the default main theme color
title3 - this is the same module title as title1, except the element and the text are aligned left
title4 - same module title as title3, but with gray element positioned below the module title
title5 - this is a colored module with white dot on the left side of the module title. The module is with rounder borders
title6 - dark gray module (same color as the main text color) with colored title and a ruler background image on the right side

Text Editor (IMPORTANT)

The default Joomla editor (TinyMCE) is known for stripping the code in articles or Custom HTML modules, or any other modules that use an editor.

We recommend to use JCE as a text editor or disable the text editor at all.

JCE - download and install JCE from https://www.joomlacontenteditor.net

You can turn it on by going to Site Admin > Global Configuration > Default Editor > select "Editor - JCE" and save.
Thus when you open an article or a module you will see the "Toggle Editor" button, from which you can switch between HTML editor and Text editor.

EXAMPLE:
Let's say you open the "Social Icons" module. When you open it with TinyMCE you won't see any code and you might think that the icons are there - but if you click on "Save", the HTML code will get stripped.
Now, if you have enabled JCE as a default editor and open the module, again you won't see the icons, BUT if you click on the "Toggle Editor" button the code will be displayed. You can edit it and save it. Thus you will not lose any code.

No Editor - you can turn off the editor by going to Site Admin > Global Configuration > Default Editor > select "Editor - None" and save

Thus when you open any article or module you will see the original code and when saving no code will get stripped.

Breadcrumbs

To activate the Breadcrumbs Module on a chosen page, you have to assign the module to the menu for this page first. But you have to make one thing to have the breadcrumbs on the desired page:

Go to the Menu manager -> Your Menu Item (for example Ui Kit Elements) -> Helix Page Title Tab
Set Enable Page Title to "YES"

From the same tab you can change the background color or to choose an image for your breadcrumbs background for the different pages.

Thin Stroke Icons 7

Thin Stroke Icons 7 set by Pixeden are integrated in Hammer Template. A series of iOS 7 inspired vector icons in a custom @font-face icon font that can be styled dynamically using CSS. Those retina ready icons have a very modern style that will beautifully complement any project.

You can see all available icons here.

You can find the icons documentation here.

Usage Example:

<span class="pe-7s-map-marker"></span>
<i class="pe-7s-home"></i>

Font Awesome Icons

Place vector icons anywhere using an icon font.

UIKit Icon component is using the fantastic Font Awesome icon font, a project by Dave Gandy. Altogether Font Awesome provides more than 300 symbols and glyphs for web-related actions. Icon fonts are great, because they enable you to easily change color, size and more via CSS. They are scalable vector graphics, which means that they look great on high-resolution displays.

Usage:

To apply this component, add any .uk-icon-* class to an <i> or <span> element. Et voilà, you have a vector icon, which inherits size and color just like your text does.

Buttons

We have used UIKit buttons, styled for the purposes of our template.

Buttons - Default Size

<a class="uk-button" href="#">Default Button</a>
<a class="uk-button uk-button-primary" href="#">Primary Button</a>
<a class="uk-button uk-button-primary2" href="#">Primary Button 2</a>
<a class="uk-button uk-button-success" href="#">Success Button</a>
<a class="uk-button uk-button-danger" href="#">Danger Button</a>

Buttons - Mini Size

<a class="uk-button uk-button-mini" href="#">Default Button</a>
<a class="uk-button uk-button-primary uk-button-mini" href="#">Primary Button</a>
<a class="uk-button uk-button-primary2 uk-button-mini" href="#">Primary Button 2</a>
<a class="uk-button uk-button-success uk-button-mini" href="#">Success Button</a>
<a class="uk-button uk-button-danger uk-button-mini" href="#">Danger Button</a>

Buttons - Large Size

<a class="uk-button uk-button-large" href="#">Default Button</a>
<a class="uk-button uk-button-primary uk-button-large" href="#">Primary Button</a>
<a class="uk-button uk-button-primary2 uk-button-large" href="#">Primary Button 2</a>
<a class="uk-button uk-button-success uk-button-large" href="#">Success Button</a>
<a class="uk-button uk-button-danger uk-button-large" href="#">Danger Button</a>

Full width button

<button class="uk-button uk-button-large uk-width-1-1" type="button">Button</button>

Full width primary button

<button class="uk-button uk-button-primary uk-button-large uk-width-1-1" type="button">Button</button>

Home Page

1. Home Page Slider

Module: Unite Revolution Slider 2
Module Position: slide
Module Class Suffix: none
Show Title: Hide

2. Main Services

Module: RokSprocket > Strips Layout > Default theme
Previews Per Page: 3
Items Per Row: 3
Strip HTML Tags: No
Content: Simple
Module Position: top3
Module Class Suffix: title1
Show Title: Show

3. Construction Process

Module: Custom HTML
Module Position: top7
Module Class Suffix: title1
Show Title: Show

<div class="uk-grid uk-grid-divider-2">

  <div class="uk-width-medium-1-5" data-uk-scrollspy="{cls:'uk-animation-slide-bottom', delay:300}">
    <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b">
      <span class="hi-icon pe-7s-exapnd2"></span><h4>Pre-Construction</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>

  <div class="uk-width-medium-1-5" data-uk-scrollspy="{cls:'uk-animation-slide-bottom', delay:500}">
    <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b">
      <span class="hi-icon pe-7s-vector"></span><h4>Design-Build</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>

  <div class="uk-width-medium-1-5" data-uk-scrollspy="{cls:'uk-animation-slide-bottom', delay:700}">
    <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b">
      <span class="hi-icon pe-7s-note2"></span><h4>Plan/ Spec</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>

  <div class="uk-width-medium-1-5" data-uk-scrollspy="{cls:'uk-animation-slide-bottom', delay:900}">
    <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b">
      <span class="hi-icon pe-7s-calculator"></span><h4>Cost Estimating</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>

  <div class="uk-width-medium-1-5" data-uk-scrollspy="{cls:'uk-animation-slide-bottom', delay:1100}">
    <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b">
      <span class="hi-icon pe-7s-home"></span><h4>Project Building</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>

</div>

4. Renovation Masters

Module: Custom HTML
Module Position: top11
Module Class Suffix: title1
Show Title: Show

<div class="uk-position-relative uk-display-inline-block" data-uk-scrollspy="{cls:'uk-animation-slide-bottom', delay:600}">
  <img alt="Renovation Masters" src="/images/Demo/elements/interior.png" style="margin-bottom: -57px;">

  <div data-uk-dropdown="{mode:'click', pos:'bottom-left'}" class="uk-position-absolute uk-hidden-small uk-display-inline-block" aria-haspopup="true" aria-expanded="false" style="left:60%;top:30%; ">
    <button class="uk-button uk-button-primary"><i class="uk-icon-caret-down"></i></button>
    <div class="uk-dropdown" style="font-size: 14px;">
      <div class="uk-margin uk-text-left">
        <h4>Interior Door</h4>
        <ul class="spot">
          <li>Door Thickness: 4.5cm</li>
          <li>Core Type: Solid</li>
          <li>Color: White</li>
        </ul>      
      </div>
    </div>
  </div>

  <div data-uk-dropdown="{mode:'click', pos:'right-center'}" class="uk-position-absolute uk-hidden-small uk-display-inline-block" aria-haspopup="true" aria-expanded="false" style="left:25%;top:75%; ">
    <button class="uk-button uk-button-primary"><i class="uk-icon-caret-down"></i></button>
    <div class="uk-dropdown" style="font-size: 14px;">
      <div class="uk-margin uk-text-left">
        <h4>Laminated wooden flooring</h4>
        <ul class="spot">
          <li>Color: Amber Oak</li>
          <li>Thickness: 12mm </li>
        </ul>      
      </div>
    </div>
  </div>

  <div data-uk-dropdown="{mode:'click', pos:'left-center'}" class=" uk-position-absolute uk-hidden-small uk-display-inline-block" aria-haspopup="true" aria-expanded="false" style="left:80%;top:60%; ">
    <button class="uk-button uk-button-primary"><i class="uk-icon-caret-down"></i></button>
    <div class="uk-dropdown" style="font-size: 14px;">
      <div class="uk-margin uk-text-left">
        <h4>Custom Furniture design</h4>
        <ul class="spot">
          <li>TV Cabin: 1pcs</li>
          <li>Shelves: 12 pcs</li>
          <li>Wardrobe: 1 pcs</li>
        </ul>      
      </div>
    </div>
  </div>

</div>

<div class="uk-visible-small uk-margin-large-top">
  <div class="uk-margin uk-text-left">
    <h4>Interior Door</h4>
    <ul class="spot">
      <li>Door Thickness: 4.5cm</li>
      <li>Core Type: Solid</li>
      <li>Color: White</li>
    </ul>      
  </div>

  <div class="uk-margin uk-text-left">
    <h4>Laminated wooden flooring</h4>
    <ul class="spot">
      <li>Color: Amber Oak</li>
      <li>Thickness: 12mm </li>
    </ul>      
  </div>

  <div class="uk-margin uk-text-left">
    <h4>Custom Furniture design</h4>
    <ul class="spot">
      <li>TV Cabin: 1pcs</li>
      <li>Shelves: 12 pcs</li>
      <li>Wardrobe: 1 pcs</li>
    </ul>      
  </div>

</div>

5. Portfolio: Recent Projects

Module: RokSprocket > Mosaic Layout > Gallery theme
Strip HTML Tags: No
Content: Simple
Columns: 3
Blocks per view: 6
Module Position: user1
Module Class Suffix: title1
Show Title: Show

6. Limitless Ideas (parallax)

Module: Custom HTML
Module Position: top11
Module Class Suffix: none
Show Title: Hide

<div style="height: 100%; background-image: url(/images/Demo/elements/parallax1.jpg); background-color: #ffb400; background-repeat: repeat-y;"  data-uk-parallax="{bg: -300}" class="uk-flex uk-flex-center uk-flex-middle">
  <div style="padding: 70px;" class="uk-width-large-1-1 uk-width-medium-1-1 uk-container-center">

    <div class="uk-grid uk-flex-middle">

      <div class="uk-width-medium-1-2" data-uk-scrollspy="{cls:'uk-animation-slide-left', delay:300}">
        <img style="float: right;" src="/images/Demo/elements/bricks.png" alt="Limitless Ideas">
      </div>

      <div class="uk-width-medium-1-2" data-uk-scrollspy="{cls:'uk-animation-slide-right', delay:600}">
        <h4><strong class="uk-text-contrast">We have thousands ideas for your project</strong></h4>
        <h1 class="uk-hidden-small"style="font-size: 72px; margin-top: -10px;">Limitless</h1>
        <h1 class="uk-text-contrast big-shadow uk-hidden-small" style="font-size: 115px; margin-top: -30px;">IDEAS</h1>
        <h1 class="uk-visible-small"style="font-size: 52px; margin-top: -10px;">Limitless</h1>
        <h1 class="uk-text-contrast big-shadow uk-visible-small" style="font-size: 75px; margin-top: -30px;">IDEAS</h1>
        <a class="uk-button uk-button-success uk-button-small" href="/index.php/more/pages/get-a-quote">Get A Quote Now</a>
      </div>

    </div>

  </div>
</div>

7. ARTICLE: Our Builders

<div class="sp-module title1"><h3 class="sp-module-title">Our Builders</h3></div>

<div class="uk-grid">

  <div class="uk-width-medium-1-4">

    <div class="uk-overlay uk-align-center">
      <img class="uk-align-center" title="Our Team" src="/images/Demo/elements/team1.jpg" alt="Our Team" />
      <div class="uk-overlay-area">
        <div class="uk-overlay-area-content">
          <h4>Stephen Morph</h4>
          <p>Builder</p>
          <p>
            <a href="#" class="uk-icon-button uk-icon-linkedin"></a>
            <a href="#" class="uk-icon-button uk-icon-facebook"></a>
            <a href="#" class="uk-icon-button uk-icon-twitter"></a>
            <a href="#" class="uk-icon-button uk-icon-youtube"></a>
          </p>
        </div>
      </div>
    </div>

  </div>

  <div class="uk-width-medium-1-4">

    <div class="uk-overlay uk-align-center">
      <img class="uk-align-center" title="Our Team" src="/images/Demo/elements/team3.jpg" alt="Our Team" />
      <div class="uk-overlay-area">
        <div class="uk-overlay-area-content">
          <h4>Jonnah Harris</h4>
          <p>Builder</p>
          <p>
            <a href="#" class="uk-icon-button uk-icon-linkedin"></a>
            <a href="#" class="uk-icon-button uk-icon-facebook"></a>
            <a href="#" class="uk-icon-button uk-icon-twitter"></a>
            <a href="#" class="uk-icon-button uk-icon-youtube"></a>
          </p>
        </div>
      </div>
    </div>

  </div>

  <div class="uk-width-medium-1-4">

    <div class="uk-overlay uk-align-center">
      <img class="uk-align-center" title="Our Team" src="/images/Demo/elements/team4.jpg" alt="Our Team" />
      <div class="uk-overlay-area">
        <div class="uk-overlay-area-content">
          <h4>Miranda Peterson</h4>
          <p>Builder</p>
          <p>
            <a href="#" class="uk-icon-button uk-icon-linkedin"></a>
            <a href="#" class="uk-icon-button uk-icon-facebook"></a>
            <a href="#" class="uk-icon-button uk-icon-twitter"></a>
            <a href="#" class="uk-icon-button uk-icon-youtube"></a>
          </p>
        </div>
      </div>
    </div>

  </div>

  <div class="uk-width-medium-1-4">

    <div class="uk-overlay uk-align-center">
      <img class="uk-align-center" title="Our Team" src="/images/Demo/elements/team2.jpg" alt="Our Team" />
      <div class="uk-overlay-area">
        <div class="uk-overlay-area-content">
          <h4>Sebastian Gray</h4>
          <p>Builder</p>
          <p>
            <a href="#" class="uk-icon-button uk-icon-linkedin"></a>
            <a href="#" class="uk-icon-button uk-icon-facebook"></a>
            <a href="#" class="uk-icon-button uk-icon-twitter"></a>
            <a href="#" class="uk-icon-button uk-icon-youtube"></a>
          </p>
        </div>
      </div>
    </div>

  </div>

</div>

<div class="uk-grid">
  <div class="uk-width-medium-1-2">
    <p class="sp-dropcap">Hammer Construction LTD started in the late 90's. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum.</p>
  </div>
  <div class="uk-width-medium-1-2">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident
  </div>
</div>

8. Latest Construction News

Module: RokSprocket > Strips Layout > Separated theme
Previews Per Page: 3
Items Per Row: 3
Strip HTML Tags: No
Content: Simple
Module Position: position1
Module Class Suffix: title1
Show Title: Show

9. Some Of Our Best Clients

Module: Custom HTML
Module Position: position5
Module Class Suffix: title1
Show Title: Show

<br>
<div class="uk-grid" data-uk-scrollspy="{cls:'uk-animation-scale-up', delay:600}">

  <div class="uk-width-medium-1-5">
    <img class="uk-align-center" alt="Our Clients" src="/images/Demo/elements/logo1-2.png">
  </div>

  <div class="uk-width-medium-1-5">
    <img class="uk-align-center" alt="Our Clients" src="/images/Demo/elements/logo2-2.png">
  </div>

  <div class="uk-width-medium-1-5">
    <img class="uk-align-center" alt="Our Clients" src="/images/Demo/elements/logo3-2.png">
  </div>

  <div class="uk-width-medium-1-5">
    <img class="uk-align-center" alt="Our Clients" src="/images/Demo/elements/logo4-2.png">
  </div>

  <div class="uk-width-medium-1-5">
    <img class="uk-align-center" alt="Our Clients" src="/images/Demo/elements/logo5-2.png">
  </div>

</div>

10. What Our Customers Say

Title: Testimonials Parallax FULL
Module: Custom HTML
Module Position: parallax2
Module Class Suffix: none
Show Title: Hide

We have loaded a RokSprocket Quotes module in this module.

<div style="height: 100%; background-image: url(/images/Demo/elements/parallax2.jpg); background-color: #36383b; background-repeat: repeat-y;"  data-uk-parallax="{bg: -300}" class="uk-text-contrast uk-flex uk-flex-centrer">

  <div class="uk-width-large-1-2 uk-width-medium-1-1 uk-container-center" style="padding:50px;">

    <div class="sp-module title1"><h3 class="sp-module-title">What Our Customers Say</h3></div>
    [module-124]

  </div>

</div>

11. Get A Coupon

Module: Custom HTML
Module Position: bottom5
Module Class Suffix: none
Show Title: Hide

<div class="uk-block uk-block-primary uk-contrast" data-uk-scrollspy="{cls:'uk-animation-scale-down', delay:600}">
  <div class="uk-container">

    <div data-uk-grid-margin="" class="uk-grid uk-grid-match">

      <div class="uk-width-medium-1-2 uk-text-center uk-flex uk-flex-middle">
        <div class="uk-panel">
          <div>GET UP TO</div>
          <h1 class="big-shadow" style="font-size: 100px;">30% OFF </h1>
          <div>+ FREE ESTIMATE!</div>
        </div>
      </div>

      <div class="uk-width-medium-1-2 uk-flex uk-flex-middle">
        <div class="uk-panel">
          <img class="uk-align-center" alt="Get A Coupon" src="/images/Demo/elements/coupon.jpg">
        </div>
      </div>

    </div>
  </div>
</div>

About Page

1. Meet Our Team

Module: Custom HTML
Module Position: top3
Module Class Suffix: title3
Show Title: Show

<p><img width="1170" height="300" src="/images/Demo/elements/ourteam.jpg" alt="Meet Our Team"></p>
<br>
<div class="uk-grid uk-margin-bottom">

  <div class="uk-width-medium-1-2">
    <p class="sp-dropcap">Hammer Construction LTD started in the late 90's. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum.</p>
  </div>

  <div class="uk-width-medium-1-2">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident
  </div>

</div>

2. Why To Choose Us

Module: Custom HTML
Module Position: top7
Module Class Suffix: title3
Show Title: Show

<div class="uk-grid uk-text-center">

  <div class="uk-width-medium-1-3">
    <div class="uk-panel uk-panel-box uk-panel-box-secondary uk-panel-hover">
      <i class="pe-7s-portfolio pe-4x pe-va"></i>
      <h4>Professionals</h4>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
    </div>
  </div>

  <div class="uk-width-medium-1-3">
    <div class="uk-panel uk-panel-box uk-panel-box-secondary uk-panel-hover">
      <i class="pe-7s-vector pe-4x pe-va"></i>
      <h4>Design Skills</h4>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
    </div>
  </div>

  <div class="uk-width-medium-1-3">
    <div class="uk-panel uk-panel-box uk-panel-box-secondary uk-panel-hover">
      <i class="pe-7s-rocket pe-4x pe-va"></i>
      <h4>Fast Delivery</h4>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
    </div>
  </div>

</div>

<div class="uk-grid uk-text-center">

  <div class="uk-width-medium-1-3">
    <div class="uk-panel uk-panel-box uk-panel-box-secondary uk-panel-hover">
      <i class="pe-7s-magic-wand pe-4x pe-va"></i>
      <h4>Unique Ideas</h4>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
    </div>
  </div>

  <div class="uk-width-medium-1-3">
    <div class="uk-panel uk-panel-box uk-panel-box-secondary uk-panel-hover">
      <i class="pe-7s-tools pe-4x pe-va"></i>
      <h4>Quality Materials</h4>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
    </div>
  </div>

  <div class="uk-width-medium-1-3">
    <div class="uk-panel uk-panel-box uk-panel-box-secondary uk-panel-hover">
      <i class="pe-7s-ribbon pe-4x pe-va"></i>
      <h4>Warranty</h4>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
    </div>
  </div>

</div>

3. Our Latest Projects - it is an ARTICLE, named About Us

We have loaded a RokSprocket Strips Layout module in order to display the news in the right column.

<div class="sp-module title3"><h3 class="sp-module-title">Our Latest Projects</h3></div>

<div class="uk-grid">

  <div class="uk-width-medium-2-3">
    [module-113]
  </div>

  <div class="uk-width-medium-1-3">
    <img class="uk-align-center" alt="About Us" src="/images/Demo/elements/helmet.jpg">
  </div>

</div>

4. Testimonials

Module: RokSprocket > Quotes Layout
Content: Simple
Strip HTML Tags: No
Preview per page: 2
Items per row: 2
Tabs Position: position1
Module Position: top11
Module Class Suffix: title1
Show Title: Show

In the module we have loaded 2 articles. The code is same as for the Restaurant Home menu.

5. Our Clients

Module: Custom HTML
Module Position: bottom1
Module Class Suffix: title1
Show Title: Show

<div class="uk-grid">

  <div class="uk-width-medium-1-5">
    <img class="uk-align-center" alt="Our Clients" src="/images/Demo/elements/logo1.png">
  </div>

  <div class="uk-width-medium-1-5">
    <img class="uk-align-center" alt="Our Clients" src="/images/Demo/elements/logo2.png">
  </div>

  <div class="uk-width-medium-1-5">
    <img class="uk-align-center" alt="Our Clients" src="/images/Demo/elements/logo3.png">
  </div>

  <div class="uk-width-medium-1-5">
    <img class="uk-align-center" alt="Our Clients" src="/images/Demo/elements/logo4.png">
  </div>

  <div class="uk-width-medium-1-5">
    <img class="uk-align-center" alt="Our Clients" src="/images/Demo/elements/logo5.png">
  </div>

</div>

Services Page

1. Our Services

Module: Custom HTML
Module Position: top3
Module Class Suffix: none
Show Title: Hide

<div class="uk-grid uk-grid-divider">

  <div class="uk-width-medium-1-3">
    <h4><i class="pe-7s-airplay pe-2x pe-va"></i>   <strong>Roofing</strong></h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>

  <div class="uk-width-medium-1-3">
    <h4><i class="pe-7s-paint-bucket pe-2x pe-va"></i>   <strong>Plumbing</strong></h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>

  <div class="uk-width-medium-1-3">
    <h4><i class="pe-7s-tools pe-2x pe-va"></i>   <strong>Renovation</strong></h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>

</div>

<hr class="uk-grid-divider">

<div class="uk-grid uk-grid-divider">

  <div class="uk-width-medium-1-3">
    <h4><i class="pe-7s-sun pe-2x pe-va"></i>   <strong>Air Conditioning</strong></h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>

  <div class="uk-width-medium-1-3">
    <h4><i class="pe-7s-leaf pe-2x pe-va"></i>   <strong>Landscaping</strong></h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>

  <div class="uk-width-medium-1-3">
    <h4><i class="pe-7s-paint pe-2x pe-va"></i>   <strong>Painting</strong></h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>

</div>

2. Project Management

Module: Custom HTML
Module Position: top7
Module Class Suffix: title1
Show Title: Show

<div class="uk-grid">

  <div class="uk-width-medium-1-2">
    <div style="min-height: 480px; background-image: url(/images/Demo/elements/parallax1.png); background-color: transparent; background-repeat: no-repeat;" data-uk-parallax="{bg: -300}" class="uk-text-contrast uk-text-center uk-flex uk-flex-center uk-flex-middle">
      <img style="margin: 0 auto; display: block;" title="Project Management" src="/images/Demo/elements/truck.png" alt="Project Management">
    </div>
  </div>

  <div class="uk-width-medium-1-2">
    <h4><strong>01.</strong> Planing</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <a href="#" class="uk-button uk-button-primary uk-button-mini">Read more</a>
    <hr>
    <h4><strong>02.</strong> Coordination</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <a href="#" class="uk-button uk-button-primary uk-button-mini">Read more</a>
    <hr>
    <h4><strong>03.</strong> Project Control</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <a href="#" class="uk-button uk-button-primary uk-button-mini">Read more</a>
  </div>

</div>

3. Pricing - it is an ARTICLE, named Services

We have loaded a RokSprocket Tables Layout module in order to display the pricing tables.

<div class="sp-module title1"><h3 class="sp-module-title">Pricing</h3></div>
[module-93]

4. Special Offer

Module: Custom HTML
Module Position: position1
Module Class Suffix: title1
Show Title: Show

<div class="uk-grid">

  <div class="uk-width-medium-1-5">
    <img class="uk-align-center" alt="Our Clients" src="/images/Demo/elements/logo1.png">
  </div>

  <div class="uk-width-medium-1-5">
    <img class="uk-align-center" alt="Our Clients" src="/images/Demo/elements/logo2.png">
  </div>

  <div class="uk-width-medium-1-5">
    <img class="uk-align-center" alt="Our Clients" src="/images/Demo/elements/logo3.png">
  </div>

  <div class="uk-width-medium-1-5">
    <img class="uk-align-center" alt="Our Clients" src="/images/Demo/elements/logo4.png">
  </div>

  <div class="uk-width-medium-1-5">
    <img class="uk-align-center" alt="Our Clients" src="/images/Demo/elements/logo5.png">
  </div>

</div>

5. Call To Action | Inner Pages

Module: Custom HTML
Module Position: parallax2
Module Class Suffix: none
Show Title: Hide

<div style="min-height: 160px; background-color: #292c2f; background-repeat: no-repeat;" data-uk-parallax="{bg: -300}" class="uk-text-contrast uk-flex uk-flex-center">

  <div style="padding:60px 15px;" class="container1170">

    <div class="inverted">

    </div>

    <div class="uk-grid">
      <div class="uk-width-medium-3-4">
        <h3 style="margin-top:15px;">Do you want the best in the business to work for you?</h3>
      </div>
      <div class="uk-width-medium-1-4 uk-text-right inverted">
        <h3 style="margin-top:5px;"><a href="/index.php/more/pages/get-a-quote" class="uk-button">Get A Quote Now</a></h3>
      </div>
    </div>

  </div>

</div>

Projects Page

1. Luxury Residential Building

Module: Custom HTML
Module Position: top3
Module Class Suffix: title3
Show Title: Show

<div data-uk-grid-margin="" class="uk-grid">

  <div class="uk-width-medium-2-4">
    <a title="Luxury Residential Building" data-uk-lightbox="{group:'group1'}" href="/images/Demo/elements/villa1.jpg">
      <img width="1150" height="500" alt="Luxury Residential Building" src="/images/Demo/elements/villa1.jpg">
    </a>
  </div>

  <div class="uk-width-medium-1-4">
    <a title="Luxury Residential Building" data-uk-lightbox="{group:'group1'}" href="/images/Demo/elements/villa2.jpg">
      <img width="1150" height="500" alt="Luxury Residential Building" src="/images/Demo/elements/villa2.jpg">
    </a>
    <hr>
    <a title="Luxury Residential Building" data-uk-lightbox="{group:'group1'}" href="/images/Demo/elements/villa3.jpg">
      <img width="1150" height="500" alt="Luxury Residential Building" src="/images/Demo/elements/villa3.jpg">
    </a>
    <hr>
    <a title="Luxury Residential Building" data-uk-lightbox="{group:'group1'}" href="/images/Demo/elements/villa4.jpg">
      <img width="1150" height="500" alt="Luxury Residential Building" src="/images/Demo/elements/villa4.jpg">
    </a>
  </div>

  <div class="uk-width-medium-1-4">
    <strong>New building with unique location overlooking the iconic Golden Gate Bridge, San Francisco.</strong><hr>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
    <p>
      <a href="#" class="uk-icon-button uk-icon-facebook"></a>
      <a href="#" class="uk-icon-button uk-icon-twitter"></a>
      <a href="#" class="uk-icon-button uk-icon-youtube"></a>
      <a href="#" class="uk-icon-button uk-icon-linkedin"></a>
    </p>
  </div>

</div>
<br>

2. More Details

Module: Custom HTML
Module Position: top7
Module Class Suffix: title3
Show Title: Show

<div data-uk-scrollspy="{cls:'uk-animation-scale-up'}" class="uk-grid">

  <div class="uk-width-medium-1-2">
    <p><strong>How we did it :)</strong></p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p class="blockquote-pc">The road to success is always under construction.</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
  </div>

  <div class="uk-width-medium-1-2">
    <iframe src="https://player.vimeo.com/video/97714812?loop=1&color=ffb400" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  </div>

</div>

3. Check our recent projects - it is an ARTICLE, named Projects

We have loaded a RokSprocket Mosaic Layout module in order to display the portfolio.

<div class="sp-module title3"><h3 class="sp-module-title">Check our recent projects</h3></div>
<hr>
[module-121]

4. Call To Action | Inner Pages

Module: Custom HTML
Module Position: parallax2
Module Class Suffix: none
Show Title: Hide

<div style="min-height: 160px; background-color: #292c2f; background-repeat: no-repeat;" data-uk-parallax="{bg: -300}" class="uk-text-contrast uk-flex uk-flex-center">

  <div style="padding:60px 15px;" class="container1170">

    <div class="inverted">

    </div>

    <div class="uk-grid">
      <div class="uk-width-medium-3-4">
        <h3 style="margin-top:15px;">Do you want the best in the business to work for you?</h3>
      </div>
      <div class="uk-width-medium-1-4 uk-text-right inverted">
        <h3 style="margin-top:5px;"><a href="/index.php/more/pages/get-a-quote" class="uk-button">Get A Quote Now</a></h3>
      </div>
    </div>

  </div>

</div>

Footer Section

1. About us

Module: Custom HTML
Module Position: bottom9
Module Class Suffix: title3
Show Title: Show

<p><strong>Hammer Constructions LTD</strong> is a Dusseldorf based construction & renovation company with more than <strong>35 years experience</strong> in the field.</p>
<p><a class="uk-icon-button uk-icon-facebook" href="#"></a>
  <a class="uk-icon-button uk-icon-twitter" href="#"></a>
  <a class="uk-icon-button uk-icon-youtube" href="#"></a>
  <a class="uk-icon-button uk-icon-linkedin" href="#"></a>
</p>

2. Coupons & Promotions

Module: Custom HTML
Module Position: bottom10
Module Class Suffix: title3
Show Title: Show

<dl class="uk-description-list-line">
  <dt><a href="#"><strong>Roofing Coupons</strong></a> <span class="uk-badge uk-badge-percent uk-float-right" data-uk-tooltip="" title="Only 5 left!">5</span></dt>
  <dd>Some types of roofing, for example thatch, require a steep pitch in order to be waterproof and durable.</dd>
  <dt><a href="#"><strong>Air Conditioning</strong></a> <span class="uk-badge uk-badge-percent uk-float-right" data-uk-tooltip="" title="Only 9 left!">9</span></dt>
  <dd>Air conditioning is the process of altering the properties of air to more comfortable conditions.</dd>
  <dt><a href="#"><strong>Electrical & Lightning</strong></a> <span class="uk-badge uk-badge-percent uk-float-right" data-uk-tooltip="" title="Hurry! Only 2 left!">2</span></dt>
  <dd>Find the best lightning construction & maintenance services in Dusseldorf.</dd>
</dl>

3. Contacts

Module: Custom HTML
Module Position: bottom11
Module Class Suffix: title3
Show Title: Show

<p><i class="uk-icon-envelope"></i>  Email us at: office (@) yoursite.com</p>
<p><i class="uk-icon-phone"></i>  <strong style="font-size: 20px;">+555.123.123</strong></p>
<p><i class="uk-icon-print"></i>  <strong style="font-size: 20px;">+555.123.4568</strong></p>
<p><i class="uk-icon-building-o"></i>   2nd Ave and Jermaine</p></div>

In the demo you can see above the footer a gray image of a crane. This is the background of a module position called foottop. In the demo there is a published module in this same position without any content in it. If you have installed the template only, you can just create a Custom HTML module in the "foottop" module position and you will have the same image.

To change the image add in your custom.css file the following:

#sp-footer-top {
  background-image: url("../images/your_image.jpg") !important;
}

And your image in the template's images folder. The default image dimensions are 1920px width and 410px height.

Extensions

The Web is full of all kinds of different Joomla extensions. Throughout the years we had the chance to work with many extensions from many different providers which helped us to filter the best of best ones. The extensions that we use in our templates have the cleanest code, the best functionality and they've been very well supported by their developers.

Almost all of the extensions that we use are FREE! If there is a premium (paid) extensions, we usually try to include a FREE alternative for it.

Below you will find the Download link and the Documentation for each extension (Component, Module, Plugin) that we have used in this template.

RokSprocket - Download | Documentation
Revolution Slider - Purchase | Documentation
ChronoForms - Download | Documentation
BT Google Maps - Download | Documentation

Documentation

Hammer Documentation

Installation

Requirements

Quickstart Installation

Manual Installation

Customization

Customizations from the template settings page

Adding New Module Position

Layout Builder

Update

Module Variations

Text Editor (IMPORTANT)

Thin Stroke Icons 7

Font Awesome Icons

Buttons

Home Page

About Page

Services Page

Projects Page

Footer Section

Extensions

About Us

Terms of Use

Useful Links

25% Easter Discount On All Our Plans

InspireTheme Turns Eight :)

All Templates Updated (Joomla 5...

25% Autumn Discount On All Our Plans

25% Summer Discount On All Our Plans

Joomla 4 Quickstart Packages Released

InspireTheme Turns Seven :)

All Templates Updated

InspireTheme Turns Six :)