Official JSN Epic PRO v2.0 Configuration...

This documentation included in the JSN Epic PRO Pack is release under Commercial Proprietary license and not intended for

public distribution. Copyright © 2006 - 2008 JoomlaShine.com

Official JSN Epic PRO v2.0

Configuration Manual version for Joomla! 1.0.x

.

Official JSN Epic PRO v2.0 Configuration Manual © JoomlaShine.com (version for Joomla! 1.0.x)

2

Table of Contents

Official JSN Epic PRO v2.0 Configuration Manual .........................................................................................1

Table of Contents ................................................................................................................................................................2

Introduction ...........................................................................................................................................................................3

Template Configuration.....................................................................................................................................................4

Template Parameters.........................................................................................................................................................................4

Color Variations ..................................................................................................................................................................................8

Font Styles ..........................................................................................................................................................................................10

Layout...................................................................................................................................................................................................12

Logo ......................................................................................................................................................................................................15

Module Styles .....................................................................................................................................................................................16

Menu Styles ........................................................................................................................................................................................19

Typography ........................................................................................................................................................................................25

Extended Styles .................................................................................................................................................................................39

Other Features ...................................................................................................................................................................................50


3

Introduction

Thank you for purchasing JSN Epic PRO. 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 PRO 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.

After that you can read this Configuration Manual to learn about all features of the template and how to apply them to your real website. This document assumes that you already have installed Joomla! CMS and JSN Epic PRO template.

Let’s roll!


4

Template Configuration

Template Parameters

JSN Epic provides 21 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 Site -> Template Manager -> Site Templates.

2) Check the radio button near template name JSN_Epic_PRO and click button Edit HTML on the toolbar.

3) Here in the Template HTML Editor locate section /* TEMPLATE PARAMETERS */ where you see the list of template parameters. Now you need to setup appropriate value for parameters you want.

4) Click button Save and refresh website front-end to see changes.

Now, let’s take a quick overview of all template parameters available in JSN Epic PRO.

Template Color

This parameter allows you to select template color variation to suite your company brand color. JSN Epic PRO 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.

For more information please read section Colors Variation of this document.


5

Template Font Style

This parameter allows you to select template font style to match your website type. 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.

For more information please read section Font Styles 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.

For more information please read section Logo of this document.

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.


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.

For more information please read section Layout of this document.

Left Column Width

This parameter allows you to setup left column width. You can specify value in percentage within range (18% - 33%) and only whole number 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 whole number is allowed, for example 25% - correct, 25.5% - incorrect



6

Menu Icons

This parameter allows you to setup series of icons to be used in Icon Menu, one of the hottest features in JSN Epic. 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.

For more information please read section Icon Menu of this document.

Show Pathway

This parameter allows you to specify whether to show pathway or not. Sometimes user want to completely remove the pathway to have cleaner content body part.

Enable Font Size Selector

This parameter allows you to specify whether to enable font size selector or not. By allowing your visitors to select font size you can greatly enhance overall website accessibility and usability.

Enable Auto Icon links

This parameter allows you to specify whether to enable auto link or not. 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.

For more information please read section Typography of this document.

Enable PNG Fix for IE6

This parameter allows you to specify whether to enable PNG fix for IE6 or not. As we all know IE6 is not able to display PNG-32 files with transparent background. JSN Epic has built-in script to fix this bug of IE6 and it works great in most cases. However, sometimes there might be conflicts with gallery components and this feature should be turned off.

Enable Community Builder Style

This parameter allows you to specify whether to enable extended style for Community Builder or not. Extended style for Community Builder includes adapted drop–down menu style, tabs color, additional module styles and some other minor visual enhancement.

For more information please read section Extended Styles of this document.

Enable DocMan Style

This parameter allows you to specify whether to enable extended style for DocMan or not. Extended style for DocMan includes adapted table header color, tabs color, fixed alignment issues, additional module styles and some other minor visual enhancement.



7

Enable Virtue Mart Style

This parameter allows you to specify whether to enable extended style for Virtue Mart or not. 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.


Enable JEvents Style

This parameter allows you to specify whether to enable extended style for JEvents or not. 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.


Enable RSGallery 2 Style

This parameter allows you to specify whether to enable extended style for RSGallery 2 or not. Extended style for RSGallery 2 includes redesigned navigation icons, fixed alignment issues, additional module styles and some other minor visual enhancement.


Error Reporting

This parameter allows you to specify PHP error reporting level. When you install some new extension, it’s maybe useful to turn maximum error reporting to see if the extension works well and does not generate any error.


8

Color Variations

JSN Epic PRO 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.

Info: Color variation is configured by template parameter $template_color. All available colors are described bellow.

blue

red

green


9

violet

orange

grey


10

Font Styles

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.

Info: Font style is configured by template parameter $template_font. All available font styles are described bellow.

Business / Corporation Website font 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 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

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.


11

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

Attention: If you are using Font Resizer in JSN Epic PRO, please make sure to push Font Size Reset button each time you change the font style.

http://nytimes.com/


12

Layout

Module positions

JSN Epic PRO provides 18 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 width

JSN Epic PRO 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_width and $right_width as described bellow.

Overall layout 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_width to setup left column width. It can be specified only in percentage within range (18% - 33%). Moreover, only whole number is allowed, for example 25% is correct, 25.5% is incorrect.

Example:

• 24%


14

Right column width

You need to configure template parameter $right_width to setup left column width. It can be specified only in percentage within range (18% - 33%). Moreover, only whole number is allowed, for example 25% is correct, 25.5% is incorrect.

Example:

• 24%


15

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/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. 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.psd 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;

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


16

Module Styles

JSN Epic PRO provides 4 box designs for module background styling and 22 icon designs for module title styling. All module title styles can be used in combination with module background styles and this gives you 88 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”


17

Icon designs

Icon designs to be applied to module’s title.

“-plain icon-arrow”

“-plain icon-dots”

“-plain icon-article”

“-plain icon-calendar”

“-plain icon-cart”

“-plain icon-comment”

“-plain icon-display”

“-plain icon-download”

“-plain icon-folder”

“-plain icon-help”

“-plain icon-home”

“-plain icon-image”

“-plain icon-info”

“-plain icon-mail”

“-plain icon-online”

“-plain icon-rss”

“-plain icon-search”

“-plain icon-selection”

“-plain icon-settings”

“-plain icon-star”

“-plain icon-statistics”

“-plain icon-user”


18

Combination usage

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

“-plain icon-star”

“-plain icon-statistics”

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

“-box box-green icon-user”

“-box box-yellow icon-article”


19

Menu Styles

JSN Epic PRO provides 4 menu styles to display your website navigation on virtually any position. In Joomla! 1.0.x JSN Epic utilizes open-source menu module called Extended Menu to display menus. In JSN Epic PRO download package you can find Extended Menu module installation file called “mod_exmenu.zip” under the folder “for_joomla_10”. This is standard Joomla! 1.0.x module installation file which can be installed in Joomla! administration normally:

1. In Joomla! administration go to menu Installers -> Modules

2. Once you are on Module Installer page click Browse button and select module installation file “mod_exmenu.zip”. After that click on button Upload File & Install.

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. Now you are ready to setup your menus.

Icon menu

The top menu you see on JSN Epic PRO 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.

There are 3 stages involved in configuration top menu:

Stage 1: Make a copy of Extended Menu module instance

After you install the module there is only one instance shown in Module manager. But you might to use multiple menus on the website: on the top, left, etc. In this case you need to make copies of the module and use them where needed. Please make following steps to make a copy of Extended Menu module:

1. Go to module manager by menu Modules -> Site Modules.

2. Click on check box near item Extended Menu and click button Copy on the top toolbar.

3. Now you have another item called Copy of Extended Menu listed under the original item.


20

Stage 2: Setup parameters of newly created module’s copy

1. In module manager click on newly created Copy of Extended Menu.

2. In module’s configuration page setup following parameters:

• Title: Ext TopMenu (or any other you like)

• Show title: No

• Position: top

• Published: Yes

• Menu Class Suffix: -icon

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

• Expand Menu: No

• Enable Menu Template: Yes

• Template Name: menu.html

• Pages / Items: All

Stage 3: Setup template parameter to define icons to be displayed

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

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”

“settings”

“star”

“statistics”

“user”


21

Suckerfish menu

The main drop-down menu is adaptation of popular Suckerfish menu to Joomla! CMS. By just combination XHTML, CSS and little JavaScript (only for IE) it allows you to have clean accessible XHTML code structure and simple yet effective drop-down menu effect.

There are 2 stages involved in configuration Suckerfish menu:


This stage pretty the same as in section Icon menu. Please refer there for more information if you need.




• Title: Ext MainMenu (or any other you like)

• Show title: No

• Position: toolbar

• Published: Yes

• Menu Class Suffix: -suckerfish

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

• Expand Menu: Yes





22

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.

There are 2 stages involved in configuration BulletTree menu:






• Title: Side Menu (or any other you like)

• Show title: Yes

• Position: left

• Published: Yes

• Menu Class Suffix: -bullettree

• Module Class Suffix: -box box-grey


• Expand Menu: No



23


• Pages / Items: All (or at least Home)

On the demo website side menu is shown in Grey Box module styles, but you can use any other module styles.


24

DivBar menu

The DivBar 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. DivBar menu in JSN Epic generates pure HTML list for menu structure and uses CSS to show dashes.

There are 2 stages involved in configuration DivBar menu:






• Title: Ext FooterMenu (or any other you like)

• Show title: No

• Position: bottom

• Published: Yes

• Menu Class Suffix: -divbar


• Expand Menu: No





25

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.


26

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. You can arrange your content in 2, 3, 4 or 5 columns. This is real step forward removing table tags from your content and leaving them only for showing tabular data. Bellow are screenshot of how does this feature look and example how to use it.

Content arranged in 2 columns

Example:

<div class=”grid2”>

<div class=”grid-col”>Content in the first column.</div>

<div class=”grid-col grid-lastcol”>Content in the second (last) column</div>

</div>


Example:


<div class=”grid-col”>Content in the first column</div>

<div class=”grid-col”>Content in the second column</div>

<div class=”grid-col grid-lastcol”>Content in the third (last) column</div>

</div>


27


Example:




<div class=”grid-col”>Content in the third column</div>

<div class=”grid-col grid-lastcol”>Content in the fourth (last) column</div>

</div>


Example:




<div class=”grid-col”>Content in the third column</div>

<div class=”grid-col”>Content in the fourth column</div>

<div class=”grid-col grid-lastcol”>Content in the fifth (last) column</div>

</div>


28

Text styles

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

Example:

<blockquote>Your quote text</blockquote>


29

Drop cap symbol

You can use this special drop cap symbol style for magazine / newspaper text paragraph.

Example:

<p class=”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=”highlight”>Text to be highlighted.</span>


30

Alert text

You can use this style for alert or warning text paragraph requiring user’s attention.

Example:

<p class="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="info">Your information text.</p>.



31

Download text

You can use this style for information text paragraph related to download process.

Example:

<p class="download">Your download text.</p>.


Tip text

You can use this style for useful information like tips, hint or help text.

Example:

<p class="tip">Your tip, hint or help text.</p>.



32

Comment text

You can use this style for comment text paragraph.

Example:

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


Attachment text

You can use this style for comment text paragraph.

Example:

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



33

Link styles

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)


34

Attention: 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 as described bellow.

Manual icon assignment (only in IE6)


35

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="plainrows"><thead>...</thead><tbody>...</tbody><tfoot>...</tfoot></table>

Color Stripes table style

Example:

<table class="colorstripes"><thead>...</thead><tbody>...</tbody><tfoot>...</tfoot></table>


36

Grey Stripes table style

Example:

<table class="greystripes"><thead>...</thead><tbody>...</tbody><tfoot>...</tfoot></table>


37

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 and 6 advanced list styles for virtually all kind of information you might want to outline.

Unordered list

Example:

<ul>

<li>Item 1</li>

<li>Item N</li>

</ul>

Ordered list

Example:

<ol>

<li>Item 1</li>

<li>Item N</li>

</ol>

Red arrow

Example:

<ul class="arrowlist-red">

…

</ul>

Blue arrow

Example:

<ul class="arrowlist-blue">

…

</ul>

Green arrow

Example:

<ul class="arrowlist-green">

…

</ul>


38

Article icon list

This style is perfect to present a list of articles on your site.

Example:

<ul class="iconlist-article">…</ul>

Folder icon list

This style is perfect to present a list of resources on your site.

Example:

<ul class="iconlist-folder">…</ul>

Image icon list

This style is perfect to present a list of photos on your site.

Example:

<ul class="iconlist-image">…</ul>

Online icon list

This style is perfect to present a list of online resources you want to point out.

Example:

<ul class="iconlist-online">…</ul>

Star icon list

This style is perfect to present a list of hot stuffs on your site.

Example:

<ul class="iconlist-star">…</ul>

User icon list

This style is perfect to present a list of users of community on your site.

Example:

<ul class="iconlist-user">…</ul>


39

Extended Styles

One of hottest features in JSN Epic PRO is extended styles adapted for 5 most popular Joomla! extension: Community Builder, DocMan, Virtue Mart, JEvents and RSGallery2.

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.

Community Builder

Extended style for Community Builder includes adapted drop–down menu style, tabs color, additional module styles and some other minor visual enhancement.

Info: To apply extended style for Community Builder you need to set template parameter $enable_style_cb to yes.

Adapted drop-menu style and tabs color on CB Profile page


40

Additional module styles for most frequently used Community Builder modules


41

DocMan

Extended style for DocMan includes adapted table header color, tabs color, fixed alignment issues, additional module styles and some other minor visual enhancement.

Info: To apply extended style for DocMan you need to set template parameters $enable_style_docman to yes.

Adapted table header color on Categories page

Adapted table header color and text alignment fixed on Documents page


42

Adapted table header color on Document Details page

Additional module styles for most frequently used DocMan modules


43

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.

Info: To apply extended style for Virtue Mart you need to make following steps:

1. Set template parameters $enable_style_vm to yes

2. Go to folder joomla_root_folder/templates/jsn_epic_pro/ext/vm/ and copy all graphic files to folder joomla_root_folder/ components/com_virtuemart/shop_image/ps_image/

3. From Joomla! administrator select menu item Components -> Virtue Mart and then from Virtue Mart menu bar select menu item Admin -> Configuration

4. On Virtue Mart configuration page select tab Site, then tab Layout and select the Add to cart button that match the current color variation

5. Click Save and check the Virtue Mart page to see new Add to Cart button

Adapted Add to Cart button on Product Browse page


44

Fixed alignment issues on Product Details page

Totally redesigned checkout-steps icons on Checkout page


45

Additional module styles for core Virtue Mart module


46

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.

Info: To apply extended style for JEvents you need to set template parameters $enable_style_jevents to yes.

Totally redesigned calendar navigation icons

Adapted calendar table header color


47

Adapted table header color on Event List page

Additional module styles for most frequently used JEvents module


48

RSGallery 2

Extended style for RSGallery 2 includes redesigned navigation icons, fixed alignment issues, additional module styles and some other minor visual enhancement.

Info: To apply extended style for RSGallery 2 you need to set template parameters $enable_style_rsg2 to yes.

Redesigned navigation icons

Fixed alignment issues


49

Additional module styles for most frequently used RSGallery 2 module


50

Other Features

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 set template parameter $enable_fontresizer from yes to no.


51

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

http://www.joomlashine.com/index.php?option=com_content&task=view&id=38&Itemid=39

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.

http://www.joomlashine.com/index.php?option=com_content&task=view&id=38&Itemid=39


52

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

2. Click on JSN ImageShow item in the list and setup parameters as following:

• Show title: No

• Position: header

• Published: Yes

• Image Folder: images/stories/myphotos (this is example folder discussed in previous stage)

• Width: 100%

• Height: 250

• Pages / Items: All (or at least Home)

Above parameters are quite enough for JSN ImageShow to start showing images, but you are free to tweak a lot of other parameters to get desired view and effects.

Attention: All stock photos used on JSN Epic demo website are only for demo purposes and NOT included in the template package.

Date post:	28-Sep-2020
Category:	Documents
Upload:	others
View:	3 times
Download:	0 times