Boomstrap Documentation

Introduction

Korporat is build on Boomstrap!. A super-leightweight template framework that makes it very simple to build complex, responsive layouts. The best way to get started is to use the quick start package.

Installation

Quickstart Package

The quickstart package is named Korporat_Quickstart_v1.0.zip. This contains all the settings as you would see on the demo site. A quickstart is basically a fully functional and customized Joomla! package containing module, choosen template and plugins with all the configurations and data in one place. The sample data in the quickstart package is also personalised according to the template and is much different to the sample data found in the default Joomla package. Once you setup the site way, you can eliminate the things you don't need by deleting articles, menu items and modules.

  1. Then Extract the zip package and transfer the content to your web server via FTP software, we recommend FileZilla.Now you need to set up the database for your Joomla installation.
  2. Go to your local or web- server and find PHPMyadmin. Some hosting provides its own method for creating databases. Login to your cPanel and look for "Databases" or "MySQL Database Wizard"
  3. Type in the database name you like for your MYSQL
  4. Create a user for the database
  5. In browser, type: www.yoursitename.com
  6. There is your fresh installer
  7. Choose your language click on Next
  8. Make sure all your server settings are green click on Next
  9. Joomla Licence click on Next
  10. Fill in the MYSQL database information you just created, host name, username and password and database name click on Next
  11. FTP Configuration Leave it as it is if you do not want to us FTP layer click on Next
  12. Type in your site name, email address and admin password to use in backend
  13. Important! Click on sample data click on Next
  14. Follow the massage: Completely remove the installation directory from your server
  15. Go to server and remove the installation file.
  16. Go to yoursitename and you are all set with a demo Joomla site.

Installing individual packages

Install Joomla by downloading from here http://www.joomla.org/ or by installing it from your cPanel Fantastico. After install, please have a look inside the folder called Korporat_parts and install every zip you find through Extension Manager > Upload & Install.

Also it would be recommended that you install a full clone install (quick start) in a temporary path, to see the contents of the articles, settings etc.

This method is a bit harder to set it up, but if it is what you prefer, go ahead. Once you have installed the zip files, you will need to install these various addons (use your experience, descretion to decide if you don't want to install a certain extension)

Tips

  • Enable Joomla Cache & JCHOptimize plugin before you go live. This will speed up the site considerably by gzipping and serving all CSS and Javascript assets.

Template Options

Boomstrap comes with a lot of options to tweak almost any aspect of your template. The first is the Module Positions.

Module Positions


You also have unlimited module positions. That's right. Unlimited. Here's how.

We've given you 9 sections to add your modules.

  • Drawer
  • Big Slider - You cant add modules. Its just a special position where you can put full width, responsive sliders above the menu.
  • Above Slider
  • Slider - A place where you can put your banners or sliders.
  • Below Slider
  • Above Content (just above the content and sidebars, known as maintop)
  • Above Content
  • Below Content
  • Below Content (just below the content and sidebars, known as mainbottom)
  • Above Footer
  • Footer

Each section can have as many rows as you want. For example, in your template settings, you have the Above Content position. All you need to do is type in your grid size for each column, separated by commas. Like so:

boomstrap-module-positions

You've just created one row in the drawer section, with three module positions, which will be drawer-row1-1, drawer-row1-2, drawer-row1-3. Just add modules in these positions and be on your way. Likewise, in the Below Slider area, you have 3 rows, with two columns in each. Just make sure each line adds up to 12, which is the number of columns Bootstrap's grid provides. You can create all the rows for your entire site in one template style. On pages which dont have modules in a certain row or position, that position will simply not be shown.

Positions Structure

These are how positions are laid out in Boomstrap. As explained above, each section can have multiple rows, divided into the grid you've set.

boomstrap-module-positions-structure

Boomstrap Layout Config

 

boomstrap-layout-config


Full Width Main Menu
Width of the Main Menu (below the slider).

Pin Sidebar 1
If the sidebar is pinned, it will follow the user when the user scrolls down the page. Not recommended if you have a lot of content in your sidebar, as it may prevent some of that content from being seen.

Pin Sidebar 2
If the sidebar is pinned, it will follow the user when the user scrolls down the page. Not recommended if you have a lot of content in your sidebar, as it may prevent some of that content from being seen.

Back to Top Button
Show a button at the bottom of the page to guide users back to the top of the page (not visible when the user is at the top of the page).

Back to Top Button Text
The text used for the back to top button. Only applicable if the button is enabled. Use '--' to switch off text.

Activate Slabtex
Loads the javascript for you to have big, bold and responsive headings.

Activate Curlify
Wraps the first word of Headings with a span tag, so you style them differently

Open Dropdowns on Hover
Open the navigational dropdowns on hover and not click

Menu to show in collapsed mode
The mega menu won't render as you wish in collapsed mode for many reasons. So select your main menu and this will be rendered in clean, traditional bootstrap style in collapsed mode i.e. less than 768px.

Select a menu item that you would like to be your 404 page
To create a custom 404 page, follow the following steps:

  1. Create a new article, and add in the contents of your 404 page.
  2. Create a menu item under the Menu called "Hidden Menu". If you don't have such a menu, create it.
  3. Choose this menu item from the dropdown. Now you have a 404 page that you can customize like any other Joomla page.

Boomstrap Technical Settings

 

boomstrap-technical-settings

 

Google Analytics Code
The Google Analytics tracking code for your website. Leave blank if you don't wish to track your website.

Remove MooTools
Remove the MooTools library and associated scripts from the site. Useful if you want to implement a completely jQuery-powered site. Not that this may cause some modules to encounter errors.

Run on LESS or CSS
You really don't want to run LESS on a production site. Use a tool like LESS.app to compile you LESS files to CSS.

Show Frontend Demo Panel
Shows a little demo panel in the frontend so you can test fonts.

Open external links in content area in new window
Forget target='_blank'. It really slows down development. This options turns on a super-tiny jquery plugin which automatically does the trick for you.

Site Logo (Brand)
The image to use as the logo for you site.

RSS URL
The URL for the RSS feed to be displayed on the site

DBY Slider Integration

Use the DBY Slider within your K2 Items.

You can display a responsive DBY Slider in the place of the main image in the K2 item page. Useful for portfolios and better than the restrictive and proprietary K2 Gallery module.

  1. Setup a DBY Slider module as per your taste. Make sure you choose the field it uses to load images from. It will search for images in that folder.
  2. Select the field that has the pictures of each item below as well.
  3. When you're creating your K2 items, if you are using a field called gallery for example, put the folder name under the '/images' folder where you have uploaded to images. If the field has the value 'superProject', the DBYSlider will load images from the '/images/superProject' folder.

boomstrap-dbyslider

Google Fonts

You can load Google Fonts into your Bootstrap template. You have the option to load two fonts for the Headings and Body text respectively.

boomstrap-google-fonts

Customize Page Titles

These settings dictate how the browser and search engines see the page titles. We've built in features from the Title Manager Joomla! plugin right into the template settings. Your front page can be "Welcome to Korporat, the super-flexible, super-easy template" And your inside pages can have the site name appended in the end, like "About Us | Korporat Inc". We've been building sites for many clients and this would greatly improve the way your pages are displayed on the search engines.

Screen Shot 2013-02-24 at 2.40.17 PM

Insert Site Name
Where to insert the site name. Defaults to "After Page Title".

Only show site name on home page
If enabled, only the site name will be used for the default menu item instead of the default title from menu or the active component. (You may want to choose 'Yes' here to prevent a repeat of the same name)

Title Separator
The character you are going to use to separate the page title from the site name. use {s} to denote a space.

Alternative Site Name
If necessary, rather than using the site name from your Global Configuration, use an alternative Site Name to append to your page titles

Home Page Title
This will be the full page title for the home page

Menu Setup

The main navigation bar has two module positions: main-menu & main-menu-right. And instance of RokNavMenu is added to each of these positions to achieve the desired effect.

If you create your own menu from scratch, create a new RokNavMenu, put them in the above positions and be sure to choose "Boomstrap!" as the theme from the module options options.

roknavmenu-options

Tip If you want to hide certain menu items in mobile (labeled no 2. in screenshot), we've provided with a module parameter to add in the css for selectors those items. This is useful in the case when you've included modules to be shown, and don't want to show these items on mobile devices.

Boomstrap's options are set to be responsive by default (No 1 in screenshots).

Options for Individual Menu Items

joomstrap-menu-item-options

When editing the Menu Item or creating a new one, look under "Joomstrap Menu Options" for further mega menu options. For each Menu Item in the menu, you can set various options like:

  1. Show a Module as its child
  2. Number of Columns to split the child items into
  3. Use Font-Awesome icons (you need to add the icon-someclass Font-Awesome class as in the screenshot)
  4. Give certain specific class names for the Menu Item to enable even further item-specific styling

Short Codes

Look under the /templates/boomstrap_korporat/html/com_rokcandy/dafault.ini file or under Components>RokCandy>Macros to see the macros that have already been setup. If you have used the quickstart, you can look at this article in the backend to see the use of shortcodes.

Styling Modules

You can add Font-Awesome icons and style the colors of modules using module class suffixes. Please visit this page for more info.

Alternate Module Layouts

We've provided additional layouts for certain modules. The best way to choose the different module layouts is to go under the "Advanced Options" in the module parameters and choose one of the layouts. The Latest news module has four different layouts we've provided as you can see in the screenshot below:

module-alternate-layouts

K2 Layouts

K2's layouts are configured at a category level. We've provided two category layouts which are "grid" and "blog". The "grid" layout is used in the "Portfolio Section One". It is responsive and is powered by David DeSandro's Masonry jQuery Plugin. The blog layout is used in the K2 Blog page.

k2-category-layout