The Hills

Marketing Joomla Template


The Hills - Marketing Joomla Template

Quickstart package for Joomla 3.x +  Template Only

Author: PixelHut

Thank you for choosing our theme! We hope The Hills will suit your needs in developing your site. With The Hills - Marketing Joomla Template you can build your corporate, business, creative and even freelancer Joomla website. This template is orientated to every company, involved in marketing, advertising sector and promotion services, but you cat use it basically for every business/corporate website, because you have everything that you ever need in it. You can develop and boost your business. We hope to use our Joomla Template for your brand new site or to redesign your existing one.

Enjoy The Hills design, features and ideas!

You can choose to install the template with its full demo package - the Quickstart package, or only the template itself. Note that we Highly Recommend the Full Demo Quickstart installation, rather than only the template itself.

1. How to install the Quickstart Demo package:

To make it easier and more clear for you we made a short video on how to install the quickstart for our Joomla templates.


2. Template Only installation:

 

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 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 TEMPLATE-NAME - Default). You will find 9 tabs as follows:

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

1. Basic Tab:

Header:

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

Logo:

Body Background Image:

Footer:

Social Icons:

Contact Information:

Coming Soon:

Error Page:

2. Presets:

By default you have 4 preset styles with color schemes included.

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 module 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. Per 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:

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:

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

8. Blog:

9. Assignment: 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:

Site admin > Extensions > Template Manager -> click on The Hills.

In the Basic Tabs:

Header
Sticky Header: Yes

Favicon
Select your favicon and save it.

Boxed Layout
Enable No, but if you want to use the boxed version, you can just switch to Yes.

Logo
Everything is explained in Changing the Logo section in the documentation.
 

To use the presets and change colors go to:

Module Positions:

To add or rearrange modules you need to go to:

Site admin > Extensions > Template manager;
click on The Hills template;
click on the Layout tab;
You can drag and drop the modules or content or create new positions/ rows.

Module variations:

The Hills template comes with 9 different module title variations (Module Class Suffix):
default (leave the module class suffix empty), title1, title2, title3, title4, title5, title6, title7, title8, title9
 

Layout Builder:

You can open the layout builder from Joomla admin > Extensions > Template manager > The Hills > 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:

1. Open templates/the_hills/templateDetails.xml and locate the following lines:

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


2. Copy one line - per example <position>title</position> 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

3. Open the Layout tab in the template settings > choose wherever 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.

4. Go to templates/the_hills/less/theme.less and add the new css style for the new position. The class of the new position should be:

#sp-newposition


5. Finally create a module and publish it in the new position.

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.

1. 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 a module and this module is "Social Icons". When you open it with TinyMCE you won't see any code and you might think that the icons are there - if you save the 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. Thus you will not lose any code neither from article or module.

2. 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.

Place vector icons anywhere using an icon font. You can use the original Font Awesome code or uk-icon-* code from UI Kit component.

UI Kit component integrated in our template  is using the fantastic Font Awesome icon font, a project by Dave Gandy. Altogether Font Awesome provides more than 600 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.

This is an icon

<i class="uk-icon-cog"></i>

This is an icon in a link

<a href=""><i class="uk-icon-cog"></i> ...</a>

More about Font Awesome icons you can find here: http://getuikit.com/docs/icon.html

You can place Font Awesome icons just about anywhere using the CSS Prefix fa and the icon's name.

<i class="fa fa-camera-retro"></i> fa-camera-retro


Example usage of font awesome icons as a social icons
<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-google-plus" href="#"></a>
<a class="uk-icon-button uk-icon-youtube" href="#"></a>
<a class="uk-icon-button uk-icon-linkedin" href="#"></a>
<a class="uk-icon-button uk-icon-instagram" href="#"></a>
<a class="uk-icon-button uk-icon-pinterest" href="#"></a>
<a class="uk-icon-button uk-icon-flickr" href="#"></a>
<a class="uk-icon-button uk-icon-tumblr" href="#"></a>
<a class="uk-icon-button uk-icon-dribbble" href="#"></a>

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-success" href="#">Success Button</a>
<a class="uk-button uk-button-warning" href="#">Warning 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-success uk-button-mini" href="#">Success Button</a>
<a class="uk-button uk-button-warning uk-button-mini" href="#">Warning 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-success uk-button-large" href="#">Success Button</a>
<a class="uk-button uk-button-warning uk-button-large" href="#">Warning Button</a>
<a class="uk-button uk-button-danger uk-button-large" href="#">Danger Button</a>


Buttons Groups wtih default size buttons:


<div class="uk-margin">
<div class="uk-button-group"><a href="#" class="uk-button">Link</a> <a href="#" type="submit" class="uk-button">Button</a> <a href="#" type="submit" class="uk-button">Button</a></div>
</div>

<div class="uk-margin">
<div class="uk-button-group"><a href="#" class="uk-button uk-button-primary">Link</a> <a href="#" type="submit" class="uk-button uk-button-primary">Button</a> <a href="#" type="submit" class="uk-button uk-button-primary">Button</a></div>
</div>

<div class="uk-margin">
<div class="uk-button-group"><a href="#" class="uk-button uk-button-success">Link</a> <a href="#" type="submit" class="uk-button uk-button-success">Button</a> <a href="#" type="submit" class="uk-button uk-button-success">Button</a></div>
</div>

<div class="uk-margin">
<div class="uk-button-group"><a href="#" class="uk-button uk-button-danger">Link</a> <a href="#" type="submit" class="uk-button uk-button-danger">Button</a> <a href="#" type="submit" class="uk-button uk-button-danger">Button</a></div>
</div>


Buttons Groups wtih large size buttons:

<div class="uk-margin">
<div class="uk-button-group"><a href="#" class="uk-button uk-button-large">Link</a> <a href="#" type="submit" class="uk-button uk-button-large">Button</a> <a href="#" type="submit" class="uk-button uk-button-large">Button</a></div>
</div>

<div class="uk-margin">
<div class="uk-button-group"><a href="#" class="uk-button uk-button-primary uk-button-large">Link</a> <a href="#" type="submit" class="uk-button uk-button-primary uk-button-large">Button</a> <a href="#" type="submit" class="uk-button uk-button-primary uk-button-large">Button</a></div>
</div>


Full width button:

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


Full width primary button:

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



Badges:

<p><span class="uk-badge uk-badge-primary">Primary</span> <span class="uk-badge uk-badge-success">Success</span> <span class="uk-badge uk-badge-warning">Warning</span> <span class="uk-badge uk-badge-danger">Danger</span> <span class="uk-badge uk-badge-percent">Percent</span> <span class="uk-badge uk-badge-notification uk-badge-primary">1</span> <span class="uk-badge uk-badge-notification uk-badge-success">2</span> <span class="uk-badge uk-badge-notification uk-badge-warning">3</span> <span class="uk-badge uk-badge-notification uk-badge-danger">4</span> <span class="uk-badge uk-badge-notification uk-badge-percent">5</span></p>

Alert Messages:


<div class="uk-alert uk-alert-success" data-uk-alert=""><a class="uk-alert-close uk-close"></a>
<p>To indicate success or a positive message add the <code>.uk-alert-success</code> class.</p>
</div>

<div class="uk-alert uk-alert-warning" data-uk-alert=""><a class="uk-alert-close uk-close"></a>
<p>To indicate a message containing a warning add the <code>.uk-alert-warning</code> class.</p>
</div>

<div class="uk-alert uk-alert-danger" data-uk-alert=""><a class="uk-alert-close uk-close"></a>
<p>To indicate an important message add the <code>.uk-alert-danger</code> class.</p>
</div>

<div data-uk-alert="" class="uk-alert uk-alert-large uk-alert-danger"><a class="uk-alert-close uk-close"></a>
<h3>Title Large Alert</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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>
</div>

Progress Bars:

<div class="uk-progress">
<div class="uk-progress-bar" style="width: 90%;">&nbsp;</div>
</div>
<div class="uk-progress uk-progress-small">
<div class="uk-progress-bar" style="width: 55%;">&nbsp;</div>
</div>
<div class="uk-progress uk-progress-mini">
<div class="uk-progress-bar" style="width: 43%;">&nbsp;</div>
</div>
<div class="uk-progress uk-progress-mini uk-progress-warning">
<div class="uk-progress-bar" style="width: 75%;">&nbsp;</div>
</div>
<div class="uk-progress uk-progress-mini uk-progress-danger">
<div class="uk-progress-bar" style="width: 65%;">&nbsp;</div>
</div>
<div class="uk-progress uk-progress-mini uk-progress-success">
<div class="uk-progress-bar" style="width: 55%;">&nbsp;</div>
</div>


Modal Dialogs:

<p><button class="uk-button" data-uk-modal="{target:'#modal'}">Click Me</button>
<a href="#modal2" data-uk-modal="{center:true}">Click Me</a>
</p>
<div id="modal" class="uk-modal">
<div class="uk-modal-dialog"><a class="uk-modal-close uk-close"></a>
<h1>Headline</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div></div>
<div id="modal2" class="uk-modal">
<div class="uk-modal-dialog uk-modal-dialog-large"><a class="uk-modal-close uk-close"></a>
<h1>Headline</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div></div>


Off-canvas Sidebars:

<p><button class="uk-button" data-uk-offcanvas="{target:'#offcanvas-1'}">Click Me</button> <a href="#offcanvas-1" data-uk-offcanvas="">Click Me</a></p>
<div id="offcanvas-1" class="uk-offcanvas">
<div class="uk-offcanvas-bar">
<div class="uk-panel">Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipisicing 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.</div>
<div class="uk-panel">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.</div>
</div>
</div>


Tooltips:

<p><button class="uk-button" data-uk-tooltip="" title="Hello!">Hover me</button>
<button class="uk-button" data-uk-tooltip="{pos:'bottom'}" title="Hello!">Hover me</button>
<button class="uk-button" data-uk-tooltip="{pos:'bottom-left'}" title="Hello!">Hover me</button>
<button class="uk-button" data-uk-tooltip="{pos:'bottom-right'}" title="Hello!">Hover me</button>
<button class="uk-button" data-uk-tooltip="{pos:'top'}" title="Hello!">Hover me</button>
<button class="uk-button" data-uk-tooltip="{pos:'top-left'}" title="Hello!">Hover me</button>
<button class="uk-button" data-uk-tooltip="{pos:'top-right'}" title="Hello!">Hover me</button>
<button class="uk-button" data-uk-tooltip="{pos:'left'}" title="Hello!">Hover me</button>
<button class="uk-button" data-uk-tooltip="{pos:'right'}" title="Hello!">Hover me</button>
<span data-uk-tooltip="" title="Hello!">Hover me</span></p>

 

Scrollspy animations - Triggers events and animations while scrolling your page.

<div class="uk-grid">
<div class="uk-width-medium-1-4">
<div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-fade', repeat: true}">
<h3>Fade</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>

<div class="uk-grid">
<div class="uk-width-medium-1-4 uk-push-1-4">
<div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-scale-up', repeat: true}">
<h3>Scale up</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>

<div class="uk-grid">
<div class="uk-width-medium-1-4 uk-push-2-4">
<div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-scale-down', repeat: true}">
<h3>Scale down</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>

<div class="uk-grid">
<div class="uk-width-medium-1-4 uk-push-3-4">
<div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-slide-top', repeat: true}">
<h3>Slide top</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>

<div class="uk-grid">
<div class="uk-width-medium-1-4 uk-push-2-4">
<div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-slide-bottom', repeat: true}">
<h3>Slide bottom</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>

<div class="uk-grid">
<div class="uk-width-medium-1-4 uk-push-1-4">
<div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-slide-right', repeat: true}">
<h3>Slide right</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>

<div class="uk-grid">
<div class="uk-width-medium-1-4">
<div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-slide-left', repeat: true}">
<h3>Slide left</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>

<div class="uk-grid">
<div class="uk-width-medium-1-4">
<div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-fade', repeat: true}">
<h3 class="uk-panel-title">Delay</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="uk-width-medium-1-4">
<div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-fade', delay:300, repeat: true}">
<h3 class="uk-panel-title">Delay</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="uk-width-medium-1-4">
<div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-fade', delay:600, repeat: true}">
<h3 class="uk-panel-title">Delay</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="uk-width-medium-1-4">
<div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-fade', delay:900, repeat: true}">
<h3 class="uk-panel-title">Delay</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>


Parallax usage:

You can use UI Kit Parallax code to make beautiful parallax sections. UI Kit provides a number of options that you can add to the data-uk-parallax attribute. Here are some options for the parallax component:

You can see many other variation of usage here: http://getuikit.com/docs/parallax.html

SP Page Builder Pro version is built-in in QuickStart only. We have used this drag and drop Joomla page builder to develop our pages. This way we make it possible for you to create your site without coding. It includes more than 40 addons, uses Joomla Modules as addon (so you can place your modules as a part of the page trought the page builder). You can use it as Module on desired menu and as a Page, directly built with SP Page Builder. Another amazing thing about the builder is that you have both Backend and Frontend Editor. In the brief video below you can see how you can work with SP Page Builder Pro.

Stock and Free Images used in the demo site and NOT included in the download package: