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.
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.
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 inroot/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:
- Open
root/templates/it_monday/templateDetails.xml
and locate the following lines: - Copy one line - for example
and paste it below the other one, then rename it (in this example the new position will be called "newposition"):title - 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_monday/less/theme.less
and add the new css style for the new position. The class of the new position should be: - Finally create a module and publish it in the new position
<positions>
<position>title</position>
<position>logo</position>
<positions>
<position>title</position>
<position>newposition</position>
<position>logo</position>
#sp-newposition
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
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:
Module Variations
Monday comes with 6 preset module variations (Module Class Suffixes):
- title1
- title2
- title3
- title4
- title5
- 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.
- JCE - download and install JCE from https://www.joomlacontenteditor.net
- No Editor - you can turn off the editor by going to Site Admin > Global Configuration > Default Editor > select "Editor - None" and save
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.
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>
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:
- Go to
ROOT/templates/it_monday/css/
- Create a
custom.css
file (if you don't have one already) - 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); }
- Change the path of your image or just the name of the image
- 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 Position: slide
Module Class Suffix: none
Show Title: Hide
2. Services
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 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 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].
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
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 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
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 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 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>
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 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
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 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 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 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 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
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 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 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 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
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.
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
Social Bar
Module Position: socialbar
Module Class Suffix: none
Show Title: Hide
You can use every icon from FontAwesome, if your social networks are different from these, used in our template.