jsn-epic-configuration-manual
Transcript of jsn-epic-configuration-manual
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 Manualversion (the only) for Joomla! 1.5.x
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
2
Table of Contents
Official JSN Epic v3.0 Configuration Manual ...................................................................................................1Table 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
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
3
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:
- This document assumes that you already have installed Joomla! CMS with sample data included and JSN
Epic template as well.
- Features marked with are available only in JSN Epic Free edition.
- Features marked with are available only in JSN Epic PRO edition and not available in Free & STD
edition.
Tips:
- For the latest updated tutorials please visit www.joomlashine.com. Also don’t miss our brand-new video
tutorials section.
Let’s roll!
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
4
Template parameters
JSN Epic provides 31 template parameters for superior convenient template management. Before learning about
each template feature in details, let’s first understand how to setup template parameters. You need to 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. Now
you need to setup appropriate value for parameters you want.
4) Click button Save to save all changes you made.
Now, let’s take a quick overview of all template parameters available in JSN Epic.
Logo Settings
Bellow is brief overview of all template parameters related to logo configuration. For more information please read
section Logo of this document.
Logo Path, Logo Width, Logo Height
These 3 parameters allow you to setup your own logo image to replace the default JSN Epic logo.
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
5
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. You can leave this parameter empty if you
do NOT want your logo to be clickable at all.
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, so you can setup some keyword-rich string here for
better 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 setup overall template width. Here you can specify value in pixels and your template
will have that fixed width. Or you can specify value in percentage and your template will have fluid width at
specified percentage of browser window’s width.
Left Column Width
This parameter allows you to setup left column width. You can specify value in percentage within range (18% -
33%) and only integer is allowed, for example 25% - correct, 25.5% - incorrect
Right Column Width
This parameter allows you to setup right column width. You can specify value in percentage within range (18% -
33%) and only integer is allowed, for example 25% - correct, 25.5% - incorrect
Left Stick Position Alignment
This parameter allows you to setup position of left stick module. There are 3 options for your choice: top, middle
and bottom positions.
Right Stick Position Alignment
This parameter allows you to setup position of right stick module. There are 3 options for your choice: top, middle
and bottom position.
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
6
Show Mainbody on Frontpage
This parameter allows you to specify whenever to display mainbody area on front-page or not. Sometimes, you
might want to have super clean front-page with only single module displaying introduction ad for example. In this
case you might want to hide mainbody area on front-page.
Style Settings
Bellow are brief overview of all template parameters related to style configuration. 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. 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, table’s header and some other graphic elements.
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.
Template Text Size
This parameter allows you to select template text size that suites your website audience best. JSN Epic 3 text sizes
for major website audiences.
Menu & Effects Settings
Bellow is brief overview of all template parameters related to menu configuration. For more information please
read section Menu of this document.
Top Menu Icons
This parameter allows you to specify series of icons to be used in Top Menu, one of the hottest features in JSN
Epic. By a combination of XHTML, 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. This is perfect for the top position in any kind of
websites.
Main Menu Effect
This parameter allows you to have smooth drop-down animation when Main Menu subpanel appears. Main Menu
is the horizontal menu bar under the logo.
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
7
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.
Main Menu Icons
This parameter allows you to specify series of icons to be used in Main Menu, one of the hottest features in JSN
Epic. By a combination of XHTML, 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.
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.
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.
Accessibility Settings
Bellow are brief overview of all template parameters related to accessibility configuration. For more information
please read section Accessibility of this document.
Enable Logo H1 tag
This parameter allows you to wrap website slogan to h1 tag. This is great feature to improve your website SEO and
accessibility.
Enable Text Size Selector
This parameter allows you to display a selector for your visitors to choose website text size. By allowing your
visitors to select text size you can greatly enhance overall website accessibility and usability.
Note: Settings from this selector are considered as visitor’s preference and have top priority. It will overwrite
default settings of parameter Template Text Size.
Enable Color Selector
This parameter allows you to display a selector for your visitors to choose website color theme.
Note: Settings from this selector are considered as visitor’s preference and have top priority. It will overwrite
default settings of parameter Template Color.
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
8
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.
Enable 'Go to top' link
This parameter allows you to put 'Go to top' link at the bottom of page, which smoothly scrolls page to the top.
Nice and good for website 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.
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 drop–down
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.
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
9
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.
License Settings
License Key
This parameter allows you to register your product in our database. Each product has unique license key attached
to individual website (domain). For getting the license key please visit section ‘Customer Area’ on our website
www.JoomlaShine.com.
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
10
Logo
The logo JSN Epic is default sample logo and you are free to replace with your own. The logo image file is called
logo.png and located in folder joomla_root_folder/templates/jsn_epic_XXX/images/, where XXX is template
edition you have.
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, 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, but you can use any other as well. Also you need remember
logo’s width and height dimension to set them up in template parameters later. The included JSN Epic logo source
file logo.png can be the perfect starting point.
Stage 2: Upload logo image file to your server
Once your logo file is ready, it’s time to upload it to your server. You can upload it to any folder under your
Joomla! root folder by using standard Joomla! Media Manager or by FTP client.
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, then you just need to
upload it to template’s images folder overwriting the original file and you are done. Otherwise you need to setup
following template parameters:
Logo Path – path to your logo image file starting from your Joomla! root folder. For example if you named
your logo image file as mylogo.png and placed it in folder /images/stories, then the logo path should be
"/images/stories/mylogo.png";
Logo Width – the width of your logo image file;
Logo Height - the height of your logo image file;
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
11
Logo Link – URL where logo image should link to (! without preceding slash !). If you don’t want your
logo to be linkable just leave this box empty.
Logo Slogan - Slogan text to be attached to the logo image ALT text for SEO purpose.
Logo H1 tag – Choose whenever to wrap your logo into h1 tag for SEO purpose.
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
12
Layout
Module positions
JSN Epic provides 21 module positions allowing you to have multiple layout configuration. 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.
Info: To show a module in some position you just need to setup module’s Position parameter to appropriate value
as described bellow.
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
13
Layout dimensions
JSN Epic allows you to change width size for overall layout, left column and right column. You just need to
configure appropriate template parameters to get desired result.
Info: Width parameters are configured by template parameters: Template Width, Left Column Width and Right
Column Width as described bellow.
Template width
You need to configure template parameter Template
Width setup overall layout width. It can be specified
in pixels (for fixed width) or percentage (for fluid
width).
Examples:
960px
88%
Left column width
You need to configure template parameter Left
Column Width to setup left column width. It can be
specified only in percentage within range (18% -
33%). Moreover, only integer is allowed, for example
25% is correct, 25.5% is incorrect.
Example:
24%
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
14
Right column width
You need to configure template parameter Right
Column Width to setup left column width. It can be
specified only in percentage within range (18% -
33%). Moreover, only integer is allowed, for example
25% is correct, 25.5% is incorrect.
Example:
24%
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
15
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, table’s header and some others.
All available colors are described bellow.
Blue
Red
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
16
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 by template parameter Template Color in administration panel. This is
default setting and has the lowest priority.
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
17
- Second, template color can be set to particular page by proving Page Class Suffix to a menu item of that
page. The suffix is custom-color-xxx, where xxx is the color you want to have, for example custom-color-
red. This setting will override the default settings by template parameter Template Color.
- Finally, template color can be set from Color Selector by visitor. This setting is considered as visitor’s
preference and has top priority. It will overwrite both Page Class Suffix and default settings of parameter
Template Color.
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
18
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.
Info: 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.
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.
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
19
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, it’s worth to try this font combination.
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
20
Text Size
JSN Epic provides 3 text size options for major website audience types.
Small size
Medium size
Large size
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
21
Info: Template size can be configured by 2 following ways:
- Firstly, template size can be set by template parameter Template Text Size in administration panel. This is
default setting and has the lowest priority.
- Secondly, template size can be set from Text Size Selector by visitor. This setting is considered as visitor’s
preference and has top priority. It will overwrite default settings of parameter Template Text Size.
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
22
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.
Info: Module styles are configured by module’s parameter Module Class Suffix. All available values are
described bellow and need to be applied without double quotes.
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.
“-box box-blue” “-box box-green”
“-box box-yellow” “-box box-grey”
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
23
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.
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
24
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”
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
25
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
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
26
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.0 JSN Epic provide smooth drop down animation for submenu panels. The cool thing here
is it 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 Main Menu Effect to Yes.
Another visual effect included in version 3.0 is transparency for submenu panels. To enable submenu transparency
you need to set template parameter Main Menu Transparency to Yes.
Main Menu Icons
In version 3.0, JSN Epic lets you configure which icon will be shown in Main Menu via template parameter Main
Menu Icons. By a combination of XHTML, CSS and PHP, 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.
Now you need to go to template configuration page and setup icons to be shown in the menu. Find template
parameter Main Menu Icons and specifying icon names are separated by comma.
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
27
In the example above the menu Main Menu only has 5 menu items, so the sixth icon home is not used. For more
information about which icon can be used here, please read more at Top Menu Icons section.
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
28
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 main menu module. By default, Joomla!
1.5 comes with various menu modules and there is Key Concepts module among them. That might be the
perfect choice.
2. 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
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
29
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, but you can use any other module styles.
Note: There is common misconception about Menu Class Suffix and Module Class Suffix. They are absolutely
different parameters, so please pay attention on their settings.
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
30
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 top menu module. By default, Joomla! 1.5
comes with various menu modules and there is Resources module among them. That might be the perfect
choice.
2. 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. They are absolutely
different parameters, so please pay attention on their settings.
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
31
Top Menu Icons
The top menu you see on JSN Epic demo website is a very innovative Icon menu system called Icon Menu. By
combination XHTML, CSS and PHP Icon 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 various menu modules and there is Top Menu module among them. That might be the perfect
choice.
2. 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. They are
absolutely different parameters, so please pay attention on their settings.
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
32
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 specifying icon names separated by comma.
In the example above the menu topmenu only has 5 menu items, so the sixth icon mail is not used.
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”
- “setting”
- “star”
- “statistic”
- “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.
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
33
Side Menu
Starting from version 3.0 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 various menu modules and there is Key Concepts module among them. That might be the
perfect choice.
2. 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
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
34
Menu Class Suffix: -sidemenu
Module Class Suffix: -box box-yellow
Info: In above example we used Yellow Box module styles, but you can use any other module styles.
Note: 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
Pretty the similar to Main Menu JSN Epic provide smooth slide out animation for submenu panels. 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.
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.
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
35
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. Let’s 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.
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
36
Text columns
It’s 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 version 3.0 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
Example:
<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
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, 5, .. columns. In general maximum recommended column
amount is 5, otherwise columns will be too narrow and hard to read.
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
37
Text styles
JSN Epic provides 10 text styles for making your content easier to scan and read. As with version 3.0 all CSS
settings for typography have been moved to dedicated CSS file template.css. This will allow you to choose
typography class directly from WYSIWYG editor built-in Joomla, without switching to HTML mode. Another
thing is your text in WYSIWYG editor will look like it is on the website since the real CSS styles are applied.
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.
Example:
<pre>Your preformatted text</pre>
Quote text
You can us this style to quote somebody’s speech, idea or a fragment from some book, articles, etc.
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
38
Example:
<blockquote>Your quote text</blockquote>
Drop cap symbol
You can use this special drop cap symbol style for magazine / newspaper text paragraph.
Example:
<p class=”text-dropcap”>Your magazine text paragraph.</p>
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
39
Highlighted text
You can use this style to highlight important words and / or keyword expression in search result page.
Example:
<span class=”text-highlight”>Text to be highlighted.</span>
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
40
Alert text
You can use this style for alert or warning text paragraph requiring user’s attention.
Example:
<p class="text-alert">Your alert text that requires user’s 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 user’s attentions.
Example:
<p class="text-info">Your information text.</p>.
You can use tag <p> like in example or tag <div> as well.
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
41
Download text
You can use this style for information text paragraph related to download process.
Example:
<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.
Example:
<p class="text-tip">Your tip, hint or help text.</p>.
You can use tag <p> like in example or tag <div> as well.
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
42
Comment text
You can use this style for comment text paragraph.
Example:
<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.
Example:
<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.
Example:
<p class="text-video">Your video text.</p>.
You can use tag <p> like in example or tag <div> as well.
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
43
Audio text
You can use this style for description text paragraph related to audio file.
Example:
<p class="text-audio">Your attachment text.</p>.
You can use tag <p> like in example or tag <div> as well.
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
44
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.
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.
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:
Manual icon assignment
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
45
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.
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
46
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
Example:
<table class="table-plainrows"><thead>...</thead><tbody>...</tbody><tfoot>...</tfoot></table>
Color Stripes table style
Example:
<table class="table-colorstripes"><thead>...</thead><tbody>...</tbody><tfoot>...</tfoot></table>
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
47
Grey Stripes table style
Example:
<table class="table-greystripes"><thead>...</thead><tbody>...</tbody><tfoot>...</tfoot></table>
Note:
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%" 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>
...
</tbody>
<tfoot><tr>
<th scope="row">Table footer</th>
<td colspan="2">Footer data</td>
</tr></tfoot>
</table>
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
48
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
<ul>...</ul>
Ordered list
<ol>...</ol>
Red arrow
<ul class="list-arrow-red"></ul>
…
</ul>
Blue arrow
<ul class="list-arrow-blue">
…
</ul>
Green arrow
<ul class="list-arrow-green">
…
</ul>
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
49
Icon list styles
Article icon list
<ul class="list-icon article-list">…</ul>
Folder icon list
<ul class="list-icon folder-list">…</ul>
Image icon list
<ul class="list-icon image-list">…</ul>
Online icon list
<ul class="list-icon online-list">…</ul>
Star icon list
<ul class="list-icon star-list">…</ul>
User icon list
<ul class="list-icon user-list">…</ul>
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
50
Number list style
Blue Bullet number list
<ul class="list-number-bullet blue-bullet">…</ul>
Green Bullet number list
<ul class="list-number-bullet green-bullet">…</ul>
Grey Bullet number list
<ul class="list-number-bullet grey-bullet">…</ul>
Orange Bullet number list
<ul class="list-number-bullet orange-
bullet">…</ul>
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
51
Red Bullet number list
<ul class="list-number-bullet red-bullet">…</ul>
Violet Bullet number list
<ul class="list-number-bullet violet-bullet">…</ul>
Blue Digit number list
<ul class="list-number-digit blue-digit">…</ul>
Green Digit number list
<ul class="list-number-digit green-digit">…</ul>
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
52
Grey Digit number list
<ul class="list-number-digit grey-digit">…</ul>
Orange Digit number list
<ul class="list-number-digit orange-digit">…</ul>
Red Digit number list
<ul class="list-number-digit red-digit">…</ul>
Violet Digit number list
<ul class="list-number-digit violet-digit">…</ul>
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
53
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 extension’s style. Some of these extensions have their own
template system and you are free to use them. 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. You
can download the extensions on Joomla Extensions Directory http://extensions.joomla.org/
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
54
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.
Enhanced visual style and fixed alignment issues.
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
55
Module styling
Besides from extended component styling you can use template module styles for K2 modules as well.
In the example above:
- Module style -box box-green icon-article has been applied to module K2 Content (mod_k2_content)
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
56
Community Builder
Extended style for Community Builder includes adapted drop–down 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
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
57
Module styling
Besides from extended component styling you can use template module styles for Community Builder modules as
well.
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)
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
58
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 Virtue Mart you need to make following steps:
1. Set template parameters Enable VirtueMart Style to Yes
2. 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
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
59
Fixed alignment issues on Product Details page
Totally redesigned checkout-steps icons on Checkout page
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
60
Module styling
Besides from extended component styling you can use template module styles for Virtue Mart modules as well.
In the example above:
- Module style -box box-blue icon-cart has been applied to module VirtueMart Module
(mod_virtuemart)
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
61
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
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
62
Adapted calendar table header color
Adapted table header color on Event List page
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
63
Module styling
Besides from extended component styling you can use template module styles for JEvents modules as well.
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)
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
64
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
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
65
Fixed alignment issues with
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
66
Module styling
Besides from extended component styling you can use template module styles for JoomGallery modules as well.
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)
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
67
Usability & Accessibility
Template language file
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. As with JSN
Epic version 3.0 all wordings in both back-end and front-end are moved to separated language files, so you can
easily translate them into any language you want. Here what you need to do:
1. Make a copy of current English language file en-GB.tpl_jsn_epic_XXX.ini, where XXX is template
edition you have. Give it appropriate name of your language, like de-DE.tpl_jsn_epic_XXX.ini. Please
note that there are 2 language files with the same name:
a. The file in template folder admin is the back-end language file;
b. The file in root template folder is the front-end language file.
2. Open newly created files start translating text strings there;
3. Make a template package and reinstall it. This step is necessary since by installation Joomla! will copy all
template language files to it’s own location to be used from there. Back-end and front-end language files
are stored in separated folders as following:
a. {joomla_root_folder}/administrator/language/{language_folder}
b. {joomla_root_folder}/language/{language_folder}
If you don’t want to repack and reinstall the template every time, you can manually copy your language file
in appropriate language folders, edit them from there and include them in the template when finished.
4. After all above, selecting your own language as the default language in Joomla! and you will see all your
native wordings as in template language file.
Info: Currently, only English language file is included, but we will expand language set in future versions.
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
68
Site Tools
As with version 3.0 JSN Epic provides 2 brand new features to enhance website user experience: Text Size
Selector and Color Selector. Both selectors are elegantly arranged in a drop down menu called Site Tools. All
settings from Site tools will be stored as visitor’s browser cookies for further usage.
All the wordings like “Site tools”, “Text size”, etc can be easily changed in template language file any time you
want. More over, you can have multiple language file to meet your target audience. Read section Template
language file of this document to learn more about this.
Info: The subpanel drop-down animation, transparency and background color settings will be inherited from
settings of Main Menu. See section Menu for more information on this. If both Text Size Selector and Color
Selector are disabled, the Site tools menu will not be shown at all.
Text Size Selector
By providing Text Size Selector you allow 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 if
you want by setting template parameter Enable Text Size Selector to No.
Color Selector
As followed by the name Color Selector allow your website visitor choose the color them they like. This is very
cool feature for social kind of websites where visitor’s 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 don’t want visitor to select any other color, just turn this
selector off by setting template parameter Enable Color Selector to No.
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
69
“Go to top” Link
One more feature added in JSN Epic version 3.0 is the “Go to top” link.
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. As usual, you can turn this feature off if you want by setting template parameter Enable 'Go to
top' link to No.
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
70
Other features
Header image slideshow
The header image slideshow you see on JSN Epic demo website is another cool Joomla! extension from
JoomlaShine.com called JSN ImageShow. This extension is NOT included in the template download package and
you have to download it separately from our website www.joomlashine.com.
After installation of JSN ImageShow you need to prepare your images and configure JSN ImageShow
appropriately.
Stage 1: Prepare images to be included in slideshow
In this stage you are going to get your images ready for the slideshow. JSN ImageShow is able to automatically
resize your images to match the slideshow size, but for the best result we’d recommend you to pay attention to
preparing your images. The main thing here is to crop your images so they have size similar to slideshow area size.
That means the width/height ratio of sizes should be the same or similar. For example, if you have slideshow area
with size 450px * 300px (the ratio is 1.5) then your images would better be: 375px * 235px (the ratio is 1.6) or
525px * 375px (the ratio is 1.4).
Another thing worth mention here is JSN ImageShow works best with JPEG format, so if you are going to show
photos, please use JPEG format.
Stage 2: Upload images to your server
Now, when your images are ready, it’s time to upload them to your server. You can use Media Manager in
Joomla! administration or you can use your favorite FTP client. For example, you can create folder myphotos
under folder images/stories and upload all your images there.
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
71
Stage 3: Setup parameters for JSN ImageShow module
Now when you have your images prepared and uploaded to some folder on your server, it’s time to setup JSN
ImageShow module. Please make following steps:
1. Go to module manager by menu Extensions -> Module Manager.
2. 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, but you are free to tweak a lot of
other parameters to get desired view and effects.
Attention: All stock photos used on JSN Epic demo website are only for demo purposes and NOT included in the
template package.
Official JSN Epic v3.0 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
72
What’s next?
Now as you have learnt every features of the template, it’s 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.0 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 don’t forget to visit www.joomlashine.com to check
something new. Also don’t miss our brand-new video tutorials section.
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 www.joomlashine.com.