This Quick Start Guide will provide you detailed information about each step you need to take in order to get your site look like JSN Epic demo site. It is assumed that you have already installed the latest Joomla! 1.0 with sample content and downloaded JSN Epic PRO package.

This collection of tutorials is designed for JSN Epic PRO version and many features discussed here are NOT available in free version. For more information about the difference between free and PRO version please visit section Features of this site.

The PDF version of this tutorial is included in JSN Epic PRO download package for convenient references.

Example Caption

Joomla! features:

\r\n
• Completely database driven site engines
\r\n
• News, products or services sections fully editable and manageable
\r\n
• Topics sections can be added to by contributing authors
\r\n
• Fully customisable layouts including left, center and right menu boxes
\r\n
• Browser upload of images to your own library for use anywhere in the site
\r\n
• Dynamic Forum/Poll/Voting booth for on-the-spot results
\r\n
• Runs on Linux, FreeBSD, MacOSX server, Solaris and AIX \r\n

Extensive Administration:

\r\n
• Change order of objects including news, FAQs, articles etc.
\r\n
• Random Newsflash generator
\r\n
• Remote author submission module for News, Articles, FAQs and Links
\r\n
• Object hierarchy - as many sections, departments, divisions and pages as you want
\r\n
• Image library - store all your PNGs, PDFs, DOCs, XLSs, GIFs and JPEGs online for easy use
\r\n
• Automatic Path-Finder. Place a picture and let Joomla! fix the link
\r\n
• News feed manager. Choose from over 360 news feeds from around the world
\r\n
• Archive manager. Put your old articles into cold storage rather than throw them out
\r\n
• Email-a-friend and Print-format for every story and article
\r\n
• In-line Text editor similar to Word Pad
\r\n
• User editable look and feel
\r\n
• Polls/Surveys - Now put a different one on each page
\r\n
• Custom Page Modules. Download custom page modules to spice up your site
\r\n
• Template Manager. Download templates and implement them in seconds
\r\n
• Layout preview. See how it looks before going live
\r\n
• Banner manager. Make money out of your site

This website is powered by Joomla! The software and default templates on which it runs are Copyright 2005 Open Source Matters. All other content and data, including data entered into this website and templates added after installation, are copyrighted by their respective copyright owners.

If you want to distribute, copy or modify Joomla!, you are welcome to do so under the terms of the GNU General Public License. If you are unfamiliar with this license, you might want to read ''How To Apply These Terms To Your Program'' and the ''GNU General Public License FAQ''.

Duis autem vel eum iriure dolor in hendrerit in vulputate\r\nvelit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at\r\nvero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum\r\nzzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor\r\nsit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt\r\nut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation\r\nullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis\r\nautem vel eum iriure dolor in hendrerit in vulputate velit esse molestie\r\nconsequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan\r\net iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis\r\ndolore te feugait nulla facilisi.

Nam liber tempor cum soluta nobis eleifend option congue\r\nnihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum\r\ndolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod\r\ntincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim\r\nveniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut\r\naliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate\r\nvelit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. At\r\nvero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd\r\ngubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum\r\ndolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor\r\ninvidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero\r\neos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no\r\nsea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit\r\namet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores\r\nduo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet\r\nclita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero\r\nvoluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,\r\nconsetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore\r\net dolore magna aliquyam erat.

Consetetur sadipscing elitr, sed diam nonumy eirmod tempor\r\ninvidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero\r\neos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no\r\nsea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit\r\namet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut\r\nlabore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam\r\net justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata\r\nsanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur\r\nsadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore\r\nmagna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo\r\ndolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est\r\nLorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,\r\nsed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit\r\namet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\r\nvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem\r\nipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At\r\nvero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,\r\nsed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit\r\namet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\r\nvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem\r\nipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At\r\nvero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,\r\nsed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\r\nvoluptua. At\r\nvero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Duis autem vel eum iriure dolor in hendrerit in vulputate\r\nvelit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at\r\nvero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum\r\nzzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor\r\nsit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt\r\nut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation\r\nullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis\r\nautem vel eum iriure dolor in hendrerit in vulputate velit esse molestie\r\nconsequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan\r\net iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis\r\ndolore te feugait nulla facilisi.

Nam liber tempor cum soluta nobis eleifend option congue\r\nnihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum\r\ndolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod\r\ntincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim\r\nveniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut\r\naliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate\r\nvelit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. At\r\nvero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd\r\ngubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum\r\ndolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor\r\ninvidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero\r\neos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no\r\nsea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit\r\namet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores\r\nduo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet\r\nclita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero\r\nvoluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,\r\nconsetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore\r\net dolore magna aliquyam erat.

Consetetur sadipscing elitr, sed diam nonumy eirmod tempor\r\ninvidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero\r\neos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no\r\nsea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit\r\namet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut\r\nlabore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam\r\net justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata\r\nsanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur\r\nsadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore\r\nmagna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo\r\ndolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est\r\nLorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,\r\nsed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\r\nvoluptua. At\r\nvero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,\r\nsed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\r\nvoluptua. At\r\nvero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Duis autem vel eum iriure dolor in hendrerit in vulputate\r\nvelit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at\r\nvero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum\r\nzzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor\r\nsit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt\r\nut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation\r\nullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis\r\nautem vel eum iriure dolor in hendrerit in vulputate velit esse molestie\r\nconsequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan\r\net iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis\r\ndolore te feugait nulla facilisi.

Nam liber tempor cum soluta nobis eleifend option congue\r\nnihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum\r\ndolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod\r\ntincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim\r\nveniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut\r\naliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate\r\nvelit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. At\r\nvero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd\r\ngubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum\r\ndolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor\r\ninvidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero\r\neos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no\r\nsea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit\r\namet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores\r\nduo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet\r\nclita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero\r\nvoluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,\r\nconsetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore\r\net dolore magna aliquyam erat.

Consetetur sadipscing elitr, sed diam nonumy eirmod tempor\r\ninvidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero\r\neos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no\r\nsea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit\r\namet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut\r\nlabore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam\r\net justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata\r\nsanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur\r\nsadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore\r\nmagna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo\r\ndolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est\r\nLorem ipsum dolor sit amet.

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.

Headings

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.

Text columns

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.

Content arranged in 2 columns

Example:

\r\n<div class="grid-layout">\r\n  <div> Content in the first column. </div>\r\n  <div> Content in the second (last) column. </div>\r\n</div>\r\n

Content arranged in 3 columns

Example:

\r\n<div class="grid-layout">\r\n  <div> Content in the first column. </div>\r\n  <div> Content in the second column. </div>\r\n  <div> Content in the third (last) column. </div>\r\n</div>\r\n

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.

Text Style

JSN Epic provides 12 text styles for making your content easier to scan and read. Below 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.

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>

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>

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

Example:

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

You can use tag <p> like in example or tag <div> as well.

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

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

Video text

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.

Audio text

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.

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

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.

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.

Table styles

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.

Plain Rows table style

Example:

<table class="table-plainrows">

Color Stripes table style

Example:

<table class="table-colorstripes">

Grey Stripes table style

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.

\r\n<table width="100%" class="table-greystripes">\r\n	<thead>\r\n		<tr>\r\n			<th>Table header</th>\r\n			<th>Column header 1</th>\r\n			<th>Column header 2</th>\r\n		</tr>\r\n	</thead>\r\n	<tbody>\r\n		<tr class="odd">\r\n			<th>Row header 1</th>\r\n			<td>Lorem ipsum</td>\r\n			<td>Dolor sit amet</td>\r\n			<td>Lorem ipsum</td>\r\n			<td>Dolor sit amet</td>\r\n		</tr>\r\n	</tbody>\r\n	<tfoot>\r\n		<tr>\r\n			<th>Table footer</th>\r\n			<td colspan="2">Footer data</td>\r\n		</tr>\r\n	</tfoot>\r\n</table>   \r\n

List styles

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.

Standard list styles

\r\n<ul class="list-arrow-red">\r\n	<li>...</li>\r\n	<li>...</li>\r\n</ul>\r\n		

\r\n<ul class="list-arrow-blue">\r\n	<li>...</li>\r\n	<li>...</li>\r\n</ul>\r\n		

\r\n<ul class="list-arrow-green">\r\n	<li>...</li>\r\n	<li>...</li>\r\n</ul>\r\n		

Icon list styles

\r\n<ul class="list-icon article-list">\r\n	<li>...</li>\r\n	<li>...</li>\r\n</ul>\r\n		

\r\n<ul class="list-icon folder-list">\r\n	<li>...</li>\r\n	<li>...</li>\r\n</ul>\r\n		

\r\n<ul class="list-icon image-list">\r\n	<li>...</li>\r\n	<li>...</li>\r\n</ul>\r\n		

\r\n<ul class="list-icon online-list">\r\n	<li>...</li>\r\n	<li>...</li>\r\n</ul>\r\n		

\r\n<ul class="list-icon star-list">\r\n	<li>...</li>\r\n	<li>...</li>\r\n</ul>\r\n		

\r\n<ul class="list-icon user-list">\r\n	<li>...</li>\r\n	<li>...</li>\r\n</ul>\r\n		

Number list style

\r\n<ul class="list-number-bullet blue-bullet">\r\n	<li>...</li>\r\n	<li>...</li>\r\n</ul>\r\n		

\r\n<ul class="list-number-bullet green-bullet">\r\n	<li>...</li>\r\n	<li>...</li>\r\n</ul>\r\n		

\r\n<ul class="list-number-bullet grey-bullet">\r\n	<li>...</li>\r\n	<li>...</li>\r\n</ul>\r\n		

\r\n<ul class="list-number-bullet orange-bullet">\r\n	<li>...</li>\r\n	<li>...</li>\r\n</ul>\r\n		

\r\n<ul class="list-number-bullet red-bullet">\r\n	<li>...</li>\r\n	<li>...</li>\r\n</ul>\r\n		

\r\n<ul class="list-number-bullet violet-bullet">\r\n	<li>...</li>\r\n	<li>...</li>\r\n</ul>\r\n		

\r\n<ul class="list-number-digit blue-digit">\r\n	<li>...</li>\r\n	<li>...</li>\r\n</ul>\r\n		

\r\n<ul class="list-number-digit green-digit">\r\n	<li>...</li>\r\n	<li>...</li>\r\n</ul>\r\n		

\r\n<ul class="list-number-digit grey-digit">\r\n	<li>...</li>\r\n	<li>...</li>\r\n</ul>\r\n		

\r\n<ul class="list-number-digit orange-digit">\r\n	<li>...</li>\r\n	<li>...</li>\r\n</ul>\r\n		

\r\n<ul class="list-number-bullet red-bullet">\r\n	<li>...</li>\r\n	<li>...</li>\r\n</ul>\r\n		

\r\n<ul class="list-number-digit violet-digit">\r\n	<li>...</li>\r\n	<li>...</li>\r\n</ul>\r\n		

\r\n\r\n

Click here to compare the free and PRO editions

This template is distributed in 2 editions:

\r\n
• JSN Epic Free with basic feature set is freely distributed under Creative Commons Attribution-Non-Commercial-Share Alike 3.0 Unported License.
\r\n
• JSN Epic PRO with full features package can be purchased for as low as US$29.
\r\n

We invite you to learn more about JSN Epic starting from section Features above. Hope you will find this template the right choice for you.

The template used in this Demo Website is JSN Epic PRO. Many features demonstrated here are not presented in the Free edition of the template.

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

\r\n\r\n

Click here to compare the free and PRO editions

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

Box designs to be applied to modules published on side columns.

Icon designs

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.

Combination usage

All icon designs can be used in combination with plain module design like below examples:

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

\r\n\r\n

Click here to compare the free and PRO editions

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.

\r\n\r\n

Click here to compare the free and PRO editions

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

Special visual effects

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.

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.

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.

Tree Menu

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.

Div Menu

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.

Top Menu Icons

The top menu you see on JSN Epic demo website is a very innovative Icon menu system called Top Menu. By a combination 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.

\r\n
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.
\r\n

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.

Side Menu

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.

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

\r\n\r\n

Click here to compare the free and PRO editions

JSN Epic is one of the most featured templates available on the market today. It provides wide range outstanding features, some of which are available only in JSN Epic and nowhere else.

Standard features

\r\n
• Native Joomla 1.5 compatible
\r\n
• Semantic, table-less and XHTML/CSS validated layout code
\r\n
• Lightweight optimized template graphics
\r\n
• Search Engine Optimized template structure (source ordering, proper tag structure,...)
\r\n
• Template features and code are well documented and can be easily configured
\r\n
• Compatible with major browsers like Mozilla Firefox 1.0+, IE 6, IE 7, Opera, Safari and Camino
\r\n

Advanced features

\r\n
• 21 module positions most of which are completely collapsible
\r\n
• 6 colors variation: blue, red, green, orange, violet, grey
\r\n
• 5 menu styles: dropdown menu, tree-like menu, side menu, div bar menu and icon menu.
\r\n
• 80 module styles with 4 box designs for module background styling and 20 icon designs for module title styling.
\r\n
• 3 font styles for amazing content readability.
\r\n
• Superb typography for headings, text paragraph, list, tables and more.
\r\n
• Extended styles for K2, Community Builder, Virtue Mart, JEvents and JoomGallery 2
\r\n
• 31 template parameters for incredible template configuration.
\r\n

JSN Epic PRO is much more powerful compared with the free edition. Please visit every page in section Features to get more information.

JSN Epic provides 31 template parameters for superbly convenient template management. Before learning about each template feature in details, let’s first understand how to set up template parameters. You need to take the following steps:

\r\n
1. Go to template manager by menu Extensions -> Template Manager.
\r\n
2. Click on template name JSN_Epic_XXX, where XXX is template edition you have.
\r\n
3. Here in the Template Edit page you will see the list of template parameters in section Parameters. Now you need to set up appropriate values for parameters you want.
\r\n
4. Click button Save to save all changes you made.
\r\n

\r\n \r\n

Click here to compare the free and PRO editions

JSN ImageShow

The header image slideshow you see on this demo website is another cool Joomla! extension from JoomlaShine.com called JSN ImageShow. This is independent extension and NOT included in the template package. Much like JSN Epic template JSN ImageShow is distributed in Free and PRO edition.

Please visit JSN ImageShow product page to get more information and download the free edition.

All stock photos used in header image slideshow on this demo site are only for demo purposes and NOT included in the template package.

JSN Epic PRO comes with 3 comprehensive documentation providing you all information about how to use and customize the template. All manuals are delivered in Adobe PDF format and available only in the JSN Epic PRO package. For more information about the difference between the PRO and free edition please visit page Features.

Quick Start Guide

Quick Start Guide will provide you detailed information about each step you need to take in order to get your site look like JSN Epic demo site. The online version of this document is available for public view but since it is initially designed for JSN Epic PRO edition and many features discussed here are NOT available in free edition.

Configuration Manual

Configuration Manual will provide you detailed information about how to configure each template feature. This document is available only in PDF version and only in JSN Epic PRO package. You can download the sample version by the link bellow.

Download Configuration Manual (sample version)

Customization Manual

Customization Manual will provide you detailed information about how to customize template graphic and code. JSN Epic PRO comes with series of Photoshop graphic source files and this document will tell you how to handle them. This document is available only in PDF version and only in JSN Epic PRO package. You can download the sample version by the link bellow.

Download Customization Manual (sample version)

JSN Epic is not just what you see here on demo website. There is much more experience when you try this wonderful template on your own website. For only US$25 you can purchase JSN Epic PRO which is much more powerful compared with free edition.

10 benefits with JSN Epic PRO

Here is the least but not the last 10 benefits you get when buying the PRO edition:

\r\n
1. 5 more template colors variation to match your brand color.
\r\n
2. 2 more template fonts combination to express your website unique styles.
\r\n
3. More flexible template layout management by ability to change width of left, right columns.
\r\n
4. Much more advanced template typography to make your content easy to read and understand.
\r\n
5. Style adaptation for 5 the most famous extensions Community Builder, DocMan, Virtue Mart, JEvents and RSGallery 2.
\r\n
6. Features for usability & accessibility enhancement like Font Size Changer.
\r\n
7. Photoshop graphic source files in PSD format with Customization Manual in PDF format.
\r\n
8. Brand-free template without any back-link to JoomlaShine.com.
\r\n
9. Lightning fast support within 12 hours by special Dedicated Helpdesk System.
\r\n
10. Comprehensive template documentation in PDF format.
\r\n

The package you get

JSN Epic PRO download package includes:

\r\n
1. 2 JSN Epic PRO template installation files for Joomla! 1.0.x and Joomla! 1.5.x Native Mode
\r\n
2. Quick Start Guide with information how to configure JSN Epic to look like demo server in PDF format
\r\n
3. Configuration Manual with information how to configure each template feature in PDF format
\r\n
4. Customization Manual with information how to customize template in PDF format
\r\n
5. Set of Photoshop graphic source files with instruction how to handle them
\r\n
6. Login account to Dedicated Helpdesk System for lighting fast support
\r\n

If you are still not sure please feel free to check the edition comparison table and decide for yourself what to use.

\r\n
• Buy JSN Epic PRO
\r\n
• Download JSN Epic Free
\r\n
• Compare Free & PRO
\r\n

Sample content on this demo site are divided into 3 sections:

\r\n
• Articles
  \r\nIn this section you will see demonstration of default Joomla! sample content like: latest news, news flash, FAQs and other articles.
\r\n
• Built-in extensions
  \r\nIn this section you will see demonstration of built-in extensions like: News Feeds, Search, Contact Us, Links and Wrapper
\r\n
• Popular extensions
  \r\nIn this section you will see demonstration of JSN Epic extended styles for 5 popular Joomla! extensions: Community Builder, DocMan, VirtueMart, JEvents and RSGallery2.
\r\n

Extended menu module in Joomla! 1.5.x

In Joomla! 1.5.x JSN Epic does NOT utilize any 3rd party menu''s extensions menu to display menus. It uses Joomla! 1.5 built-in menu system and you do NOT need to install Extended Menu as you should in the case of Joomla! 1.0.x

JSN Epic PRO template installation

In the download package you can find template installation file called jsn_epic_pro_2.0_j15.zip under the folder for_joomla_15. This is standard Joomla! 1.5.x template installation file which can be installed in Joomla! administration normally as following:

\r\n
1. In Joomla! administration go to menu Extensions -> Install/Uninstall
\r\n
2. Once you are on Extension Manager click Browse button and select template installation file jsn_epic_pro_2.0_j15.zip. After that click on button Upload File & Install.
\r\n
3. Installation file will be uploaded to your server and installed in Joomla! CMS. When it''s done click Continue link to finish module installation process.
\r\n

Get ready

After installation what you got does not really look like the demo website. Please don’t worry, in next 10 - 20 minutes everything will line up as they should. Basically we need to configure 6 blocks of elements to get desired look. Let’s take a look at screenshot below.

JSN Epic PRO

Let’s start with the Header area. But before that, let’s discuss one little yet important thing called Favicon.

The team from joomlashine has more than shined. Their support is second to none. They answered questions even though it had more to do with Joomla than their template. Their documentation of their template is a fantastic example and insight into how Joomla works. For a newbie like me, I learned a lot about Joomla thanks to the documentation of their template. Every question I asked they answered with more info than I expected.

JSN Epic PRO provides 3 font styles 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. Font style is configured by template parameter Template Font.

\r\nJSN Epic Free supports only 1 default font style. JSN Epic PRO supports all 3 font styles.

Business / Corporation Website font style (default)

Combination of Verdana and Arial

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 font 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 font style

Combination of Georgia and Trebuchet MS

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 font style is little bigger then normal which make it perfect choice for small websites like personal or blog websites. The combination of Georgia and Trebuchet MS makes content very easy to read and the looks impressive.

Online News / Magazines font style

Combination of Palatino Linotype and Times New Roman

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

\r\n\r\n

Click here to compare the free and PRO editions

Technically extended styles are overrides of default extension''s style. Some of these extensions has 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.

Extended styles for most popular Joomla! extensions

JSN Epic Free does NOT support any extended styles. JSN Epic PRO supports all 5 extended styles.

Community Builder Styles

JSN Epic PRO provides excellent styling package for popular Community Builder (version 1.1). If you are not familiar the Community Builder suite extends the Joomla! website user management systems and allows to manage those users.

For more information please visit Community Builder official website.

Styling for Community Builder Profile page

Extended style for Community Builder profile page includes redesigned drop?down menu and information panel.

Restyled Community Builder Profile page

Original Community Builder Profile page

Styling for popular Community Builder modules

Extended style package also includes series of icons to be applied with some popular Community Builder modules, such as CB Login and CB Online.

\r\n

Restyled Community Builder modules

\r\n

Original Community Builder modules

\r\n

VirtueMart Styles

JSN Epic PRO provides excellent styling package for popular extension VirtueMart (version 1.0.15). If you are not familiar VirtueMart is an Open Source E-Commerce solution to be used together with Joomla!. Joomla and VirtueMart are written in PHP and made for easy use in a PHP / MySQL environment.

For more information please visit VirtueMart official website.

Styling for VirtueMart product pages

Extended style for VirtueMart product pages includes redesigned Add to Cart button and fixed some alignment issues.

Restyled Virtue Mart Product Browse page

Original Virtue Mart Product Browse page

Restyled Virtue Mart Product Details page

Original Virtue Mart Product Details page

Styling for VirtueMart Checkout page

Extended style for VirtueMart Checkout pages includes totally redesigned series of indicator icons.

Restyled Virtue Mart Checkout page with totally redesigned icons

Original Virtue Mart Checkout page

Styling for popular VirtueMart modules

Extended style package also includes series of icons to be applied with some popular VirtueMart modules.

\r\n

Restyled Virtue Mart module

\r\n

Original Virtue Mart module

\r\n

JEvents Styles

JSN Epic PRO provides excellent styling package for popular extension JEvents (version 1.4.2). If you are not familiar JEvents is a Joomla extension allowing you to create one-off or repeating events under various events categories. It consists of a component and a number of modules and mambots.

For more information please visit JEvents official website.

Styling for JEvents Calendar Navigation icons

Extended style for JEvents Calendar Navigation includes redesigned series of icons and increased icon text.

Restyled JEvents Calendar Navigation icons

Original JEvents Calendar Navigation icons

Styling for JEvents Calendar pages

Extended style for JEvents Calendar pages includes restyled calendar table, table header and fixed some alignment issues.

Restyled JEvents Calendar by Month page

Original JEvents Calendar by Month page

Restyled JEvents Calendar by Week page

Original JEvents Calendar by Week page

Styling for popular JEvents modules

Extended style package also includes series of icons to be applied with some popular JEvents modules.

\r\n

Restyled JEvents modules

\r\n

Original JEvents modules

\r\n

\r\n\r\n

Click here to compare the free and PRO editions

\r\n

Default Joomla! favicon

\r\n

JoomlaShine.com favicon

\r\n

Favicon is small icon standing on the left of address bar of your browser. By default Joomla! has the icon as shown in screenshot above. On your website you might want to use your own icon, like the one we are using on our site joomlashine.com. Here is instruction how to do that. The process consists of 2 main stages:

Stage 1: Create your own favicon file

Technically favicon is regular 16px * 16px icon file with exact name favicon.ico. In most cases favicon is the sized-down version of the company logo saved in icon format. In some cases the logo is too specific and favicon need to be built from the scratch. You can use professional icon editor software like Axialis IconWorkshop and Iconcool Editor or to use online favicon generators. The first method gives you better quality, but takes more efforts. The second method is easier, but quality is not the best.

Stage 2: Upload favicon file to your server

After you got favicon file, it’s time to upload it to your server. You need to upload the icon file to folder joomla_root_folder/http://demo.joomlashine.com/joomla-templates/jsn_epic/images/ overwriting the default file. Feel free to make experiments. Anytime you can get back default favicon file from Joomla! installation package.

Logo

JSN Epic 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_pro/http://demo.joomlashine.com/joomla-templates/jsn_epic/images/. 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. Don’t forget to give some white margin space around the logo. Also you need remember logo’s width/height dimension to set them up in template parameters later.

The included JSN Epic logo source file logo.psd can be 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 uploaded your logo to template''s images folder overwriting the original file, then you don''t need to do anything thing additionally. Otherwise you need to setup JSN Epic PRO to apply your new logo.

\r\n
1. Go to template manager by menu Extensions -> Template Manager.
\r\n
2. Click on template name JSN_Epic_PRO.
\r\n
3. Here in the Template Edit page you will see the list of template parameters in section Parameters. You need to configure following parameters:\r\n
   \r\n
   • 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 /http://demo.joomlashine.com/joomla-templates/jsn_epic/images/stories, then the logo path should be /http://demo.joomlashine.com/joomla-templates/jsn_epic/images/stories/mylogo.png;
   \r\n
   • Logo Width ? the width of your logo image file;
   \r\n
   • Logo Height - the height of your logo image file;
   \r\n
\r\n
4. Additionally you can setup following logo parameters:\r\n
   \r\n
   • Logo Link ? URL where logo image should link to (! without preceding slash !).
   \r\n
   • Logo Slogan - Slogan text to be attached to the logo image ALT text for SEO purpose.
   \r\n
\r\n
5. Click button Save.
\r\n

Top Icon Menu

Top Icon Menu

The top menu you see on JSN Epic PRO demo site is a very innovative Icon menu system called Icon Menu. By combination XHTML, CSS and Javascript Icon Menu allows you to assign up to 20 predefined icons to menu items and arrange them in a horizontal line. This is perfect for top position in any kind of websites. Please make following steps:

\r\n
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.
\r\n
2. In module''s configuration page setup following parameters:\r\n
   \r\n
   • Title: Top Menu (or any other you like)
   \r\n
   • Show title: No
   \r\n
   • Enabled: Yes
   \r\n
   • Position: top
   \r\n
   • Menu Assignment: All
   \r\n
   • Menu Name: topmenu (you might want to use another menu source here)
   \r\n
   • Menu Style: List
   \r\n
   • Start Level: 0
   \r\n
   • End Level: 1
   \r\n
   • Always show sub-menu Items: No
   \r\n
   • Menu Tag ID: empty or any other you like
   \r\n
   • Menu Class Suffix: -icon
   \r\n
\r\n
3. Now you need to pick what icons to show in the menu. As stated before there are 20 predefined icons for you to choose. You need to setup template parameter Menu Icons by specifying icons'' name separated with a comma. In our example template parameter Menu Icons should be ?home,cart,download?.
\r\n

For more information about all available menu styles please refer to JSN Epic PRO Configuration Manual.

Main Suckerfish Menu

Main Suckerfish Menu

The main drop-down menu is adaptation of popular Suckerfish menu to Joomla! CMS. By just combination XHTML and CSS it allows you to have clean accessible XHTML code structure and simple yet effective drop-down menu effect. Please make following steps:

\r\n
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.
\r\n
2. In module''s configuration page setup following parameters:\r\n
   \r\n
   • Title: Main Menu (or any other you like)
   \r\n
   • Show title: No
   \r\n
   • Enabled: Yes
   \r\n
   • Position: toolbar
   \r\n
   • Menu Assignment: All
   \r\n
   • Menu Name: mainmenu (you might want to use another menu source here)
   \r\n
   • Menu Style: List
   \r\n
   • Start Level: 0
   \r\n
   • End Level: 0
   \r\n
   • Always show sub-menu Items: Yes
   \r\n
   • Menu Tag ID: empty or any other you like
   \r\n
   • Menu Class Suffix: -suckerfish
   \r\n
\r\n

For more information about all available menu styles please refer to JSN Epic PRO Configuration Manual.

Font Size Changer

Font Size Changer

Font size changer is brand-new feature introduced in JSN Epic PRO v2.0. By default it’s turned on so you don’t have to make any additional actions. If you want to disable font size changer please make following steps:

\r\n
1. Go to template manager by menu Extensions -> Template Manager.
\r\n
2. Click on template name JSN_Epic_PRO.
\r\n
3. Here in the Template Edit page locate the parameter Show Font Resizer and set it to No.
\r\n
4. Click button Save and refresh your website front-end to see the result.
\r\n

I just wanted to drop you a note to say thanks very much for making your fantastic JSN Epic template available, I run a website for a non-profit flying club and school in South Africa and this template fits like a glove! Saved me heaps of time. Thanks again and regards.

Header image slideshow

JSN ImageShow

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. Please visit JSN ImageShow homepage for more details.

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 http://demo.joomlashine.com/joomla-templates/jsn_epic/images/stories and upload all your images there.

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:

\r\n
1. Go to module manager by menu Modules -> Site Modules.
\r\n
2. Click on JSN ImageShow item in the list and setup parameters as following:\r\n
   \r\n
   • Show title: No
   \r\n
   • Position: header
   \r\n
   • Published: Yes
   \r\n
   • Image Folder: http://demo.joomlashine.com/joomla-templates/jsn_epic/images/stories/myphotos (this is example folder discussed in previous stage)
   \r\n
   • Width: 100%
   \r\n
   • Height: 250
   \r\n
   • Pages / Items: All (or at least Home)
   \r\n
\r\n
3. Click button Save
\r\n

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.

Promo user modules

User Module

The text module near image slideshow is just simple User module created to contain some sample content. To create that module please make following steps:

\r\n
1. Go to module manager by menu Modules -> Site Modules.
\r\n
2. Click button New on the top toolbar.
\r\n
3. In new module’s configuration page you need to setup following parameters:\r\n
   \r\n
   • Title: User Module (or anything you like)
   \r\n
   • Show title: Yes
   \r\n
   • Position: user8 (for the right-side module) or user9 (for the left-side module)
   \r\n
   • Published: Yes
   \r\n
   • Content:
     \r\n Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam sem. Cras erat ipsum, euismod ut, rutrum in, dignissim quis, libero. <a href="#">Praesent fermentum</a>.
   \r\n
   • Pages / Items: All (or at least Home)
   \r\n
\r\n
4. Click button Save
\r\n

Now you see that sample text module near image slideshow. Currently it does not contain any meaningful information, but you got the idea how to have the text there.

Left side BulletTree Menu

BulletTree Menu

The side menu you see on left column is vertical tree-like menu presentation called BulletTree. 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:

\r\n
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 Left Menu module among them. That might be the perfect choice.
\r\n
2. In module''s configuration page setup following parameters:\r\n
   \r\n
   • Title: Side Menu (or any other you like)
   \r\n
   • Show title: Yes
   \r\n
   • Enabled: Yes
   \r\n
   • Position: left
   \r\n
   • Menu Assignment: All (or at least Home)
   \r\n
   • Menu Name: mainmenu (you might want to use another menu source here)
   \r\n
   • Menu Style: List
   \r\n
   • Start Level: 0
   \r\n
   • End Level: 0
   \r\n
   • Always show sub-menu Items: No
   \r\n
   • Menu Tag ID: empty or any other you like
   \r\n
   • Menu Class Suffix: -bullettree
   \r\n
   • Module Class Suffix: -box box-grey
   \r\n
\r\n

On the demo website side menu is shown in Grey Box module styles, but you can use any other module styles. For more information about all available menu styles and module styles please refer to JSN Epic PRO Configuration Manual.

Login Form Module

Login Form Module

The Login Form you see on left column module is standard Login Form module shown with Green Box module styles and User icon in module’s title. Let’s see how to set it up:

\r\n
1. Go to module manager by menu Extensions -> Module Manager.
\r\n
2. Click on Login Form in module list.
\r\n
3. In module''s configuration page you need to setup following parameters\r\n
   \r\n
   • Title: Login Form (or anything you like)
   \r\n
   • Show title: Yes
   \r\n
   • Position: left
   \r\n
   • Enabled: Yes
   \r\n
   • Menu Assignment: All (or at least Home)
   \r\n
   • Module Class Suffix: -box box-green icon-user
   \r\n
\r\n
4. Click button Save.
\r\n

If you want you can apply any other module styles available in JSN Epic PRO. For more information about all available module styles and icons please refer to JSN Epic PRO Configuration Manual.

Syndicate Module

Syndicate Module

The Syndicate module you see on left column is standard Syndicate module shown with plain background and RSS icon in module’s title. Let’s see how to set it up:

\r\n
1. Go to module manager by menu Extensions -> Module Manager.
\r\n
2. Click on Syndicate in module list.
\r\n
3. In module''s configuration page you need to setup following parameters\r\n
   \r\n
   • Title: Syndicate (or anything you like)
   \r\n
   • Show title: Yes
   \r\n
   • Position: left
   \r\n
   • Enabled: Yes
   \r\n
   • Menu Assignment: All (or at least Home)
   \r\n
   • Module Class Suffix: -plain icon-rss
   \r\n
\r\n
4. Click button Save.
\r\n

If you want you can apply any other module styles available in JSN Epic PRO. For more information about all available module styles and icons please refer to JSN Epic PRO Configuration Manual.

Newsflash Module

Newsflash Module

The Newsflash module you see on right column is standard Newsflash module shown with Yellow Box module styles and Article icon in module’s title. Let’s see how to set it up:

\r\n
1. Go to module manager by menu Extensions -> Module Manager.
\r\n
2. Click on Newsflash in module list.
\r\n
3. In module''s configuration page you need to setup following parameters\r\n
   \r\n
   • Title: Newsflash (or anything you like)
   \r\n
   • Show title: Yes
   \r\n
   • Position: right
   \r\n
   • Enabled: Yes
   \r\n
   • Menu Assignment: All (or at least Home)
   \r\n
   • Module Class Suffix: -box box-yellow icon-article
   \r\n
\r\n
4. Click button Save
\r\n

If you want you can apply any other module styles available in JSN Epic PRO. For more information about all available module styles and icons please refer to JSN Epic PRO Configuration Manual.

Polls Module

Polls Module

The Polls module you see on right column is standard Polls module shown with Blue Box module styles and Selection icon in module’s title. Let’s see how to set it up:

\r\n
1. Go to module manager by menu Extensions -> Module Manager.
\r\n
2. Click on Polls in module list.
\r\n
3. In module''s configuration page you need to setup following parameters\r\n
   \r\n
   • Title: Polls (or anything you like)
   \r\n
   • Show title: Yes
   \r\n
   • Position: right
   \r\n
   • Enabled: Yes
   \r\n
   • Menu Assignment: All (or at least Home)
   \r\n
   • Module Class Suffix: -box box-blue icon-selection
   \r\n
\r\n
4. Click button Save.
\r\n

If you want you can apply any other module styles available in JSN Epic PRO. For more information about all available module styles and icons please refer to JSN Epic PRO Configuration Manual.

Who?s Online Module

Who''s Online Module

The Who’s Online module you see on right column is standard Who’s Online module shown with plain background and Online icon in module’s title. Let’s see how to set it up:

\r\n
1. Go to module manager by menu Extensions -> Module Manager.
\r\n
2. Click on Who''s Online in module list.
\r\n
3. In module''s configuration page you need to setup following parameters\r\n
   \r\n
   • Title: Who''s Online (or anything you like)
   \r\n
   • Show title: Yes
   \r\n
   • Position: right
   \r\n
   • Enabled: Yes
   \r\n
   • Menu Assignment: All (or at least Home)
   \r\n
   • Module Class Suffix: -plain icon-online
   \r\n
\r\n
4. Click button Save.
\r\n

If you want you can apply any other module styles available in JSN Epic PRO. For more information about all available module styles and icons please refer to JSN Epic PRO Configuration Manual.

Welcome Module

The Welcome module is just simple User module created to contain some sample content. It’s shown in plain background with Double Dots icon. To create that module please make following steps:

\r\n
1. Go to module manager by menu Extensions -> Module Manager.
\r\n
2. Click button New on the top toolbar.
\r\n
3. Click line Custom HTML.
\r\n
4. In new module''s configuration page you need to setup following parameters\r\n
   \r\n
   • Title: Welcome (or anything you like)
   \r\n
   • Show title: Yes
   \r\n
   • Position: user1
   \r\n
   • Enabled: Yes
   \r\n
   • Module Class Suffix: -plain icon-dots
   \r\n
   • Menu Assignment: All (or at least Home)
   \r\n
   • Custom Output:
     \r\n <img class="image-left image-border" src="http://demo.joomlashine.com/joomla-templates/jsn_epic/images/stories/your_welcome_image.jpg" alt="Welcome" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam nec odio. Vivamus turpis metus, feugiat sit amet, pulvinar sed, tincidunt sit amet, massa.
   \r\n
\r\n
5. Click button Save.
\r\n

Now, when you have got the idea how to have Welcome module, it’s time to setup your own image and text. The best size for your welcome image is 210px * 100px.

About Us Module

About Us Module

The About Us module is pretty similar to the Welcome module discussed in previous section. The major difference here is it’s published in another module position. To create that module please make following steps:

\r\n
1. Go to module manager by menu Extensions -> Module Manager.
\r\n
2. Click button New on the top toolbar.
\r\n
3. Click line Custom HTML.
\r\n
4. In new module''s configuration page you need to setup following parameters\r\n
   \r\n
   • Title: About Us (or anything you like)
   \r\n
   • Show title: Yes
   \r\n
   • Position: user2
   \r\n
   • Enabled: Yes
   \r\n
   • Menu Assignment: All (or at least Home)
   \r\n
   • Module Class Suffix: -plain icon-dots
   \r\n
   • Custom Output:
     \r\n <img class="image-left image-border" src="http://demo.joomlashine.com/joomla-templates/jsn_epic/images/stories/your_aboutus_image.jpg" alt="About Us" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam nec odio. Vivamus turpis metus, feugiat sit amet, pulvinar sed, tincidunt sit amet, massa.
   \r\n
\r\n
5. Click button Save.
\r\n

Now, when you have got the idea how to have About Us module, it’s time to setup your own image and text. The best size for your about us image is 210px * 100px.

Latest News Module

Latest News Module

The Latest News module you see is standard Latest News module shown with plain background and Arrow icon in module’s title. Let’s see how to set it up:

\r\n
1. Go to module manager by menu Extensions -> Module Manager.
\r\n
2. Click on Latest News in module list.
\r\n
3. In module''s configuration page you need to setup following parameters\r\n
   \r\n
   • Title: Latest News (or anything you like)
   \r\n
   • Show title: Yes
   \r\n
   • Position: user3
   \r\n
   • Enabled: Yes
   \r\n
   • Menu Assignment: All (or at least Home)
   \r\n
   • Module Class Suffix: -plain icon-arrow
   \r\n
\r\n
4. Click button Save.
\r\n

If you want you can apply any other plain module styles available in JSN Epic PRO. For more information about all available module styles and icons please refer to JSN Epic PRO Configuration Manual.

Popular Module

Popular Module

The Popular module is pretty similar to the Latest News module discussed in previous section. The major difference here is it’s published in another module position. Let’s see how to set it up:

\r\n
1. Go to module manager by menu Extensions -> Module Manager.
\r\n
2. Click on Popular in module list.
\r\n
3. In module''s configuration page you need to setup following parameters\r\n
   \r\n
   • Title: Popular (or anything you like)
   \r\n
   • Show title: Yes
   \r\n
   • Position: user4
   \r\n
   • Enabled: Yes
   \r\n
   • Menu Assignment: All (or at least Home)
   \r\n
   • Module Class Suffix: -plain icon-arrow
   \r\n
\r\n
4. Click button Save.
\r\n

If you want you can apply any other plain module styles available in JSN Epic PRO. For more information about all available module styles and icons please refer to JSN Epic PRO Configuration Manual.

Bottom Banner Module

Bottom Banner Module

The Bottom Banner module is standard Banner module shown without any module styles. Let’s see how to set it up:

\r\n
1. Go to module manager by menu Extensions -> Module Manager.
\r\n
2. Click on Banners in module list.
\r\n
3. In module''s configuration page you need to setup following parameters\r\n
   \r\n
   • Title: Banners (or anything you like)
   \r\n
   • Show title: No
   \r\n
   • Position: banner
   \r\n
   • Enabled: Yes
   \r\n
   • Menu Assignment: All (or at least Home)
   \r\n
\r\n
4. Click button Save
\r\n

Bottom Promotion Modules

Bottom Promotion Modules

All 3 bottom promotion modules are pretty similar to the Welcome module discussed in previous section. The major difference here is they are published in other various module positions and the content part is little bit different. To create that module please make following steps:

\r\n
1. Go to module manager by menu Extensions -> Module Manager.
\r\n
2. Click button New on the top toolbar.
\r\n
3. Click line Custom HTML.
\r\n
4. In new module''s configuration page you need to setup following parameters\r\n
   \r\n
   • Title: User Module (or anything you like)
   \r\n
   • Show title: Yes
   \r\n
   • Position: user5 (left) or user6 (center) or user7 (right)
   \r\n
   • Enabled: Yes
   \r\n
   • Module Class Suffix: -plain icon-dots
   \r\n
   • Content:
     \r\n <img class="image-left image-border" src="http://demo.joomlashine.com/joomla-templates/jsn_epic/images/jsn_epic/your_bottom_promotion_image.jpg" alt="Bottom Promotion" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam sem. Cras erat ipsum, euismod ut, rutrum in, dignissim quis, libero. Praesent fermentum.
   \r\n
   • Menu Assignment: All (or at least Home)
   \r\n
\r\n
5. Click button Save.
\r\n

Now, when you have got the idea how to have bottom promotion modules, it?s time to setup your own image and text. The best size for your images here is 100px * 100px.

Copyright text

Copyright text

The Copyright text module is another User module configured to contain copyright text. To create that module please make following steps:

\r\n
1. Go to module manager by menu Extensions -> Module Manager.
\r\n
2. Click button New on the top toolbar.
\r\n
3. Click line Custom HTML.
\r\n
4. In new module''s configuration page you need to setup following parameters<\r\n
   \r\n
   • Title: Copyright (or anything you like)
   \r\n
   • Show title: No
   \r\n
   • Position: footer
   \r\n
   • Enabled: Yes
   \r\n
   • Custom Output:
     \r\n Copyright &copy; 2006 - 2008 JoomlaShine.com. All rights reserved unless otherwise stated.
   \r\n
   • Menu Assignment: All
   \r\n
\r\n
5. Click button Save.
\r\n

Now, you just need to setup your own text.

Bottom DivBar Menu

Bottom DivBar Menu

The DivBar menu in the bottom position is simple yet nice menu bar with items separated by slightly visible dashes. Please make following steps:

\r\n
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 Footer Menu module among them. That might be the perfect choice.
\r\n
2. In module''s configuration page setup following parameters:\r\n
   \r\n
   • Title: Footer Menu (or any other you like)
   \r\n
   • Show title: No
   \r\n
   • Enabled: Yes
   \r\n
   • Position: bottom
   \r\n
   • Menu Assignment: All
   \r\n
   • Menu Name: mainmenu (you might want to use another menu source here)
   \r\n
   • Menu Style: List
   \r\n
   • Start Level: 0
   \r\n
   • End Level: 1
   \r\n
   • Always show sub-menu Items: No
   \r\n
   • Menu Tag ID: empty or any other you like
   \r\n
   • Menu Class Suffix: -divbar
   \r\n
\r\n

For more information about all available menu styles please refer to JSN Epic PRO Configuration Manual.

Congratulations, if you had enough patience to reach this page and most likely your website is now looking pretty much like JSN Epic demo website. It''s cool, but JSN Epic can do much more that what you see on demo website homepage.

Your next step is to read the next documentation came with JSN Epic PRO package called JSN Epic PRO v2.0 Configuration Manual. In this manual you will find detailed description about all template features and you can quickly apply them to your website.

If you want to customize your JSN Epic PRO, please read another documentation came with JSN Epic PRO package called JSN Epic PRO v2.0 Customization Manual.

Good luck to you and your business.

I just wanted to say a big thank you for loooking into this and fixing the problem, what wonderful support, very quick and efficient. I would also considered above and beyond the call of duty. It was not your template at fault, yet you still fixed the problem.

I''m a new user to Joomla! and still finding my way around. I tried a few free templates but wasn''t impressed. I paid for a subscription to a template provider for smarter looking templates. I got the templates OK but there was virtually zero documentation. Then I discovered JoomlaShine and JSN Epic Pro. It comes with great documentation and when I did hit typical new user issues, support was right there.

All stock photos used on this JSN Epic demo site are only for demo purposes and not included in the template package.

Copyright © 2006 - 2009 JoomlaShine.com. All rights reserved unless otherwise stated.

The image slideshow on the left is independent extension called JSN ImageShow. This extension is NOT included in the template package, but you can download and use the free edition separately.

Download JSN ImageShow Free

JSN Epic template is distributed under 2 editions:

PRO
\r\nPrice: US$29
\r\nIdeal for individuals who run their own website.

Developer
\r\nPrice: US$59
\r\nPerfect for developers who create websites for clients.

\r\n \r\n