JSN Epic Configuration Manual

Joomla!
template JSN Epic v3 Configuration Manual

(for version 3.5.0+)
This documentation is release under Creative Commons Attribution-Non-Commercial-Share Alike 3.0 Unported Licence. You are free to print this document for convenient usage. Copyright 2006 - 2010 http://www.joomlashine.com
Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com
Table of Contents
Joomla! template JSN Epic v3 Configuration Manual ...................................................................................1
Table of Contents .................................................................................................................................................................2 Introduction ...........................................................................................................................................................................3 Template parameters overview ........................................................................................................................................4 Logo.......................................................................................................................................................................................21 Layout....................................................................................................................................................................................24 Color & Style........................................................................................................................................................................28 Module Styles......................................................................................................................................................................35 Menu ......................................................................................................................................................................................38 Typography..........................................................................................................................................................................53 Site Tools..............................................................................................................................................................................71 SEO & Accessibility...........................................................................................................................................................73 Extended Styles..................................................................................................................................................................84 Whats next?........................................................................................................................................................................98
Introduction
Thank you for your interest in JSN Epic template. We really appreciate your choice and truly wish our product will bring more value to your website and business. To have the best template understanding, we recommend you to read documentation in following order: 1. JSN Epic Quick Start Guide This document will tell you how to get the template look like the demo website as well as the main concept of how to work with the template. 2. JSN Epic Configuration Manual - This document will give detailed information about each template feature and how to apply it to your real website. 3. JSN Epic Customization Manual - This document will teach you how to customize the template to make it suite you need. You can print all documents for convenient reading. Notes: This document assumes that you already have installed Joomla! CMS with sample data and JSN Epic template. Features marked with Edition. are available only in JSN Epic PRO Edition and NOT available in Free
Lets roll!
Template parameters overview
JSN Epic provides 40 template parameters for incredible configuration. To setup template parameters, please make following steps: 1) Go to template manager by menu Extensions -> Template Manager. 2) Click on template name JSN_Epic_XXX, where XXX is template edition you have. 3) Here in the Template Edit page you will see the list of template parameters in section Parameters. For your convenience, all parameters are located in dedicated collapsible sections. You need to open appropriate section and configure parameters you want. 4) Click button Save or Apply to save all changes you made. Now, lets take a quick overview of all template parameters available in JSN Epic.
Sample Data
JSN Epic has very useful feature of installing sample data to make your testing website looks the same as on template demo website. Unlike other template providers who give you heavy package with all files and database of the demo website, we just give you single link to install sample data right on your current website. More over, we provide you an option to backup all current data, so you can restore them later, when finish with template testing. For more information please read section Sample Data of in document JSN Epic Quick Start Guide.
Logo Settings
Bellow is brief overview of all template parameters related to logo configuration. For more information please read section Logo of this document. Enable Colored Logo This parameter allows you to setup special logo image for each template color. If enabled, every time you or your website visitors choose some template color theme, the special logo image designed for that color will be shown. Logo Link This parameter allows you to setup the URL where the logo image should link to. In modern web design, there is a very common technique to make logo linkable to the website homepage. JSN Epic not only supports this technique, but it also allows you to setup your custom link if you want. If you do NOT want your logo to be clickable at all, just leave this parameter empty. Logo Slogan This parameter allows you to setup the slogan text to be attached to the alt attribute of the logo image. Text in alt attribute is visible to screen readers (good for accessibility) and search engines (good for SEO)
Layout Settings
Bellow is brief overview of all template parameters related to layout configuration. For more information please read section Layout of this document. Template Width This parameter allows you to select template width option. There are 3 options available: Narrow Template width is fixed in pixels defined in parameter 'Narrow' Definition (px). Wide - Template width is fixed in pixels defined in parameter 'Wide' Definition (px). Float - Template width is floated with percentage defined in parameter 'Float' Definition (px).
Tip: The option you select here is considered as default option. Later, in section Site tools Settings you can configure to enable Width Selector which allows website visitors to choose the template width option they want. 'Narrow' Definition (px) This parameter allows you to setup the template width (in pixels) which will be used when parameter Template Width is set to Narrow.
Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com 'Wide' Definition (px) This parameter allows you to setup the template width (in pixels) which will be used when parameter Template Width is set to Wide. 'Float' Definition (%) This parameter allows you to setup the template width (in percentage) which will be used when parameter Template Width is set to Float. Left Column Width This parameter allows you to setup width of the left column (position left). Right Column Width This parameter allows you to setup width of the right column (position right). Inner Left Column Width This parameter allows you to setup width of the inner left column (position innerleft). Inner Right Column Width This parameter allows you to setup width of the inner right column (position innerright). Vertical Alignment of 'stickleft' Position This parameter allows you to select the vertical alignment of modules in position stickleft. There are 3 options available: Top Middle Bottom
Vertical Alignment of 'stickright' Position This parameter allows you to select the vertical alignment of modules in position stickright. There are 3 options the same as in parameter Vertical Alignment for 'stickleft' Position
Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com Show Mainbody on Frontpage This parameter allows you to specify whenever to display mainbody area on front-page or not. This option is useful when you want to show simple frontpage, but all children pages must show full content.
Color & Style Settings
Bellow are brief overview of all template parameters related to style configuration. For more information please read section Color & Style of this document. Template Color This parameter allows you to select template color variation to suite your company brand color. JSN Epic provides 6 major color variations for your taste. Each color variation covers not only the main background, but also color of drop-down menu, links, tables header and some other graphic elements. Tip: The option you select here is considered as default option. Later, in section Site tools Settings you can configure parameter Enable Color Selector which allows website visitor to choose the template color option they want. Template Text Style This parameter allows you to select template text style to match your website type. JSN Epic provides 3 text styles for major website types. Each text style is actually a combination of 2 font types: one for content text, another for heading text and main navigation text. Tip: The option you select here is considered as default option. Later, in section Site tools Settings you can configure parameter Enable Text Style Selector which allow website visitor to choose the template text style option they want. Template Text Size This parameter allows you to select template text size that suites your website audience best. JSN Epic provides 3 text sizes for major website audiences. Tip: The option you select here is considered as default option. Later, in section Site tools Settings you can configure parameter Enable Text Size Selector which allow website visitor to choose the template text size option they want. 10
Menu & Effects Settings
Bellow is brief overview of all template parameters related to menu configuration. For more information please read section Menu & Effects of this document. Top Menu Icons
11
Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com This parameter allows you to assign up to 20 predefined icon to menu items in Top Menu, you can add or remove any icon you want by simply drag and drop or double-click to that icon. This is perfect for the top position in any kind of websites. Main Menu Effect This parameter allows you to show smooth drop-down animation when Main Menu subpanel appears. Main Menu is the horizontal menu bar under the logo. Main Menu Transparency This parameter allows you to make Main Menu submenu panel semi-transparent (about 90% opacity). This effect can add slicker look-n-feel to your website. Main Menu Icons
This parameter allows you to assign up to 20 predefined icon to menu items in Main Menu, you can add or remove any icon you want by simply drag and drop or double-click to that icon Side Menu Effect This parameter allows you to have smooth slide animation when Side Menu subpanel appears. Side Menu is the vertical menu that can be set on left column.
12
Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com Side Menu Transparency This parameter allows you to make Side Menu submenu panel semi-transparent (about 90% opacity). JSN Epic allows you to have independent settings for Main Menu and Side Menu since Side Menu in most cases will cover the content and you might want it to have full opacity.
13
Site Tools Settings
Bellow is brief overview of all template parameters related to menu configuration. For more information please read section Site Tools of this document. Site tools Presentation This parameter allows you to select how to present site tools, including Text Size Selector, Width Selector and Color Selector. There are 2 options available: Dropdown Menu With this option all elements are arranged in a drop down panel Inline Row - With this option all elements are arranged in single row located directly on main menu toolbar.
Enable Text Size Selector This parameter allows you to display text size selector so your visitors can choose the text size they want. Note: Settings from this selector are considered as visitors preference and have top priority. It will overwrite default settings of parameter Template Text Size. Enable Width Selector This parameter allows you to display width selector so your visitors can choose the template width they want. Note: Settings from this selector are considered as visitors preference and have top priority. It will overwrite default settings of parameter Template Width. Enable Color Selector This parameter allows you to display color selector so your visitors can choose the template color they want. 14
Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com Note: Settings from this selector are considered as visitors preference and have top priority. It will overwrite default settings of parameter Template Color. Colors in Selector This parameter allows you to specify series of color icons to be displayed in Color Selector. The order of colors you specify here will reflect the order of color icons in selector.
15
SEO & Accessibility Settings
Bellow are brief overview of all template parameters related to accessibility configuration. For more information please read section SEO & Accessibility of this document. Enable Website Title This parameter allows you to show website title in tag <title> on every pages, except the homepage. This is great feature to improve your website SEO, since you can define a website title with some important keywords. Enable Top H1 tag This parameter allows you to wrap website slogan to <h1> tag and show it on top of your website. <h1> is the most important content tag and search engine normally pays special attention to the content in that tag, especially if it is located on top of your webpage. Enable 'Go to top' link This parameter allows you to put 'Go to top' link at the bottom of page. Clicking on that link will smoothly scrolls page to the top, which is nice and good for usability. Enable Auto Icon links This parameter allows you to have icons automatically assigned to the links. JSN Epic is able to detect links to various popular file extensions or communication protocols and assign icons accordingly. This feature utilizes modern CSS2 specification and allows you to have links with meaningful icons assigned without any modification in XHTML code. Currently JSN Epic supports 34 file types and it is truly amazing. Moreover, it can detect protocol type to assign icons to links to instant messengers, email, etc. For more information please read section Typography of this document. 16
Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com Printing Optimization This parameter gives your visitors totally optimized page for printer with only important content included. This is very useful when you want your website visitor to be able to print only the main content of the page and nothing else like side columns content, etc. You can turn this feature off so the whole page will be output to printer. Google Analytics Code This parameter allows you to set Google Analytics tracking code to template parameter and it will be inserted right into the correct place without having to edit index.php file. In fact, you can specify here any tracking code providing that it is required to be located at the end of the page. Cloud Media URL This parameter allows you to set URL to folder in cloud where you put template assets folders. You can put following templates assets folder to cloud: css, ext, images and js
17
Extended Styles Settings
Bellow are brief overview of all template parameters related to extended styles configuration. For more information please read section Extended Styles of this document. Enable K2 Style This parameter allows you to have extended styles for K2 which includes tabs color, additional module styles, fixed alignment issues and some other minor visual enhancement. Enable Community Builder Style This parameter allows you to have extended styles for Community Builder which includes adapted dropdown menu style, tabs color, additional module styles and some other minor visual enhancement. Enable Virtue Mart Style This parameter allows you to have extended style for Virtue Mart which includes adapted Add to Cart button, additional module styles, fixed alignment issues, redesigned checkout-steps icons and some other minor visual enhancement. Enable JEvents Style This parameter allows you to have extended style for JEvents which includes redesigned calendar navigation icons and calendar table, adapted table header color, additional module styles, fixed alignment issues and some other minor visual enhancement. Enable JoomGallery Style This parameter allows you to have extended style for JoomGallery which includes redesigned navigation icons, fixed alignment issues, additional module styles and some other minor visual enhancement. 18
About
This section contains some general template information like important Author, Copyright and License, as well as some following important template information that you dont want to miss. Version This parameter shows you the current template version and the link to check the latest version. We really do treat our templates as piece of software, which need to be continuously improved. Always make sure to check and download the latest version. Credits This parameter provides you the link official template credits page to see all the people involved in template development beside us. No matter how good is developer, the product wont be great without contribution of its users. Our templates are translated to almost 10 languages and that is pure efforts of users. License Key When purchasing PRO edition, you have single domain license which can be used on 01 domain. In order to get support and get the product works right, you need to register the domain where you will use the product to get the license key and then set it up to this template parameter. Read more about how to get license key here:
http://www.joomlashine.com/docs/general/how-to-get-license-key.html
If you want to use the template on multiple domains, then consider to upgrade to DEV Edition. You need only to pay the price difference and then can use the template on as many domains as you want. Read more about how to upgrade to DEV Edition here: 19

http://www.joomlashine.com/docs/general/how-to-upgrade-to-dev-edition.html
20
Logo
The logo JSN Epic is default sample logo and you should replace it with your own. Technically logo is an image file called logo.png and located in folder joomla_root_folder/templates/jsn_epic_XXX/images/, where XXX the template edition you have. There are 2 options to setup your logo: Setup logo image via Template Parameter. This option is perfect for regular graphic image logos. Setup logo via Custom HTML module in position logo. This option is required for rich-media logos.
Setup logo image via Template Parameter

There are 3 stages involved in changing the default logo to your own: Stage 1: Prepare your own logo image file First, you need to prepare your own logo image file in some graphic editor like Adobe Photoshop or Fireworks. Note: Your logo must be saved in PNG format and with name logo.png. We recommend you to save your logo in format PNG-8, which is best for logo images which has few colors, but sharp edges. Stage 2: Upload logo image file to your server Once your logo file is ready, its time to upload it to your server. You need to upload your logo file to templates images folder at joomla_root_folder/templates/jsn_epic_XXX/images/, where XXX the template edition you have, overwriting the original file. If you have permission problems while using FTP, then we strongly recommended you to use great Joomla extension called JoomlaXplorer. You can download it for free from JED at: http://extensions.joomla.org/extensions/core-enhancements/file-management/102 21
Stage 3: Setup template parameter to use new logo Now, the final stage is to setup logo parameters as desired: Enable Colored Logo Select to use special logo image for each template color or not. If enabled, you need to repeat stage 1 to prepare logo file for each template color. Then you need to place them in folder joomla_root_folder/templates/jsn_epic_XXX/images/{color_name}/, where XXX the template edition you have Logo Link Set URL where logo image should link to. You can set here: An absolute link (staring with http://...), like http://www.joomlashine.com Or relative link (without preceding slash) starting from Joomla! root folder, like index.php
If you dont want your logo to be linkable just leave this parameter empty. Logo Slogan Set the slogan text to be attached to the alt attribute of logo image. This slogan text is going to be one of the most top text of your page, so you can setup some keyword-rich string here for better SEO.
Setup rich logo via module in position Logo

JSN Epic provides module position called logo, where you can put Custom HTML module with rich-media logo. Another advantage is that you can create multiple modules with different logos and display them in various pages using menu-module assignment feature in Joomla!. There are 3 stages involved in changing the default logo: Stage 1: Prepare your own logo image file First, you need to prepare your own logo image file in some graphic editor like Adobe Photoshop or Fireworks. We recommend you to save your logo in format PNG-8 which is best for logo images with few colors, but sharp edges. Stage 2: Upload logo image file to your server Once your logo file is ready, its time to upload it to your server. You can upload your logo to folder "images/stories" via FTP Client or Joomla! Media Manager
22
Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com Stage 3: Setup template parameter to use new logo Now you need to create new Custom HTML module via Extensions -> Module Manager then insert your logo image there. You need to setup following parameters in module settings page: Title: My Custom Logo (you can choose another title here) Show Title: No Enabled: Yes Position: logo Custom Output:
<img src="images/stories/your_logo_name.png" border="0" />
Note: When using rich logo via module, all 3 logo parameters: Enable Colored Logo, Logo Link and Logo Slogan are not active.
23
Layout
Module positions
JSN Epic provides 24 module positions allowing you to have multiple layout configuration. All module positions are collapsible which means if you dont publish any modules in some position it will not take any blank spaces leaving those for neighbor modules.
24
Layout dimensions
JSN Epic allows you to change width size for overall layout, left column, right column, inner left column and inner right. You just need to configure appropriate template parameters to get desired result. Template Width You can select 1 of 3 predefined template width options: Narrow Template width is fixed in pixels defined in parameter 'Narrow' Definition (px). Wide - Template width is fixed in pixels defined in parameter 'Wide' Definition (px). Float - Template width is floated with percentage defined in parameter 'Float' Definition (%).
Tip: The option you select here is considered as default option. Later, in section Site tools Settings you can configure to enable Width Selector which allow website visitor to choose the template width option they want. Left Column Width You can configure left column width by template parameter Left Column Width. Parameter value can be specified only in percentage within range (18% - 33%). Moreover, only integer is allowed, for example 25% is correct, but 25.5% is incorrect.
25
Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com Right Column Width You can configure right column width by template parameter Right Column Width. Parameter value can be specified only in percentage within range (18% - 33%). Moreover, only integer is allowed, for example 25% is correct, but 25.5% is incorrect. Inner Left Column Width You can configure inner left column width by template parameter Inner Left Column Width. Parameter value can be specified only in percentage within range (18% - 33%). Moreover, only integer is allowed, for example 25% is correct, but 25.5% is incorrect. Inner Right Column Width You can configure inner right column width by template parameter Inner Right Column Width. Parameter value can be specified only in percentage within range (18% - 33%). Moreover, only integer is allowed, for example 25% is correct, but 25.5% is incorrect.
26
Native RTL support
All JoomlaShine templates are equipped with native RTL support. We spent huge amount of time tweaking every tiny details of the template to make it look absolutely awesome in RTL mode. Everything is horizontally-flipped including dropdown main menu and side menu. The most impressive thing is that RTL layout works flawlessly even in IE6+. You dont have to do any additional template configuration to enable RTL mode. Just set some RTL language in Joomla! administration and template will automatically detects and enable RTL mode.
27
Color & Style

Template Color
JSN Epic provides 6 major color variations for your taste. Each color variation covers not only the main background, but also color of drop-down menu, links, tables header and some others. All available colors are described bellow.
Blue
Red
28
Green
Violet
29
Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com Orange
Grey Template color can be configured by 3 following ways in order of increasing priority: 1. Template color can be set by template parameter Template Color in administration panel. This is default setting and has the lowest priority. 2. Template color can be set to particular page by providing Page Class Suffix to a menu item of that page. The suffix has syntax custom-color-xxx, where xxx is the color you want to have, for example customcolor-red. There are following possible values: blue, red, green, violet, orange, grey. This setting will override the default settings by template parameter Template Color. 3. Template color can be selected by website visitor from Color Selector in Site tools. This setting is considered as visitors preference and has top priority. It will overwrite both Page Class Suffix and default settings of parameter Template Color.
30
Text Style
JSN Epic provides 3 text style options for major website types. Each font style is actually a combination of 2 font types: one for content text, another for heading text and main navigation text. Text style is configured by template parameter Template Text Style. All available text styles are described bellow. Business / Corporation Website text style (default)
This is the combination of Verdana (for heading text) and Arial (for content text). The alternative fonts for Mac OS users are Geneva and Helvetica respectively. This compact neat text style is excellent choice for business oriented websites as well as corporate websites. The combination of Verdana and Arial font type looks very natural and common for most of users since they are most popular font types used on the Internet. Personal / Blog Website text style
This is the combination of Georgia (for heading text) and Trebuchet MS (for content text). The alternative fonts for Mac OS users are serif and Helvetica respectively.
31
Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com This text style is little bigger then normal which make it perfect choice for small websites like personal or blog websites. The combination of Georgia and Trebuchet MS makes content very easy to read and the looks impressive. Online News / Magazines font style
This is the combination of Palatino Linotype (for heading text) and Times New Roman (for content text). The alternative fonts for Mac OS users are Palatino and Times respectively. This text style utilizes another very popular font called Times New Roman. This font is widely used in printing industry and in some of extremely popular online news website like The New York Times. If you want to run online news / magazine website, its worth to try this font combination. Template text style can be configured by 2 following ways in order of increasing priority: 1. Template text style can be set by template parameter Template Text Style in administration panel. This is default setting and has the lowest priority. 2. Template text style can be set to particular page by providing Page Class Suffix to a menu item of that page. The suffix has syntax custom-textstyle-xxx, where xxx is the text style you want to have, for example custom-textstyle-business. There are following possible values: business, personal, news. This setting will override the default settings by template parameter Template Text Style.
32
Text Size
JSN Epic provides 3 text size options for major website audience types.
Small size
Medium size
33
Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com Large size Template text size can be configured by 3 following ways in order of increasing priority: 1. Template text size can be set by template parameter Template Text Size in administration panel. This is default setting and has the lowest priority. 2. Template text size can be set to particular page by providing Page Class Suffix to a menu item of that page. The suffix has syntax custom-textsize-xxx, where xxx is the text size you want to have, for example custom-textsize-small. There are following possible values: small, medium, large. This setting will override the default settings by template parameter Template Text Size. 3. Template text size can be selected by website visitor from Text Size Selector in Site tools. This setting is considered as visitors preference and has top priority. It will overwrite both Page Class Suffix and default settings of parameter Template Text Size.
34
Module Styles
JSN Epic provides 4 box designs for module background styling and 20 icon designs for module title styling. All module title styles can be used in combination with module background styles and this gives you 80 module style combinations. Module styles are configured by modules parameter Module Class Suffix. All available values are described bellow and need to be applied without double quotes.
Box designs
Box designs to be applied to modules.
-box box-blue
-box box-green
-box box-yellow
-box box-grey
35
Icon designs
Icon designs to be applied to modules title. icon-article icon-calendar icon-cart icon-comment icon-display icon-download icon-online icon-folder icon-help icon-home icon-image icon-info icon-mail icon-rss icon-search icon-selection icon-settings icon-star icon-statistics icon-user
JSN Epic utilize CSS sprite technique to reduce amount of HTTP request to server in order to get icons. Technically, all icons are merged in one single image file and visitor will need to make one single request/download to get that file with all icons. If you have some extra time, please read more about CSS sprites.
36
Combination usage
All icon designs can be used in combination with plain module design like bellow examples:
-plain icon-star
-plain icon-online
Also icon styles can be used in combination with box module styles like shown bellow:
-box box-green icon-user
-box box-yellow icon-comment
37
Menu
JSN Epic provides 5 menu styles to display your website navigation on virtually any position. The best thing is JSN Epic utilizes Joomla! built-in menu module (mod_mainmenu) and you dont need to install any external menu modules.
Main Menu
By just a combination of XHTML, CSS and little JavaScript (only for IE) Main Menu allows you to have clean accessible XHTML code structure and simple yet effective drop-down submenu panels. To setup Main Menu please make following steps: 1. In Module Manager, click on the menu module you want to use as main menu module. By default, Joomla! 1.5 comes with Main Menu module, which might be the perfect choice. 2. In modules configuration page, setup parameters as following: Title: Main Menu (or any other you like) Show title: No Enabled: Yes Position: mainmenu Menus: All Menu Name: mainmenu (you might want to use another menu source here) 38
Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com Menu Style: List Start Level: 0 End Level: 0 Always show sub-menu Items: Yes Menu Tag ID: base-mainmenu Menu Class Suffix: empty Module Class Suffix: empty
39
Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com Rich Menu
JSN Epic allows you to present menu items in 2 text lines: primary and secondary. To setup text strings you need to go to menu item settings and add symbol combination (=) as separator between primary and secondary text. Check following screenshot for details.
In the example above text Home is the primary text and Lorem ipsum dolor sit... is the secondary text. Separator between them is the symbol combination (=). Note: If you decide to use Rich Menu, then make sure you configure secondary text for all menu items. The menu will look not good, if you set secondary text only for few menu items.
40
Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com Special visual effects JSN Epic provides smooth drop down animation for submenu panels. It utilizes built-in Joomla! MooTools Javascript library so there is no need to integrate any other Javascript framework. To enable the effect go to template configuration page and set template parameter Main Menu Effect to Yes. Another visual effect is transparency for submenu panels (about 90%). To enable submenu transparency you need to set template parameter Main Menu Transparency to Yes.
41
Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com Main Menu Icons
JSN Epic allows you to assign up to 20 predefined icons for items in main menu. To setup icons, you need to find template parameter Main Menu Icons and choose any icon you want to display from drop-down panel.
If you define more icon names then actual number of menu items, then unused icons will be ignored. You can use icons in combination with Rich Menu as well.
42
43
Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com As stated before there are 20 predefined icons for you to choose. Bellow is table of all available icons and their name. - article - calendar - cart - comment - display - download - folder - help - home - image - info - mail - online - rss - search - selection - settings - star - statistics - user
Info: JSN Epic utilize CSS sprite technique to reduce amount of HTTP request to server in order to get icons. Technically, all icons are merged in one single image file and visitor will need to make one single request/download to get that file with all icons. If you have some extra time, please read more about CSS sprites
44
Tree Menu
The side menu you see on left column is vertical tree-like menu presentation called Tree Menu. By default all submenu items are collapsed until you select the parent menu item. Submenu items of each level have their own bullets to make it easier to distinguish. Please make following steps to setup Tree Menu: 1. In module manager, click on the menu module you want to use as tree menu module. By default, Joomla! 1.5 comes Key Concepts module, which might be the perfect choice. 2. In modules configuration page, setup parameters as following: Title: Tree Menu (or any other you like) Show title: Yes Enabled: Yes Position: left Menu Assignment: All (or at least Home) Menu Name: keyconcepts (you might want to use another menu source here) 45
Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com Menu Style: List Start Level: 0 End Level: 0 Always show sub-menu Items: No Menu Tag ID: empty Menu Class Suffix: -treemenu Module Class Suffix: -box box-yellow
In above example we used Yellow Box module styles, but you can use any other module styles. Attention: There is common misconception about Menu Class Suffix and Module Class Suffix. They are absolutely different parameters, so please pay attention on their settings.
46
Div Menu
The Div Menu in the bottom position is simple yet nice menu bar with items separated by slightly visible dashes. Default Joomla! method generates additional HTML tags to show dashes which is not very clean. Div Menu in JSN Epic generates pure HTML list for menu structure and uses CSS to show dashes. Please make following steps to setup Div Menu: 1. In module manager, click on the menu module you want to use as div menu module. By default, Joomla! 1.5 comes with Resources module, which might be the perfect choice. 2. In modules configuration page, setup parameters as following: Title: Div Menu (or any other you like) Show title: No Enabled: Yes Position: bottom Menu Assignment: All Menu Name: othermenu (you might want to use another menu source here) Menu Style: List Start Level: 0 End Level: 1 Always show sub-menu Items: No 47
Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com Menu Tag ID: empty Menu Class Suffix: -divmenu Module Class Suffix: empty
Attention: There is common misconception about Menu Class Suffix and Module Class Suffix. They are absolutely different parameters, so please pay attention on their settings.
48
Top Menu Icons
The top menu you see on JSN Epic demo website is a very innovative Icon menu system called Top Menu. By a combination XHTML, CSS and PHP Top Menu allows you to assign up to 20 predefined icons to menu items and arrange them in horizontal line. This is perfect for top position in any kind of websites. Please make following steps to setup icon menu: 1. In module manager click on the menu module you want to use as top menu module. By default, Joomla! 1.5 comes with Top Menu module, which might be the perfect choice. 2. In modules configuration page, setup parameters as following: Title: Top Menu (or any other you like) Show title: No Enabled: Yes Position: inset Menus: All Menu Name: topmenu (you might want to use another menu source here) Menu Style: List Start Level: 0 End Level: 1 Always show sub-menu Items: No Menu Tag ID: base-topmenu Menu Class Suffix: empty 49
Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com Module Class Suffix: empty
Attention: There is common misconception about Menu Class Suffix and Module Class Suffix. They are absolutely different parameters, so please pay attention on their settings. 3. Now you need to go to template configuration page and setup icons to be shown in the menu. Find template parameter Top Menu Icons and choose any icon you want to display from drop-down panel.
50
Side Menu
JSN Epic provides vertical menu with slide-out subpanels called Side Menu. By just combination XHTML, CSS and little JavaScript (only for IE) Side Menu allows you to have clean accessible XHTML code structure and simple yet effective slide-out menu effect. Please make following steps to setup Side Menu: 1. In module manager click on the menu module you want to use as main menu module. By default, Joomla! 1.5 comes with Key Concepts module, which might be the perfect choice. 2. In modules configuration page, setup parameters as following: Title: Side Menu (or any other you like) Show title: Yes Enabled: Yes Position: left Menus: All (or at least Home) Menu Name: keyconcepts (you might want to use another menu source here) Menu Style: List 51
Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com Start Level: 0 End Level: 0 Always show sub-menu Items: Yes Menu Tag ID: empty Menu Class Suffix: -sidemenu Module Class Suffix: -box box-yellow
In above example we used Yellow Box module styles, but you can use any other module styles. Attention: There is common misconception about Menu Class Suffix and Module Class Suffix. They are absolutely different parameters, so please pay attention on their settings. Special visual effects Similar to Main Menu, JSN Epic provide smooth slide out animation for submenu panels of Side Menu. This feature also utilizes built-in Joomla! MooTools Javascript so there is no need to integrate any other Javascript framework. To enable the effect go to template configuration page and set template parameter Side Menu Effect to Yes. Submenu panels of Side Menu can be semi-transparent as well. To enable submenu transparency you need to set template parameter Side Menu Transparency to Yes.
52
Typography
JSN Epic was created with extreme focus on typography and we believe it contains the most comprehensive content presentation capability. Headings, text, links, tables, images, everything was designed with high level of refinement. Lets take a look.
Headings
As we all know, headings are title of undergoing text blocks, so it must have distinguish look. JSN Epic provides styling for 5 main headings. To apply them you just need to wrap your heading text in regular heading tags like <h1></h1>, <h2></h2>, <h3></h3>, etc.
53
Text columns
Its pretty common situation when you need to arrange your content in multiple columns. JSN Epic offers you very convenient and accessible method to create multiple column content. This is real step forward removing table tags from your content and leaving them only for showing tabular data. As with v3 you can arrange your content in as many columns as you like. JSN Epic will detect the amount of columns you have and automatically make arrangement. Another improvement is now the required XHTML code is much simpler. The only thing you just need to do is to set class grid-layout to parent DIV. Bellow are screenshot of how does this feature look and example how to use it. Content arranged in 2 columns
<div class=grid-layout> <div>Content in the first column.</div> <div>Content in the second (last) column</div> </div>
Content arranged in 3 columns
<div class=grid-layout> <div>Content in the first column</div> <div>Content in the second column</div> <div>Content in the third (last) column</div> </div>
In the same way you can arrange your content in 4, 5, .. columns. In general maximum recommended column amount is 5, otherwise columns will be too narrow and hard to read. 54
Text styles
JSN Epic provides 12 text styles for making your content easier to scan and read. Bellow are screenshots of text styles and usage examples. Preformatted text You can use this style to present text with preserved spaces like text block of CSS code or other programming language.
<pre>Your preformatted text</pre>
Quote text You can us this style to quote somebodys speech, idea or a fragment from some book, articles, etc.
<blockquote>Your quote text</blockquote>
Drop cap symbol You can use this special drop cap symbol style for magazine / newspaper text paragraph. 55
<p class=text-dropcap>Your magazine text paragraph.</p>
Highlighted text You can use this style to highlight important words and / or keyword expression in search result page.
<span class=text-highlight>Text to be highlighted.</span>
Alert text You can use this style for alert or warning text paragraph requiring users attention.
56

<p class="text-alert">Your alert text that requires users attentions.</p>.
You can use tag <p> like in example or tag <div> as well. Info text You can use this style for regular information text paragraph that does not require much users attentions.
<p class="text-info">Your information text.</p>.
You can use tag <p> like in example or tag <div> as well.
57
Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com Download text You can use this style for information text paragraph related to download process.
<p class="text-download">Your download text.</p>.
You can use tag <p> like in example or tag <div> as well. Tip text You can use this style for useful information like tips, hint or help text.
<p class="text-tip">Your tip, hint or help text.</p>.
You can use tag <p> like in example or tag <div> as well. Comment text You can use this style for comment text paragraph.
58
<p class="text-comment">Your comment text.</p>.
You can use tag <p> like in example or tag <div> as well. Attachment text You can use this style for information text paragraph related to attachment file.
<p class="text-attachment">Your attachment text.</p>.
You can use tag <p> like in example or tag <div> as well. Video text You can use this style for description text paragraph that related to video file.
59
<p class="text-video">Your video text.</p>.
You can use tag <p> like in example or tag <div> as well. Audio text You can use this style for description text paragraph related to audio file.
<p class="text-audio">Your attachment text.</p>.
You can use tag <p> like in example or tag <div> as well.
60
Link styles
Automatic icon assignment JSN Epic is able to detect links to various popular file extensions and assign icons accordingly. This feature utilizes modern CSS2 specification and allows you to have links with meaningful icons assigned without any modification in XHTML code. Currently JSN Epic supports 34 file types and it is truly amazing. Moreover, it can detect protocol type to assign icons to links to instant messengers, email, etc.
Manual icon assignment As stated before for most browsers icons will automatically assigned thanks to modern CSS2 specification. Unfortunately IE6 does not support this specification and you have manually set appropriate class for links. Also, this can help if for some reason you turned off auto icon link template parameter, but still want to manually apply icon to links. Bellow is class specification for all supported links:
61
Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com Info: As with v3, JSN Epic utilize CSS sprite technique to reduce amount of HTTP request to server in order to get icons. Technically, all icons are merged in one single image file and visitor will need to make one single request/download to get that file with all icons. If you have some extra time, please read more about CSS sprites.
62
Table styles
Tabular data is very common type of information to be presented on the web. By default tables look ugly and not much readable. With JSN Epic you have 3 table styles to present virtually any kind of tabular data you have. Plain Rows table style
<table class=" table-plainrows">...</table>
Color Stripes table style
<table class="table-colorstripes">...</table>
63
Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com Grey Stripes table style
<table class="table-greystripes">...</table>
Attention: In order to get table styles shown correctly, you need to create solid XHTML code as foundation. Bellow is an example of solid XHTML code for table.
<table width="100%" class="table-plainrows"> <thead> <tr> <th>Table header</th> <th>Column header 1</th> <th>Column header 2</th> </tr> </thead> <tbody> <tr class="odd"> <th>Row header 1</th> <td>Lorem ipsum</td> <td>Dolor sit amet</td> <td>Lorem ipsum</td> <td>Dolor sit amet</td> </tr> </tbody> <tfoot> <tr> <th>Table footer</th> <td colspan="2">Footer data</td> </tr> </tfoot> </table>
64
List styles
Lists are crucial element in every content, not only online websites, but offline publications as well. List really helps readers to distinguish and remember important things by just a glance. JSN Epic offers 5 standard list with advanced icon list, number list and digit list styles for virtually all kind of information you might want to outline. Standard list styles
Unordered list Ordered list
<ul><li></li><li></li></ul>
<ol><li></li><li></li></ol>
Red arrow
Blue arrow
<ul class="list-arrow-red"> <li></li> <li></li> </ul>
<ul class="list-arrow-blue"> <li></li> <li></li> </ul>
Green arrow
65
<ul class="list-arrow-green"> <li></li> <li></li> </ul>
Icon list styles

Article icon list Folder icon list
<li></li> <li></li> </ul>
<ul class="list-icon article-list">
<ul class="list-icon folder-list"> <li></li> <li></li> </ul>
Image icon list
Online icon list
<ul class="list-icon image-list">
<ul class="list-icon online-list">
66

Star icon list User icon list
<ul class="list-icon star-list">
<ul class="list-icon user-list">
67
Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com Number list style
Blue Bullet number list Green Bullet number list
<ul class="list-number-bullet blue-bullet">
<ul class="list-number-bullet green-bullet">
Grey Bullet number list
Orange Bullet number list
<ul class="list-number-bullet grey-bullet">
<ul class="list-number-bullet orange-bullet">
Red Bullet number list
Violet Bullet number list
68
<ul class="list-number-bullet red-bullet">
<ul class="list-number-bullet violet-bullet">
Blue Digit number list
Green Digit number list
<ul class="list-number-digit blue-digit">
<ul class="list-number-digit green-digit">
Grey Digit number list
Orange Digit number list
69
<ul class="list-number-digit grey-digit">
<ul class="list-number-digit orange-digit">
Red Digit number list
Violet Digit number list
<ul class="list-number-digit red-digit">
<ul class="list-number-digit violet-digit">
70
Site Tools
JSN Epic provides 3 brand new features to enhance website user experience: Width Selector, Text Size Selector and Color Selector. By enabling these selectors, you surely give visitors best user experience on your website. All settings from Site tools will be stored as visitors browser cookies for further usage. If all selectors are disabled then the whole Site tools will not be shown.
Site tools Presentation

You have 2 options to present selectors in Site tools. Dropdown Menu
With this option all selectors are elegantly arranged in submenu panel. The drop-down animation, transparency and background color settings will be inherited from settings of Main Menu. See section Menu for more information on this. Inline Row
With this option all selectors are located directly on main menu bar. If you want to enable only some selector, this option is the best.
71
Width Selector
Width selector allows your website visitor to select what template width they want to use. As mentioned in section Layout dimensions in this document, there are 3 possible width options and visitor can select any of them by selector. You can disable this selector by setting template parameter Enable Width Selector to No.
Text Size Selector

Text Size Selector allows your website visitors to select the optimal text size for them. For example, old people can experience your website better with Big text size selected. You can disable this selector by setting template parameter Enable Text Size Selector to No.
Color Selector
Color Selector allows your website visitor choose the color them they like. This is very cool feature for social kind of websites where visitors preferences are most appreciated. You can even setup what color to include in the selector by setting template parameter Colors in Selector. Just type colors you want to include spitted by comma, like blue,red,green. In the case your website has strong identity color and you dont want visitor to select any other color, just turn this selector off by setting template parameter Enable Color Selector to No.
72
SEO & Accessibility

Source ordering
One of the most important SEO technique is to make sure that search engine can find your critical content before others. To make this possible in our template code structure we generate the center part first and only after that left and right columns. In this way, you can be sure that search engines will see your critical content first. You can use Lynx browser both online or offline to make sure of that.
73
Template internationalization
One of the most remarkable enhancements of Joomla! 1.5.x over 1.0x is internationalization. Joomla! 1.5.x template has powerful language mechanism which allow us to have template in multiple languages. In our templates all wordings of both back-end and front-end are moved to separated language files, so you can easily translate them into any language you want. More information about how to make your own translation can be found in JSN Epic Customization Manual. Currently our templates support 8 primary languages and more to be come in future.
German
Dutch
74
Polish
Italian
75
Spanish
French If you want to contribute and add translation of your own language, please feel free to contact us at:
http://www.joomlashine.com/contact-us/general-inquiries.html
76
Website Title
This feature allows you to show website title in tag <title> on every pages, except the homepage. This is great feature to improve your website SEO, since you can define a website title with some important keywords and show it on every page.
77
Top H1 tag
This feature allows you to wrap website slogan to <h1> tag, which is good for both SEO and accessibility. As we all know, <h1> is the most important content tag and search engine normally pays special attention to the content in that tag. Once you configured your keyword-powered website title and slogan, you can include them in the first h1 tag to increase SE ranking.
78
Go to top Link
This feature allows you to put 'Go to top' link at the bottom of page, which smoothly scrolls page to the top, which is nice and good for website usability.
79
Printing Optimization
This brand new feature will give your website visitors totally optimized page for printer with only important content included. This is very useful when you want your website visitor to be able to print only the main content of the page and nothing else like side columns content, etc.
Before printing optimization
After printing optimization 80
Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com As you can see on screenshots, not only the content is simplified, but also the styling was optimized to get pure black on white ready for printing page. At anytime, you can turn this feature off so the whole page will be output to printer.
81
Google Analytics Code
This feature allows you to set Google Analytics code to template parameter and it will be inserted right into the correct place without having to edit index.php file. Nowadays, Google Analytics becomes standard-de-facto of website tracking and this parameter can be very handy.
82
Cloud Media URL

This feature is very useful when you are utilizing cloud to host assets of you website. With JSN Epic, you can move all templates assets folder to a single folder in cloud and then set its URL in parameter Cloud Media URL. Templates assets folders are following: css/ ext/ images/ js/
Please notice that cloud media url normally starts with http:// and must be set without ending slash. For example: http://joomlashine.s3.amazonaws.com/template-assets
83
Extended Styles
One of hottest features in JSN Epic is extended styles adapted for 5 most popular Joomla! extension: K2, Community Builder, Virtue Mart, JEvents and JoomGallery. Technically extended styles are overrides of default extensions style (images + CSS) and located in folder /ext inside template folder. All styles are separated in dedicated subfolders for each extension as following: K2 styles are located in folder /ext/k2 Community Builder styles are located in folder /ext/cb Virtue Mart styles are located in folder /ext/vm JEvents styles are located in folder /ext/jevents JoomGallery styles are located in folder /ext/jg
Some extensions have their own template system and you might want to turn off extended style thru template parameter in order to use those native templates. Attention: The extensions above are not included in the template package and you have to download separately. You can download the extensions on Joomla Extensions Directory http://extensions.joomla.org/
84
K2
Extended style for K2 includes adapted tabs color, additional module styles, fixed alignment issues and some other minor visual enhancement. Component styling To apply extended style for K2 you need to set template parameter Enable K2 Style to Yes. Here is how K2 component will look like after extended styles applied.
85
Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com Module styling Besides from extended component styling you can use template module styles for K2 modules as well.
K2 Content Module (mod_k2_content) with module style -box box-green icon-article applied
K2 Comments Module (mod_k2_comments) with module style -box box-blue icon-comment applied K2 Login Module (mod_k2_login) with module style -box box-yellow icon-user applied
86
Community Builder
Extended style for Community Builder includes adapted dropdown menu style, tabs color, additional module styles and some other minor visual enhancement. Component styling To apply extended style for Community Builder you need to set template parameter Enable Community Builder Style to Yes. Here is how Community Builder component will look like after extended styles applied.
Adapted drop-menu style and tabs color on CB Profile page
87
Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com Module styling Besides from extended component styling you can use template module styles for Community Builder modules as well.
In the example above: CB Login Module (mod_cblogin) with module style -box box-yello icon-user applied CB Online Module (mod_comprofilerOnline) with module style -box box-blue icon-online applied CB Workflows (mod_comprofilermoderator) with module style -box box-grey icon-selection applied
88
Virtue Mart
Extended style for Virtue Mart includes adapted Add to Cart button, additional module styles, fixed alignment issues, redesigned checkout-steps icons and some other minor visual enhancement. Component Styling To apply extended style for Community Builder you need to set template parameter Enable VirtueMart Style to Yes.
Fixed alignment issues on Product Details page
89
Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com Module styling Besides from extended component styling you can use template module styles for Virtue Mart modules as well.
VirtueMart Module (mod_virtuemart) with module style -box box-blue icon-cart applied.
90
JEvents
Extended style for JEvents includes redesigned calendar navigation icons and calendar table, adapted table header color, additional module styles, fixed alignment issues and some other minor visual enhancement. Component Styling To apply extended style for JEvents you need to set template parameters Enable JEvents Style to Yes.
Totally redesigned calendar navigation icons
91
Adapted calendar table header color
92
Adapted table header color on Event List page Module styling Besides from extended component styling you can use template module styles for JEvents modules as well.
93
In the example above: Events Calendar Module (mod_jevents_cal) with module style -box box-blue icon-calendar applied. Latest Events Module (mod_jevents_latest) with module style -box box-green icon-star applied. JEvents Legend Module (mod_jevents_legend) with module style -box box-grey icon-info applied.
94
JoomGallery
Extended style for JoomGallery includes redesigned navigation icons, fixed alignment issues, additional module styles and some other minor visual enhancement. Component Styling To apply extended style for JoomGallery you need to set template parameters Enable JoomGallery Style to Yes.
Totally redesigned navigation bar and information panel
95
Fixed alignment issues
96
Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com Module styling Besides from extended component styling you can use template module styles for JoomGallery modules as well.
JoomSearch Module (mod_joomsearch) with module style -box box-blue icon-search applied. JoomGallery Treeview Module (mod_jgtreeview) with module style -box boxyellow icon-image applied.
JoomGallery Latest Categories Module (mod_jglatestcart) with module style -box boxgrey icon-star applied. JoomGallery Stats Module (mod_joomgallerystats) with module style -box box-green icon-statistics applied.
97
Whats next?
Now as you have learnt every features of the template, its time to move on and customize it for your need. Go ahead and open next documentation came with JSN Epic package called JSN Epic v3 Customization Manual. . In this manual you will find detailed description about how to customize every bits of the template to make it suite you.
Read the latest updated tutorials

We are updating our tutorial database frequently, so dont forget to visit JoomlaShine Docs Portal to check something new.
Give a feedback
We are continuously working on new releases of our products and would really appreciate any of your comments, feedbacks. Feel free to drop us a line at Feedback Page.
98

JSN Epic Configuration Manual

Transféré par

Informations du document

Description originale:

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

JSN Epic Configuration Manual

Transféré par

Droits d'auteur :

Formats disponibles

Joomla!

template JSN Epic v3 Configuration Manual

Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com

Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com

Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com

Template parameters overview

Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com

Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com

Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com

Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com

Color & Style Settings

Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com

Menu & Effects Settings

Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com

Site Tools Settings

Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com

SEO & Accessibility Settings

Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com

Extended Styles Settings

Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com

Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com

Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com

Setup logo image via Template Parameter

Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com

Setup rich logo via module in position Logo

Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com

Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com

Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com

Native RTL support

Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com

Color & Style

Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com

Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com Orange

Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com

Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com

Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com

Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com

Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com

-box box-green icon-user

-box box-yellow icon-comment

Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com

Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com Rich Menu

Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com

Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com

Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com

Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com

Top Menu Icons

Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com

Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com

Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com

Content arranged in 3 columns

Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com

<pre>Your preformatted text</pre>

<blockquote>Your quote text</blockquote>

Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com

<p class=text-dropcap>Your magazine text paragraph.</p>

<span class=text-highlight>Text to be highlighted.</span>

Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com

<p class="text-info">Your information text.</p>.

<p class="text-download">Your download text.</p>.

<p class="text-tip">Your tip, hint or help text.</p>.

Joomla! template JSN Epic Configuration Manual http://www.joomlashine.com