JSN Epic provides 6 major color variations for your taste. Each color variation covers not only the main background, but also drop-down menu, links, table’s header and some others.
All available colors are described below.
Blue
Red
Green
Violet
Orange
Grey
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.
By a combination of XHTML, CSS and little JavaScript (only for IE) Main Menu allows you to have clean accessible XHTML code structure and simple but yet effective drop-down submenu panels.
As from version 3.0, JSN Epic provides smooth drop down animation for submenu panels. The cool thing here is to utilize built-in Joomla! MooTools Javascript so there is a 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.
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.
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.
The side menu you see on left column is a 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 be distinguished.
The Div Menu in the bottom position is a simple but 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.
The top menu you see on JSN Epic demo website is a very innovative Icon menu system called Top Menu. By a combination of XHTML, CSS and PHP, Top Menu allows you to assign up to 20 predefined icons to menu items and arrange them in horizontal line. This is perfect for the top position in any kind of websites.
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. Below is a table of all available icons and their name.
In version 3.0, JSN Epic provides s vertical menu with slide- out subpanels called Side Menu. By a combination of XHTML, CSS and little JavaScript (only for IE) Side Menu allows you to have a clean accessible XHTML code structure and simple but yet effective slide-out menu effect.
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 a 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.
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, giving you 80 module style combinations.
Info: Module styles are configured by module’s parameter Module Class Suffix. All available values are described below 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 to be applied to modules published on side columns.
“-box box-blue”.
“-box box-green”.
“-box box-yellow”.
“-box box-grey”.
Icon designs to be applied to module’s title.
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 visitors will need to make one single request/download to get that file with all icons. If you have time, please read more about CSS sprites.
All icon designs can be used in combination with plain module design like below examples:
“-plain icon-star”
“-plain icon-statistics”
Also icon styles can be used in combination with box module styles like shown below:
“-box box-green icon-user”
“-box box-yellow icon-article”
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, but leave them 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 below.
JSN Epic was created with an 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.
As we all know, headings are "title" of undergoing text blocks, so it must have distinguished 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.
It’s quite a common situation when you need to arrange your content in multiple columns. JSN Epic offers you a 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.
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 need to do is setting class grid-layout to parent DIV.
Below are screenshots of how this feature looks and examples of how to use it.
Example:
<div class="grid-layout"> <div> Content in the first column. </div> <div> Content in the second (last) column. </div> </div>
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.
JSN Epic provides 12 text styles for making your content easier to scan and read. Below are screenshots of text styles and usage examples:
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>
You can us this style to quote somebody’s speech, idea or a fragment from some book, articles, etc.
Example:
<blockquote>Your quote text</blockquote>
You can use this special drop cap symbol style for magazine / newspaper text paragraph.
Example:
<p class="text-dropcap">Your magazine text paragraph.</p>
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>
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.
You can use this style for regular information text paragraph that does not require much user’s attention.
Example:
<p class="text-info">Your information text.</p>.
You can use tag <p> like in example or tag <div> as well.
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.
You can use this style for useful information like tips, hints or help texts
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.
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.
You can use this style for information text paragraph that 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.
You can use this style to represent the description of a video file.
Example:
<p class="text-video">Your description text.</p>.
You can use tag <p> like in example or tag <div> as well.
You can use this style to represent the description of an audio file.
Example:
<p class="text-audio">Your description text.</p>.
You can use tag <p> like in example or tag <div> as well.
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 is supporting 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)
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.
Below is a class specification table for all supported links:
Manual icon assignment
Info: As version 3.0 JSN Epic utilizes 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, so visitors will need to make one single request/download to get that file with all icons. If you have time, please read more about CSS sprites.
Tabular data is a very common type of information 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.
Example:
<table class="table-plainrows">
Example:
<table class="table-colorstripes">
Example:
<table class="table-greystripes">
Note:
In order to get table styles shown correctly, you need to create solid XHTML code as foundation. Below is an example of solid XHTML code for table.
<table width="100%" class="table-greystripes"> <thead> <tr> <th>Table header</th> <th>Column header 1</th> <th>Column header 2</th> </tr> </thead> <tbody> <tr class="odd"> <th>Row header 1</th> <td>Lorem ipsum</td> <td>Dolor sit amet</td> <td>Lorem ipsum</td> <td>Dolor sit amet</td> </tr> </tbody> <tfoot> <tr> <th>Table footer</th> <td colspan="2">Footer data</td> </tr> </tfoot> </table>
Lists are crucial element in contents not only of 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 and 8 advanced list styles for virtually all kind of information you might want to outline.
<ul><li>…</li><li>…</li></ul>
<ol><li>…</li><li>…</li></ol>
<ul class="list-arrow-red"> <li>...</li> <li>...</li> </ul>
<ul class="list-arrow-blue"> <li>...</li> <li>...</li> </ul>
<ul class="list-arrow-green"> <li>...</li> <li>...</li> </ul>
<ul class="list-icon article-list"> <li>...</li> <li>...</li> </ul>
<ul class="list-icon folder-list"> <li>...</li> <li>...</li> </ul>
<ul class="list-icon image-list"> <li>...</li> <li>...</li> </ul>
<ul class="list-icon online-list"> <li>...</li> <li>...</li> </ul>
<ul class="list-icon star-list"> <li>...</li> <li>...</li> </ul>
<ul class="list-icon user-list"> <li>...</li> <li>...</li> </ul>
<ul class="list-number-bullet blue-bullet"> <li>...</li> <li>...</li> </ul>
<ul class="list-number-bullet green-bullet"> <li>...</li> <li>...</li> </ul>
<ul class="list-number-bullet grey-bullet"> <li>...</li> <li>...</li> </ul>
<ul class="list-number-bullet orange-bullet"> <li>...</li> <li>...</li> </ul>
<ul class="list-number-bullet red-bullet"> <li>...</li> <li>...</li> </ul>
<ul class="list-number-bullet violet-bullet"> <li>...</li> <li>...</li> </ul>
<ul class="list-number-digit blue-digit"> <li>...</li> <li>...</li> </ul>
<ul class="list-number-digit green-digit"> <li>...</li> <li>...</li> </ul>
<ul class="list-number-digit grey-digit"> <li>...</li> <li>...</li> </ul>
<ul class="list-number-digit orange-digit"> <li>...</li> <li>...</li> </ul>
<ul class="list-number-bullet red-bullet"> <li>...</li> <li>...</li> </ul>
<ul class="list-number-digit violet-digit"> <li>...</li> <li>...</li> </ul>