WhiteStag is a responsive and modern template for Joomla 3.0+, one of the best Open Source content management systems (CMS) out there.
The following documentation will help you to install, setup and maintain the template and it ´s file(s) and features. If you have further questions, problems or if you need support feel free to contact me.
The template package itself is a simple ZIP archive inside the downloaded ZIP file. The installation file (and other useful stuff like this doc) is included in the .zip file. You have to extract this archive to your local HDD first. In the new folder you will find another .zip archive called install_templatename.zip. Thats the installation file for your new template. Keep it´s location in mind and head over to step 2…
Log into your Joomla´s admin backend (enter http://www.yourwebsiteurl.com/administrator in your browser) and click on
"Extensions -> Extension Manager to access the extension manager. Hit the "Search" button, select the installation file from your HDD and hit the "Upload & Install" button. Wait a moment till you see the success message. Depending on your internet connection it can take from a few moments up to a minute or so. So be patience and don´t close the browser window.
now your new template is installed but inactive. To activate it click on
"Extensions -> Template Manager. A list of all installed templates appears. Search for your new template and hit the "default" button right next to it. Your template is now installed and active and you can start to set it up by following the next steps in this document.
The template comes with an configuration panel which is accessible from your Joomla backend.
To access it click on
"Extensions -> Template Manager. A list of all installed template themes will appear. Just click on the templates name to open the configuration panel. Now select the "Options" tab to edit/check the templates settings.
The options panel is separated into two section: "Basic Options" and "Advanced Options". "Basic Options" are important settings to run the template while "Advanced Options" are for optional settings/features. A table with all options and it´s function´s can be found below.
All options marked with Optional are not available in any templates option panel.
|Display a image, text, module position or text and image as logo?||Select if you want to show the logo as image, text, module position or image with text.|
|Enter logo text if logo type is set to text or image and text||Enter the text/sitenme which should appear as logo. Works only if the option above is set to 'text' or 'image and text'|
|Upload logo image||Select a image from the Joomla internal media manager. If nothing is selected but the logo type is set to 'text' or 'image and text' the template use the 'sample_logo.png' file from its own '/img' folder|
|Type of background image||Select if the template should use a full size background image or a texture|
|Select a background image||Select a image from the Joomla internal media manager. It will be used as texture or full size image if a type is selected above. If nothing is selected but the background image option above is active the template use the 'sample_background.jpg' file from its own '/img' folder|
|LTR or RTL text flow?||Let you select the text direction. LTR = Left-to-Right, RTL = Right-to-Left|
|Optional Select basic layout||Select if the website should use a fluid, fixed or responsive main layout|
|Optional Select max width in px||If the basic layout is set to fixed width or responsive you can define a max width in pixels here|
|Optional Select min width in px||If the basic layout is set to responsive you can define a min width in pixels here|
|Type of slide effect||Choose the type of slide animation between one and another slide|
|Time from one slide to another||Enter the time between one slide to another in ms. Default is 1000|
|Autoplay||Enables the autoplay function for the build-in module slider|
|OptionalShow slider pagination||Show links with dots/numbers for every slide|
|OptionalShow slider Arrows||Show Prev and Next links/images to slide manually|
|Stops on hover||The slideshow stops on mouseover. Good for longer content or videos|
|Loop Slider content?||If enabled the slider will restart from the beginning. If disabled slider will stop at the end|
|Time per slide||Time one slide appears in ms. Default is 8000|
|Select a Sub Theme CSS file||This applies a extra style.css file from the selected subfolder of the sub themes directory. Can be used for development issues. You can add/remove certain styles and overwrite the default CSS with it without touching the original files.|
|Activate Mootools?||Older extension can require Mootools JS framework. In this case you can turn on this option here|
|Show Component||Enables/disable the main component output. Can be useful for developing websites with just content modules|
The template comes with a set of 15 available module positions. You can publish a unlimited number of modules on each position and add a horizontal width to them by adding a specific module class suffix (read more on this in the next chapter Module Layout). All available module positions can be seen here:
The template based on a 12 columns grid system. Means any module can have a size from 1/12 of the provides space up to 12/12. For example a module which use 6/12 has a width of 50%, a 4/12 module use 33.33% of space etc. You can apply the size to a module by adding a module class suffix. A module class suffix can be added on the modules config screen (see below). Just type in
X must be replaced with a number from 1-12. So a module with the suffix
span3 uses 3 of 12 columns or 25%. If you add four modules on the same position (all with the
span3 suffix) you will have four modules side by side. Of course any other combination is possible as soon as the total amount of columns needed is not higher than 12. For example one
span6 module followed by two
span3 modules will result in a row of three modules, the first use 50% width, the second and third 25% each.
Below you will see (just a few) possible layout combinations for a single module position:
To add a suffix to apply a certain width to a certain module click on
Extensions->Module Manager and select the module you want to equip with a suffix. The modules config screen will appear. Select the "Advanced Options" tab and enter the suffix to the "Module Class Suffix" input field. Save the changes.
What happens if you publish more modules than fit into the 12 columns grid? For example two modules with the
span6 suffix and a third one with
span12 as suffix? In this case the first two modules will appear in the first row and the third one starts a new row below. That normally will works fine but you will see a small gap in front of the first module in the second row. To avoid this also add the suffix
new-row behind the
span12 text. Its important to have at least one empty space between both words. So the full suffix for this sample will be
span12 new-row. You just need to add this extra suffix to the first module of the second, third, fourth etc. row.
Creating and publishing your own modules with your own custom content like images, texts, HTML etc. is very easy. Click on
extensions->module manager in your Joomla backend. The module manager will appear. Hit the "New" button at the top to create your own module. Select as type
Custom HTML if you don´t want to use a pre-made module but want to add your own content. The configuration screen of your new module will appear. give it a name, select the proper module positions and add your own content under the "Custom Output" tab. Save the changes and make sure the module is published. Thats it. Your new module with your own custom content will appear on your website. Make sure you publish it on a module position which is supported by your template. To check which position is supported by this template check -> Module Positions
This template comes with a build-in module slider script. It slides or fade from one module on position slider_modules to the next one. You don´t need to activate it. As soon as you publish more than one module on this position the script will start it´s work. All important options (slide speed, slide effect etc.) can be setup at the templates settings screen. See -> Configuration.
To recreate the look&feel of the demo sites slider follow the "CUSTOM MODULES" instructions on the Module Layout page. Create a new custom module and add the following HTML code to it: <div style="padding: 80px 0 0 0; background: #ff9c00 url('images/glare.png');">
<div class="col-md-6"><img class="img-responsive animated fadeInLeftBig" src="images/ipad.png" alt="ipad" /></div>
<div class="col-md-5 col-md-offset-1" style="margin-top: 80px;"><hr />
<h1>Think of me like Yoda</h1>
<p>But instead of being little and green I wear suits and I'm awesome. I'm your bro - I'm Broda! Here's the mini - cherry on top of the regular cherry on top of the sundae of awesomeness that is my life.</p>
<small>- Wise words by Barney Stinson</small><hr />
<p><a class="btn btn-lg btn-white-border" href="#"><i class="icon-desktop"> </i> Team up!</a> <a class="btn btn-lg btn-white-border" href="#"><i class="icon-cloud"> </i> Learn more</a></p>
Publish it on the slider_modules moduleposition.
<div style="padding: 80px 0 0 0; background: #ff9c00 url('images/glare.png');">
The drop- down function hides all submenu items as long as the user move its courser above the corresponding main menu item. Than it shows an extra menu below with all submenu items in it.
To activate the drop-down function of your main menu just add the menu class suffix
nav-dropdown to your menu module which is published on the module position main_nav. Thats it. To add a menu class suffix to a certain menu module click on
extensions->module manager and select your menu module from the list. The menu modules config screen will appear. Select the "Advanced Options" tab and enter the suffix into the "Menu Class Suffix" input field.
One important thing you have to check if no submenu items appear is the
Show Sub-menu Items option in your menu module configuration. It must be turned on to have a working drop down menu on all (sub)pages of your website. You find the option below the "Basic Option" tab on your menu modules setup screen. Click on
"extensions->module manager and select your (main) menu module from the list to access the config screen.
Modals are streamlined, but flexible, dialog prompts with the minimum required functionality. They provide content from a module and are hidden by default. They pop up if a certain link or button is clicked. The template comes with the positons modal1, modal2 etc. Place and publish a module on one of this position(s). To give your users the opportunity to see this module add the following HTML link code somewhere to your content:
<a href="#modal1" data-toggle="modal">Open modal</a>
That will open a pop up window with the modal1 module and its content along with a "close" button. Use:
for the modal2 module etc.
Instead of the plain "Open modal" text you can use an image, a list element, button or any other proper HTML element as long as you wrap the
<a href="#modal1" data-toggle="modal">...</a> link code around it.
Besides the templates itself we provide so called "Quickstart Packages" for most of them. Basically a Quickstart Package is a default Joomla installation BUT with the template files and templates demo site content in it. You have to install it like a normal Joomla installation (along with the "sample data" demo content) and you will get an exact copy of the templates demo site. What you have to do: