Introduction


Version 1.0.4 released Mar 16, 2015

Thank you so much for interesting in responsive joomla template ZT Cramos. Now we will show you how to install and configure the ZT Cramos template.

Help & Support


References


You may find these sites useful while installing and configuring your Joomla site!:

Joomla installation


Joomla help


Online Joomla guide

There are many tutorials, acticles and forums to help you learn how to use this Joomla template and its features. This section provides helpful links to instructions on commonly used this Joomla template features, but you can learn even more by exploring these resources:

ZT Cramos is not only a friendly interface, but also an impressive and beautyful design. So, It will surely meet the highest of your business objectives. With this user guide, we hope you will know how to install & use this template daily to support your business activities effectively.

If you are unable to find answers to your questions, please feel free to post them in our HelpDesk, or contact to us. We’d be glad to help you. Once again thank you so much for using our company’s product.

Zootemplate policy


ZooTemplate hereby grants you a revocable, non-transferable and non-exclusive license to use the web extensions and other products sold through our web site by ZooTemplate (the “products”) in accordance with these Terms of Use (the “license”) issued by ZooTemplate.

Limited Usage Granted


You have the right to use the ZooTemplate extensions on as many concurrent sites as your entitlements provide for. After your membership expires, you may continue to use the extensions your entitlements allow for, so the extensions are not time-limited. The Developer level clubs grants unlimited implementations of ZooTemplate extensions as long as the usage complies with the rest of the Terms & Conditions.

Ownership


You may not claim intellectual or exclusive ownership to any of our products, modified or unmodified. All products are property of ZooTemplate.com. Our products are provided “as is” without warranty of any kind, either expressed or implied. In no event shall our juridical person be liable for any damages including, but not limited to, direct, indirect, special, incidental or consequential damages or other losses arising out of the use of or inability to use our products.

Refund Policy


Since ZooTemplate is offering non-tangible irrevocable goods we can offer direct refunds if your account has not been logged-into yet. In this case the refund will be provided without any question. ZooTemplate also will offer a full or partial refund within 15 (fifteen) business days starting from the moment when the member make the payment. In this case ZooTemplate has the right to ask questions for the refund and also we have the right to NOT offer the refund if we see reasonable. The above notice, also, applies to the license fee and all our Sign Up Plans. Please Contact Us if you need further information.

Delivery


After we have successfully received your payment, your membership information will be emailed to the address that you have provided during the sign up process. It normally happened within minutes. If you do not receive this information in 24 hours from you completed sign up process please contact us support(at)ZooTemplate(dot)com. With this information you can access the member area section to download our products and access our Forums.

Unauthorized Use


You may not place any non-GPL portions of our products, modified or unmodified, on a diskette, CD, website or any other medium and offer them for redistribution or resale of any kind without prior written consent from ZooTemplate. Please Contact Us if you require more clarification.

Modifications


You are authorized to make any necessary modification(s) to our products to fit your purposes. You may not however redistribute or release non-GPL portions of the templates as GPL or otherwise. You may not remove or change the ZooTemplate copyright information in the header of the xml descriptor file for all products. You may however remove our copyright from the footer of the templates if needed. No use of our trademarks is granted under this Agreement. Please read the FAQ section regarding this if you have further questions. Porting non-GPL portions of our templates to other platforms and content management systems and redistributing as GPL or otherwise is also strictly prohibited. Please Contact Us if you have any requirements that are not covered by these terms.

Warranty and Support


ZooTemplate offers these templates and designs ‘as is’, with no implied meaning that they will function exactly as you wish or with all 3rd party extensions/products. Further, we offer no support via email or otherwise for installation, customization, administration of Joomla!CMS itself. Private customer forums are available at our Forums. ZooTemplate.com does not commit to monitor these forums, but we reserve the right to respond and answer questions. ZooTemplate does not warranty or guarantee these templates in any manner. We cannot guarantee they will function with all 3rd party extensions/products or web browsers. Browser compatibility should be tested against the demonstration templates on the demo server. Please ensure that the browsers you use will work with the templates as we can not guarantee that ZooTemplate templates will work with all browser combinations.

More infomation please refer to http://www.zootemplate.com/legal/terms-of-use.

Third-party extensions


This template may not be compatible with some third-party extensions. It’s impossible for Joomla template authors to make the template compatible by default with all existing extensions because there are thousands of available Joomla extensions. Only the “default” Joomla default is compatible with all third-party extensions, because all extensions are designed to work with it. But authors of the extension should provide detailed instruction about how to integrate the extension with custom templates, since nobody really uses “default” Joomla template, everybody uses custom template.

Generally all extensions can work with all templates but they sometimes have to be integrated manually. The same applies for third party scripts or extensions you may add that can cause conflicts with our Joomla template. In such cases you need to customize the template and merge two conflicting template files into one template file.

Support


Unfortunately third-party extensions are beyond the scope of our support, please contact the author of the extension if needed. Author of the extension should provide detailed instructions about how to integrate the extension with any custom Joomla template.

Installation


There are 2 methods of installing the ZT Cramos:

Quickstart installation


If you’ve just started building your Joomla site from the scratch, we recommend following Quick start guide to install the entire site comes with sample data.

Separate Template Installation


To install ZT Cramos you only need to take a few quick steps:

Package Browser


  • In Joomla administration go to menu Extensions > Extension Manager > then select Browse button and localte ZT Cramos files.

ZT Cramos Installation


You have 2 options A or B to install the ZT Cramos:

  • A. Option 1:

    Step 1: Install plg_system_zo2_vX.Y.Z.zip. After that click on button Upload &Install.

    Step 2. Install template_zo2_cramos_vX.Y.Z.zip. After that click on button Upload &Install.

Note: X.Y.Z is template/extension version you have

  • B. Option 2:

    Install package_zo2_cramos_vX.Y.Z.zip. After that click on button Upload &Install.

install_temp

ZT Cramos Configuration


  • Go to Back-end > Extensions > Plugin Manager > Use the Filter to search for Zo2 Framework and enable it.

enable_plugin

  • Once ZT Cramos is installed in your Joomla site, you need to make it default for your website so your pages get the new design. Please go to Extensions > Template Manager > Zo2_cramos - Default > Click on the star icon next to it.

zo2_cramos

Here is where your site should look like after installed ZT Cramos.

Configuration


To view all ZT Cramos module positions, please click here.

Joomshopping Configuration


Joomshopping, a powerful & ideal extension that is the most easy to use OnlineShop for Joomla.

To get Joomshopping on your site:

joomshopping_install

  • After uploading successfully, you will have the message and Joomshopping information like below:

after_install

  • Joomshopping can be used for selling different products. There are also functions for selling music files or videos. Products can shown with text, pictures and also audio or video files can be added to description. Modules for easy integration of payment providers and also import and export of datas are available. See all functions in Components > Joomshopping:

joom_shopping_function

ZT Layer Slider


ZT Layer Slider allows you to easily create the sliders with multiple cool effects. With this module, you can now add a custom Slider to any or every page on your website. Equally, you can also add as many slider as you like. A more detailed instruction about how to edit and configure ZT Layer Slider can be found in ZT Layer Slider Configuration Manual.

  • In Joomla administration go to menu Extensions => Extension Manager => then select Choosefile button and select zt_layerslider j25 j30.zip file (included in zt_cramos_package). After that click the Upload & Install button.

cramos_slide

ZT Layer Slider Package itself includes both ZT Layer Slider Module and plg_content_zt_layerslider.

However by default ZT Layer Slider Module, and plg_content_zt_layerslider are not enabled, so you need to be enable theme to use.

  • Go to Extensions => Modules Manager > Publish the ZT Layer Slider module that was installed. Enable the ZT Layer Slider Plugin in Plugin Manager.

More informations about these steps are available in chapter Configure the Extension.

  • Next, nagative to Components => ZT Layer Slider Module. Here, you can create a new slider, edit or delete any existing slider.

manage_slider

Note: For more information about module usage, please see the Extensions Usage Guide.

ZT Shortcodes


A good new for you, All new Joomla templates with Zo2Framework now comes with 25 built-in shortcodes (e.g. tabs, gallery, video, google map etc.) that users can attach to certain pages by adding the corresponding macro codes into articles or even modules. But we went a step further than the competition, we created ZT Shortcode Generator plugin for Joomla 3.x. This is a free plugin for adding & displaying Zo2 shortcodes on your website.

short-code

  • Download ZT Shortcodes and install it via Extensions > Extension Manager

  • You can find & enable the settings for this plugin by going to Extension > Plug-in Manager > Search in Plug-in title "Shortcodes".

  • ZT Short Code Usage:

Sample 1:

Shortcodes can use in detail article (K2 and Content). Here is for example with Content article: Please navigate to Content > Article Manager > Add New Article > click `ZT Shortcodes" button and select any Shortcodes type as you want to edit. Note that UPPERCASE is where you can edit code.

Sample 2:

If you want to use Shortcodes in Custom HTML Module. Please navigate to Extensions > Module Manager > Add New Module with "Custom HTML" module type > click "ZT Shortcodes" button and select any Shortcodes type as you want to edit. Note that UPPERCASE is where you can edit code.

For both samples, after selecting your own shortcode, you should fill out all of the available parameters and your content, for example Title and Content of tabs. You can simply include these info in your shortcode as well later. The shortcodes will automatically populate with the content you entered.

ZT Custom HTML


We use many custom HTML modules in our ZT Cramos demo for layout and concept. You can replace the content of the same to your taste or replace them with other modules. Just need to insert your new content into the shortcodes by clicking the "ZT Shortcodes" button and choose of the element you would like to insert.

Support


  1. Module type: Custom HTML

  2. Module position: zt_bottom_3

support

  • To have this Custom Module content display as above, please paste this HTML code to your editor:
<div class="zt_address">
<h3>Support 24/7</h3>
<p>Facilisis fringilla amet consectetur adipiscing risus conguest</p>
<p class="zt_contact"><span class="zt_email">Support247@cramos.com</span><span class="zt_telephone">(+84-4) 866 2468</span></p>
</div>
<div class="zt_banks">
<p>Payment Accept: <a class="bank-1" href="#">visa</a> <a class="bank-2" href="#">visa</a> <a class="bank-3" href="#">visa</a> <a class="bank-4" href="#">visa</a></p>
</div>

config_html


  1. Module type: Custom HTML

  2. Module position: zt_header_1, zt_header_2, zt_header_3

header

  • To have this Custom Module content display as above, please paste this HTML code to your editor, for example:
<div class="zt_header">
<div class="zt_header_hover hover_1"><img title="logo" src="images/modules/p_1.1.png" alt="zt_cramos" border="0" /></div>
<img title="logo" src="images/modules/p_1.png" alt="zt_cramos" border="0" /></div>

ZT Banner


  • Banner 1 & Banner 2
  1. Module type: Custom HTML

  2. Module position: zt_banner_1, zt_banner_2

zt-banner-1

Custom Editor:

For example: Insert the following content into Custom Editor of Custom HTML module :


<div class="zt_promotion_inner"><img title="logo" src="images/modules/banner2.jpg" alt="cramos" />
<div class="zt_pro_content">
<h1>Simple</h1>
<h3>Installation</h3>
</div>
</div>
  • Banner 3 & Banner 4
  1. Module type: Custom HTML

  2. Module position: zt_banner_3, zt_banner_4

banner_3_4

Custom Editor:

Insert the following content into Custom Editor of Custom HTML module :

<div class="zt_banner_left">
<div class="zt_banner-top"><img title="logo" src="images/modules/3.png" alt="cramos" /></div>
<div class="zt_banner_bottom"><img title="logo" src="images/modules/4.png" alt="cramos" /></div>
</div>

Newsletter


newsletter

  1. Module type: Custom HTML

  2. Module position: zt_newsletters

We didnot use any Shortcode element in this position. You just need to insert the following content into Custom Editor of Custom HTML module :


<div class="zt_newsletters">
<h3 class="zt_title">Newsletters:</h3>
<input class="email" name="email" type="email" placeholder="Enter your email address..." /> <input class="button" name="Subscribe" type="submit" value="Subscribe" /></div>

Social Icon


  1. Module type: Custom HTML

  2. Module position: zt_social

social

Content for example: Use shortcode Social Icon to display the social icons. The content you entered will then be populated as below:


<div class="zt_socical">
<h3 class="zt_title">Follow us on:</h3>
[zt_social_icons boxed="yes"][zt_social_icon icon="fa fa-linkedin" color="#fc885f" bgColor="#fff" hoverColor="#fff" hoverBgColor="#286cab"][/zt_social_icon] [zt_social_icon icon="fa fa-facebook" color="#fc885f" bgColor="#fff" hoverColor="#fff" hoverBgColor="#3b5998"][/zt_social_icon] [zt_social_icon icon="fa fa-twitter" color="#fc885f" bgColor="#fff" hoverColor="#fff" hoverBgColor="#00bef6"][/zt_social_icon] [zt_social_icon icon="fa fa-google-plus" color="#fc885f" bgColor="#fff" hoverColor="#fff" hoverBgColor="#d34836"][/zt_social_icon] [/zt_social_icons]</div>

Logo Brand


  1. Module type: Custom HTML

  2. Module position: zt_manuafactures

manuafacture

Content for example: Use shortcode Carousel to display the logo brand. The content you entered will then be populated as below:


[zt_carousel showItem="4" duration="1500" showControl="yes" showPager="no" enableReponsive="no"] [zt_carousel_item image="images/logo_brand_1.png"][/zt_carousel_item] [zt_carousel_item image="images/logo_brand_2.png"][/zt_carousel_item] [zt_carousel_item image="images/logo_brand_3.png"][/zt_carousel_item] [zt_carousel_item image="images/logo_brand_4.png"][/zt_carousel_item] [zt_carousel_item image="images/logo_brand_1.png"][/zt_carousel_item] [zt_carousel_item image="images/logo_brand_2.png"][/zt_carousel_item] [/zt_carousel]

New Arrivals/Jshopping Last Products

This Jshopping Last Products Module is the great extension to display the selected products for your store on the Joomla front page in a nice zooming effect. With this module you can easy to configure more products with description, price of products into multiple of product columns.

New_Arrivals

To display the last products on the homepage, you need to download and install Jshopping Last Product Extension

  • List of all settings available in the admin panel can be found in Extension > Module Manager > New Arrivals:

new_product_config

Position: zt_newproducts

  • For more, ZT Cramos has been integrated Joomshopping allowing to show features products with title, image or video product, description, price, number of hits...From Components > Joomshopping > Products, you can set the products up easily and show as many ones as you want.

joomshopping

Best Seller/Jshopping Bestseller Products


This module show best selling products for your online store. It is easy to install and give many features.

best_seller

To display the top selling products on the homepage, you need to do some settings in the backend. In Extensions > Module Manager > Best Seller, see the below image to learn how to configure Jshopping Bestseller Products Module:

best_seller_config

Position: zt_scroller

Mega Menu


ZO2 Framework supports Mega Menu adding lots of advanced features. This Mega Menu is a perfect choice for creating unique menus. You can create a vertical, horizontal or fixed responsive menu with many custom styles and effects.

Please note that the megamenu setting is not global setting. If you use multiple styles, you need to enable and configure the megamenu option in the style you want to use the feature.

ZO2 Framework Mega Menu consists of 2 parts: Mega Menu Configuration and Mega Menu Edit

General Configuration


This allows you to to config selected elements as general configuration for the MegaMenu.

mega-menu-setting

  • Dropdown Strigger: Select mouse event to trigger dropdown menu

  • Animation: select the animation when moving menus in front-end.

  • Duration: Enter time duration for show sub menu

  • Menu type: Choose type menu you want to use

Please note that, the navigation settings are not general settings, that means in each style, it can have difference navigation. In each style, you can display different menus as main menu.

Configuration Level


There are 3 level of configuration in the Mega Menu Settings, which are:

  • Sub-megamenu setting

  • Column setting

  • Menu item setting.

Sub mega menu Setting


This setting allows you to configure the width of the sub-megamenu, add column, and add class that style for it.

sub-menu

  • Add row: add a row to the selected submenu.

  • Hide when collapse: show/hide this submenu when the menu is collapsed on small screen.

  • Submenu width (px: set width (in px) for the selected submenu.

  • Alignment: align the selected submenu: left, right, center, justify.

  • Extra class: allows you to style the selected submenu with an extra css class

Column Setting


MegaMenu from ZO2Frameworks support the column setting which allows you to add column, remove column, set width of column and assign module to column.

colum-setting

  • Add/remove column: "+" to add a new column to the right of the selected column. "-" to remove the selected column

  • Hide when collapse: show/hide this column when the menu is collapsed on small screens

  • Width (1-12): allows you to set number of grid columns (Bootstrap grid) that the selected column spans

  • Module: add/replaace a module to the selected column

  • Extra class: allows you to style the selected column with an extra css class


In this level of configuration, you can: enable or disable submenu if a menu item, display sub-menus in group or not, move menu item to right or left, assign a module to a module menu item, add icon for menu item.

item-config

  • Submenu: you can enable/disable submenu for this item

  • Group: config how the selected item's submenu displays

  • Positions: allows you to move a list of menu items to another column

  • Extra class: allows you to style the selected item with an extra css class

  • Icon: allows you to add an icon from Twitter Bootstrap to the selected item

  • Item caption: add caption to the menu item

Mega Menu Edit


One Mega menu is split in two parts: Config and Edit. The Menu Config is specificed in chapter Mega Menu Configuration. In this section, we have two parts: build-up your Megamenu, and style and add icon for menu item as well.

Build up Mega Menu


ZO2 Framework has a powerful, flexible and feature rich mega menu built into it's core. One of the features of the megamenu is the ability to include a module as a submenu item. This section describes how to insert a submenu column, row... into your ZO2 Framework Mega Menu.

Add a sub menu

  • On the Megamenu configuration screen, you will see the main menu items. Click on the menu item under which you would like to add a submenu item.

  • If the menu item does not already have a sub menu, click on Submenu – Yes parameter under Item Configuration in order to add a submenu item for selected main menu item. This step isn't necessary if the parent menu item already has a sub menu item.

  • When you enable a Submenu for the selected main menu item, then you will see the new submenu has been created under the main menu item.

add-sub-menu-1

  • Click on the empty area around the submenu dropdown. You will see that the Menu Item configuration has changed. And that the Sub-megamenu setting toolbar appears.

  • Here you can add a new row(1), designate a sub-menu column width for each of the columns you are creating (3), align the selected submenu(4) and show/hide this submenu when the menu is collapsed on small screen(2).

add-sub-menu

The default for Mega Menu in Joomla is one column, but with ZO2Framework MegaMenu, you can have three to four columns side-by-side. The number of columns and the width of columns of a menu item'smega menu can be set via Column Configuration.

Add a column to sub menu

  • Click on the empty area in submenu dropdown to open the Column Configuration area open as the image in chapter Column Setting.

  • Then, select "+" to add a new column to the right of the selected column (click "-" if you want to remove that column).

add-colum

  • Select Width(1-12) to set number of grid columns that the selected column spans.
Assign a module to column

Next, you can easily select the content for each column by assigning any module. That content can be the existing module, a video or even a random image.

  • Select Select Module dropdown box under Column Configuration area to find and select the module you would like to show as a submenu item.

assign-module

  • Once you select the module to be placed in the menu item you will immediately see that the Megamenu editing interface will load a module and show it in the submenu dropdown.

assign-module-

Move menu items to another column

You can move a menu item to next or previous column. This option will help you to devide menu items into columns.

move-menu

Group submenu or not

In this step, you can set all the sub items under one parent item.

group-menu

  • Also, You can split the Bonus Page column in two or three individual ones if you wanto in Column Configuration and style those columns and make them look balanced. Please read back chapter Add a column to submenu.

Style and Add icon


Style for Mega Menu

  • You can style for the MegaMenu item by adding class to the field: Extra Class.

02c64cb7cd768775ead0ade391f1c928

You can add class for a mega menu, for a column or for a menu item. So you should the priority oder. The priority order (Mega menu => Column => Menu Item) is from low to high.

There are one file that you can add style for MegaMenu.

megamenu.less in: templates/zo2_hallo/assets/less

  • Moreover, you can also style for your own menu by adding the subtitle for each menu item.

It is easy to add a subtitle for a Menu Item. In the Item setting panel, select a menu item then add subtitle in the field: Item Caption. The following image shows you how to add subtitle for a menu item.

aff1cff5e784156e904129d79477f3bf

Add icon

One of the features of a megamenu is the ability to add icons to your menu items. This section will show how to add an icons to your menu items.

On the Megamenu configuration screen, you will see the menu items just under the Item Configuration area.

  • Click on the menu item under which you would like to add an icon.

  • For that menu item, click in the Icon box in the Item Configuration area.

  • Input the name of the icon that you would like to show before the menu title for that specific menu item.

add_icon

Note: Full list of all available icons that you can use with this Icon parameter can be found on the Font Awesome site. Copy the icon class which you want to add to box Icon.

  • Finish adding an icon to the selected menu item by clicking on the Save button in the Megamenu editing page toolbar.

Layout Builders


Layout Builder is one of the unique features introduced in Zo2Framework which supports multiple layouts that allow you to make your content displayed flexibly. 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.

This part brings more functionalities and improvement user interface in managing template layouts, including:

  • Specify the number of modules to be placed within a module position.

  • Set the width for Column using bootstrap spanX classes (form span1 to span12)

  • Set any of the above options for either tablet/mobile or desktop mode through Column's/Row's Settings.

  • Change the name of each row, and also select any module to each column.

You can find all Layout builder settings under Layout Builder section.

tab-layout

Layout Builder also provides more settings for you to create a new layout, customize and manage the layout of your theme. All layout settings are at the top right of each row/column form, including:

layout

  • drag The drag & drop option: By using this option, You can drag & drop to change the position of columns in a line as well.

  • columColumn's/Row's Settings: Here you will be able to select the row’s/column's name & class if he wants. Also users will be able to fix the section for where to visible or where to hidden.

  • rowDuplicate Row: The 3rd option provides you to add new row.

  • row1Split Row: The 4th option provides users to add new column.

  • removeRemove Row: If users want delete the row then just click the cross button.

This part focuses on knowledges to create a new module layout and manage the existing layout in your theme.

Top


top_section

In Top Section, we use 3 columns and span 4 for each column. The Columns are top-menu, search,and top-social.


header

Here're 3 columns: mega_menu (canvas menu) with span 1, header_logo with span 3 and mega_menu with span 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.

layout_menu

Slide Section


The Slide Layout is a simple one column. And the span 12 covered the whole width of this layout.

slide

Feature Section


feature

In the feature section we used the whole span. There is option available for to create more column and row.


This section had only one column and it contain span12.

breakcurm

zo2-message


Here we have one column, and it contains span12.

zo2_messga

Main Body Section


main_body

In the main body section we used 03 columns. And the columns are

  • left
  • Component Area
  • right

The left & right contain span3 and the component area contain span6.

News Section


newss

In these sections we used the whole span. There is option available for to create more column and row.

Bottom


bottom

We select the bottom area with bottom1 by one column and bottom2 by 3 columns. Every column (bottom2) contains same span and the span is span 3.


This is pretty Footer one columns layout with whole span.

footer

How to use


Add a new row


After set up the position name and location on your template to display your new “row module” position. We will see the module position "example" how it works. Go to Template Manager and click Zo2_hallo > open Layout Builder tab. Now, choose a location where you want to create a new module position. Just above the module, click the Add new row [=][duplicate Row] icon at the top right of any existing row form. A new row will be created under.

add_new_1

Here we published our new position under the NEWS position. For doing that add a new row by using Add a new row option.

add_row

row_setting

  • Insert row name into Name Field, and select the specific device to display module

  • Save Changes and then, the name of row is created.

Move a module position


Modules are boxes that can be moved around on the layout screen. Drag and drop to move layout positions, is a great feature comes with Zo2Framework.

Putting a module in a different position on the page is a very simple process, which can be made from Layout Builder tab in Zo2 Hallo template settings. If you hover your mouse over the gray 4 arrow icon of a module, you’ll notice the 4 arrow cursor appears to let you know it can be moved. Start dragging the module to a new location - it may be upper and lower position. When the box is showing in the correct location, let go of the mouse button, and the module will be saved temporary in the new location.

drag

Please don't forget to save changed layout using Save & Close button.

Add a new column


Layout has rows and each row can hold 1 to 6 columns. You can easily add one or more columns to a layout row by clicking the new column icon icon and a popup window will appear like below on the created row header.

  • Now, open Layout Builder tab from Template Manager. Here we added our new column under the NEWS module. For doing that add a new row by using Add a new column columns-icon option.

new_col

  • In the param "Column Width" colum_width, you can change the width of each column.

column_decrease

You can drag & drop to change the position of columns in a line as well.

colum_inline

Module/Components/Message/ or Menu positions also can be responsive. Click on column setting icon to open Responsive tab and Select the devices you want to show or hide. Click apply and save your settings.

colum_setting

Assign a new module to column


Next, you can easily select the content for each column by assigning any module

  • Click the icon Column's Setting, Choose desired position from the drop-down selection in Position Field.

column_set

  • After clicking on this icon you will found option for select the position name. Here we select our new created position named newposition. Then click on Apply.

module_position

Then save this by clicking on the save button on top left. Now your new position added on the layout builder. You can use this position on this template now.

Profiles


A profile is a custom set of theme settings which can define the style, content and layout of your site. The default profile defines the default settings for the entire website. You can create new profiles and use them to any different theme. This allows you to load different theme settings on different pages.

New profiles inherit all settings from the default profile, so you just need to apply the settings you want to change. One example where we use the profiles are the different theme variations we deliver with each theme. Also special module layout behavior is done using profiles.

Now, in your Joomla backend, select Extensions > Template manager > zo2_hallo - Default to get started with new Profile function of Zo2 Framework. "Profile" tab is underneath the Menu Bar of Zo2 settings

profile-overview

The default Profile


In the general theme settings you find a parameter called Default Profile. Here you choose the profile which will be loaded on all your pages. By default it is set to the profile called default. Each theme has a default profile and it can not be deleted. If you want to load another newly created profile as default for all your pages you can select it here. Zo2 will load your new profile automatically. For each profile, you will be required to create a new template that are to apply the new added profile. We are going to present "How to create a new template" in the last of this section.

default_profile

Profile Variations


Other profiles can only override some settings defined within the default profile. This profile will only override the default theme used by the template with the orange theme, so as you can see, there is no need to repeat the entire profile code if the other settings are not changed.

Step 1: Create a new profile


New profiles can be created in the profile theme settings by clicking the Save As button which is available right next to the "profile dropdown" list".

new_profle

The first time you click the button, a window will appear allowing you to create a new profile.

  • Now just need to enter a name for your new profile and "Save" it.

new_profile_1

Below you can see all settings you can control and override with your new profile. By default all values are inherited by the default profile.

new_profile_2

Step 2: Create new templates for new profile


Each style includes its own theme, layout, logo, navigation ... When creating new style, you can configure those things and override the default style. To do that, first create new template by duplicating your current defaut template.

  • Go to Extensions > Template Manager > Duplicate your current default template

dupliate-theme

  • When new template created, open it and choose your desired profile to use.

profile

Step 3: Create different layouts for new profile


As said before, new profiles inherit all settings from the default profile, so you just need to apply the settings you want to change. Now of course this is right for Layout Builder settings.

You can refer the guide to use Layout Builder on this same documentation system in purpose of adding or editing your new profile's layout builder.

Step 4: Custom Style for new profile


Profile option from Zo2 Framework is very useful allowing you to create preset styles and customization. With Preset Style, you can assign a certain style to your theme or change the preset style such as Background, Header, Text, Link...

To select a preset style and create your desired style, in your new Layout Profiles tab, please scroll down the page you'll see Style section.

This more detailed tutorial to custom style will cover this topic in depth.

Step 5: Assign any template to any menu item


Assign any template (also duplicated templates) to any menu item directly from your theme configuration with just a few clicks.

menu-assignment

Final Step


After all the changes with the new profile, one very important action you have to take, is clicking the Save button to apply all to your Joomla site.

Fonts, Theme Preset and Advanced Settings


toolbar

Built in new Zo2 Framework, ZT Cramos provides you a various of settings:

  • General Settings: These are the general options for the templates

  • The Font Settings: provides the ability to change the font size as well as the font type used in the template. Many popular web fonts are included as options and some templates also include additional custom font options.

  • Theme Preset: The Presets Style Panel in ZO2 Framework makes use of a powerful Preset system that allows you to create preset styles and customization.

  • Advanced Settings: show up with many advanced options related to RTL, sticky menu, responsive layout, switcher box, custom css, tracking code and developer options.

Please visit to our Zo2 Framework document site to see the setting for each section.

Typography and Short Code


We carefully handcrafted this joomla template with a strong focus on typography, usability and overall user-experience. ZT Cramos delivers the shortcodes you need in spades, letting you quickly and easily put together great content and sharp layouts.

Please view all typography embed in ZT Cramos.

Shortcodes Buttons built in Editor

shortcode_buttons

Please view all Shortcode embed in ZT Cramos.

Frequently Asked Questions


How can I change my Joomla site favicon?


Answer:

  • You can upload your favicon.ico into the main folders of your front-end and back-end templates, which are found in the \zt_cramos\images folders respectively, overwriting favicon file that came with your templates.

  • Or You can attact a favorite icon to display in the top left hand area of the browser.

To upload a favicon to your Joomla site, in Extension => Template manager => open Zo2_cramos template => General tab > Favicon option, just click the Select button.

favicon

See more about how to change the favicon, please refer to this link: http://docs.zo2framework.org/post/settings#1-2-favicon

How do I change my site’s name?


Answer:

  • In your Administrator, navigate to System => Global Configuration => Locate Site Name tab and change your site's name.

change_site_name

  • Click the Save button.

  • That’s it!

How to install and change languages in my Joomla site?


Answer:

Installing a new language in Joomla 3.x is much easier than changing languages in Joomla 2.5. This is because of the new Install Language Tool from Joomla 3.x , which allows you to install new languages without manually needing to find and download them from other sites on the web.

  • In the top menu of you Administraton Panel, click Extensions => Language Manager

language_manager

  • Click the Install Language button towards the top of the page.

install_language

  • Here, you can find the language you want to install using Search box or by browsing through the list of available languages. When you find a language you would like to install, select it by checking the checkbox in front of it’s name in the list and click on the Install button in the Joomla toolbar.

find_language

  • When the language has been installed correctly, You should see a similar message:

message

  • Now, the new language is showed in the list. To make this language as the default, in the top menu, go to Extensions => Language Manager and click the star icon next to selected language, then go to the frontend to see the changes.

How to edit CSS of the Template?


Answer:

There are 2 ways to edit css of the template:

  • Every Zo2 Framework's template is packed with a handful of stylesheets in the form of LESS file. So you should follow this guide http://docs.zo2framework.org/post/customize#2-custom-styles

  • Since Zo2Framework version 1.3.1 we added an option called Load Custom CSS: if enabled, custom.css file (in which you can override the default styling of the template) will be loaded in the frontend.

This might be useful when you want to make some changes in the template design. All the CSS placed in this file will not be lost after upgrading the template.

Support Us


We want to know if you are happy, unhappy, or disappointed with something the feature has done, or if you have a suggestion about how we can do something better.

All feedback will be taken seriously and treated confidentially.

HelpDesk:

http://member.zootemplate.com/helpdesk!