Joostrap Template Documentation

(1)

Joostrap Template Documentation

Version 3.1.6+

Incorporating Bootstrap v3

For Joomla v3.x.x (latest version)

Zip Package Content's

Template Only

1. Joostrap Template Documentation (this PDF) 2. Template Specific Documentation (if any) 3. Template zip (for Joomla v.3.x.x)

Full Package

1. Joostrap Template Documentation (this PDF) 2. Template Specific Documentation (if any) 3. Template zip (for Joomla v.3.x.x)

4. Joostrap Extensions used in the Demo 5. QuickStart File

Template Emphasis

The emphasis of the Joostrap templates is to try to move away from using lots of Joomla

extensions and use the Joomla core and the components that come already installed in Bootstrap v3. This aid's in having less bloat & more speed when loading the website not only on desktops, but especially on smaller mobile devices.

Template Installation

NOTE: Our advice is to use the latest Joomla 3 version at all times !!!

To install the template onto an existing website based on Joomla! 3.x.x, please do the following: 1. Go to Extensions > Extensions Manager

2. In the "Upload Package File" field, please click on the "Browse" button to select the Joostrap template file zip file from your computer.

3. Choose the file – [TemplateName].zip and click on the "upload and install" button. 4. You will be informed of the successful installation of the template.

5. Go to Extensions > Template Manager, tick the newly installed template, then select it as the "default" template for your website.

(3)

QuickStart Installation

The quickstart gives you a complete replication of the template demo installation that is at the joostrap website. We use Akeeba kickstart to do this and is very reliable, fast and pretty easy. Please view the latest documentation at:

https://www.akeebabackup.com/documentation/akeeba-kickstart-documentation/using-kickstart.html

Create a Database

On your server you need to create a new MySQL database. If you do not know how to do this, please read the help files provided by your hosting company or ask your hosting company for help in creating a database for you.

When creating the MySQL database, please write down the following information: • Database Name

• Database Username • Database Password • Server Host Name

The above information will be required during the installation process.

Upload the QuickStart Files to your Server

On your computer, please copy the below files from the 'quickstart' folder and upload them to the root folder on your server:

• [TemplateName]-[version].jpa • kickstart.php • jquery.min.js • json2.min.js • en-GB.kickstart.ini Installation

After you have transferred all files correctly, you can begin the installation process by going to the below URL and following the installation instructions:

http://www.your-domain.com/kickstart.php

Please follow all instructions and step's that are presented to you.

Note: Please help support this wonderful component, by buying a subscription at: https://www.akeebabackup.com/products/akeeba-backup.html

Huge Congrats!!!

(4)

Template Options (parameters)

Template Colour Choice

This tab allows you to choose from 8 preset colour options … which provide broad based basic colour overrides across most elements in a template. For more detailed colour customisations please view the Custom Colours tab.

Logo Settings

To change the default logo, please click on the "select" button and upload your own logo to Joomla.

You also have the option to have your logo as a plain text title. You can also add optional description, which is displayed as small tagline after title.

The top & bottom margin options allow you to set the margins of logo from the top and bottom edge of header section.

(5)

Google Font Settings

Google Web Fonts

Use this switch to include Google Fonts or not.

Google Font Name

Choose the Google Font you want to use at http://www.google.com/fonts Add the name of the font & the weight.

CSS Selectors

Add the CSS classes that you want to add the Google Font to on the template.

(6)

Template Layout Settings

Left Sidebar (Width)

You can set the number of columns that will be used by the left sidebar. You have the choice of 2,3,4 or 5 columns, from the 12 columns used by Bootstrap in the template.

Right Sidebar (Width)

You can set the number of columns that will be used by the right sidebar. You have the choice of 2,3,4 or 5 columns, from the 12 columns used by Bootstrap in the template.

Body Class

You can set a selection class to the output of the template body tag, enabling specific customization across multiple template instances on complex website installations.

Menu Module

Please use the Joomla core menu module and place it in the templates 'menu' module position. For the menu to work as seen in the demo, you must remove any 'Menu Class Suffix' that is in the modules advanced tab and we recommend having “show sub-menu items” to yes.

Off Canvass Mobile Menu

Above, you added a menu to the 'menu' position ...this caters for both the desktop navigation & the off canvass navigation, utilising the same module – nothing extra to do J

Additionally, there are 2 extra module positions in the off-canvas menu to help enhance you mobile users experience – the two positions are: “mob-menu-above” and “mob-menu-below”

(7)

Custom Colours

Colour Enabled

When switching this parameter to 'Yes', you will see that this colour option expands and presents you with the colour options.

Colour Code

When clicking on this option a colour picker will appear, where you can choose your required colour

Colour CSS Class

You can add as many CSS classes into this area as you want – but they must be separated by commas.

i.e.

h1, h2, a, header-title Colour CSS Property

This is where you will assign the above classes property.

Each property must have the {color} attribute assigned to each of the properties. i.e.

color: {color};

background-color: {color}; border-top: 3px solid {color};

We have supplied the opportunity to have 5 different colour's, which we think is more than enough to give your template an infinite colour scheme/range.

(8)

(9)

Miscellaneous Settings

Meta tag output

Easily change the standard Joomla meta tag output (that appears in your HTML source) and have your own.

Show FrontPage Articles

Choose whether to show articles on your homepage or not, when using the Featured Articles menu type.

Favicon

With this parameter, you can upload your own custom favicon.ico image file.

Apple Touch Icons

Please read instructions/guide for implementation best practice (constantly changes)

Scroll to Top - Enabled

Enable or disable the 'Scroll to Top' link that appears in the bottom right hand corner of the site, when the page is scrolled down.

Copyright Text - Enabled

Switch to show the copyright text below the footer or not.

Copyright Text

When this option is enabled, copyright information is displayed in the footer section of template. If the Copyright Text field is empty, it will display the site name given in Joomla global configuration, and current year. HTML is allowed in this field (as seen below).

Basic Google Analytics

Enable this option to add your basic Google Analytics tracking code – not for Universal Analytics.

OLD Style GA Tracking Code

In GA Tracking Code field, please add your custom tracking code – add the tracking code in the following format: UA-12345678-1. Not for Universal Analytics – see Custom Code tab.

(10)

FontAwesome Icons

Allowing this option, pulls in the relevant CSS so that you can make use of the FontAwesome icons. Use the following code for the icons

<i class="fa fa-cogs fa-3x"></i>

Please see the FontAwesome website for all of the icons you can use and the relevant classes to use: http://fontawesome.io/icons

Load jQuery

You are advised to leave this set to 'Load it locally', but it can be changed for certain reasons – like conflicts with an extension that is 'forcing' their version of jQuery.

Load Bootstrap

You are advised to leave this set to 'Load it locally', but it can be changed for certain reasons – like conflicts with an extension that is 'forcing' their version of Bootstrap.

Allow to compile LESS

If you are making larges amounts of changes to customise the template you can use this feature to recompile your LESS files.

Add '/?compile=1' to the end of your frontend URL and refreshing your website. i.e. http://www.your-domain.com/?compile=1

After refreshing the frontend with the above URL, please be sure to turn this off in the template parameters.

Please use with care or seek advice if you are not sure what you are doing and do not know

(11)

(12)

Wireframing CSS

This is something that may help when doping wireframes. It will turn off a lot of colours and make everything grey scale.

(13)

Custom Code

Custom CSS

If enabled you can add small portions of css code, which would be displayed after the other template css files. This is useful for testing purposes or if you just have a few changes.

Note: custom.css file should be used for website customisation

If you would like to add your own custom css code or want to considerably customize the template design, you will find a "custom.css" file especially for this purpose in the templates css folder. This file is loaded last in the template, so it can override all default template styling. It will not load if it is empty – it has to be at least 5 bytes in size to load it (about 5-10 characters).

Analytics Tracking Code Integrations – Advanced Analytics

To enable the integration of advanced analytics and tracking codes, we have made available two files in to which you can place your complete scripts, as supplied by the analytics applications. These files are implemented to allow you the maximum flexibility and power, but, with that comes responsibility ... it is your responsibility to ensure the scripts are compatible with Joomla and the other scripts used on the site. We supply the means to use these powerful tracking tools easily in the templates ... but we do not support these scripts - that is up to the provider of such.

There two files provided are:

1. my-template/js/analytics-head.js - inserts the js code inline just before the closing head tag - good for asynchronous scripts

2. my-template/js/analytics-bottom.js - inserts the js code inline just before the closing body tag - good for scripts you can load outside the head

The scripts can be accessed and updated via the Joomla administrator > Extensions > Template Manager > Templates > templates Details and Files

You can also access the files directly via FTP or the file manager or similar program in your hosting control panel.

Remember: Follow the instruction from the analytics provider and place the provided script in the right file location, to suit its operation.

Joostrap Template Documentation