Joostrap Template Documentation

Transcription

1 Joostrap Template Documentation Version Incorporating Bootstrap v3 For Joomla v3.x.x (latest version) Table of Contents Table of Contents... 1 Zip Package Content's... 2 Template Only... 2 Full Package... 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 Custom Colours... 7 Miscellaneous Settings... 9 Wireframing CSS Custom Code... 13

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) 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. Joostrap Template Documentation - Page 2

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: 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: Please follow all instructions and step's that are presented to you. Note: Please help support this wonderful component, by buying a subscription at: Huge Congrats!!! The QuickStart is running on Joomla 3.x enjoy the awesomeness of this Joomla version! Joostrap Template Documentation - Page 3

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. Joostrap Template Documentation - Page 4

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 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. Joostrap Template Documentation - Page 5

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 You can set where the off-canvas menu slides from, as well as home and close icons. Joostrap Template Documentation - Page 6

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. Joostrap Template Documentation - Page 7

8 Joostrap Template Documentation - Page 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 Not for Universal Analytics see Custom Code tab. Joostrap Template Documentation - Page 9

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: 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. 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 how to edit LESS files! Joostrap Template Documentation - Page 10

11 Joostrap Template Documentation - Page 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. Joostrap Template Documentation - Page 12

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 - Page 13