Joostrap Template · PDF fileJoostrap Template Documentation Updated 30 September 2014 Incorporating Bootstrap v3 For Joomla v3.x.x (latest version) Table of Contents ZIPPACKAGE$CONTENT'S$

Joostrap Template Documentation

Updated 30 September 2014

Incorporating Bootstrap v3

For Joomla v3.x.x (latest version)

Table of Contents ZIP PACKAGE CONTENT'S ....................................................................................................................................... 2 TEMPLATE ONLY ............................................................................................................................................................................. 2 FULL PACKAGE (QUICKSTART) .................................................................................................................................................... 2

TEMPLATE EMPHASIS ............................................................................................................................................. 2

TEMPLATE INSTALLATION .................................................................................................................................... 2

QUICKSTART INSTALLATION ................................................................................................................................ 3

TEMPLATE OPTIONS (PARAMETERS) ................................................................................................................ 4 TEMPLATE COLOUR CHOICE .......................................................................................................................................................... 4 LOGO SETTINGS ................................................................................................................................................................................ 4 GOOGLE FONT SETTINGS ................................................................................................................................................................ 5 TEMPLATE LAYOUT SETTINGS ...................................................................................................................................................... 6 MENU MODULE ................................................................................................................................................................................ 6 OFF CANVASS MOBILE MENU ....................................................................................................................................................... 6 ADDING ICONS TO MENU ITEMS ................................................................................................................................................... 7 CUSTOM COLOURS ........................................................................................................................................................................... 8 MISCELLANEOUS SETTINGS ......................................................................................................................................................... 10 CUSTOM CODE ................................................................................................................................................................................ 12 SOCIAL ICONS ................................................................................................................................................................................. 13 MENUS ASSIGNMENT .................................................................................................................................................................... 13

Joostrap Template Documentation -‐ Page 2

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)

4. May include some other resources / extensions.

Full Package (QuickStart) 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.


QuickStart Installation

The quickstart gives you a complete replication of the template demo installation that is at the joostrap website. The quickstart download will be marked specifically as a QUICKSTART download. 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!!! The QuickStart is running on Joomla 3.x – enjoy the awesomeness of this Joomla version!


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.

There is a “navbar-brand” module area in the template which allows you to load a custom-html module into the logo / branding module position. This allows you to completely customize the logo area for your site. If you load a module into this module area, the other logo settings are over-ridden and only the module will show.


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

CSS Selectors

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


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

There’s also other instructions to help you easily make your menu’s even better for your users !!


Adding Icons to Menu Items You Can Now Use FontAwesome and GlyphIcons for a Sexier Menu !!!

We have implemented a nice method to enable the easy usage of FontAwesome Icons and GlyphIcons in your default Joomla menus. GlyphIcons are always available in Boostrap by default … for the FontAwesome Icons to work you need to ensure you have not turned off loading FontAwesome from the Joostrap template admin parameters. To set an icon for a menu item: -‐ Locate the menu in your Joomla administrator Menus area. -‐ Choose to edit the menu by clicking on it or selecting it and clicking edit. -‐ On this first page you will some options on the right of the screen, with one of the fields being [Note]. -‐ Enter the FontAwesome class for the icon you want to use into the Note field; such as 'fa fa-‐home' for your home page menu item. Press save. For GlyphIcon: -‐ it is exactly the same, except use GlyphIocn classes into the Note field; such as 'glyphicon glyphicon-‐home' for your home page menu item. Press save. -‐ Do not mix the icons on the same menu items … they don’t really play nicely together. That's it ... you should now have a nice custom icon on your menu item -‐ rinse and repeat this process for any other menu items you'd like to pretty up with an icon. It works on any type of menu item that has a Note field, including sub-‐menu items :) An Extra bonuc with this functionality is that this will work with Glyhpicons as well ... as long as you have the Glyphicons font loaded, which is default in Joomla!.


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.



Miscellaneous Settings Meta tag output

Easily change the standard Joomla meta-generator tag output (that appears in your HTML source).

Show FrontPage Articles

Show featured articles on 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.

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.

Also have the ability to have custom text, custom icon and the text is a translatable string.

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

Some extra functions are available for you in the additional fields here – read tooltips for guide.

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

We HIGHLY recommend leaving this on, as we do use it throughout the template UI.

Load jQuery and Load Bootstrap

You are advised to leave this set to 'Load it locally' during development. When your site goes live, it is highly recommended to have this setting to load from the CDN

Automagically Update Bootstrap Classes

This function updates Bootstrap classes (& a couple of other bits) to the latest stable and supported release to optimize stability, layouts and consistency. It does control layouts in the template, so turning it off is not normally a good thing.



Custom Code Customising and Optimising Your Template

There’s a heap if functionality and features available on this tab … check the latest version by opening this tab in your template admin and check all the goodies ;)


Social Icons Auto-add Social Account Icons

Back by popular demand, we have the “social” module position loading easy-peasy links to your social accounts.

Put the full URL to your social accounts in the fields next to each type of social account and ensure the option is turned on at the top for it to work.

Tip: enter your url without the http: or https: at the start. When doing links like this it is usually best to enter the url like //www.twitter.com/my-name

Menus Assignment This is the default Joomla functionality to assign you template style to particular menu items.

If you assign the template style to a menu item here, it will override the default template for that item. If the template style is assigned as default, you can leave this tab pretty much alone.

For a more detailed look at template assignment, please view: http://docs.joomla.org/J3.x:Switching_templates

Documents

Joostrap Template · PDF fileJoostrap Template Documentation Updated 30 September 2014 Incorporating Bootstrap v3 For Joomla v3.x.x (latest version) Table of Contents ZIPPACKAGE$CONTENT'S$