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


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!


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.


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.


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.


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.


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.


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.

http://www.joomlashine.com/


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;


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.


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.


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%


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%


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


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.


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.


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.


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.

http://nytimes.com/


20

Text Size

JSN Epic provides 3 text size options for major website audience types.

Small size

Medium size

Large size


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.


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”


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.

http://css-tricks.com/css-sprites/



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”


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


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.


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.


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.5 comes with various menu modules and there is Key Concepts module among them. That might be the

perfect choice.


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


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.


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.


Title: Div Menu (or any other you like)

Show title: No

Enabled: Yes

Position: bottom


Menu Name: othermenu (you might want to use another menu source here)

Menu Style: List

Start Level: 0

End Level: 1


Menu Tag ID: empty

Menu Class Suffix: -divmenu





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.


Title: Top Menu (or any other you like)

Show title: No

Enabled: Yes

Position: inset


Menu Name: topmenu (you might want to use another menu source here)

Menu Style: List

Start Level: 0

End Level: 1


Menu Tag ID: base-topmenu

Menu 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.


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”




sprites.




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.5 comes with various menu modules and there is Key Concepts module among them. That might be the

perfect choice.


Title: Side Menu (or any other you like)

Show title: Yes

Enabled: Yes

Position: left


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


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.



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.


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.


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.


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.


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>


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>


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



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


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



42

Comment text

You can use this style for comment text paragraph.

Example:

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


Attachment text

You can use this style for information text paragraph related to attachment file.

Example:

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


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



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



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


45




sprites.




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>


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>


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>


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>


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>


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>


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>


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/

http://extensions.joomla.org/


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.


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)


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


57

Module styling

Besides from extended component styling you can use template module styles for Community Builder modules as

well.


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


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


59

Fixed alignment issues on Product Details page

Totally redesigned checkout-steps icons on Checkout page


60

Module styling

Besides from extended component styling you can use template module styles for Virtue Mart modules as well.


- Module style -box box-blue icon-cart has been applied to module VirtueMart Module

(mod_virtuemart)


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


62

Adapted calendar table header color

Adapted table header color on Event List page


63

Module styling

Besides from extended component styling you can use template module styles for JEvents modules as well.


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


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


65

Fixed alignment issues with


66

Module styling

Besides from extended component styling you can use template module styles for JoomGallery modules as well.


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


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.


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.


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.


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.


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


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.


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.

Date post:	25-Nov-2014
Category:	Documents
Upload:	lovesmtns
View:	333 times
Download:	0 times

jsn-epic-configuration-manual

Documents