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.icofile 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, but in Calimera you need to select a background image in full-width as well)
- Background Repeat - choose if the background image will be repeated or not
- Background Size - choose the size attribute of the image
- Background Attachement - choose the attachement atribute
- Background Position - choose the image position
Footer:
- Copyright - show or hide the copyright information in the footer
- Module Position - select the module position in which you will load the footer settings
- Copyright Notice - if the Copyright option is enabled you need to fill this field with your information
Social Icons:
- Social Icons - show or hide the social icons
- Module Position - select the module position in which you will load the social icons
- All following fields will show the coresponding icon on the site's frontend if you add your social media link
Contact Information:
- Enable - choose either to show or hide the contact information
- Module Position - select the module position in which you will load the contanct information
- Phone - add your phone
- Email - add contact email
Coming Soon:
- Coming Soon Mode - enable or disable the mode
- Coming Soon Title - write your coming soon title
- Date - add the date on which your site will be online
- Content - this is the place to add your coming soon message if you want to have one
2. Presets:
By default you have 4 preset styles with color schemes included. By default you can choose 3 main colors:
- Background Color - by default it's white (#ffffff)
- Text Color - your content and headings color
- Major Color - this is the main color theme that your site will use
Please note that all the colors will work if the LESS option from the Advanced tab is enabled! This way the LESS files will automatically generate your CSS files with those colors.
3. Layout:
By default in the Layout tab you will find the preset modle positions and template layout. You can either use the created module positions or create your own module positions.
Customizing module position or entire row from the template settings:
Customize entire row settings: click on the Settings button on the right of the row you want to customize and change the options depending to your needs. For example, you can change the row background, text color, add background image, or disable it on desktop, tablet or mobile views.
Same applies for a module position: by clicking on the 3 cogs icon you will load the settings applied to this particular module position.
4. Menu:
- Select Menu - choose which of your menus will be loaded in the menu position
- Menu Type - here you choose from Mega Menu (which is only the menu), Off Canvas Menu (only the menu toggler) or combination of both
- Dropdown width - choose the width of the dropdown menu
- Dropdown animation - choose the dropdown animation
5. Typography:
From this tab you can choose different fonts for different headings, menu, content or add a custom font which can be assigned to specific classes.
6. Custom Code: here you can add custom lines of code if needed
7. Advanced:
Cache Settings:
- Compress CSS - enable or disable CSS compression
- Compress Javascript - enable or disable JS files compression
- Exclude Javascript - you can exclude some JS files from compression
Compile LESS to CSS: with this option enalbed the CSS files will be autogenerated from the LESS files
8. Blog:
- Post Format/ Show icon - by enabling this option you can display a little icon before the article's title in the blog layout
- Comments Settings - choose different comment plugins to run on your site
- Social share - add the most popular social sharing buttons to your articles
9. Assignments: assign any of your menus to the template
This option is used mostly when you want to display different preset on a different menu.
If you want to have a different color theme on any of your menus you need to:
- Duplicate the template from Template Manager
- Open the duplicated template and rename it, for example "Template Color 2"
- Click on the Presets tab and choose different preset (for example "Preset 2")
- Change the colors depending on your needs
- Click on the Assignment tab and select the menu on which you want to display the different color
- Finally save the settings and test your menus
Adding New Module Position
Layout Builder
You can open the Layout Builder from Joomla admin > Extensions > Template manager > Calimera > 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_calimera/templateDetails.xmland locate the following lines: - Copy one line - for example
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/calimera/less/theme.lessand 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-newpositionUpdate
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.
Module Variations
Calimera comes with 6 preset module variations (Module Class Suffixes):
- title1 - with this class the module will be clean and plain with only a custom image element below the title, the heading and element are centered
- title2 - same as title1, but the element is replaced with transparent gray 5px line with rounded corners
- title3 - same as title1 and title2, but with colored element below the title, which will change depending to your main color
- title4 - same as title2, but the text is aligned to the left and the element is with your main color
- title5 - the whole module content will be surrounded by a 5px solid border in the main color of the template
- title6 - the whole module is with white text color and the background is dark (the color is coming from the main text color)
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.
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>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.
Restaurant Home
1. Restaurant Slider
Module Position: slide
Module Class Suffix: none
Show Title: Hide
2. Today's Specials
Module Position: top3
Module Class Suffix: title1
Show Title: Show
<div class="uk-grid uk-grid-divider uk-text-center">
<div class="uk-width-medium-1-3" data-uk-scrollspy="{cls:'uk-animation-slide-left', delay:600}">
<p><img alt="Caesars Salad" src="/images/Demo/elements/salad.jpg" class="uk-align-center"></p>
<h6>Caesars Salad</h6><br>
<h3 class="circle-it">$ 7.80</h3>
<p style="margin-top: 30px;">Awesome combination of romaine lettuce and croutons dressed with parmesan cheese, olive oil, egg, Worcester sauce.</p>
<p><a href="#" class="uk-button uk-button-primary">Order Now</a></p>
</div>
<div class="uk-width-medium-1-3" data-uk-scrollspy="{cls:'uk-animation-fade', delay:300}">
<p><img alt="Sushi" src="/images/Demo/elements/sushi.jpg" class="uk-align-center"></p>
<h6>Hosomaki Sushi</h6><br>
<h3 class="circle-it">$ 6.20</h3>
<p style="margin-top: 30px;">Hosomaki set contains 6 pieces. You can choose between tuna & cucumber, only cucumber or avocado & cucumber.</p>
<p><a href="#" class="uk-button uk-button-primary">Order Now</a></p>
</div>
<div class="uk-width-medium-1-3" data-uk-scrollspy="{cls:'uk-animation-slide-right', delay:600}">
<p><img alt="Tiramisu" src="/images/Demo/elements/tiramisu.jpg" class="uk-align-center"></p>
<h6>Tiramisu</h6><br>
<h3 class="circle-it">$ 5.90</h3>
<p style="margin-top: 30px;">Ladyfingers dipped in coffee, layered with a whipped mixture of eggs, sugar, and mascarpone cheese, flavoured with cocoa.</p>
<p><a href="#" class="uk-button uk-button-primary">Order Now</a></p>
</div>
</div>3. Our Menu
Tabs Position: Top
Strip HTML Tags: No
Content: Joomla
Module Position: top7
Module Class Suffix: title1
Show Title: Show
In the module we have loaded 3 ARTICLES: 1 for Salads, 1 for Main and 1 for Desserts.
Example code from one of the articles:
<div class="uk-grid uk-grid-divider">
<div class="uk-width-medium-1-3">
<span class="uk-badge uk-badge-percent">$ 4.80</span>
<h6 class="uk-margin-bottom">Greek salad</h6>
<ins>tomatoes, cucumbers, cheese, peppers, red onion, olives and oregano</ins>
<p>350 g</p>
<hr class="uk-grid-divider">
<span class="uk-badge uk-badge-percent">$ 5.60</span>
<h6 class="uk-margin-bottom">Shopska salad</h6>
<ins>tomatoes, cucumbers, roasted pepper, cheese, onion and parsley</ins>
<p>350 g</p>
<hr class="uk-grid-divider">
<span class="uk-badge uk-badge-percent">$ 7.30</span>
<h6 class="uk-margin-bottom">Avocado salad</h6>
<ins>iceberg lettuce, arugula, cucumbers, avocado, sun-dried tomatoes and Vinaigrette dressing</ins>
<p>320 g</p>
</div>
<div class="uk-width-medium-1-3">
<span class="uk-badge uk-badge-percent">$ 6.20</span>
<h6 class="uk-margin-bottom">Green/ Egg salad</h6>
<ins>lettuce, cucumbers, egg, radishes, olives and spring onion</ins>
<p>390 g</p>
<hr class="uk-grid-divider">
<span class="uk-badge uk-badge-percent">$ 8.40</span>
<h6 class="uk-margin-bottom">Capresetta</h6>
<ins>tomatoes, Mozzarella, Pesto sauce, arugula and olives</ins>
<p>350 g</p>
<hr class="uk-grid-divider">
<span class="uk-badge uk-badge-percent">$ 7.40</span>
<h6 class="uk-margin-bottom">Blue cheese salad</h6>
<ins>carrots, blue cheese, walnuts, dill and lemon</ins>
<p>350 g</p>
</div>
<div class="uk-width-medium-1-3">
<img alt="" src="/images/Demo/elements/garlic.jpg">
</div>
</div>4. Word from the Chef
Module Position: top11
Module Class Suffix: title1
Show Title: Show
<div class="uk-grid uk-flex-middle">
<div class="uk-width-medium-1-3">
<img alt="Chef" src="/images/Demo/elements/chef.png">
</div>
<div class="uk-width-medium-2-3 it-quotes-dark" data-uk-scrollspy="{cls:'uk-animation-scale-up'}">
<h6 class="sp-dropcap">Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion.</h6><br>
<h5><mark>Roberto D'Angelo</mark></h5>
<p>Master Chef</p>
</div>
</div>5. Book Your Table
Module Position: user1
Module Class Suffix: title1
Show Title: Show
For this module we have created a reservation form with ChronoForms5 and it's loaded in the first module column.
To create a form you need to have ChronoForms installed, then go to Components > ChronoForms5 > Create a form and then load it in the module as in the example below:
<div class="uk-grid">
<div class="uk-width-medium-1-2">
{chronoforms5}reservation{/chronoforms5}
</div>
<div class="uk-width-medium-1-2">
<img alt="Book Your Table" src="/images/Demo/elements/book.png">
</div>
</div>6. ARTICLE: Home (Only Organic Products!)
<div class="sp-module title1">
<h3 class="sp-module-title">Only Organic Products!</h3>
</div>
<div class="uk-grid">
<div class="uk-width-medium-1-3">
<div style="text-align: right;" class="pad-spa" data-uk-scrollspy="{cls:'uk-animation-slide-left', delay:400}">
<i class="pe pe-7s-right-arrow pe-2x pull-right"></i>
<h6>Fresh Vegetables</h6><br />
Pea horseradish azuki bean lettuce avocado asparagus okra plum komatsuna black-eyed.
</div>
<hr>
<div style="text-align: right;" class="pad-spa" data-uk-scrollspy="{cls:'uk-animation-slide-left', delay:600}">
<i class="pe pe-7s-right-arrow pe-2x pull-right"></i>
<h6>Finest Bread</h6><br />
Kohlrabi radish okra azuki bean corn fava bean mustard tigernut jÃcama green been.
</div>
<hr>
<div style="text-align: right;" class="pad-spa" data-uk-scrollspy="{cls:'uk-animation-slide-left', delay:800}">
<i class="pe pe-7s-right-arrow pe-2x pull-right"></i>
<h6>Olive Oil</h6><br />
Grape silver beet watercress potato tigernut corn groundnut kakadu plu.
</div>
</div>
<div class="uk-width-medium-1-3" data-uk-scrollspy="{cls:'uk-animation-slide-bottom', delay:200}">
<img style="margin: 0 auto; display: block;" src="/images/Demo/elements/organic.jpg" alt="Organic Products">
</div>
<div class="uk-width-medium-1-3">
<div class="pad-spa" data-uk-scrollspy="{cls:'uk-animation-slide-right', delay:400}">
<i class="pe pe-7s-left-arrow pe-2x pull-left"></i>
<h6>Bio Diary Products</h6><br />
Catsear cauliflower garbanzo yarrow salsify chicory garlic bell pepper napa cabbage lettuce tomato.
</div>
<hr>
<div class="pad-spa" data-uk-scrollspy="{cls:'uk-animation-slide-right', delay:600}">
<i class="pe pe-7s-left-arrow pe-2x pull-left"></i>
<h6>Fresh Meet</h6><br />
Soko radicchio bunya nuts gram dulse silver beet parsnip napa cabbage lotus root sea lettuce.
</div>
<hr>
<div class="pad-spa" data-uk-scrollspy="{cls:'uk-animation-slide-right', delay:800}">
<i class="pe pe-7s-left-arrow pe-2x pull-left"></i>
<h6>Gourmet</h6><br />
Sea lettuce gumbo grape kale kombu cauliflower salsify kohlrabi okra sea lettuce broccoli celery.
</div>
</div>
</div>7. Catering Services
Module Position: position1
Module Class Suffix: title1
Show Title: Show
<div class="uk-grid uk-text-center">
<div class="uk-width-medium-1-3">
<div class="uk-panel uk-panel-box uk-panel-box-secondary uk-panel-hover">
<div class="uk-panel-badge uk-badge uk-badge-percent">Learn more</div>
<div class="uk-panel-teaser">
<a href="#"><img src="/images/Demo/elements/catering1.jpg" alt="Party Catering" class="uk-align-center"></a>
</div>
<h6>Party Catering</h6><br>
<p>Practical advises, diets, health and wellness programs and so much more. Live healthy and check your symptoms.</p>
</div>
</div>
<div class="uk-width-medium-1-3">
<div class="uk-panel uk-panel-box uk-panel-box-secondary uk-panel-hover">
<div class="uk-panel-badge uk-badge uk-badge-percent">Learn more</div>
<div class="uk-panel-teaser">
<a href="#"><img src="/images/Demo/elements/catering2.jpg" alt="Corporate Catering" class="uk-align-center"></a>
</div>
<h6>Corporate Catering</h6><br>
<p>Practical advises, diets, health and wellness programs and so much more. Live healthy and check your symptoms.</p>
</div>
</div>
<div class="uk-width-medium-1-3">
<div class="uk-panel uk-panel-box uk-panel-box-secondary uk-panel-hover">
<div class="uk-panel-badge uk-badge uk-badge-percent">Learn more</div>
<div class="uk-panel-teaser">
<a href="#"><img src="/images/Demo/elements/catering3.jpg" alt="Air Catering" class="uk-align-center"></a>
</div>
<h6>Air Catering</h6><br>
<p>Practical advises, diets, health and wellness programs and so much more. Live healthy and check your symptoms.</p>
</div>
</div>
</div>8. Call To Action Home
Module Position: position5
Module Class Suffix: none
Show Title: Hide
<div class="uk-text-center">
<h3>Hungry already? <mark>Order Now: <i class="icon-phone"></i> 0700 123 7654</mark></h3>
</div>9. Fun Facts
Module Position: parallax2
Module Class Suffix: none
Show Title: Hide
<div style="min-height: 200px; background-image: url(/images/Demo/elements/parallax1.jpg); background-color: #f5f5f5; background-repeat: no-repeat;" data-uk-parallax="{bg: -300}" class="uk-text-contrast uk-text-center uk-flex uk-flex-center uk-flex-middle">
<div style="padding:70px;" class="container1170">
<div style="" class="sp-module title1">
<h3 class="sp-module-title">Fun Facts</h3>
</div>
<div class="uk-grid uk-grid-divider">
<div class="uk-width-medium-1-5 uk-text-center">
<h6 style="font-size:38px;">4739</h6>
<h5>Wines Poured</h5>
</div>
<div class="uk-width-medium-1-5 uk-text-center">
<h6 style="font-size:38px;">34 215</h6>
<h5>Potatoes Fried</h5>
</div>
<div class="uk-width-medium-1-5 uk-text-center">
<h6 style="font-size:38px;">2728</h6>
<h5>Steaks Grilled</h5>
</div>
<div class="uk-width-medium-1-5 uk-text-center">
<h6 style="font-size:38px;">1893</h6>
<h5>Chickens Served</h5>
</div>
<div class="uk-width-medium-1-5 uk-text-center">
<h6 style="font-size:38px;">9845</h6>
<h5>Salads Chopped</h5>
</div>
</div>
</div>
</div>10. Events
Previews Per Page: 3
Items Per Row: 3
Strip HTML Tags: No
Content: Joomla
Module Position: bottom5
Module Class Suffix: title1
Show Title: Show
Coffee Shop Home
1. Coffee Shop Slider
Module Position: slide
Module Class Suffix: none
Show Title: Hide
2. What We Offer
Content: Sample
Strip HTML Tags: No
Previews per page: 3
Items per row: 3
Module Position: top3
Module Class Suffix: title3
Show Title: Show
Example code:
- Title:
<div class="uk-badge uk-badge-percent"><i class="uk-icon-arrow-right"></i></div>Tasteful Coffee - Image - choose an image from Media manager
- Link - #
- Description - Aenean massa. Mauris tincidunt.
3. Special Offers
Module Position: top7
Module Class Suffix: title3
Show Title: Show
<div class="uk-grid uk-flex-middle">
<div class="uk-width-medium-1-2" data-uk-scrollspy="{cls:'uk-animation-scale-up'}">
<img alt="Special Offers - Coffee" src="/images/Demo/elements/special1.jpg" >
</div>
<div class="uk-width-medium-1-2" data-uk-scrollspy="{cls:'uk-animation-scale-up', delay:600}">
<div style="font-weight: bold;" class="uk-badge uk-badge-percent">$ 6.75</div>
<h6>Breakfast Club</h6>
<hr>
<p>Green juice fanny pack mumblecore neutra proident, echo park twee selvage dolore vero hammock. Velit eu pug, artisan wolf typewriter tote bag forage ex keffiyeh try-hard.</p>
<p><a href="#" class="uk-button">More Special Offers</a></p>
</div>
</div>
<div class="uk-grid uk-flex-middle">
<div class="uk-width-medium-1-2" data-uk-scrollspy="{cls:'uk-animation-scale-up', delay:600}">
<div style="font-weight: bold;" class="uk-badge uk-badge-percent">$ 4.60</div>
<h6>Dessert Of The Day</h6>
<hr>
<p>Green juice fanny pack mumblecore neutra proident, echo park twee selvage dolore vero hammock. Velit eu pug, artisan wolf typewriter tote bag forage ex keffiyeh try-hard.</p>
<p><a href="#" class="uk-button">More Special Offers</a></p>
</div>
<div class="uk-width-medium-1-2" data-uk-scrollspy="{cls:'uk-animation-scale-up'}">
<img alt="Special Offers - Cakes" src="/images/Demo/elements/special2.jpg" >
</div>
</div>4. What We Offer
Content: Joomla Articles
Strip HTML Tags: No
Tabs Position: Top
Module Position: top11
Module Class Suffix: title3
Show Title: Show
In the module we have loaded 2 articles. The code is same as for the Restaurant Home menu.
5. Our Story
Module Position: user1
Module Class Suffix: title3
Show Title: Show
<div class="uk-grid uk-text-center">
<div class="uk-width-medium-1-4" data-uk-scrollspy="{cls:'uk-animation-fade', delay:100}">
<h6>1996</h6>
<p class="blockquote-pc2">The Birthday - First Calimera cafe opened in Sydney, Australia</p>
</div>
<div class="uk-width-medium-1-4" data-uk-scrollspy="{cls:'uk-animation-fade', delay:300}">
<h6>2000</h6>
<p class="blockquote-pc2">Muffins Wars - Famous Homemade vanilla-rum muffins.</p>
</div>
<div class="uk-width-medium-1-4" data-uk-scrollspy="{cls:'uk-animation-fade', delay:500}">
<h6>2005</h6>
<p class="blockquote-pc2">Unstoppable Coffee - 1st award in Coffee Festival 2005, USA</p>
</div>
<div class="uk-width-medium-1-4" data-uk-scrollspy="{cls:'uk-animation-fade', delay:700}">
<h6>2014</h6>
<p class="blockquote-pc2">The Expansion - Calimera conquers New Orleans</p>
</div>
</div>6. ARTICLE: Home Coffee (We Are Looking For Barista)
We have loaded a RokSprocket Lists module in the second column.
<div class="sp-module title3">
<h3 class="sp-module-title">We Are Looking For Barista</h3>
</div>
<div class="uk-grid uk-grid-divider">
<div class="uk-width-medium-1-2">
<img alt="Looking for barista" src="/images/Demo/elements/barista.png">
</div>
<div class="uk-width-medium-1-2">
[module-124]
<p><a href="#" class="uk-button">Send your CV</a></p>
</div>
</div>7. Our Awesome Team
Module Position: position1
Module Class Suffix: title3
Show Title: Show
<div class="uk-grid uk-text-center">
<div class="uk-width-medium-1-4">
<div class="uk-panel uk-panel-box uk-panel-box-secondary uk-panel-hover">
<div class="uk-panel-badge uk-badge uk-badge-percent" data-uk-scrollspy="{cls:'uk-animation-slide-top', delay:300}">Master Chef</div>
<div class="uk-panel-teaser">
<a href="#"><img alt="Our Team" src="/images/Demo/elements/team1.jpg" class="uk-align-center"></a>
</div>
<h6>Tomek Bublanski</h6><br>
<p>"I love to cook!"</p>
<a class="uk-icon-button uk-icon-facebook" href="#"></a>
<a class="uk-icon-button uk-icon-twitter" href="#"></a>
<a class="uk-icon-button uk-icon-youtube" href="#"></a>
</div>
</div>
<div class="uk-width-medium-1-4">
<div class="uk-panel uk-panel-box uk-panel-box-secondary uk-panel-hover">
<div class="uk-panel-badge uk-badge uk-badge-percent" data-uk-scrollspy="{cls:'uk-animation-slide-top', delay:600}">Chef</div>
<div class="uk-panel-teaser">
<a href="#"><img alt="Our Team" src="/images/Demo/elements/team2.jpg" class="uk-align-center"></a>
</div>
<h6>Alejandro Miles</h6><br>
<p>"Pasta, Pasta, Pasta!"</p>
<a class="uk-icon-button uk-icon-facebook" href="#"></a>
<a class="uk-icon-button uk-icon-twitter" href="#"></a>
<a class="uk-icon-button uk-icon-youtube" href="#"></a>
</div>
</div>
<div class="uk-width-medium-1-4">
<div class="uk-panel uk-panel-box uk-panel-box-secondary uk-panel-hover">
<div class="uk-panel-badge uk-badge uk-badge-percent" data-uk-scrollspy="{cls:'uk-animation-slide-top', delay:900}">Chef</div>
<div class="uk-panel-teaser">
<a href="#"><img alt="Our Team" src="/images/Demo/elements/team3.jpg" class="uk-align-center"></a>
</div>
<h6>Jennifer Garden</h6><br><p>"Everything sweet!"</p>
<a class="uk-icon-button uk-icon-facebook" href="#"></a>
<a class="uk-icon-button uk-icon-twitter" href="#"></a>
<a class="uk-icon-button uk-icon-youtube" href="#"></a>
</div>
</div>
<div class="uk-width-medium-1-4">
<div class="uk-panel uk-panel-box uk-panel-box-secondary uk-panel-hover">
<div class="uk-panel-badge uk-badge uk-badge-percent" data-uk-scrollspy="{cls:'uk-animation-slide-top', delay:1200}">Chef</div>
<div class="uk-panel-teaser">
<a href="#"><img alt="Our Team" src="/images/Demo/elements/team4.jpg" class="uk-align-center"></a>
</div>
<h6>Madeline Chains</h6><br><p>"I'm not Chinese :)"</p>
<a class="uk-icon-button uk-icon-facebook" href="#"></a>
<a class="uk-icon-button uk-icon-twitter" href="#"></a>
<a class="uk-icon-button uk-icon-youtube" href="#"></a>
</div>
</div>
</div>8. Coffee Gallery
Module Position: position5
Module Class Suffix: title3
Show Title: Show
<div data-uk-grid-margin="" class="uk-grid uk-grid-width-medium-1-4 uk-grid-collapse">
<figure class="uk-overlay uk-overlay-hover">
<a title="Gallery Example" data-uk-lightbox="{group:'group1'}" href="/images/Demo/elements/gallery1.jpg">
<img width="600" height="400" alt="Gallery Example" src="/images/Demo/elements/gallery1.jpg">
<img class="uk-overlay-panel uk-overlay-image uk-overlay-fade" src="/images/Demo/elements/color2.jpg" alt="color">
</a>
</figure>
<figure class="uk-overlay uk-overlay-hover">
<a title="Gallery Example" data-uk-lightbox="{group:'group1'}" href="/images/Demo/elements/gallery2.jpg">
<img width="600" height="400" alt="Gallery Example" src="/images/Demo/elements/gallery2.jpg">
<img class="uk-overlay-panel uk-overlay-image uk-overlay-fade" src="/images/Demo/elements/color2.jpg" alt="color">
</a>
</figure>
<figure class="uk-overlay uk-overlay-hover">
<a title="Gallery Example" data-uk-lightbox="{group:'group1'}" href="/images/Demo/elements/gallery3.jpg">
<img width="600" height="400" alt="Gallery Example" src="/images/Demo/elements/gallery3.jpg">
<img class="uk-overlay-panel uk-overlay-image uk-overlay-fade" src="/images/Demo/elements/color2.jpg" alt="color">
</a>
</figure>
<figure class="uk-overlay uk-overlay-hover">
<a title="Gallery Example" data-uk-lightbox="{group:'group1'}" href="/images/Demo/elements/gallery4.jpg">
<img width="600" height="400" alt="Gallery Example" src="/images/Demo/elements/gallery4.jpg">
<img class="uk-overlay-panel uk-overlay-image uk-overlay-fade" src="/images/Demo/elements/color2.jpg" alt="color">
</a>
</figure>
</div>
<div data-uk-grid-margin="" class="uk-grid uk-grid-width-medium-1-3 uk-grid-collapse">
<figure class="uk-overlay uk-overlay-hover">
<a title="Gallery Example" data-uk-lightbox="{group:'group1'}" href="/images/Demo/elements/gallery5.jpg">
<img width="600" height="400" alt="Gallery Example" src="/images/Demo/elements/gallery5.jpg">
<img class="uk-overlay-panel uk-overlay-image uk-overlay-fade" src="/images/Demo/elements/color2.jpg" alt="color">
</a>
</figure>
<div class="uk-flex uk-flex-middle uk-flex-center">
<div class="uk-panel uk-text-center uk-margin-large-right uk-margin-large-left">
<h6 class="uk-margin-bottom uk-text-primary">Something Special</h6>
<p>Calimera (Καλημέρα, "good morning" in both Greek and Griko) is a small town of 7,296 inhabitants in the Grecìa Salentina area of the Salento peninsula in Italy, located between Gallipoli and Otranto. It belongs to the province of Lecce.</p>
</div>
</div>
<figure class="uk-overlay uk-overlay-hover">
<a title="Gallery Example" data-uk-lightbox="{group:'group1'}" href="/images/Demo/elements/gallery6.jpg">
<img width="600" height="400" alt="Gallery Example" src="/images/Demo/elements/gallery6.jpg">
<img class="uk-overlay-panel uk-overlay-image uk-overlay-fade" src="/images/Demo/elements/color2.jpg" alt="color">
</a>
</figure>
</div>
<div data-uk-grid-margin="" class="uk-grid uk-grid-width-medium-1-4 uk-grid-collapse">
<figure class="uk-overlay uk-overlay-hover">
<a title="Gallery Example" data-uk-lightbox="{group:'group1'}" href="/images/Demo/elements/portfolio1.jpg">
<img width="600" height="400" alt="Gallery Example" src="/images/Demo/elements/portfolio1.jpg">
<img class="uk-overlay-panel uk-overlay-image uk-overlay-fade" src="/images/Demo/elements/color2.jpg" alt="color">
</a>
</figure>
<figure class="uk-overlay uk-overlay-hover">
<a title="Gallery Example" data-uk-lightbox="{group:'group1'}" href="/images/Demo/elements/portfolio2.jpg">
<img width="600" height="400" alt="Gallery Example" src="/images/Demo/elements/portfolio2.jpg">
<img class="uk-overlay-panel uk-overlay-image uk-overlay-fade" src="/images/Demo/elements/color2.jpg" alt="color">
</a>
</figure>
<figure class="uk-overlay uk-overlay-hover">
<a title="Gallery Example" data-uk-lightbox="{group:'group1'}" href="/images/Demo/elements/portfolio3.jpg">
<img width="600" height="400" alt="Gallery Example" src="/images/Demo/elements/portfolio3.jpg">
<img class="uk-overlay-panel uk-overlay-image uk-overlay-fade" src="/images/Demo/elements/color2.jpg" alt="color">
</a>
</figure>
<figure class="uk-overlay uk-overlay-hover">
<a title="Gallery Example" data-uk-lightbox="{group:'group1'}" href="/images/Demo/elements/portfolio4.jpg">
<img width="600" height="400" alt="Gallery Example" src="/images/Demo/elements/portfolio4.jpg">
<img class="uk-overlay-panel uk-overlay-image uk-overlay-fade" src="/images/Demo/elements/color2.jpg" alt="color">
</a>
</figure>
</div>9. Testimonials Parallax
Module Position: parallax2
Module Class Suffix: none
Show Title: Hide
We have loaded a RokSprocket Quotes module, which you need to first create in the Module manager.
<div style="min-height: 200px; background-image: url(/images/Demo/elements/testimonials.jpg); background-color: #f5f5f5; background-repeat: repeat;" data-uk-parallax="{bg: -300}" class="uk-text-contrast uk-text-center uk-flex uk-flex-center uk-flex-middle">
<div style="padding:70px;" class="container1170">
<div style="" class="sp-module title3">
<h3 class="sp-module-title">Testimonials</h3>
</div>
[module-116]
</div>
</div>10. Our Partners
Content: Simple
Strip HTML Tags: No
Previews per page: 4
Items per row: 4
Module Position: bottom5
Module Class Suffix: title3
Show Title: Show
Item content: only image!
Bar Home
1. Bar Slider
Module Position: slide
Module Class Suffix: none
Show Title: Hide
2. Happy Hour
Module Position: top3
Module Class Suffix: title2
Show Title: Show
<div class="uk-grid uk-flex-middle uk-text-center">
<div class="uk-width-medium-1-2" data-uk-scrollspy="{cls:'uk-animation-slide-left', delay:300}">
<h1 class="uk-text-primary">16:00 - 18:00</h1>
<h6>Get 50% Off!</h6>
<p style="margin-top: 30px;">Between 16:00 and 18:00 every check will come with 3 dice. Roll the dice with at least a sum of 14 and get 50% off your bill!</p>
<em>The promotion is for December</em>
</div>
<div class="uk-width-medium-1-2" data-uk-scrollspy="{cls:'uk-animation-slide-right', delay:300}">
<img alt="Roll The Dice" src="/images/Demo/elements/roll.jpg">
</div>
</div>3. We Are Offering
Module Position: top9
Module Class Suffix: title2
Show Title: Show
<div class="uk-grid uk-text-center">
<div class="uk-width-medium-1-4">
<div class="uk-panel uk-panel-box uk-panel-box-secondary uk-panel-hover">
<div class="uk-panel-teaser">
<a href="#"><img src="/images/Demo/elements/drink1.jpg" alt="We Are Offering"></a>
</div>
<h6>Strong Alcohol</h6><br>
<p>Velit eu pug, artisan wolf typewriter tote bag forage ex keffiyeh try-hard.</p>
</div>
</div>
<div class="uk-width-medium-1-4">
<div class="uk-panel uk-panel-box uk-panel-box-secondary uk-panel-hover">
<div class="uk-panel-teaser">
<a href="#"><img src="/images/Demo/elements/drink2.jpg" alt="We Are Offering"></a>
</div>
<h6>Cold, Fresh Beers</h6><br>
<p>Velit eu pug, artisan wolf typewriter tote bag forage ex keffiyeh try-hard.</p>
</div>
</div>
<div class="uk-width-medium-1-4">
<div class="uk-panel uk-panel-box uk-panel-box-secondary uk-panel-hover">
<div class="uk-panel-teaser">
<a href="#"><img src="/images/Demo/elements/drink3.jpg" alt="We Are Offering"></a>
</div>
<h6>Sweet Cocktails</h6><br>
<p>Velit eu pug, artisan wolf typewriter tote bag forage ex keffiyeh try-hard.</p>
</div>
</div>
<div class="uk-width-medium-1-4">
<div class="uk-panel uk-panel-box uk-panel-box-secondary uk-panel-hover">
<div class="uk-panel-teaser">
<a href="#"><img src="/images/Demo/elements/drink4.jpg" alt="We Are Offering"></a>
</div>
<h6>Soft & Hot Drinks</h6><br>
<p>Velit eu pug, artisan wolf typewriter tote bag forage ex keffiyeh try-hard.</p>
</div>
</div>
</div><br>
<p class="uk-text-center"><a class="uk-button uk-button-primary" href="#">Check Our Menu</a></p>4. ARTICLE: Home Bar (Working Hours)
<div class="sp-module title2">
<h3 class="sp-module-title">Working Hours</h3>
</div>
<div class="uk-grid uk-text-center">
<div class="uk-width-medium-1-3" data-uk-scrollspy="{cls:'uk-animation-fade', delay:300}">
<h1 class="uk-text-primary">07:00 - 22:00</h1>
<h6>Monday - Friday</h6>
</div>
<div class="uk-width-medium-1-3" data-uk-scrollspy="{cls:'uk-animation-fade', delay:600}">
<h1 class="uk-text-primary">11:00 - 24:00</h1>
<h6>Saturday</h6>
</div>
<div class="uk-width-medium-1-3" data-uk-scrollspy="{cls:'uk-animation-fade', delay:900}">
<h1>Closed</h1>
<h6>Sunday</h6>
</div>
</div>5. Calimera Events
Content: Joomla
Strip HTML Tags: No
Previews per page: 3
Items per row: 3
Module Position: top3
Module Class Suffix: title3
Show Title: Show
Item Content:
- Title
- Image
6. Drink Of The Month
Module Position: position5
Module Class Suffix: title2
Show Title: Show
<div class="uk-grid uk-flex-middle">
<div class="uk-width-medium-1-3 uk-container-center">
<img alt="Drink Of The Month" src="/images/Demo/elements/month.jpg">
</div>
<div class="uk-width-medium-2-3">
<div class="uk-grid uk-grid-divider">
<div class="uk-width-medium-1-4 uk-text-primary">
<p><i class="pe-7s-eyedropper pe-3x pe-va"></i></p><br>
<h6>Ingredients</h6>
</div>
<div class="uk-width-medium-3-4">
<div class="uk-grid">
<div class="uk-width-medium-1-2">
<p>1/2 gallon apple juice</p>
<p>1/2 gallon apple cider</p>
<p>1 whole clove</p>
<p>4 cinnamon sticks</p>
</div>
<div class="uk-width-medium-1-2">
<p>1 cup white shugar</p>
<p>1 cup brown sugar</p>
<p>3 cups 190 proof grain alcohol</p>
<p>2 cups vanilla vodka</p>
</div>
</div>
</div>
</div>
<hr class="uk-grid-divider">
<div class="uk-grid uk-grid-divider">
<div class="uk-width-medium-1-4 uk-text-primary">
<p><i class="pe-7s-paint-bucket pe-3x pe-va"></i></p><br>
<h6>Procedures</h6>
</div>
<div class="uk-width-medium-3-4">
<p>1. Bring the apple cider, apple juice, cinnamon stick, whole clove, white sugar, and brown sugar together in a large pot; reduce heat to medium low and simmer for 20 minutes. Remove from heat and cool completely.</p>
<p>2. Stir the grain alcohol and vanilla vodka into the cooled mixture. Pour into bottles and refrigerate.</p>
</div>
</div>
<hr class="uk-grid-divider">
</div>
</div>7. Alcohol Parallax
Module Position: parallax2
Module Class Suffix: none
Show Title: Hide
<div style="min-height: 200px; background-image: url(/images/Demo/elements/parallax2.jpg); background-color: #282828; background-repeat: no-repeat;" data-uk-parallax="{bg: -300}" class="uk-text-center uk-flex uk-flex-center uk-flex-middle">
<div style="padding:120px;" class="container1170">
<div class="uk-text-center" data-uk-scrollspy="{cls:'uk-animation-scale-up', delay:100}">
<div class="sp-module title2 uk-text-contrast">
<h1 class="sp-module-title">Alcohol!</h1>
</div>
<h6>Because no good story started with a salad</h6>
</div>
</div>
</div>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