Joomla! template Blendvision v 1.0
Customization Manual
Blendvision template requires Helix II system plugin installed and enabled
Download from: http://www.joomshaper.com/joomla-templates/helix-ii
Don’t forget to install the sample data with the quick start package
Open a new ticket: http://zerokod.com/tickets/
( Please Pay attention: you have to delete helix system plugin reinstall and enable everytime you update joomla to
the latest version as it is explain in this VIDEOGUIDE:
How to solve upgrade issue http://youtu.be/o9yHAGcWdN8)
1 This documentation is release under Creative Commons Attribution-‐Non-‐Commercial-‐Share Copyright © 2014 http://www.zerokod.com Table of Contents
Part 1
Layout builder
Change the layout columns width
Loading module as menu items
Setting up columns
Grouping menu items
Adding menu icons
Getting started with megamenu
2 This documentation is release under Creative Commons Attribution-‐Non-‐Commercial-‐Share Copyright © 2014 http://www.zerokod.com Basic settings
Part 2
Manage Portfolio
Manage homepage contents
Manage quick contact
Manage contacts
Manage photo gallery
Manage accordion
Manage the blog
Manage the forum
Manage the top panel
Manage revolution slideshow
Manage the random quote
Manage the purchase button
3 This documentation is release under Creative Commons Attribution-‐Non-‐Commercial-‐Share Copyright © 2014 http://www.zerokod.com : Layout Builder :
Theme Customization would have no boundaries! Layout Builder is one of the unique features introduced in Helix – II which
allows anyone to customize the existing theme in any shape or dimensions without having any programming language!
In the layout builder we used 12 columns. We called the columns as span. This means in our layout builder we used 12 span.
This 12 span covered the whole width of our layout. If Users wants to create 4 columns then have to use span3 for every
column. Also if anyone wants to create 3 columns then have use span4 for every column.
4 This documentation is release under Creative Commons Attribution-‐Non-‐Commercial-‐Share Copyright © 2014 http://www.zerokod.com Header Section:
In header section we used 03 columns. The columns are:
1. logo
2. menu
3. search
For logo, menu & search we used span 2, span 7 & span 3.
There are some more facilities we provide in this layout builder for the users. Check the screenshot given bellow:
The first option is here is the drag & drop option. By using this option user will be able to move the section up or down.
5 This documentation is release under Creative Commons Attribution-‐Non-‐Commercial-‐Share Copyright © 2014 http://www.zerokod.com Second one is the row settings option. Here user will be able to select the row’s name & class if he wants. Also users will be
able to fix the section for where to visible or where to hidden.
6 This documentation is release under Creative Commons Attribution-‐Non-‐Commercial-‐Share Copyright © 2014 http://www.zerokod.com The 3rd option provides users to add new row.
The 4th option provides users to add new column.
And the last option is the remove option. If users want delete the row then just click the cross button.
7 This documentation is release under Creative Commons Attribution-‐Non-‐Commercial-‐Share Copyright © 2014 http://www.zerokod.com Layout Settings For Menu:
In layout settings there is option for fixed the type by Module, Message or Components. Here is another option for select the
position where to publish. From here users also able to select the span. This settings also contain Offset, Style or Custom
class settings.
Feature Section:
In the feature section we used the whole span. There is option available for to create more column and row.
8 This documentation is release under Creative Commons Attribution-‐Non-‐Commercial-‐Share Copyright © 2014 http://www.zerokod.com Users Section:
Here we 04 columns user 1, user 2, user 3 & user 4. Every column contains span3.
Main Body Section:
In the main body section we used 03 columns. And the columns are
1. left
2. Component Area
3. right
The left & right contain span3 and the component area contain span6.
9 This documentation is release under Creative Commons Attribution-‐Non-‐Commercial-‐Share Copyright © 2014 http://www.zerokod.com Breadcrumb Section:
This section had only one column and it contain span12.
Bottom Section:
We select the bottom area by 4 columns. Every column contains same span and the span is span 4.
Footer Section:
The footer section of this layout has 2 columns. First column is footer1 and contain span 8 and the other column footer2
contain span 4.
: Less :
10 This documentation is release under Creative Commons Attribution-‐Non-‐Commercial-‐Share Copyright © 2014 http://www.zerokod.com Helix comes with built-in LESS CSS compilation. Now you can reduce over requests to browsers while making CSS
development and it makes your whole website more powerful and speedier than ever.
In our new framework helix-ii we used less. Less will be a new era for the developer’s. By using less user will be able to save
their time. It makes works 10 times faster more than before. People who want to code less and want the output more than
less is for them. Less makes the code easier, flexible & more comfortable. We have also the option to turn of the less.
Form the advanced option users will be able to disable the less option. But if you don’t disable the less option then you won’t
be able to do normal Css. So for doing normal Css it’s must be necessary to disable the less from the advanced option.
For more information about less please check the url: http://lesscss.org/
11 This documentation is release under Creative Commons Attribution-‐Non-‐Commercial-‐Share Copyright © 2014 http://www.zerokod.com : Fonts:
Helix-ii provides users the opportunity to play with the fonts.
In helix-ii users will be able to choose body, header & other font from the administrator panel. In body font just select the
desire font & its weight. Here is another option great available is the selectors. Here users select the elements of the body
that contain the selected font. Also user will be able to choose other tags or elements like div or class. Just do the same for
header & others font option.
12 This documentation is release under Creative Commons Attribution-‐Non-‐Commercial-‐Share Copyright © 2014 http://www.zerokod.com : How to create a customized preset style:
In Blendvision we provide ten (10) preset styles. Here is another option called preset settings. From preset settings users
will be able to change the header, background or text color. To create custom preset style at first go to this directory:
templates\blendvision\images\presets. Here you found ten (10) folders named preset1, preset2 & preset3… Just copy
one of those folder in the same directory and rename it by preset11. Then find the templateDetails XML file. You will find
the XML file from this path: templates\blendvision. Copy and paste under preset10:
Change field name preset10_header to preset11_header. Same to others field name.
After doing all of this procedure now you will found another preset styles named preset11 in your administrator panel.
13 This documentation is release under Creative Commons Attribution-‐Non-‐Commercial-‐Share Copyright © 2014 http://www.zerokod.com : How to create customized preset settings:
In preset settings we provide the opportunity to change the header, background, text & link color. If you want to add more
option in the settings like Footer color then open the Xml and create another line like the highlighted line:
After editing the XML file open the index php file. You will find the index.php file in this path:
templates\blendvision
Then open the index.php file and create a new line like the highlighted line:
14 This documentation is release under Creative Commons Attribution-‐Non-‐Commercial-‐Share Copyright © 2014 http://www.zerokod.com After completing the line then saves the file and now you will found new option in your preset settings.
Change the layout columns width
Helix Framework comes with three layout variations and we hope that the variations will 100% fulfill your needs.
However, in this tutorial we will learn how to change the layout columns width. As you see in the below image that first
parameter indicating the type of layout. Set the type of default layout according to your needs.
Main body width: Set the Main Body width in pixel, in default the width is 1070px.
Left Column Width: This parameter is use to control the left column width of Helix based template. Set the width in
percentage (%), eg. 22%.
Right Column Width: This parameter is use to control the right column width of Helix based template. Set the width in
percentage (%), eg. 22%.
15 This documentation is release under Creative Commons Attribution-‐Non-‐Commercial-‐Share Copyright © 2014 http://www.zerokod.com Inset1 Width: This parameter is use to control the Inset1 width of Helix based template. Set the width in percentage (%),
eg. 20%.
Inset2 Width: This parameter is use to control the Inset2 width of Helix based template. Set the width in percentage (%),
eg.
20%
16 This documentation is release under Creative Commons Attribution-‐Non-‐Commercial-‐Share Copyright © 2014 http://www.zerokod.com Loading module as menu items
This section shows the process of loading different types of modules as menu items. You can normally load any type of
module you want as custom html or regular Joomla! modules. You can also load unique module positions you have setup
for your modules, and positions that are not defined in your template.
Just to show an example, we are going to load the default Joomla! Login Module as a menu item. First go to Menu Item Manager of the Main Menu. Now click on the New button to add a new menu item, then proceed through the following
steps:
Step 1: First of all you need to select Menu item type. In order to do so, click on select and then select suitable menu item
type. In this example we use menu type as Login Form.
Step 2: type in a Title for this menu item.
Step 3: click the Helix Mega Menu Options tab to open mega menu parameters;
Step 4: select Submenu Content type as module.
17 This documentation is release under Creative Commons Attribution-‐Non-‐Commercial-‐Share Copyright © 2014 http://www.zerokod.com Step 5: scroll down and select Login, this is the module we are going to load.
Step 6: click the Save button and go to frontend, refresh the page, and hover your mouse over the new menu item.
18 This documentation is release under Creative Commons Attribution-‐Non-‐Commercial-‐Share Copyright © 2014 http://www.zerokod.com 19 This documentation is release under Creative Commons Attribution-‐Non-‐Commercial-‐Share Copyright © 2014 http://www.zerokod.com Setting up columns
We are highly privileged to present to you the Features menu item structure. Take a closer look at the menu structure on
the left side and the frontend view on the right side; it gives you options to edit some more menu parameters:
20 This documentation is release under Creative Commons Attribution-‐Non-‐Commercial-‐Share Copyright © 2014 http://www.zerokod.com 21 This documentation is release under Creative Commons Attribution-‐Non-‐Commercial-‐Share Copyright © 2014 http://www.zerokod.com The columns, as marked, give options for changing Explore menu item parameters to show up its child menu items in the
frontend properly. You can customize it by clicking this menu:
22 This documentation is release under Creative Commons Attribution-‐Non-‐Commercial-‐Share Copyright © 2014 http://www.zerokod.com 23 This documentation is release under Creative Commons Attribution-‐Non-‐Commercial-‐Share Copyright © 2014 http://www.zerokod.com Step 1 - click the "Helix Mega Menu Options" tab to edit the megamenu parameters
Step 2 - set the column number at 3, it applies to each menu item: Features, Menu Showcase and Custom HTML
Step 3 – customize the width for the entire child content area
Step 4 – customize the width for each column to make it look more appealing
Click the Save button, go to frontend, refresh the page and see the changes
24 This documentation is release under Creative Commons Attribution-‐Non-‐Commercial-‐Share Copyright © 2014 http://www.zerokod.com Grouping menu items
Menu items will have no Mega Menu parameters if it is the first time you are enabling Mega Menu. Therefore it will look
similar to a regular Moo Menu:
In the image given above, you can see the Features menu item showing four child menu items:
• Typography
• Module Positions,
• Module Variations,
• Error Page
You have to edit each items to make it appear along with its child item; thus the contents of parent and child menu items
will show up. You have to click the Features menu item to do it.
25 This documentation is release under Creative Commons Attribution-‐Non-‐Commercial-‐Share Copyright © 2014 http://www.zerokod.com 26 This documentation is release under Creative Commons Attribution-‐Non-‐Commercial-‐Share Copyright © 2014 http://www.zerokod.com As the image given above shows- just selecting Yes for the Group option will group the Freatures menu item with its child
menu items into a compact column to link with the parent menu item Features option appears at the top of the first
column of the main menu item Joomla! Stuff. Now you can do the same thing for the other two parent menu items,i.e.
Menu Menu Showcase and Custom HTML.
Adding menu icons
If you want to add icons to your menu, you first have to upload your favorite icons to the your_site_root/images (images/stories for joomla ) folder.
Please note that the icons must not exceed 16x16 pixels; it is a MUST if you want to avoid layout breaks. Advanced users
can make it happen by customizing menu style classes.
In the next step, from the administration option of your website, navigate to Menus - Main Menu, and then click on any
menu item to add suitable icon for it.
Step 1 - For Joomla 1.5 click the Parameters (System) tab and Joomla 1.6 click on Link Type Options tab.
Step 2 - For Joomla 1.5, select your desired icon from the select drop-down box and for Joomla 1.6 browse and select a
Link Image.
Step 3- click the Save button to apply these changes.
27 This documentation is release under Creative Commons Attribution-‐Non-‐Commercial-‐Share Copyright © 2014 http://www.zerokod.com Getting started with megamenu
This tutorial is a step-by-step guide to lead you through the settings of megamenu.
First of all set the Menu Type as Megamenu and select the menu module that you want to show as your horizontal
navigation.
Now have a look at the menu tree that we are are going to manipultate.
28 This documentation is release under Creative Commons Attribution-‐Non-‐Commercial-‐Share Copyright © 2014 http://www.zerokod.com 29 This documentation is release under Creative Commons Attribution-‐Non-‐Commercial-‐Share Copyright © 2014 http://www.zerokod.com Basic settings
Advanced Menu System includes Mega menu, Dropline Menu, Split Menu and MooMenu using which you can design such
a sophisticated website that will leave the browsers stunned.
To set your desire menu type goto Extensions-‐>Template Manager. Now click on a Helix framework based template and
then click on Menu tab.
30 This documentation is release under Creative Commons Attribution-‐Non-‐Commercial-‐Share Copyright © 2014 http://www.zerokod.com 31 This documentation is release under Creative Commons Attribution-‐Non-‐Commercial-‐Share Copyright © 2014 http://www.zerokod.com Here, you'll see all options for Helix menu systems. At first select the menu that you want to show your main navigation.
Then select menu type from available 4 types if menu.
Drop Down Column Width
Here you can set the width of the columns in the dropdown menu in pixels. When you set it to e.g. 200 and you set your
dropdown menu to have three columns, the dropdown menu will be 600 px wide. Individual column width of dropdown
menu can be changed via helix plugin.
Show Menu Image
If you want to show menu item image then set the option as yes.
32 This documentation is release under Creative Commons Attribution-‐Non-‐Commercial-‐Share Copyright © 2014 http://www.zerokod.com Animation Type
Select the type of animation for the dropdown menu. You can set animation as slide, fade or no effect.
Duration
Set the duration in ms for the menu dropdown, eg. 400.
Transition
Select mootools transition for the menu animation.
Initial X and Y Offset
Set the X-Offset and Y-Offset of the first level drop-down menu in pixel.
Subsequent X and Y Offset
Set the X-Offset and Y-Offset of the second or higher level drop-down menu in pixel.
33 This documentation is release under Creative Commons Attribution-‐Non-‐Commercial-‐Share Copyright © 2014 http://www.zerokod.com Manage Portfolio
For managing portfolio you have to configure RokSprocket Module as mosaic
If you haven’t installed the quick launch pack you have to install it
Here is the tutorial that will direct you to step by step installation process of joomla templateGo to your Joomla administration and click on extensions then click on extension manager option which will lead you
through a dialogue box for browsing the template only package from your computer.
Click on Browse button and select the template bundle archive you downloaded earlier. Finally, click on upload & install.
34 This documentation is release under Creative Commons Attribution-‐Non-‐Commercial-‐Share Copyright © 2014 http://www.zerokod.com to configure the portfolio
you need to go to Extensions/modules click on its name on RokSprocket module
35 This documentation is release under Creative Commons Attribution-‐Non-‐Commercial-‐Share Copyright © 2014 http://www.zerokod.com 36 This documentation is release under Creative Commons Attribution-‐Non-‐Commercial-‐Share Copyright © 2014 http://www.zerokod.com set RokSprocket as MOSAIC
after that you have to place it in position content1,
for loading the portfolio content you have to set the provider and the articles filter from this form
37 This documentation is release under Creative Commons Attribution-‐Non-‐Commercial-‐Share Copyright © 2014 http://www.zerokod.com 38 This documentation is release under Creative Commons Attribution-‐Non-‐Commercial-‐Share Copyright © 2014 http://www.zerokod.com you could set the visualization options here
39 This documentation is release under Creative Commons Attribution-‐Non-‐Commercial-‐Share Copyright © 2014 http://www.zerokod.com Manage homepage contents
To save the default homepage configuration you have to
Install BT Content Slider module and place on user-‐top position Install RokSprocket module as MOSAIC as explained above
Install News Show SP2 module and place it on utility1 position Install SP Accordion module and place it on utility2 position Install Images Crawler module and place it on content8 position Install JU NewsTicker module and place on user-‐7 position
Install and insert the button on Custom HTML module and place on user-‐8 position
Manage photo gallery
See Manage Portfolio if the RokSprocket module as MOSAIC is already installed duplicate it and configure as explained
40 This documentation is release under Creative Commons Attribution-‐Non-‐Commercial-‐Share Copyright © 2014 http://www.zerokod.com Manage the blog
For managing the blog you have to install and configure K2 component you can find tutorials, video and documentation
here
http://getk2.org/documentation
Manage the forum
For managing you have to install and configure Kunena component you can find tutorials, faq and wiki here
http://www.kunena.org/docs/Main_Page
Manage the top panel
Just place the modules you want to see in the top panel on panel 1 and panel 2 positions
Manage revolution slideshow
For managing the revolution slideshow you have to install the component and configure it s explain in this webpage
where you’ll find instruction,tutorial, video .
http://unitecms.net/joomla-extensions/unite-revolution-slider-responsive/unite-revolution-slider-instructions
41 This documentation is release under Creative Commons Attribution-‐Non-‐Commercial-‐Share Copyright © 2014 http://www.zerokod.com Manage the random quote
Install JU NewsTicker module
Manage the purchase button
Install and insert the button on Custom HTML module
42 This documentation is release under Creative Commons Attribution-‐Non-‐Commercial-‐Share Copyright © 2014 http://www.zerokod.com