You are on page 1of 72

Official JSN Epic v3.

0 Configuration Manual
version (the only) for Joomla! 1.5.x

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 - 2009 http://www.joomlashine.com

Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)

Table of Contents
Official JSN Epic v3.0 Configuration Manual ...................................................................................................1
Table of Contents .................................................................................................................................................................2 Introduction ...........................................................................................................................................................................3 Template parameters...........................................................................................................................................................4 Logo.......................................................................................................................................................................................10 Layout....................................................................................................................................................................................12 Style .......................................................................................................................................................................................15 Module Styles......................................................................................................................................................................22 Menu ......................................................................................................................................................................................25 Typography..........................................................................................................................................................................35 Extended Styles..................................................................................................................................................................53 Usability & Accessibility...................................................................................................................................................67 Other features .....................................................................................................................................................................70 What’s next?........................................................................................................................................................................72

2

Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)

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. If you just grab this template we’d recommend you to read document JSN Epic Quick Start Guide first. By reading it you will understand how to get the template look like the demo website as well as the main concept of how to work with the template. You can print this document for convenient reading. After that you can read this JSN Epic Configuration Manual to learn about all features of the template and how to apply them to your real website. Notes: Tips: For the latest updated tutorials please visit www.joomlashine.com. Also don’t miss our brand-new video tutorials section. This document assumes that you already have installed Joomla! CMS with sample data included and JSN Epic template as well. Features marked with Features marked with edition. are available only in JSN Epic Free edition. are available only in JSN Epic PRO edition and not available in Free & STD

Let’s roll!

3

0 Configuration Manual © http://www.x) Template parameters JSN Epic provides 31 template parameters for superior convenient template management. Before learning about each template feature in details. Logo Width. 4) Click button Save to save all changes you made. 4 . let’s take a quick overview of all template parameters available in JSN Epic. 3) Here in the Template Edit page you will see the list of template parameters in section Parameters.joomlashine. Now you need to setup appropriate value for parameters you want. For more information please read section Logo of this document. Now. Logo Height These 3 parameters allow you to setup your own logo image to replace the default JSN Epic logo.Official JSN Epic v3. Logo Settings Bellow is brief overview of all template parameters related to logo configuration.5. You need to make following steps: 1) Go to template manager by menu Extensions -> Template Manager. Logo Path. let’s first understand how to setup template parameters.com (version for Joomla! 1. 2) Click on template name JSN_Epic_XXX. where XXX is template edition you have.

Layout Settings Bellow is brief overview of all template parameters related to layout configuration.5. but it also allows you to setup your custom link if you want. You can specify value in percentage within range (18% 33%) and only integer is allowed.incorrect Left Stick Position Alignment This parameter allows you to setup position of left stick module.joomlashine. middle and bottom position. Right Stick Position Alignment This parameter allows you to setup position of right stick module. for example 25% .incorrect Right Column Width This parameter allows you to setup right column width.x) Logo Link This parameter allows you to setup the URL where the logo image should link to. You can leave this parameter empty if you do NOT want your logo to be clickable at all.5% .correct. 25. 5 . JSN Epic not only supports this technique.correct. There are 3 options for your choice: top. Or you can specify value in percentage and your template will have fluid width at specified percentage of browser window’s width. 25. there is a very common technique to make logo linkable to the website homepage. There are 3 options for your choice: top. so you can setup some keyword-rich string here for better SEO. Template Width This parameter allows you to setup overall template width.5% .Official JSN Epic v3. For more information please read section Layout of this document. You can specify value in percentage within range (18% 33%) and only integer is allowed. In modern web design. Left Column Width This parameter allows you to setup left column width. middle and bottom positions. Here you can specify value in pixels and your template will have that fixed width. for example 25% .0 Configuration Manual © http://www. Logo Slogan This parameter allows you to setup slogan text to be attached to the logo image ALT text for SEO purpose. This slogan text is going to be one of the most top text of your page.com (version for Joomla! 1.

Top Menu Icons This parameter allows you to specify series of icons to be used in Top Menu. For more information please read section Menu of this document. CSS and PHP Top Menu Icons allows you to assign up to 20 predefined icons to menu items and arrange them in a horizontal line. Each color variation covers not only the main background. Main Menu Effect This parameter allows you to have smooth drop-down animation when Main Menu subpanel appears. JSN Epic 3 text sizes for major website audiences.x) Show Mainbody on Frontpage This parameter allows you to specify whenever to display mainbody area on front-page or not.0 Configuration Manual © http://www.5. JSN Epic provides 6 major color variations for your taste. you might want to have super clean front-page with only single module displaying introduction ad for example. For more information please read section Style of this document. Template Color This parameter allows you to select template color variation to suite your company brand color. 6 . table’s header and some other graphic elements. Main Menu is the horizontal menu bar under the logo.Official JSN Epic v3.joomlashine. Sometimes. Style Settings Bellow are brief overview of all template parameters related to style configuration. links. Template Text Style This parameter allows you to select template text style to match your website type. Menu & Effects Settings Bellow is brief overview of all template parameters related to menu configuration. another for heading text and main navigation text. By a combination of XHTML.com (version for Joomla! 1. In this case you might want to hide mainbody area on front-page. Each text style is actually a combination of 2 font types: one for content text. JSN Epic provides 3 text styles for major website types. This is perfect for the top position in any kind of websites. Template Text Size This parameter allows you to select template text size that suites your website audience best. one of the hottest features in JSN Epic. but also color of drop-down menu.

Note: Settings from this selector are considered as visitor’s preference and have top priority. 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.joomlashine. This is great feature to improve your website SEO and accessibility. Side Menu is the vertical menu that can be set on left column.com (version for Joomla! 1.x) Main Menu Transparency This parameter allows you to make Main Menu submenu panel semi-transparent (about 90% opacity). This effect can add little bit more slick look to your website. Enable Color Selector This parameter allows you to display a selector for your visitors to choose website color theme. 7 .Official JSN Epic v3. one of the hottest features in JSN Epic. Note: Settings from this selector are considered as visitor’s preference and have top priority. Side Menu Transparency This parameter allows you to make Side Menu submenu panel semi-transparent (about 90% opacity). By allowing your visitors to select text size you can greatly enhance overall website accessibility and usability. Accessibility Settings Bellow are brief overview of all template parameters related to accessibility configuration. Main Menu Icons This parameter allows you to specify series of icons to be used in Main Menu. Enable Text Size Selector This parameter allows you to display a selector for your visitors to choose website text size. For more information please read section Accessibility of this document.0 Configuration Manual © http://www. By a combination of XHTML.5. It will overwrite default settings of parameter Template Text Size. It will overwrite default settings of parameter Template Color. Side Menu Effect This parameter allows you to have smooth slide animation when Side Menu subpanel appears. Enable Logo H1 tag This parameter allows you to wrap website slogan to h1 tag. CSS and PHP Main Menu Icons allows you to assign up to 20 predefined icons to menu items and arrange them in a horizontal line.

com (version for Joomla! 1. Nice and good for website usability. it can detect protocol type to assign icons to links to instant messengers. Enable K2 Style This parameter allows you to have extended styles for K2 which includes tabs color. Extended Styles Settings Bellow are brief overview of all template parameters related to extended styles configuration. 8 . Enable Virtue Mart Style This parameter allows you to have extended style for Virtue Mart which includes adapted Add to Cart button. Enable Auto Icon links This parameter allows you to have icons automatically assigned to the links. The order of colors you specify here will reflect the order of color icons in selector. additional module styles.5. fixed alignment issues. This feature utilizes modern CSS2 specification and allows you to have links with meaningful icons assigned without any modification in XHTML code. Enable 'Go to top' link This parameter allows you to put 'Go to top' link at the bottom of page.0 Configuration Manual © http://www. additional module styles. etc.joomlashine. email. fixed alignment issues and some other minor visual enhancement. For more information please read section Typography of this document. additional module styles. which smoothly scrolls page to the top. Moreover. redesigned checkout-steps icons and some other minor visual enhancement. JSN Epic is able to detect links to various popular file extensions or communication protocols and assign icons accordingly. Currently JSN Epic supports 34 file types and it is truly amazing. For more information please read section Extended Styles of this document. Enable Community Builder Style This parameter allows you to have extended styles for Community Builder which includes adapted drop–down menu style.x) Colors in Selector This parameter allows you to specify series of color icons to be displayed in Color Selector.Official JSN Epic v3. Enable JEvents Style This parameter allows you to have extended style for JEvents which includes redesigned calendar navigation icons and calendar table. fixed alignment issues and some other minor visual enhancement. tabs color. adapted table header color. additional module styles and some other minor visual enhancement.

5.com (version for Joomla! 1. License Settings License Key This parameter allows you to register your product in our database. For getting the license key please visit section ‘Customer Area’ on our website www.joomlashine.Official JSN Epic v3.JoomlaShine. 9 .x) Enable JoomGallery Style This parameter allows you to have extended style for JoomGallery which includes redesigned navigation icons.0 Configuration Manual © http://www. additional module styles and some other minor visual enhancement. fixed alignment issues.com. Each product has unique license key attached to individual website (domain).

For example if you named your logo image file as mylogo.joomlashine.Official JSN Epic v3. The included JSN Epic logo source file logo. The logo image file is called logo. Logo Width – the width of your logo image file. then you just need to upload it to template’s images folder overwriting the original file and you are done. Stage 3: Setup template parameter to use new logo If you created your logo image with the same name and dimension as the default logo file.png can be the perfect starting point. Also you need remember logo’s width and height dimension to set them up in template parameters later. then the logo path should be "/images/stories/mylogo.png and located in folder joomla_root_folder/templates/jsn_epic_XXX/images/.com (version for Joomla! 1. You can upload it to any folder under your Joomla! root folder by using standard Joomla! Media Manager or by FTP client.png and placed it in folder /images/stories. Otherwise you need to setup following template parameters:  Logo Path – path to your logo image file starting from your Joomla! root folder.   10 .png". it’s time to upload it to your server.x) Logo The logo JSN Epic is default sample logo and you are free to replace with your own. you need to prepare your own logo image file in some graphic editor like Adobe Photoshop or Fireworks. Stage 2: Upload logo image file to your server Once your logo file is ready.0 Configuration Manual © http://www. where XXX is template edition you have. Logo Height . We recommend you to save your logo in format PNG-8.5.the height of your logo image file. Setup your own logo There are 3 stages involved in changing the default logo to your own: Stage 1: Prepare your own logo image file First. but you can use any other as well.

Logo Slogan .joomlashine.Slogan text to be attached to the logo image ALT text for SEO purpose. 11 .Official JSN Epic v3. Logo H1 tag – Choose whenever to wrap your logo into h1 tag for SEO purpose.x)    Logo Link – URL where logo image should link to (! without preceding slash !).5.com (version for Joomla! 1. If you don’t want your logo to be linkable just leave this box empty.0 Configuration Manual © http://www.

Info: To show a module in some position you just need to setup module’s Position parameter to appropriate value as described bellow. All module positions are collapsible which means if you don’t publish any modules in some position it will not take any blank spaces leaving those for neighbor modules.Official JSN Epic v3.joomlashine.0 Configuration Manual © http://www.5.x) Layout Module positions JSN Epic provides 21 module positions allowing you to have multiple layout configuration.com (version for Joomla! 1. 12 .

0 Configuration Manual © http://www. Moreover. only integer is allowed. Template width You need to configure template parameter Template Width setup overall layout width. Info: Width parameters are configured by template parameters: Template Width.x) Layout dimensions JSN Epic allows you to change width size for overall layout.joomlashine. Left Column Width and Right Column Width as described bellow. Example:  24% 13 . You just need to configure appropriate template parameters to get desired result.5% is incorrect. It can be specified in pixels (for fixed width) or percentage (for fluid width). for example 25% is correct. It can be specified only in percentage within range (18% 33%). left column and right column.5. Examples:   960px 88% Left column width You need to configure template parameter Left Column Width to setup left column width.com (version for Joomla! 1.Official JSN Epic v3. 25.

5% is incorrect.x) Right column width You need to configure template parameter Right Column Width to setup left column width. only integer is allowed. 25.5.joomlashine. Moreover. Example:  24% 14 . It can be specified only in percentage within range (18% 33%).com (version for Joomla! 1. for example 25% is correct.0 Configuration Manual © http://www.Official JSN Epic v3.

5. All available colors are described bellow.0 Configuration Manual © http://www.x) Style Template Color JSN Epic provides 6 major color variations for your taste. links.Official JSN Epic v3.joomlashine. table’s header and some others.com (version for Joomla! 1. but also color of drop-down menu. Each color variation covers not only the main background. Blue Red 15 .

This is default setting and has the lowest priority. 16 .0 Configuration Manual © http://www.5.com (version for Joomla! 1.joomlashine. template color can be set by template parameter Template Color in administration panel.Official JSN Epic v3.x) Green Violet Orange Grey Info: Template color can be configured by 3 following ways in order of increasing priority: First.

template color can be set from Color Selector by visitor. for example custom-colorred. This setting is considered as visitor’s preference and has top priority.Official JSN Epic v3. where xxx is the color you want to have.x) Second. Finally. It will overwrite both Page Class Suffix and default settings of parameter Template Color. - 17 .5. The suffix is custom-color-xxx.com (version for Joomla! 1.joomlashine. This setting will override the default settings by template parameter Template Color. template color can be set to particular page by proving Page Class Suffix to a menu item of that page.0 Configuration Manual © http://www.

5. Business / Corporation Website text style (default) This is the combination of Verdana (for heading text) and Arial (for content text). All available text styles are described bellow.com (version for Joomla! 1. This text style is little bigger then normal which make it perfect choice for small websites like personal or blog websites. Info: Text style is configured by template parameter Template Text Style. another for heading text and main navigation text. 18 . The combination of Georgia and Trebuchet MS makes content very easy to read and the looks impressive.x) Text Style JSN Epic provides 3 text style options for major website types.Official JSN Epic v3. The alternative fonts for Mac OS users are serif and Helvetica respectively. This compact neat text style is excellent choice for business oriented websites as well as corporate websites.joomlashine. 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. Each font style is actually a combination of 2 font types: one for content text. The alternative fonts for Mac OS users are Geneva and Helvetica respectively.0 Configuration Manual © http://www. Personal / Blog Website text style This is the combination of Georgia (for heading text) and Trebuchet MS (for content text).

Official JSN Epic v3.joomlashine. This text style utilizes another very popular font called Times New Roman.x) Online News / Magazines font style This is the combination of Palatino Linotype (for heading text) and Times New Roman (for content text). 19 . The alternative fonts for Mac OS users are Palatino and Times respectively. it’s worth to try this font combination. If you want to run online news / magazine website. This font is widely used in printing industry and in some of extremely popular online news website like The New York Times.0 Configuration Manual © http://www.com (version for Joomla! 1.5.

com (version for Joomla! 1.Official JSN Epic v3.0 Configuration Manual © http://www.x) Text Size JSN Epic provides 3 text size options for major website audience types.5.joomlashine. Small size Medium size Large size 20 .

template size can be set by template parameter Template Text Size in administration panel. This setting is considered as visitor’s preference and has top priority. It will overwrite default settings of parameter Template Text Size.5.x) Info: Template size can be configured by 2 following ways: Firstly. This is default setting and has the lowest priority.0 Configuration Manual © http://www. template size can be set from Text Size Selector by visitor. 21 . Secondly.joomlashine.Official JSN Epic v3.com (version for Joomla! 1.

Attention: Box designs for module background styling are applicable only for modules in side columns (position left and right) Box designs Box designs to be applied to modules published on side columns. All available values are described bellow and need to be applied without double quotes.0 Configuration Manual © http://www.5.x) Module Styles JSN Epic provides 4 box designs for module background styling and 20 icon designs for module title styling.joomlashine.com (version for Joomla! 1. Info: Module styles are configured by module’s parameter Module Class Suffix.Official JSN Epic v3. All module title styles can be used in combination with module background styles and this gives you 80 module style combinations. “-box box-blue” “-box box-green” “-box box-yellow” “-box box-grey” 22 .

Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)

Icon designs
Icon designs to be applied to module’s title. “-plain icon-article” “-plain icon-calendar” “-plain icon-cart” “-plain icon-comment” “-plain icon-display” “-plain icon-download” “-plain icon-online” “-plain icon-folder” “-plain icon-help” “-plain icon-home” “-plain icon-image” “-plain icon-info” “-plain icon-mail” “-plain icon-rss” “-plain icon-search” “-plain icon-selection” “-plain icon-setting” “-plain icon-star” “-plain icon-statistic” “-plain icon-user”

Info: As with version 3.0 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.

23

Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)

Combination usage
All icon designs can be used in combination with plain module design like bellow examples:

“-plain icon-star”

“-box box-blue icon-statistic”

Also icon styles can be used in combination with box module styles like shown bellow:

“-box box-green icon-user”

“-box box-yellow icon-article”

24

Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)

Menu
JSN Epic provides 5 menu styles to display your website navigation on virtually any position. In Joomla! 1.5.x JSN Epic utilizes Joomla! built-in menu module to show menus, so you don’t need to install any external menu modules.

Main Menu

By just combination 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. Please make following steps to setup Main 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 various menu modules and there is Main Menu module among them. That might be the perfect choice. 2. In module’s configuration page setup following parameters:          Title: Main Menu (or any other you like) Show title: No Enabled: Yes Position: mainmenu Menu Assignment: All Menu Name: mainmenu (you might want to use another menu source here) Menu Style: List Start Level: 0 End Level: 0 25

0 Configuration Manual © http://www.x)     Always show sub-menu Items: Yes Menu Tag ID: base-mainmenu Menu Class Suffix: empty Module Class Suffix: empty Special visual effects Starting from version 3. Another visual effect included in version 3. Now you need to go to template configuration page and setup icons to be shown in the menu. To enable the effect go to template configuration page and set template parameter Main Menu Effect to Yes. The cool thing here is it utilizes built-in Joomla! MooTools Javascript so there is minimal addition to template size.com (version for Joomla! 1. 26 .5.0 JSN Epic provide smooth drop down animation for submenu panels. JSN Epic lets you configure which icon will be shown in Main Menu via template parameter Main Menu Icons. Main Menu Icons In version 3. CSS and PHP. To enable submenu transparency you need to set template parameter Main Menu Transparency to Yes.Official JSN Epic v3.0 is transparency for submenu panels.0. By a combination of XHTML. Main Menu Icons also allows you to assign up to 20 predefined icons to menu items like Top Menu Icons and arrange them in horizontal.joomlashine. Find template parameter Main Menu Icons and specifying icon names are separated by comma.

For more information about which icon can be used here. so the sixth icon home is not used. please read more at Top Menu Icons section.Official JSN Epic v3.com (version for Joomla! 1.x) In the example above the menu Main Menu only has 5 menu items.joomlashine. 27 .0 Configuration Manual © http://www.5.

That might be the perfect choice. Joomla! 1.com (version for Joomla! 1. Submenu items of each level have their own bullets to make it easier to distinguish. In module’s configuration page setup following parameters:        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) Menu Style: List 28 .joomlashine.0 Configuration Manual © http://www. By default.x) Tree Menu The side menu you see on left column is vertical tree-like menu presentation called Tree Menu. In module manager click on the menu module you want to use as main menu module.5. By default all submenu items are collapsed until you select the parent menu item.5 comes with various menu modules and there is Key Concepts module among them. Please make following steps to setup Tree Menu: 1. 2.Official JSN Epic v3.

Official JSN Epic v3. They are absolutely different parameters.joomlashine.x)       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 Info: In above example we used Yellow Box module styles.5. 29 .0 Configuration Manual © http://www. but you can use any other module styles. Note: There is common misconception about Menu Class Suffix and Module Class Suffix. so please pay attention on their settings.com (version for Joomla! 1.

They are absolutely different parameters. By default. That might be the perfect choice.5 comes with various menu modules and there is Resources module among them.joomlashine. 30 . In module’s configuration page setup following parameters:              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 Menu Tag ID: empty Menu Class Suffix: -divmenu Module Class Suffix: empty Note: There is common misconception about Menu Class Suffix and Module Class Suffix. Div Menu in JSN Epic generates pure HTML list for menu structure and uses CSS to show dashes.x) Div Menu The Div Menu in the bottom position is simple yet nice menu bar with items separated by slightly visible dashes.0 Configuration Manual © http://www. Joomla! 1. In module manager click on the menu module you want to use as top menu module. Default Joomla! method generates additional HTML tags to show dashes which is not very clean.Official JSN Epic v3.5. so please pay attention on their settings. 2.com (version for Joomla! 1. Please make following steps to setup Div Menu: 1.

5. In module’s configuration page setup following parameters:              Title: Top Menu (or any other you like) Show title: No Enabled: Yes Position: inset Menu Assignment: 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 Module Class Suffix: empty Note: There is common misconception about Menu Class Suffix and Module Class Suffix. By combination XHTML. That might be the perfect choice.0 Configuration Manual © http://www. so please pay attention on their settings. This is perfect for top position in any kind of websites.Official JSN Epic v3.x) Top Menu Icons The top menu you see on JSN Epic demo website is a very innovative Icon menu system called Icon Menu. Please make following steps to setup icon menu: 1. They are absolutely different parameters. 2. By default. CSS and PHP Icon Menu allows you to assign up to 20 predefined icons to menu items and arrange them in horizontal line.joomlashine. 31 . In module manager click on the menu module you want to use as top menu module. Joomla! 1.5 comes with various menu modules and there is Top Menu module among them.com (version for Joomla! 1.

“star” .“info” . Now you need to go to template configuration page and setup icons to be shown in the menu. please read more about CSS sprites.“folder” .0 JSN Epic utilize CSS sprite technique to reduce amount of HTTP request to server in order to get icons.0 Configuration Manual © http://www. Technically.“comment” .“statistic” . .“cart” .“home” .“setting” .“article” .5. In the example above the menu topmenu only has 5 menu items.“rss” .x) 3. If you have some extra time.“help” .“image” . so the sixth icon mail is not used.“calendar” .“mail” .Official JSN Epic v3.“selection” .joomlashine.“user” Info: As with version 3.com (version for Joomla! 1. 32 .“search” . As stated before there are 20 predefined icons for you to choose. Find template parameter Top Menu Icons and specifying icon names separated by comma. 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. Bellow is table of all available icons and their name.“display” .“download” .“online” .

joomlashine.5 comes with various menu modules and there is Key Concepts module among them. 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. By default. That might be the perfect choice.x) Side Menu Starting from version 3. Joomla! 1.5. 2. Please make following steps to setup Side Menu: 1.com (version for Joomla! 1.0 JSN Epic provides vertical menu with slide.Official JSN Epic v3. In module’s configuration page setup following parameters:            Title: Side 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) Menu Style: List Start Level: 0 End Level: 0 Always show sub-menu Items: Yes Menu Tag ID: empty 33 .out subpanels called Side Menu.0 Configuration Manual © http://www. In module manager click on the menu module you want to use as main menu module. By just combination XHTML.

joomlashine. They are absolutely different parameters. This feature also utilizes built-in Joomla! MooTools Javascript so there is minimal addition to template size. To enable the effect go to template configuration page and set template parameter Side Menu Effect to Yes.0 Configuration Manual © http://www. but you can use any other module styles. 34 .5. Submenu panels of Side Menu can be semi-transparent as well. so please pay attention on their settings.x)   Menu Class Suffix: -sidemenu Module Class Suffix: -box box-yellow Info: In above example we used Yellow Box module styles. To enable submenu transparency you need to set template parameter Side Menu Transparency to Yes.com (version for Joomla! 1. Note: There is common misconception about Menu Class Suffix and Module Class Suffix.Official JSN Epic v3. Special visual effects Pretty the similar to Main Menu JSN Epic provide smooth slide out animation for submenu panels.

Headings. etc. everything was designed with high level of refinement. Let’s take a look. <h2>…</h2>. 35 . links. text. images. headings are “title” of undergoing text blocks. so it must have distinguish look. To apply them you just need to wrap your heading text in regular heading tags like <h1>…</h1>.joomlashine. JSN Epic provides styling for 5 main headings.5.com (version for Joomla! 1.0 Configuration Manual © http://www. tables.Official JSN Epic v3. <h3>…</h3>. Headings As we all know.x) Typography JSN Epic was created with extreme focus on typography and we believe it contains the most comprehensive content presentation capability.

com (version for Joomla! 1. columns. The only thing you just need to do is to set class grid-layout to parent DIV. Content arranged in 2 columns Example: <div class=”grid-layout”> <div>Content in the first column.. JSN Epic offers you very convenient and accessible method to create multiple column content.5. Another improvement is now the required XHTML code is much simpler. . In general maximum recommended column amount is 5.joomlashine. 5. JSN Epic will detect the amount of columns you have and automatically make arrangement.0 you can arrange your content in as many columns as you like.</div> <div>Content in the second (last) column</div> </div> Content arranged in 3 columns Example: <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.0 Configuration Manual © http://www.Official JSN Epic v3. As with version 3.x) Text columns It’s pretty common situation when you need to arrange your content in multiple columns. This is real step forward removing table tags from your content and leaving them only for showing tabular data. otherwise columns will be too narrow and hard to read. Bellow are screenshot of how does this feature look and example how to use it. 36 .

This will allow you to choose typography class directly from WYSIWYG editor built-in Joomla.5. Another thing is your text in WYSIWYG editor will look like it is on the website since the real CSS styles are applied.Official JSN Epic v3. As with version 3. without switching to HTML mode. idea or a fragment from some book. Preformatted text You can use this style to present text with preserved spaces like text block of CSS code or other programming language.0 all CSS settings for typography have been moved to dedicated CSS file template.css.0 Configuration Manual © http://www. articles.com (version for Joomla! 1.joomlashine. Bellow are screenshots of text styles and usage examples. etc. Example: <pre>Your preformatted text</pre> Quote text You can us this style to quote somebody’s speech.x) Text styles JSN Epic provides 10 text styles for making your content easier to scan and read. 37 .

joomlashine.</p> 38 .com (version for Joomla! 1.0 Configuration Manual © http://www. Example: <p class=”text-dropcap”>Your magazine text paragraph.5.Official JSN Epic v3.x) Example: <blockquote>Your quote text</blockquote> Drop cap symbol You can use this special drop cap symbol style for magazine / newspaper text paragraph.

com (version for Joomla! 1.Official JSN Epic v3.5.0 Configuration Manual © http://www. Example: <span class=”text-highlight”>Text to be highlighted.</span> 39 .x) Highlighted text You can use this style to highlight important words and / or keyword expression in search result page.joomlashine.

Example: <p class="text-info">Your information text.</p>.x) Alert text You can use this style for alert or warning text paragraph requiring user’s attention.</p>.joomlashine. Example: <p class="text-alert">Your alert text that requires user’s attentions.Official JSN Epic v3. You can use tag <p> like in example or tag <div> as well.com (version for Joomla! 1.5.0 Configuration Manual © http://www. 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 user’s attentions. 40 .

</p>. You can use tag <p> like in example or tag <div> as well. hint or help text.joomlashine.x) Download text You can use this style for information text paragraph related to download process.0 Configuration Manual © http://www.Official JSN Epic v3. 41 .</p>. hint or help text. You can use tag <p> like in example or tag <div> as well.com (version for Joomla! 1. Tip text You can use this style for useful information like tips. Example: <p class="text-tip">Your tip. Example: <p class="text-download">Your download text.5.

0 Configuration Manual © http://www. Attachment text You can use this style for information text paragraph related to attachment file. Example: <p class="text-comment">Your comment text.</p>. Example: <p class="text-attachment">Your attachment text.</p>. 42 . You can use tag <p> like in example or tag <div> as well.com (version for Joomla! 1. Example: <p class="text-video">Your video text.Official JSN Epic v3. Video text You can use this style for description text paragraph that related to video file.joomlashine.</p>.x) Comment text You can use this style for comment text paragraph.5. You can use tag <p> like in example or tag <div> as well. You can use tag <p> like in example or tag <div> as well.

43 .5.x) Audio text You can use this style for description text paragraph related to audio file.Official JSN Epic v3. Example: <p class="text-audio">Your attachment text.</p>.joomlashine.com (version for Joomla! 1.0 Configuration Manual © http://www. You can use tag <p> like in example or tag <div> as well.

etc.com (version for Joomla! 1. but still want to manually apply icon to links. Bellow is class specification for all supported links: Manual icon assignment 44 . it can detect protocol type to assign icons to links to instant messengers.joomlashine.0 Configuration Manual © http://www. Currently JSN Epic supports 34 file types and it is truly amazing. email. this can help if for some reason you turned off auto icon link template parameter. Unfortunately IE6 does not support this specification and you have manually set appropriate class for links.x) Link styles Automatic icon assignment JSN Epic is able to detect links to various popular file extensions and assign icons accordingly.Official JSN Epic v3. Also. Moreover.5. Auto icon assignment (in all modern browsers except IE6) Manual icon assignment As stated before for most browsers icons will automatically assigned thanks to modern CSS2 specification. This feature utilizes modern CSS2 specification and allows you to have links with meaningful icons assigned without any modification in XHTML code.

joomlashine.x) Info: As with version 3.5.com (version for Joomla! 1.0 Configuration Manual © http://www. Technically.Official JSN Epic v3. If you have some extra time. please read more about CSS sprites. 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.0 JSN Epic utilize CSS sprite technique to reduce amount of HTTP request to server in order to get icons. 45 .

.com (version for Joomla! 1.. Plain Rows table style Example: <table class="table-plainrows"><thead>..</thead><tbody>.</tfoot></table> Color Stripes table style Example: <table class="table-colorstripes"><thead>. By default tables look ugly and not much readable.</thead><tbody>.x) Table styles Tabular data is very common type of information to be presented on the web..0 Configuration Manual © http://www..5.</tbody><tfoot>.Official JSN Epic v3..</tfoot></table> 46 ... With JSN Epic you have 3 table styles to present virtually any kind of tabular data you have..</tbody><tfoot>...joomlashine..

....x) Grey Stripes table style Example: <table class="table-greystripes"><thead>.joomlashine. Bellow is an example of solid XHTML code for table.</tbody><tfoot>.....Official JSN Epic v3. you need to create solid XHTML code as foundation. </tbody> <tfoot><tr> <th scope="row">Table footer</th> <td colspan="2">Footer data</td> </tr></tfoot> </table> 47 . <table width="100%" summary="Plain Rows style"> <thead><tr> <th scope="col">Table header</th> <th scope="col">Column header 1</th> <th scope="col">Column header 2</th> </tr></thead> <tbody> <tr class="odd"> <th scope="row">Row header 1</th> <td>Lorem ipsum</td> <td>Dolor sit amet</td> </tr> .com (version for Joomla! 1.</tfoot></table> Note: In order to get table styles shown correctly.0 Configuration Manual © http://www.</thead><tbody>.5.

List really helps readers to distinguish and remember important things by just a glance. not only online websites.joomlashine. but offline publications as well. JSN Epic offers 5 standard list with advanced icon list..0 Configuration Manual © http://www..com (version for Joomla! 1..x) List styles Lists are crucial element in every content.Official JSN Epic v3.</ol> Red arrow Blue arrow Green arrow <ul class="list-arrow-red"></ul> … </ul> <ul class="list-arrow-blue"> … </ul> <ul class="list-arrow-green"> … </ul> 48 .</ul> <ol>. 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>.5.

5.Official JSN Epic v3.x) Icon list styles Article icon list Folder icon list <ul class="list-icon article-list">…</ul> <ul class="list-icon folder-list">…</ul> Image icon list Online icon list <ul class="list-icon image-list">…</ul> <ul class="list-icon online-list">…</ul> Star icon list User icon list <ul class="list-icon star-list">…</ul> <ul class="list-icon user-list">…</ul> 49 .0 Configuration Manual © http://www.com (version for Joomla! 1.joomlashine.

com (version for Joomla! 1.x) Number list style Blue Bullet number list Green Bullet number list <ul class="list-number-bullet blue-bullet">…</ul> <ul class="list-number-bullet green-bullet">…</ul> Grey Bullet number list Orange Bullet number list <ul class="list-number-bullet grey-bullet">…</ul> <ul class="list-number-bullet orangebullet">…</ul> 50 .Official JSN Epic v3.0 Configuration Manual © http://www.5.joomlashine.

com (version for Joomla! 1.0 Configuration Manual © http://www.5.x) Red Bullet number list Violet Bullet number list <ul class="list-number-bullet red-bullet">…</ul> <ul class="list-number-bullet violetbullet">…</ul> Blue Digit number list Green Digit number list <ul class="list-number-digit blue-digit">…</ul> <ul class="list-number-digit green-digit">…</ul> 51 .joomlashine.Official JSN Epic v3.

com (version for Joomla! 1.joomlashine.0 Configuration Manual © http://www.5.x) Grey Digit number list Orange Digit number list <ul class="list-number-digit grey-digit">…</ul> <ul class="list-number-digit orange-digit">…</ul> Red Digit number list Violet Digit number list <ul class="list-number-digit red-digit">…</ul> <ul class="list-number-digit violet-digit">…</ul> 52 .Official JSN Epic v3.

0 Configuration Manual © http://www.Official JSN Epic v3.com (version for Joomla! 1. Some of these extensions have their own template system and you are free to use them. You can download the extensions on Joomla Extensions Directory http://extensions.joomlashine. In that case. you need to turn off extended style by tweaking template parameter and use the native extension’s template you want. Notes:  The extensions above are not included in the template package and you have to download separately.org/ 53 .joomla.x) Extended Styles One of hottest features in JSN Epic is extended styles adapted for 5 most popular Joomla! extension: K2. Virtue Mart. Community Builder.5. Technically extended styles are overrides of default extension’s style. JEvents and JoomGallery.

x) K2 Extended style for K2 includes adapted tabs color. Component styling To apply extended style for K2 you need to set template parameter Enable K2 Style to Yes.Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine. additional module styles. fixed alignment issues and some other minor visual enhancement.com (version for Joomla! 1. Here is how K2 component will look like after extended styles applied. 54 .5. Enhanced visual style and fixed alignment issues.

joomlashine.0 Configuration Manual © http://www.5. In the example above: Module style -box box-green icon-article has been applied to module K2 Content (mod_k2_content) 55 .x) Module styling Besides from extended component styling you can use template module styles for K2 modules as well.Official JSN Epic v3.com (version for Joomla! 1.

joomlashine. Adapted drop-menu style and tabs color on CB Profile page 56 .Official JSN Epic v3.com (version for Joomla! 1.x) Community Builder Extended style for Community Builder includes adapted drop–down menu style.5. Component styling To apply extended style for Community Builder you need to set template parameter Enable Community Builder Style to Yes.0 Configuration Manual © http://www. tabs color. Here is how Community Builder component will look like after extended styles applied. additional module styles and some other minor visual enhancement.

com (version for Joomla! 1. In the example above: Module style -box box-blue icon-user has been applied to module CB Login (mod_cblogin) Module style -box box-grey has been applied to module CB Online (mod_comprofilerOnline) 57 .0 Configuration Manual © http://www.x) Module styling Besides from extended component styling you can use template module styles for Community Builder modules as well.Official JSN Epic v3.5.joomlashine.

5.com (version for Joomla! 1. Component Styling To apply extended style for Virtue Mart you need to make following steps: 1.Official JSN Epic v3. additional module styles. fixed alignment issues.x) Virtue Mart Extended style for Virtue Mart includes adapted Add to Cart button. Go to folder joomla_root_folder/templates/jsn_epic_XXX/ext/vm/checkout and copy all graphic files to folder joomla_root_folder/ components/com_virtuemart/themes/default/images/checkout Adapted Add to Cart button on Product Browse page 58 . redesigned checkout-steps icons and some other minor visual enhancement. Set template parameters Enable VirtueMart Style to Yes 2.0 Configuration Manual © http://www.joomlashine.

0 Configuration Manual © http://www.joomlashine.Official JSN Epic v3.x) Fixed alignment issues on Product Details page Totally redesigned checkout-steps icons on Checkout page 59 .5.com (version for Joomla! 1.

In the example above: Module style -box box-blue icon-cart has been applied to module VirtueMart Module (mod_virtuemart) 60 .0 Configuration Manual © http://www.joomlashine.Official JSN Epic v3.5.x) Module styling Besides from extended component styling you can use template module styles for Virtue Mart modules as well.com (version for Joomla! 1.

com (version for Joomla! 1.x) JEvents Extended style for JEvents includes redesigned calendar navigation icons and calendar table. additional module styles.Official JSN Epic v3. fixed alignment issues and some other minor visual enhancement. Totally redesigned calendar navigation icons 61 . Component Styling To apply extended style for JEvents you need to set template parameters Enable JEvents Style to Yes.0 Configuration Manual © http://www. adapted table header color.5.joomlashine.

Official JSN Epic v3.x) Adapted calendar table header color Adapted table header color on Event List page 62 .5.com (version for Joomla! 1.0 Configuration Manual © http://www.joomlashine.

x) Module styling Besides from extended component styling you can use template module styles for JEvents modules as well.Official JSN Epic v3.com (version for Joomla! 1. In the example above: Module style -box box-blue icon-calendar has been applied to module Events Calendar (mod_jevents_cal) Module style -box box-green icon-star has been applied to module Latest Events (mod_jevents_latest) 63 .0 Configuration Manual © http://www.joomlashine.5.

Component Styling To apply extended style for JoomGallery you need to set template parameters Enable JoomGallery Style to Yes.x) JoomGallery Extended style for JoomGallery includes redesigned navigation icons.Official JSN Epic v3. Totally redesigned navigation bar and information panel 64 . fixed alignment issues.com (version for Joomla! 1.5. additional module styles and some other minor visual enhancement.0 Configuration Manual © http://www.joomlashine.

5.Official JSN Epic v3.0 Configuration Manual © http://www.com (version for Joomla! 1.x) Fixed alignment issues with 65 .joomlashine.

com (version for Joomla! 1.0 Configuration Manual © http://www.5. In the example above: Module style -box box-green icon-cart has been applied to module JoomGallery Latest Categories (mod_jglatestcart) Module style -box box-yellow icon-image has been applied to module JoomGallery Treeview (mod_jgtreeview) Module style -box box-grey icon-star has been applied to module JoomGallery Stats (mod_joomgallerystats) 66 .Official JSN Epic v3.joomlashine.x) Module styling Besides from extended component styling you can use template module styles for JoomGallery modules as well.

x) Usability & Accessibility Template language file One of the most remarkable enhancements of Joomla! 1. Open newly created files start translating text strings there. Back-end and front-end language files are stored in separated folders as following: a. Make a copy of current English language file en-GB.x over 1. Please note that there are 2 language files with the same name: a. you can manually copy your language file in appropriate language folders. edit them from there and include them in the template when finished.0x is internationalization. selecting your own language as the default language in Joomla! and you will see all your native wordings as in template language file.5.ini.5.5.ini. Here what you need to do: 1. As with JSN Epic version 3.tpl_jsn_epic_XXX.0 all wordings in both back-end and front-end are moved to separated language files.Official JSN Epic v3. {joomla_root_folder}/language/{language_folder} If you don’t want to repack and reinstall the template every time. Joomla! 1. The file in template folder admin is the back-end language file. like de-DE. so you can easily translate them into any language you want.0 Configuration Manual © http://www. After all above.joomlashine. {joomla_root_folder}/administrator/language/{language_folder} b. 4.x template has powerful language mechanism which allow us to have template in multiple languages. The file in root template folder is the front-end language file. Make a template package and reinstall it. where XXX is template edition you have. but we will expand language set in future versions.com (version for Joomla! 1. 3. b. This step is necessary since by installation Joomla! will copy all template language files to it’s own location to be used from there. Give it appropriate name of your language. only English language file is included. Info: Currently.tpl_jsn_epic_XXX. 2. 67 .

joomlashine.Official JSN Epic v3. the Site tools menu will not be shown at all. old people can experience your website better with Big text size selected. like blue. Read section Template language file of this document to learn more about this. Text Size Selector By providing Text Size Selector you allow your website visitors to select the optimal text size for them.x) Site Tools As with version 3. “Text size”. you can have multiple language file to meet your target audience. 68 . Both selectors are elegantly arranged in a drop down menu called Site Tools. Just type colors you want to include spitted by comma. For example. just turn this selector off by setting template parameter Enable Color Selector to No. etc can be easily changed in template language file any time you want. More over.com (version for Joomla! 1. transparency and background color settings will be inherited from settings of Main Menu.0 Configuration Manual © http://www. All settings from Site tools will be stored as visitor’s browser cookies for further usage. See section Menu for more information on this.red. If both Text Size Selector and Color Selector are disabled.0 JSN Epic provides 2 brand new features to enhance website user experience: Text Size Selector and Color Selector. You can disable this selector if you want by setting template parameter Enable Text Size Selector to No.green. This is very cool feature for social kind of websites where visitor’s preferences are most appreciated.5. In the case your website has strong identity color and you don’t want visitor to select any other color. Info: The subpanel drop-down animation. Color Selector As followed by the name Color Selector allow your website visitor choose the color them they like. You can even setup what color to include in the selector by setting template parameter Colors in Selector. All the wordings like “Site tools”.

0 Configuration Manual © http://www.joomlashine. 69 . As usual.com (version for Joomla! 1.Official JSN Epic v3.0 is the “Go to top” link.x) “Go to top” Link One more feature added in JSN Epic version 3. you can turn this feature off if you want by setting template parameter Enable 'Go to top' link to No.5. As followed by the name this link is placed at the bottom content page and will move your website visitor to the top of the page.

com called JSN ImageShow. For example. so if you are going to show photos.Official JSN Epic v3. This extension is NOT included in the template download package and you have to download it separately from our website www. if you have slideshow area with size 450px * 300px (the ratio is 1. 70 . You can use Media Manager in Joomla! administration or you can use your favorite FTP client. After installation of JSN ImageShow you need to prepare your images and configure JSN ImageShow appropriately. it’s time to upload them to your server.x) Other features Header image slideshow The header image slideshow you see on JSN Epic demo website is another cool Joomla! extension from JoomlaShine.com.com (version for Joomla! 1.joomlashine. when your images are ready. For example. but for the best result we’d recommend you to pay attention to preparing your images. please use JPEG format.6) or 525px * 375px (the ratio is 1. Stage 2: Upload images to your server Now.5) then your images would better be: 375px * 235px (the ratio is 1. Stage 1: Prepare images to be included in slideshow In this stage you are going to get your images ready for the slideshow.joomlashine. you can create folder myphotos under folder images/stories and upload all your images there. The main thing here is to crop your images so they have size similar to slideshow area size.5. JSN ImageShow is able to automatically resize your images to match the slideshow size. Another thing worth mention here is JSN ImageShow works best with JPEG format. That means the width/height ratio of sizes should be the same or similar.0 Configuration Manual © http://www.4).

but you are free to tweak a lot of other parameters to get desired view and effects.com (version for Joomla! 1.x) Stage 3: Setup parameters for JSN ImageShow module Now when you have your images prepared and uploaded to some folder on your server. Click on JSN ImageShow item in the list and setup parameters as following:        Show title: No Position: promo Enabled: Yes Image Folder: images/stories/myphotos (this is example folder discussed in previous stage) Width: 100% Height: 250 Menu Assignment: All (or at least Home) Above parameters are quite enough for JSN ImageShow to start showing images. it’s time to setup JSN ImageShow module.joomlashine. Please make following steps: 1. Attention: All stock photos used on JSN Epic demo website are only for demo purposes and NOT included in the template package. 71 . 2.0 Configuration Manual © http://www.Official JSN Epic v3.5. Go to module manager by menu Extensions -> Module Manager.

In this manual you will find detailed description about how to customize every bits of the template to make it suite you. so don’t forget to visit www.x) What’s next? Now as you have learnt every features of the template.com.joomlashine.com (version for Joomla! 1.joomlashine. feedbacks. Read the latest updated tutorials We are updating our tutorial database frequently.0 Configuration Manual © http://www. Give a feedback We are continuously working on new releases of our products and would really appreciate any of your comments.com to check something new. 72 .Official JSN Epic v3. Go ahead and open next documentation came with JSN Epic package called JSN Epic v3.joomlashine. Feel free to drop us a line at www. it’s time to move on and customize it for your need.0 Customization Manual.5. . Also don’t miss our brand-new video tutorials section.