The Easter Sale is on! Join now or renew your subscription with a 25% OFF! Read More

Documentation

Monday Documentation

Details
Documentation (Joomla)
5848

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:

  1. Ensure you have installed an FTP client and prepared a database for your server, or have the credentials for an existing database.
  2. Download and extract the Quickstart Package.
  3. FTP the extracted Quickstart contents to your preferred install location.
  4. 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:

  1. Download the template-only file, which will be called tpl_it_TEMPLATE-NAME.zip.
  2. Go to Joomla administration > Extensions > Manage > click on the Browse button > locate the template file > install the template.
  3. 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:

  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:

  • 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 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. 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_monday > 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 root/templates/it_monday/templateDetails.xml and locate the following lines:

    2. <positions>
  <position>title</position>
  <position>logo</position>
  2. 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"):

    3. <positions>
  <position>title</position>
  <position>newposition</position>
  <position>logo</position>
  3. Save and close the file
  4. 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.
  5. Go to root/templates/it_monday/less/theme.less and add the new css style for the new position. The class of the new position should be:

    6. #sp-newposition
  6. 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:

  1. Download the new version of the template from the "Download" section on our website
  2. Go to "Extensions" -> "Manage" and click on the "Browse" button
  3. Select the template file you downloaded in step 1. It will usually be called tpl_it_TEMPLATE_NAME.zip
  4. 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.

How to make my site look like the Demo

There are two ways to make your own site to look exactly like our Demo product:

  • First is to install the quickstart package and to change our texts and images.
  • Second, if you have a site with your own content, that already exists, you have to install only the template. Here in the documentation we have explain almost every detail from the demo, but here is our advice too:
Our Advice: It will be best if you install the whole quickstart somewhere as well, so you can check how the whole demo is build.

Module Variations

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

  1. title1
  2. title2
  3. title3
  4. title4
  5. title5
  6. title6

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.

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

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

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

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

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.

Thin Stroke Icons 7

Thin Stroke Icons 7 set by Pixeden are integrated in Calimera 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>

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

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>

Parallax Backgrounds

Monday comes with 3 preset parallax backgrounds defined with 3 classes:

.parallax1
.parallax2
.parallax3

You can change the parallax backgrounds by doing the following:

  1. Go to ROOT/templates/it_monday/css/
  2. Create a custom.css file (if you don't have one already)
  3. Overwrite the parallax class you want to change by adding the following (in our case .parallax1): 

    .parallax1 {
  background-image: url(../../../images/Demo/elements/parallax-1.jpg);
}

  4. Change the path of your image or just the name of the image
  5. Save and test

If you want to add new parallax background to use in your modules you can again add your custom class in the custom.css file like this:

.parallax-new {
  height: 100%;
  min-height: 300px;
  background-image: url(../../../images/Demo/elements/parallax-1.jpg);
  background-repeat: no-repeat;
}

You can change the image path and the class name depending to your needs.

Magnifying Glass

Monday offers a nice zoom effect for your images. You can use multiple images with magnifying glass effect in one page.

Just make a big image and add class "magniflier" to it and adjust its width and height in the image tag. Here is an example from our Salon Benefits module:

<img class="magniflier" src="/images/Demo/elements/face.jpg" width="600" alt="Salon Benefits"/>

Home Page

1. Home Page Slider

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

2. Services

Module: RokSprocket > Strips Layout > Default theme
Content: Joomla
Display Limit: ∞ articles
Preview Length: 20 words
Previews Per Page: 6
Items Per Row: 3
Strip HTML Tags: Yes
Arrow Navigation: Show
Pagination: Show
Article Details: Hide author and date
Article Details: Show only date
Animation: Fade Delayed
Autoplay: Disable
Module Position: top3
Module Class Suffix: title1
Show Title: Show

3. The Red Hair Madness

Module: Custom HTML
Module Position: top7
Module Class Suffix: title1
Show Title: Show
<div class="uk-text-center" id="hair-velocity">
  <p>These days every girl wants to color her hair in red. <br>Remember this: red hair do not match every skin color and eyes, <br>so ask your stylist first, before reaching for the hair dye.</p>

  <div data-uk-parallax="{target:'#hair-velocity', y: '73', velocity: '3.4', viewport: '0.7'}">
    <div class="uk-button-group">

      <a class="uk-button uk-button-primary" data-uk-modal="{target:'#call-us'}">Call the Stylist</a>

      <a class="uk-button uk-button-primary" data-uk-modal="{target:'#video'}">Video Presentation</a>

    </div>
  </div>

</div>

<div class="uk-modal" id="call-us" aria-hidden="true" style="display: none; overflow-y: scroll;">
  <div class="uk-modal-dialog">
    <a class="uk-modal-close uk-close" href="/"></a>
    <img alt="Call the Stylist" src="/images/Demo/elements/call-us.jpg">
  </div>
</div>

<div class="uk-modal" id="video" aria-hidden="true" style="display: none; overflow-y: scroll;">
  <div class="uk-modal-dialog">
    <a class="uk-modal-close uk-close" href="/"></a>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/sXDa8Qm7mVA" allowfullscreen></iframe>
  </div>
</div>

4. Salon Benefits

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

* This module is built with another module called "Benefits List", which is RokSprocket module > Lists Layout > Default theme with 4 items in it). The RokSprocket module is loaded in the first column using [module-104].

Module Position: none (you do not need to choose a module position)
Show Title: Show
<div class="uk-grid">

  <div class="uk-width-medium-1-2">
    [module-104]
  </div>

  <div class="uk-width-medium-1-2">
    <img class="magniflier" src="/images/Demo/elements/face.jpg" width="600" alt="Salon Benefits"/>
  </div>

</div>

5. Monday Products

Module: RokSprocket > Strips Layout > Parallel theme
Content: Simple
Display Limit: ∞ articles
Preview Length: ∞ words
Previews Per Page: 3
Items Per Row: 3
Strip HTML Tags: No
Arrow Navigation: Show
Pagination: Show
Article Details: Hide author and date
Article Details: Show only date
Animation: Fade Delayed
Autoplay: Disable
Module Position: user1
Module Class Suffix: title1
Show Title: Show

6. Selfie Contest

Module: Custom HTML
Module Position: parallax1
Module Class Suffix: none
Show Title: Hide
<div data-uk-parallax="{bg: -300}" class="parallax1 uk-text-white">

  <div class="container padding50 inverted">
    <div class="sp-module title1"><h3 class="sp-module-title">Selfie Contest</h3></div>

    <div class="uk-grid">

      <div class="uk-width-large-2-3 uk-text-center" data-uk-scrollspy="{cls:'uk-animation-slide-left'}">
        <img class="uk-container-center" src="/images/Demo/elements/queen.png" alt="Selfie Contest">
      </div>

      <div class="uk-width-large-1-3 uk-panel uk-panel-box uk-panel-box-secondary" data-uk-scrollspy="{cls:'uk-animation-slide-right'}">
        <h4 class="padding-t50">How to participate?</h4>
        <p>We are offering you the chance to win a free haircut, massage or professional makeup.</p><br>
        <h4>Selfie Contest Rules:</h4>
        <p><span class="uk-icon-circle-o-notch uk-icon-spin"></span> Take a SELFIE wherever you like: in the bathroom, outdoor, with your friends and family or with your pet - it's up to you!</p>
        <p><span class="uk-icon-circle-o-notch uk-icon-spin"></span> Upload your photo to our Facebook page.</p>
        <p><span class="uk-icon-circle-o-notch uk-icon-spin"></span> On 1st of May the first 3 selfies with most Likes will win our 3 special prices and we will announce their names on our Facebook, Twitter and here on the site.</p>
        <p><a class="uk-button uk-button-primary uk-button-small uk-margin-top" href="#">I'm ready! Take me to FB</a></p>
      </div>

    </div>
  </div>

</div>

7. Your Beauty Experts

The code is placed in an ARTICLE, called "Home".

<div class="sp-module title1"><h3 class="sp-module-title">Your Beauty Experts</h3></div>
<div class="uk-grid uk-text-center">
  <div class="uk-width-large-1-3 margin-b25">
    <div class="uk-position-relative uk-display-inline-block">
      <img class="uk-container-center" alt="Beauty Experts" src="/images/Demo/elements/expert1.jpg">
      <div data-uk-dropdown="{mode:'click', pos:'top-center'}" class="uk-position-absolute uk-display-inline-block" role="button" aria-haspopup="true" aria-expanded="false" style="left:40%;top:95%; ">
        <button class="uk-button uk-button-primary uk-button-mini"><i class="uk-icon-plus"></i></button>
        <div class="uk-dropdown" style="font-size: 14px;">
          <div class="uk-margin uk-text-center">
            <h4>Honey Madness</h4>
            <p>Top Coiffeur</p>
            <a href="#" class="uk-icon-button uk-icon-facebook"></a>
            <a href="#" class="uk-icon-button uk-icon-twitter"></a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="uk-width-large-1-3 margin-b25">
    <div class="uk-position-relative uk-display-inline-block">
      <img class="uk-container-center" alt="Beauty Experts" src="/images/Demo/elements/expert2.jpg">
      <div data-uk-dropdown="{mode:'click', pos:'top-center'}" class="uk-position-absolute uk-display-inline-block" role="button" aria-haspopup="true" aria-expanded="false" style="left:40%;top:95%; ">
        <button class="uk-button uk-button-primary uk-button-mini"><i class="uk-icon-plus"></i></button>
        <div class="uk-dropdown" style="font-size: 14px;">
          <div class="uk-margin uk-text-center">
            <h4>Stephon Armadillo</h4>
            <p>Stylist</p>
            <a href="#" class="uk-icon-button uk-icon-facebook"></a>
            <a href="#" class="uk-icon-button uk-icon-twitter"></a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="uk-width-large-1-3 uk-display-inline-block">
    <div class="uk-position-relative uk-display-inline-block">
      <img class="uk-container-center" alt="Beauty Experts" src="/images/Demo/elements/expert3.jpg">
      <div data-uk-dropdown="{mode:'click', pos:'top-center'}" class="uk-position-absolute uk-display-inline-block" role="button" aria-haspopup="true" aria-expanded="false" style="left:40%;top:95%; ">
        <button class="uk-button uk-button-primary uk-button-mini"><i class="uk-icon-plus"></i></button>
        <div class="uk-dropdown" style="font-size: 14px;">
          <div class="uk-margin uk-text-center">
            <h4>Suzane Bentley</h4>
            <p>MakeUp Artist</p>
            <a href="#" class="uk-icon-button uk-icon-facebook"></a>
            <a href="#" class="uk-icon-button uk-icon-twitter"></a>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

8. Pricing

Module: RokSprocket > Tabs Layout
Content: Joomla! Provider
Tabs Position: Top
Animation: Slide and Fade
Strip HTML Tags: No
Autoplay: DisableModule Position: position1
Module Class Suffix: title1
Show Title: Show

In this module are selected two article, called "Ladies Hair" and "Gents Hair". Example code of an article loaded in the tabs module:

<div class="uk-grid">

  <div class="uk-width-medium-1-2">
    <div class="uk-panel">
      <div class="uk-panel-badge uk-badge uk-badge-percent">$65</div>
      <h3 class="uk-panel-title">Women’s Cut & Blow-Dry</h3>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>

    <div class="uk-panel">
      <div class="uk-panel-badge uk-badge uk-badge-percent">$25</div>
      <h3 class="uk-panel-title">Blow Dry</h3>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>

  </div>

  <div class="uk-width-medium-1-2">
    <div class="uk-panel">
      <div class="uk-panel-badge uk-badge uk-badge-percent">$125</div>
      <h3 class="uk-panel-title">Colouring</h3>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>

    <div class="uk-panel">
      <div class="uk-panel-badge uk-badge uk-badge-percent">$145</div>
      <h3 class="uk-panel-title">Ombré</h3>
      Includes Blow-Dry and Cut. Fire Ombre, Contrasting Ombre,Honey Clouds. Eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>

  </div>

</div>

9. Spray Tan

Module: Custom HTML
Module Position: position5
Module Class Suffix: title1
Show Title: Show
<div class="uk-text-center" data-uk-scrollspy="{cls:'uk-animation-scale-up', delay:300}">
  <img alt="Spray Tan" src="/images/Demo/elements/tan.jpg" class="uk-container-center">
  <p class="padding50">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, <br>adipisci velit, sed quia non numquam eius modi tempora incidunt<br> ut labore et dolore magnam aliquam quaerat voluptatem.</p>
  <p><a class="uk-button uk-button-danger" href="#">Make An Appointment</a></p>
</div>

10. MakeUp Trends (this module is built with 2 modules)

Module: Custom HTML
Module Position: parallax2
Module Class Suffix: padding-t50 uk-text-center
Show Title: Hide
<div class="sp-module title1"><h3 class="sp-module-title">MakeUp Trends</h3></div>
<p>Our experts advices on all makeup trends</p>
Module: RokSprocket > Sliders Layout > Default theme
Content: Joomla
Panel Height: Fixed
Fixed Height Value: 100px
Overlay: Show
Article Titles: Show
Article Text: Show
Preview Lenght: 70 words
Strip HTML Tags: Yes
Arrow Navigation: Show
Article Details: Show Date
Autoplay: Disable
Module Position: parallax2
Module Class Suffix: uk-margin-remove padding-b50
Show Title: Hide

11. Book A Service

Module: ChronoForms
Module Position: bottom1
Module Class Suffix: title1
Show Title: Show

First you need to create a form from Joomla Admin > Components > ChronoForms. Then you can load the form with the module. By using the quickstart you'll get the form predefined for you.

12. Awards

Module: RokSprocket > Strips Layout > Separated theme
Content: Simple
Display Limit: ∞ articles
Preview Length: 20 words
Previews Per Page: 4
Items Per Row: 4
Strip HTML Tags: Yes
Arrow Navigation: Hide
Pagination: Hide
Article Details: Hide author and date
Animation: Fade Delayed
Autoplay: Enabled
Module Position: bottom5
Module Class Suffix: title1
Show Title: Show

Only an image is selected for every item.

About Page

1. About Us Parallax

Module: Custom HTML
Module Position: parallax1
Module Class Suffix: none
Show Title: Hide
<div data-uk-parallax="{bg: -100}" class="parallax2  uk-text-contrast uk-text-center uk-flex uk-flex-center uk-flex-middle padding50">
  <div>
    <h1 class="work120w">Hello!</h1>
    <p class="uk-text-large">We are Monday:
      <br>The Beauty Salon where every girl and boy from 0 to 120 years <br> is going to become more gorgeous.
    </p>
  </div>
</div>

2. Numbers/ Statistic

The code is placed in an ARTICLE, called "About us".

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

  <div class="uk-width-medium-1-4">
    <h3><span class="pe-7s-angle-right-circle uk-text-primary"></span> 2453</h3>
    <h5>Happy Ladies</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
  </div>

  <div class="uk-width-medium-1-4">
    <h3><span class="pe-7s-angle-right-circle uk-text-primary"></span> 524m.</h3>
    <h5>Hair Done</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
  </div>

  <div class="uk-width-medium-1-4">
    <h3><span class="pe-7s-angle-right-circle uk-text-primary"></span> 8963m.</h3>
    <h5>Smooth Legs</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
  </div>

  <div class="uk-width-medium-1-4">
    <h3><span class="pe-7s-angle-right-circle uk-text-primary"></span> 896</h3>
    <h5>Beards Trim</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
  </div>

</div>

3. Stay Flawless

Module: Custom HTML
Module Position: position2
Module Class Suffix: none
Show Title: Hide
<div class="uk-grid uk-flex-middle">
  <div class="uk-width-medium-2-3 uk-flex-middle">
    <img alt="Stay Flawless" src="/images/Demo/elements/honey.jpg">
  </div>
  <div class="uk-width-medium-1-3 uk-flex-middle">
    <h3>STAY</h3>
    <h3 class="uk-margin-large-bottom">FLAWLESS.</h3>
    <h5>With care and respect of traditions for treate your hair, skin and nails.</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et</p>
    <p class="work60 uk-text-primary padding-t50">Honey Madness</p>
  </div>
</div>

4. Showcase

Module: Custom HTML
Module Position: position5
Module Class Suffix: title3
Show Title: Show
<div data-uk-grid-margin="" class="uk-grid uk-grid-width-medium-1-2 uk-grid-collapse uk-margin-large-top">

  <a title="Gallery Example" data-uk-lightbox="{group:'group1'}" href="/images/Demo/elements/salon1.jpg">
    <img class="uk-thumbnail" width="600" height="400" alt="Gallery Example" src="/images/Demo/elements/salon1.jpg">
  </a>

  <a title="Gallery Example" data-uk-lightbox="{group:'group1'}" href="/images/Demo/elements/salon2.jpg">
    <img class="uk-thumbnail" width="600" height="400" alt="Gallery Example" src="/images/Demo/elements/salon2.jpg">
  </a>

  <a title="Gallery Example" data-uk-lightbox="{group:'group1'}" href="/images/Demo/elements/salon3.jpg">
    <img class="uk-thumbnail" width="600" height="400" alt="Gallery Example" src="/images/Demo/elements/salon3.jpg">
  </a>

  <a title="Gallery Example" data-uk-lightbox="{group:'group1'}" href="/images/Demo/elements/salon4.jpg">
    <img class="uk-thumbnail" width="600" height="400" alt="Gallery Example" src="/images/Demo/elements/salon4.jpg">
  </a>

  <a title="Gallery Example" data-uk-lightbox="{group:'group1'}" href="/images/Demo/elements/salon5.jpg">
    <img class="uk-thumbnail" width="600" height="400" alt="Gallery Example" src="/images/Demo/elements/salon5.jpg">
  </a>

  <a title="Gallery Example" data-uk-lightbox="{group:'group1'}" href="/images/Demo/elements/salon6.jpg">
    <img class="uk-thumbnail" width="600" height="400" alt="Gallery Example" src="/images/Demo/elements/salon6.jpg">
  </a>

</div>

5. Skills That We Possess

Module: Custom HTML
Module Position: position6
Module Class Suffix: title3
Show Title: Show
<h5>Hair Cut (93%)</h5>
<div class="uk-progress uk-progress-warning">
  <div style="width: 93%;" class="uk-progress-bar"> </div>
</div>
<h5>MakeUp (87%)</h5>
<div class="uk-progress">
  <div style="width: 87%;" class="uk-progress-bar"> </div>
</div>
<h5>Manicure (81%)</h5>
<div class="uk-progress uk-progress-danger">
  <div style="width: 81%;" class="uk-progress-bar"> </div>
</div>
<h5>Waxings (75%)</h5>
<div class="uk-progress uk-progress-success">
  <div style="width: 75%;" class="uk-progress-bar"> </div>
</div>

6. Awards

Module: RokSprocket > Strips Layout > Separated theme
Content: Simple
Display Limit: ∞ articles
Preview Length: 20 words
Previews Per Page: 4
Items Per Row: 4
Strip HTML Tags: Yes
Arrow Navigation: Hide
Pagination: Hide
Article Details: Hide author and date
Animation: Fade Delayed
Autoplay: Enabled
Module Position: bottom5
Module Class Suffix: title1
Show Title: Show

Only an image is selected for every item.

Services Page

1. Services

Module: Custom HTML
Module Position: top1
Module Class Suffix: none
Show Title: Hide
<div class="uk-grid uk-grid-divider5" data-uk-scrollspy="{cls:'uk-animation-slide-left', delay:300}">

  <div class="uk-width-medium-1-3">
    <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b">
      <span class="hi-icon pe-7s-scissors"></span><h4>Hair Cuts</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p><a class="uk-button uk-button-mini" href="#">Book Now</a></p>
    </div>
  </div>

  <div class="uk-width-medium-1-3">
    <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b">
      <span class="hi-icon pe-7s-magic-wand"></span><h4>MakeUp</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p><a class="uk-button uk-button-mini" href="#">Book Now</a></p>
    </div>
  </div>

  <div class="uk-width-medium-1-3">
    <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b">
      <span class="hi-icon pe-7s-leaf"></span><h4>Spa</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p><a class="uk-button uk-button-mini" href="#">Book Now</a></p>
    </div>
  </div>

</div>
<hr class="uk-grid-divider">
<div class="uk-grid uk-grid-divider5" data-uk-scrollspy="{cls:'uk-animation-slide-right', delay:500}">

  <div class="uk-width-medium-1-3">
    <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b">
      <span class="hi-icon pe-7s-paint-bucket"></span><h4>Nails</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p><a class="uk-button uk-button-mini" href="#">Book Now</a></p>
    </div>
  </div>

  <div class="uk-width-medium-1-3">
    <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b">
      <span class="hi-icon pe-7s-bandaid"></span><h4>Waxing</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p><a class="uk-button uk-button-mini" href="#">Book Now</a></p>
    </div>
  </div>

  <div class="uk-width-medium-1-3">
    <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b">
      <span class="hi-icon pe-7s-arc"></span><h4>Specials</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p><a class="uk-button uk-button-mini" href="#">Book Now</a></p>
    </div>
  </div>

</div>

2. Services Parallax

Module: Custom HTML
Module Position: parallax1
Module Class Suffix: none
Show Title: Hide
<div data-uk-parallax="{bg: -200}" class="parallax3  uk-text-contrast uk-flex uk-flex-middle padding50">
  <div class="container" data-uk-scrollspy="{cls:'uk-animation-scale-up', delay:300}">
    <h1>We Use Only Pro Tools!</h1>
    <p>All our artists and stylists are using only the best of the best products. <br>We have products from the best brands: NailsX, MakeYOU and Sci-Hi.</p>
  </div>
</div>

3. Things to consider before haircut (built with article and a RokSprocket module in it)

The code is placed in an ARTICLE, called "Services".

<div class="sp-module title1 book-me"><h3 class="sp-module-title">Things to consider before haircut</h3></div>
[module-93]

Contacts Page

1. Google Map with color

The Google Map is actually the "Google Maps" module, which is a 3rd party extension developed by BowThemes.

If you use only the template, not the quickstart package, you can download the map module from this link. You will also find an extended documentation for this module at the same link. To be able to download both the module and the documentation, you need to register in the developer's site - it is totally free.

In the Module you have to go to Custom Style Manager Tab and to play with the parameters. We have changed these and mostly played with na Map Colors.

You can (and should) install the Quickstart package and see the module options and settings in details.

Module: BT Google Maps
Module Title: Contact Google Maps
Module Position: left
Module Class Suffix: none
Show Title: Hide

2. Contact Form

The menu item "Contacts" has Menu Item Type: Single Contact

Select Contact: Select your Contact, which you have to created first from Components -> Contacts -> Contacts

Social Bar

Module: Custom HTML
Module Position: socialbar
Module Class Suffix: none
Show Title: Hide
<div class="uk-grid uk-grid-collapse uk-text-center">

  <div class="uk-width-medium-1-6">
    <a href="#" class="uk-icon-button uk-icon-facebook"></a>
  </div>

  <div class="uk-width-medium-1-6">
    <a href="#" class="uk-icon-button uk-icon-twitter"></a>
  </div>

  <div class="uk-width-medium-1-6">
    <a href="#" class="uk-icon-button uk-icon-youtube"></a>
  </div>

  <div class="uk-width-medium-1-6">
    <a href="#" class="uk-icon-button uk-icon-google-plus"></a>
  </div>

  <div class="uk-width-medium-1-6">
    <a href="#" class="uk-icon-button uk-icon-pinterest"></a>
  </div>

  <div class="uk-width-medium-1-6">
    <a href="#" class="uk-icon-button uk-icon-vimeo"></a>
  </div>

</div>

You can use every icon from FontAwesome, if your social networks are different from these, used in our template.

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.

Become an insider | Subscribe to our Newsletter
Subscribe Now
Subscribe to our mailing list and stay up-to-date with all our awesome releases, latest updates and amazing discount offers!