Joomla! template Blendvision v 1.0 Customization Manual

Transcription

1 Joomla! template Blendvision v 1.0 Customization Manual Blendvision template requires Helix II system plugin installed and enabled Download from: Don t forget to install the sample data with the quick start package Open a new ticket: ( 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 - 1

2 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

3 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

4 : 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

5 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

6 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

7 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

8 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

9 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

10 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

11 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: 11

12 : 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

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

14 : 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

15 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

16 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

17 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

18 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

19 19

20 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

21 21

22 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

23 23

24 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

25 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

26 26

27 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

28 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

29 29

30 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

31 31

32 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

33 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 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

34 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 template- Go 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

35 to configure the portfolio you need to go to Extensions/modules click on its name on RokSprocket module 35

36 36

37 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

38 38

39 you could set the visualization options here 39

40 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

41 Manage the blog For managing the blog you have to install and configure K2 component you can find tutorials, video and documentation here Manage the forum For managing you have to install and configure Kunena component you can find tutorials, faq and wiki here 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. 41

42 Manage the random quote Install JU NewsTicker module Manage the purchase button Install and insert the button on Custom HTML module 42