Joomla! template JSN Epic v4 Configuration Manual

Transcription

1 Joomla! template JSN Epic v4 Configuration Manual (for version 4.0+) This documentation is release under Creative Commons Attribution-Non-Commercial-Share Alike 3.0 Unported Licence. You are free to print this document for convenient usage. Copyright

2 Table of Contents Joomla! template JSN Epic v4 Configuration Manual...1 Table of Contents...2 Introduction...3 Exclusive Features...4 Template parameters overview...8 Logo...24 Website title configuration...27 Layout...28 Colors Variation...31 Menu Styles...34 Font Styles...47 Module Styles...51 Typography...53 Site Tools...72 SEO & Accessibility...74 Extended Styles...81 Multilingual support...94 What s next?

3 Introduction Joomla! template JSN Epic Configuration Manual Thank you for your interest in JSN Epic template. We really appreciate your choice and truly wish our product will bring more value to your website and business. To have the best template understanding, we recommend you to read documentation in following order: 1. JSN Epic Quick Start Guide This document will tell you how to get the template look like the demo website as well as the main concept of how to work with the template. 2. JSN Epic Configuration Manual - This document will give detailed information about each template feature and how to apply it to your real website. 3. JSN Epic Customization Manual - This document will teach you how to customize the template to make it suite you need. You can download full documentation package and print for convenient reading. Notes: - This document assumes that you already have installed Joomla! CMS with sample data and JSN Epic template. - Features marked with are available only in JSN Epic PRO Edition and NOT available in Free Edition. Let s roll! 3

4 Exclusive Features IE6 Support {Screenshot of JSN Epic in IE6} Let s admit the truth, that there are still many users using IE6 browser, especially in government sectors. So IE6 will live as long as Windows XP is alive. We realized that we just can t flush those IE6 users and made all our templates compatible with IE6. Each template is processed thoroughly based on the ultimate IE6 cheatsheet covering 25+ IE6 bugs. All fixes for IE render problems like box model, double margin, float drops are placed in separated CSS file, which will be loaded only when browser is IE6. For fixing transparent PNG image problems we use very reliable JS script DD_belatedPNG, which is also loaded only when browser is IE6. For testing we use real IE6 browser running in virtual machine specifically configured for testing tasks. Tools like IETester or Multi IE are great, but nothing can compare with real system. This is really time and resource consuming process, but the result is worth every second spent. In IE6 browser you will see about 98% of what can be seen from modern web browsers and this is incredible. 4

5 Native RTL support Joomla! template JSN Epic Configuration Manual All JoomlaShine templates are equipped with native RTL support. We spent huge amount of time tweaking every tiny details of the template to make it look absolutely awesome in RTL mode. Everything is horizontally-flipped including dropdown main menu and side menu. The most impressive thing is that RTL layout works flawlessly even in IE6+. You don t have to do any additional template configuration to enable RTL mode. Just set some RTL language in Joomla! administration and template will automatically detects and enable RTL mode. 5

6 Flash Gallery Joomla! template JSN Epic Configuration Manual The flash gallery you see on demo website is another cool product JSN ImageShow from JoomlaShine.com. This product is shipped with component, module and content plugin, so you can place it anywhere on every website. Designed for maximum flexibility, you can use JSN ImageShow to present whether you want being that professional photo portfolio or just an image slideshow on your website. With combined outstanding image transition and stunning overlay visual effects JSN ImageShow really can add little more life to your Joomla website. This extension is NOT included in the template package, but you can download it separately for free. Learn more about JSN ImageShow. 6

7 Predefined Icons Joomla! template JSN Epic Configuration Manual JSN Epic is shipped with 20 carefully selected icons to be used for multiple purposes. Further, you will see how these beautiful icons can be assigned to menu items, modules header, links and more. - article - download - info - selection - calendar - folder - mail - settings - cart - help - online - star - comment - home - rss - statistics - display - image - search - user JSN Epic utilize CSS sprite technique to reduce amount of HTTP request to server in order to get icons. Technically, all icons are merged in one single image file and visitor will need to make one single request/download to get that file with all icons. If you have some extra time, please read more about CSS sprites. 7

8 Template parameters overview JSN Epic provides 44 template parameters for incredible configuration. To setup template parameters, please make following steps: 1) Go to template manager by menu Extensions -> Template Manager. 2) Click on template name JSN_Epic_XXX, where XXX is template edition you have. 3) Here in the Template Edit page you will see the list of template parameters in section Parameters. For your convenience, all parameters are located in dedicated collapsible sections. You need to open appropriate section and configure parameters you want. 4) Click button Save or Apply to save all changes you made. Now, let s take a quick overview of all template parameters available in JSN Epic. 8

9 About This section contains some general template information like Version, Author and Copyright, as well as some following important template information that you don t want to miss. Check for update This parameter shows you the current template version and the link to check the latest version. We really do treat our templates as piece of software, which need to be continuously improved. Always make sure to check and download the latest version. 9

10 Sample Data Joomla! template JSN Epic Configuration Manual JSN Epic has very useful feature of installing sample data to make your testing website looks the same as on template demo website. Unlike other template providers who give you heavy package with all files and database of the demo website, we just give you single link to install sample data right on your current website. More over, we provide you an option to backup all current data, so you can restore them later, when finish with template testing. For more information please read section Sample Data of in document JSN Epic Quick Start Guide. 10

11 Logo Settings Joomla! template JSN Epic Configuration Manual Bellow is brief overview of all template parameters related to logo configuration. 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. If you do NOT want your logo to be clickable at all, just leave this parameter empty. Logo Slogan This parameter allows you to setup the slogan text to be attached to the alt attribute of the logo image. Text in alt attribute is visible to screen readers (good for accessibility) and search engines (good for SEO). Enable Colored Logo This parameter allows you to setup special logo image for each template color. If enabled, every time you or your website visitors choose some template color theme, the special logo image designed for that color will be shown. 11

12 Layout Settings Joomla! template JSN Epic Configuration Manual Bellow is brief overview of all template parameters related to layout configuration. For more information please read section Layout of this document. Template Width This parameter allows you to select template width option. There are 3 options available: Narrow Template width is fixed in pixels defined in parameter 'Narrow' Definition (px). Wide - Template width is fixed in pixels defined in parameter 'Wide' Definition (px). Float - Template width is floated with percentage defined in parameter 'Float' Definition (px). Tip: The option you select here is considered as default option. Later, in section Site tools Settings you can configure to enable Width Selector which allows website visitors to choose the template width option they want. 12

13 'Narrow' Definition (px) Joomla! template JSN Epic Configuration Manual This parameter allows you to setup the template width (in pixels) which will be used when parameter Template Width is set to Narrow. 'Wide' Definition (px) This parameter allows you to setup the template width (in pixels) which will be used when parameter Template Width is set to Wide. 'Float' Definition (%) This parameter allows you to setup the template width (in percentage) which will be used when parameter Template Width is set to Float. Promo Left Width This parameter allows you to setup width of the module position promo-left. Promo Right Width This parameter allows you to setup width of the module position promo-right. Left Column Width This parameter allows you to setup width of the whole left column (included position left-top, left-2, left and leftbottom). Right Column Width This parameter allows you to setup width of the whole right column (included position right-top, right-2, right and right-bottom). Inner Left Column Width This parameter allows you to setup width of the inner left column (position innerleft). Inner Right Column Width This parameter allows you to setup width of the inner right column (position innerright). Vertical Alignment of 'stickleft' Position This parameter allows you to select the vertical alignment of modules in position stickleft. There are 3 options available: Top Middle 13

14 Bottom Vertical Alignment of 'stickright' Position This parameter allows you to select the vertical alignment of modules in position stickright. There are 3 options the same as in parameter Vertical Alignment for 'stickleft' Position Show Mainbody on Frontpage This parameter allows you to specify whenever to display mainbody area on front-page or not. This option is useful when you want to show simple frontpage, but all children pages must show full content. 14

15 Color & Style Settings Joomla! template JSN Epic Configuration Manual Bellow are brief overview of all template parameters related to style configuration. For more information please read section Color & Style of this document. Template Color This parameter allows you to select template color variation to suite your company brand color. JSN Epic provides 6 major color variations for your taste. Each color variation covers not only the main background, but also color of drop-down menu, links, table s header and some other graphic elements. Tip: The option you select here is considered as default option. Later, in section Site tools Settings you can configure parameter Enable Color Selector which allows website visitor to choose the template color option they want. Template Text Style This parameter allows you to select template text style to match your website type. JSN Epic provides 3 text styles for major website types. Each text style is actually a combination of 2 font types: one for content text, another for heading text and main navigation text. Tip: The option you select here is considered as default option. Later, in section Site tools Settings you can configure parameter Enable Text Style Selector which allow website visitor to choose the template text style option they want. Template Text Size This parameter allows you to select template text size that suites your website audience best. JSN Epic provides 3 text sizes for major website audiences. Tip: The option you select here is considered as default option. Later, in section Site tools Settings you can configure parameter Enable Text Size Selector which allow website visitor to choose the template text size option they want. 15

16 Special Font This parameter let you choose to active special font or not. Special Font is provided by The Google Font Directory and will be applied to headings, components, article titles and menu items. CSS3 Effects This parameter allows you to specify whenever to enable CSS3 visual effects or not. Enable this option will enhance your module heading, button style with advanced CSS3 technique. 16

17 Menu & Site Tools Settings Bellow is brief overview of all template parameters related to menu configuration. For more information please read section Menu & Effects of this document. 17

18 Top Menu Icons Joomla! template JSN Epic Configuration Manual This parameter allows you to assign up to 20 predefined icons to menu items in Top Menu, you can add or remove any icon you want by simply double-click to that icon. This is perfect for the top position in any kind of websites. Main Menu Effect This parameter allows you to show smooth drop-down animation when Main Menu subpanel appears. Main Menu is the horizontal menu bar under the logo. Main Menu Transparency This parameter allows you to make Main Menu submenu panel semi-transparent (about 90% opacity). This effect can add slicker look-n-feel to your website. 18

19 Main Menu Icons Joomla! template JSN Epic Configuration Manual This parameter allows you to assign up to 20 predefined icons to menu items in Main Menu, you can add or remove any icon you want by simply double-click to that icon Side Menu Effect This parameter allows you to have smooth slide animation when Side Menu subpanel appears. Side Menu is the vertical menu that can be set on left column. Side Menu Transparency This parameter allows you to make Side Menu submenu panel semi-transparent (about 90% opacity). JSN Epic allows you to have independent settings for Main Menu and Side Menu since Side Menu in most cases will cover the content and you might want it to have full opacity. Site tools Presentation This parameter allows you to select how to present site tools, including Text Size Selector, Width Selector and Color Selector. There are 2 options available: 19

20 Dropdown Menu With this option all elements are arranged in a drop down panel Inline Row - With this option all elements are arranged in single row located directly on main menu toolbar. Enable Text Size Selector This parameter allows you to display text size selector so your visitors can choose the text size they want. Note: Settings from this selector are considered as visitor s preference and have top priority. It will overwrite default settings of parameter Template Text Size. Enable Width Selector This parameter allows you to display width selector so your visitors can choose the template width they want. Note: Settings from this selector are considered as visitor s preference and have top priority. It will overwrite default settings of parameter Template Width. Enable Color Selector This parameter allows you to display color selector so your visitors can choose the template color they want. Note: Settings from this selector are considered as visitor s preference and have top priority. It will overwrite default settings of parameter Template Color. Colors in Selector This parameter allows you to specify series of color icons to be displayed in Color Selector. The order of colors you specify here will reflect the order of color icons in selector. 20

21 SEO & System Settings Joomla! template JSN Epic Configuration Manual Bellow are brief overview of all template parameters related to accessibility configuration. For more information please read section SEO & System Settings of this document. Enable Website Title This parameter allows you to show website title in tag <title> on every pages, except the homepage. This is great feature to improve your website SEO, since you can define a website title with some important keywords. Enable Top H1 tag This parameter allows you to wrap website slogan to <h1> tag and show it on top of your website. <h1> is the most important content tag and search engine normally pays special attention to the content in that tag, especially if it is located on top of your webpage. Enable 'Go to top' link This parameter allows you to put 'Go to top' link at the bottom of page. Clicking on that link will smoothly scrolls page to the top, which is nice and good for usability. 21

22 Enable Auto Icon links Joomla! template JSN Epic Configuration Manual This parameter allows you to have icons automatically assigned to the links. JSN Epic is able to detect links to various popular file extensions or communication protocols and assign icons accordingly. This feature utilizes modern CSS2 specification and allows you to have links with meaningful icons assigned without any modification in XHTML code. Currently JSN Epic supports 34 file types and it is truly amazing. Moreover, it can detect protocol type to assign icons to links to instant messengers, , etc. For more information please read section Typography of this document. Enable Printing Optimization This parameter gives your visitors totally optimized page for printer with only important content included. This is very useful when you want your website visitor to be able to print only the main content of the page and nothing else like side columns content, etc. By default, this option is turned off so the whole page will be output to printer. Analytics Code Position This parameter allows you to choose wherever to put your Analytics tracking code before ending HEAD tag or before ending BODY tag. Analytics Code This parameter allows you to set Analytics tracking code to template parameter and it will be inserted right into the correct place without having to edit index.php file. In fact, you can specify here any tracking code providing that it is required to be located at the end of the page. Custom CSS File(s) This parameter allows you to set a list of additional CSS file(s) that you want to load in the template. This is the best choice in case you want to apply your own style to content, but keep the template CSS core untouched. Compress CSS This parameter allows you to enable built-in template feature, which will increase website performance by combine and compress all template s CSS files. Cache Folder This parameter allows you to set the path to folder that will be used to store compressed CSS cached files. 22

23 Extended Styles Settings Joomla! template JSN Epic Configuration Manual Bellow are brief overview of all template parameters related to extended styles configuration. For more information please read section Extended Styles of this document. Enable K2 Style This parameter allows you to have extended styles for K2 which includes tabs color, additional module styles, fixed alignment issues and some other minor visual enhancement. Enable Community Builder Style This parameter allows you to have extended styles for Community Builder which includes adapted drop down menu style, tabs color, additional module styles and some other minor visual enhancement. Enable Virtue Mart Style This parameter allows you to have extended style for Virtue Mart which includes adapted Add to Cart button, additional module styles, fixed alignment issues, redesigned checkout-steps icons and some other minor visual enhancement. Enable JEvents Style This parameter allows you to have extended style for JEvents which includes redesigned calendar navigation icons and calendar table, adapted table header color, additional module styles, fixed alignment issues and some other minor visual enhancement. Enable JoomGallery Style This parameter allows you to have extended style for JoomGallery which includes redesigned navigation icons, fixed alignment issues, additional module styles and some other minor visual enhancement. 23

24 Logo The logo JSN Epic is default sample logo and you should replace it with your own. Technically logo is an image file called logo.png and located in folder joomla_root_folder/templates/jsn_epic_xxx/images/, where XXX the template edition you have. There are 2 options to setup your logo: Setup logo image via Template Parameter. This option is perfect for regular graphic image logos. Setup logo via Custom HTML module in position logo. This option is required for rich-media logos. Setup logo image via Template Parameter 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. Note: Your logo must be saved in PNG format and with name logo.png. We recommend you to save your logo in format PNG-8, which is best for logo images which has few colors, but sharp edges. 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 need to upload your logo file to template s images folder at joomla_root_folder/templates/jsn_epic_xxx/images/, where XXX the template edition you have, overwriting the original file. If you have permission problems while using FTP, then we strongly recommended you to use great Joomla extension called JoomlaXplorer. You can download it for free from JED at: 24

25 Stage 3: Setup template parameter to use new logo Now, the final stage is to setup logo parameters as desired: Logo Link Set URL where logo image should link to. You can set here: An absolute link (staring with like Or relative link (without preceding slash) starting from Joomla! root folder, like index.php If you don t want your logo to be linkable just leave this parameter empty. Logo Slogan Set the slogan text to be attached to the alt attribute of logo image. 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. Enable Colored Logo Select to use special logo image for each template color or not. If enabled, you need to repeat stage 1 to prepare logo file for each template color. Then you need to place them in folder joomla_root_folder/templates/jsn_epic_xxx/images/{color_name}/, where XXX the template edition you have. Setup rich logo via module in position Logo JSN Epic provides module position called logo, where you can put Custom HTML module with rich-media logo. Another advantage is that you can create multiple modules with different logos and display them in various pages using menu-module assignment feature in Joomla!. There are 3 stages involved in changing the default logo: 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 which is best for logo images with few colors, but sharp edges. 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 your logo to folder "images/stories" via FTP Client or Joomla! Media Manager 25

26 Stage 3: Setup template parameter to use new logo Now you need to create new Custom HTML module via Extensions -> Module Manager then insert your logo image there. You need to setup following parameters in module settings page: Title: My Custom Logo (you can choose another title here) Show Title: No Enabled: Yes Position: logo Custom Output: <img src="images/stories/your_logo_name.png" border="0" /> Note: When using rich logo via module, all 3 logo parameters: Enable Colored Logo, Logo Link and Logo Slogan are not active. 26

27 Website title configuration To change website title please make following steps: 1. In Joomla administration panel, go to Menus -> Main Menu 2. Next, in Menu Item Manager page, select item Home Next, Menu Item page, open section Parameters (System) and change parameter Page Title as you desire. 27

28 Layout Module positions JSN Epic provides 36 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. 28

29 Layout dimensions Joomla! template JSN Epic Configuration Manual JSN Epic allows you to change width size for overall layout, left column, right column, inner left column and inner right. You just need to configure appropriate template parameters to get desired result. Template Width Template width can be configured by 3 following ways in order of increasing priority: 1. Template width can be set by template parameter Template Width in administration panel. This is default setting and has the lowest priority. There are 3 option for you to choose: o o Narrow Template width is fixed in pixels defined in parameter 'Narrow' Definition (px). Wide - Template width is fixed in pixels defined in parameter 'Wide' Definition (px). o Float - Template width is floated with percentage defined in parameter 'Float' Definition (%). 2. Template width can be set to particular page by providing Page Class Suffix to a menu item of that page. The suffix has syntax custom-xxx-yyy, where xxx is the column you want to adjust and xxx is the column width value you choose, for example custom-leftwidth-30. There are following possible values: leftwidth, rightwidth, innerleftwidth and innerrightwidth. This setting will override the default settings by template parameter Template Width. 3. Template color can be selected by website visitor from Color Selector in Site tools. This setting is considered as visitor s preference and has top priority. It will overwrite both Page Class Suffix and default settings of parameter Template Color. 29

30 Promo Left Width Joomla! template JSN Epic Configuration Manual You can configure width of module position promo-left by template parameter Promo Left Width. Parameter value can be specified only in integer, for example 25% is correct, but 25.5% is incorrect. Promo Right Width You can configure width of module position promo-right by template parameter Promo Right Width. Parameter value can be specified only in integer, for example 25% is correct, but 25.5% is incorrect. Left Column Width You can configure left column width by template parameter Left Column Width. Parameter value can be specified only in integer, for example 25% is correct, but 25.5% is incorrect. Right Column Width You can configure right column width by template parameter Right Column Width. Parameter value can be specified only in integer, for example 25% is correct, but 25.5% is incorrect. Inner Left Column Width You can configure inner left column width by template parameter Inner Left Column Width. Parameter value can be specified only in integer, for example 25% is correct, but 25.5% is incorrect. Inner Right Column Width You can configure inner right column width by template parameter Inner Right Column Width. Parameter value can be specified only in integer, for example 25% is correct, but 25.5% is incorrect. 30

31 Colors Variation Template Color JSN Epic provides 6 major color variations for your taste. Each color variation covers not only the main background, but also color of drop-down menu, links, table s header and some others. All available colors are described bellow. Blue Red 31

32 Green Violet Orange 32

33 Grey Template color can be configured by 3 following ways in order of increasing priority: 1. Template color can be set by template parameter Template Color in administration panel. This is default setting and has the lowest priority. 2. Template color can be set to particular page by providing Page Class Suffix to a menu item of that page. The suffix has syntax custom-color-xxx, where xxx is the color you want to have, for example customcolor-red. There are following possible values: blue, red, green, violet, orange, grey. This setting will override the default settings by template parameter Template Color. 3. Template color can be selected by website visitor from Color Selector in Site tools. This setting is considered as visitor s preference and has top priority. It will overwrite both Page Class Suffix and default settings of parameter Template Color. 33

34 Menu Styles JSN Epic provides 5 menu styles to display your website navigation on virtually any position. The best thing is JSN Epic utilizes Joomla! built-in menu module (mod_mainmenu) and you don t need to install any external menu modules. Main Menu By just a combination of XHTML, CSS and little JavaScript (only for IE) Main Menu allows you to have clean accessible XHTML code structure and simple yet effective drop-down submenu panels. To setup Main Menu please make following steps: 1. In Module Manager, click on the menu module you want to use as main menu module. By default, Joomla! 1.5 comes with Main Menu module, which might be the perfect choice. 2. In module s configuration page, setup parameters as following: Title: Main Menu (or any other you like) Show title: No Enabled: Yes Position: mainmenu Menus: All Menu Name: mainmenu (you might want to use another menu source here) Menu Style: List Start Level: 0 End Level: 0 Always show sub-menu Items: Yes 34

35 Menu Tag ID:base-mainmenu Menu Class Suffix:-iconmenu Module Class Suffix: empty 35

36 Rich Menu JSN Epic allows you to present menu items in 2 text lines: primary and secondary. To setup text strings you need to go to menu item settings and add symbol combination (=) as separator between primary and secondary text. Check following screenshot for details. In the example above text Home is the primary text and Lorem ipsum dolor sit... is the secondary text. Separator between them is the symbol combination (=). Note: If you decide to use Rich Menu, then make sure you configure secondary text for all menu items. The menu will look not good, if you set secondary text only for few menu items. 36

37 Special visual effects Joomla! template JSN Epic Configuration Manual JSN Epic provides smooth drop down animation for submenu panels. It utilizes built-in Joomla! MooTools Javascript library so there is no need to integrate any other Javascript framework. To enable the effect go to template configuration page and set template parameter Main Menu Effect to Yes. Another visual effect is transparency for submenu panels (about 90%). To enable submenu transparency you need to set template parameter Main Menu Transparency to Yes. 37

38 Main Menu Icons Joomla! template JSN Epic Configuration Manual JSN Epic allows you to assign up to 20 predefined icons for items in main menu. To setup icons, you need to find template parameter Main Menu Icons and choose any icon you want to display from drop-down panel. If you define more icon names then actual number of menu items, then unused icons will be ignored. You can use icons in combination with Rich Menu as well. As stated before there are 20 predefined icons for you to choose. Bellow is table of all available icons and their name. 38

39 Tree Menu The side menu you see on left column is vertical tree-like menu presentation called Tree Menu. By default all submenu items are collapsed until you select the parent menu item. Submenu items of each level have their own bullets to make it easier to distinguish. Please make following steps to setup Tree Menu: 1. In module manager, click on the menu module you want to use as tree menu module. By default, Joomla! 1.5 comes Key Concepts module, which might be the perfect choice. 2. In module s configuration page, setup parameters as following: Title: Tree Menu (or any other you like) Show title: Yes Enabled: Yes Position: left Menu Assignment: All (or at least Home) Menu Name: keyconcepts (you might want to use another menu source here) Menu Style: List Start Level: 0 End Level: 0 39

40 Always show sub-menu Items: No Menu Tag ID: empty Menu Class Suffix:-treemenu Module Class Suffix:box-yellow In above example we used Yellow Box module styles, but you can use any other module styles. Attention: There is common misconception about Menu Class Suffix and Module Class Suffix. They are absolutely different parameters, so please pay attention on their settings. 40

41 Div Menu The Div Menu in the bottom position is simple yet nice menu bar with items separated by slightly visible dashes. Default Joomla! method generates additional HTML tags to show dashes which is not very clean. Div Menu in JSN Epic generates pure HTML list for menu structure and uses CSS to show dashes. Please make following steps to setup Div Menu: 1. In module manager, click on the menu module you want to use as div menu module. By default, Joomla! 1.5 comes with Resources module, which might be the perfect choice. 2. In module s configuration page, setup parameters as following: Title: Div Menu (or any other you like) Show title: No Enabled: Yes Position: bottom Menu Assignment: All Menu Name: othermenu (you might want to use another menu source here) Menu Style: List Start Level: 0 End Level: 1 Always show sub-menu Items: No Menu Tag ID: empty Menu Class Suffix:-divmenu Module Class Suffix: empty 41

42 Attention: There is common misconception about Menu Class Suffix and Module Class Suffix. They are absolutely different parameters, so please pay attention on their settings. 42

43 Top Menu Icons Joomla! template JSN Epic Configuration Manual 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 top position in any kind of websites. Please make following steps to setup icon menu: 1. In module manager click on the menu module you want to use as top menu module. By default, Joomla! 1.5 comes with Top Menu module, which might be the perfect choice. 2. In module s configuration page, setup parameters as following: Title: Top Menu (or any other you like) Show title: No Enabled: Yes Position: top Menus: All Menu Name: topmenu (you might want to use another menu source here) Menu Style: List Start Level: 0 End Level: 1 Always show sub-menu Items: No Menu Tag ID:base-topmenu Menu Class Suffix:-iconmenu Module Class Suffix: empty Attention: There is common misconception about Menu Class Suffix and Module Class Suffix. They are absolutely different parameters, so please pay attention on their settings. 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 choose any icon you want to display from drop-down panel. 43

44 44

45 Side Menu JSN Epic provides vertical menu with slide-out subpanels called Side Menu. By just combination XHTML, CSS and little JavaScript (only for IE) Side Menu allows you to have clean accessible XHTML code structure and simple yet effective slide-out menu effect. Please make following steps to setup Side Menu: 1. In module manager click on the menu module you want to use as main menu module. By default, Joomla! 1.5 comes with Key Concepts module, which might be the perfect choice. 2. In module s configuration page, setup parameters as following: Title: Side Menu (or any other you like) Show title: Yes Enabled: Yes Position: left Menus: All (or at least Home) Menu Name: keyconcepts (you might want to use another menu source here) Menu Style: List Start Level: 0 End Level: 0 Always show sub-menu Items: Yes Menu Tag ID: empty 45

46 Menu Class Suffix:-sidemenu Module Class Suffix:box-yellow In above example we used Yellow Box module styles, but you can use any other module styles. Attention: There is common misconception about Menu Class Suffix and Module Class Suffix. They are absolutely different parameters, so please pay attention on their settings. Special visual effects Similar to Main Menu, JSN Epic provide smooth slide out animation for submenu panels of Side Menu. This feature also utilizes built-in Joomla! MooTools Javascript so there is no need to integrate any other Javascript framework. 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. 46

47 Font Styles Font Face JSN Epic provides 3 font face options for major website types. Each font face option is actually a combination of 2 font types: one for content text, another for heading text and main navigation text. Font face option is configured by template parameter Template Text Style. All available text styles are described bellow. Business / Corporation Website text style (default) This is the combination of Verdana (for heading text) and Arial (for content text). The alternative fonts for Mac OS users are Geneva and Helvetica respectively. This compact neat text style is excellent choice for business oriented websites as well as corporate websites. The combination of Verdana and Arial font type looks very natural and common for most of users since they are most popular font types used on the Internet. Personal / Blog Website text style This is the combination of Georgia (for heading text) and Trebuchet MS (for content text). The alternative fonts for Mac OS users are serif and Helvetica respectively. 47

48 This text style is little bigger then normal which make it perfect choice for small websites like personal or blog websites. The combination of Georgia and Trebuchet MS makes content very easy to read and the looks impressive. Online News / Magazines font style This is the combination of Palatino Linotype (for heading text) and Times New Roman (for content text). The alternative fonts for Mac OS users are Palatino and Times respectively. This text style utilizes another very popular font called Times New Roman. This font is widely used in printing industry and in some of extremely popular online news website like The New York Times. If you want to run online news / magazine website, it s worth to try this font combination. Template text style can be configured by 2 following ways in order of increasing priority: 1. Template text style can be set by template parameter Template Text Style in administration panel. This is default setting and has the lowest priority. 2. Template text style can be set to particular page by providing Page Class Suffix to a menu item of that page. The suffix has syntax custom-textstyle-xxx, where xxx is the text style you want to have, for example custom-textstyle-business. There are following possible values: business, personal, news. This setting will override the default settings by template parameter Template Text Style. 48

49 Special Font Come along with 3 font face, JSN Epic provides an option to let you choose whenever to apply special font style to your website. Special font is provided by The Google Font Directory and each font face will have appropriate special font when applied. Font Size JSN Epic provides 3 text size options for major website audience types. Small size Medium size 49

50 Large size Template text size can be configured by 3 following ways in order of increasing priority: 1. Template text size can be set by template parameter Template Text Size in administration panel. This is default setting and has the lowest priority. 2. Template text size can be set to particular page by providing Page Class Suffix to a menu item of that page. The suffix has syntax custom-textsize-xxx, where xxx is the text size you want to have, for example custom-textsize-small. There are following possible values: small, medium, large. This setting will override the default settings by template parameter Template Text Size. 3. Template text size can be selected by website visitor from Text Size Selector in Site tools. This setting is considered as visitor s preference and has top priority. It will overwrite both Page Class Suffix and default settings of parameter Template Text Size. 50

51 Module Styles JSN Epic provides 4 box designs for module background styling and 20 predefined icons to decorate module title. All module title styles can be used in combination with module background styles and this gives you 80 module style combinations. 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. Module Box Designs Box designs to be applied to modules. box-blue box-green box-yellow box-grey 51

52 Module Icon Designs Icon designs can be applied to module s title by adding to module class suffix string icon-xxx, where xxx is the icon name. All icon designs can be used in combination with module design like bellow examples: icon-star icon-online Also icon styles can be used in combination with box module styles like shown bellow: box-green icon-user box-yellow icon-comment For more information about available icons and their names, please read section Predefined Icons of this document. 52

53 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. Content columns It s pretty common situation when you need to arrange your content in multiple columns. JSN Epic offers you very convenient and accessible method to create multiple column content. This is real step forward removing table tags from your content and leaving them only for showing tabular data. As with v4 you can arrange your content in as many columns as you like. JSN Epic will detect the amount of columns you have and automatically make arrangement. Another improvement is now the required XHTML code is much simpler. The only thing you just need to do is to set class grid-layout to parent DIV. Bellow are screenshot of how does this feature look and example how to use it. Content arranged in 2 columns Usage: <div class= grid-layout > <div>text in column 1</div> <div> Text in column 2</div> </div> Content arranged in 3 columns Usage: <div class= grid-layout > <div>text in column 1</div> <div>text in column 2</div> <div> Text in column 3</div> </div> 53

54 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. Heading styles 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. Text styles JSN Epic provides 12 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. Usage: <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. 54

55 Usage: <blockquote>your quote text</blockquote> Drop cap symbol You can use this special drop cap symbol style for magazine / newspaper text paragraph. Usage: <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. Usage: <span class= text-highlight >Text to be highlighted.</span> 55

56 Alert text You can use this style for alert or warning text paragraph requiring user s attention. Usage: <p class="text-alert">your alert text that requires user s attentions.</p>. <div class="text-alert">your alert text that requires user s attentions.</div>. Info text You can use this style for regular information text paragraph that does not require much user s attentions. Usage: <p class="text-info">your information text.</p>. <div class="text-info">your information text.</div>. 56

57 Download text Joomla! template JSN Epic Configuration Manual You can use this style for information text paragraph related to download process. Usage: <p class="text-download">your download text.</p>. <div class="text-download">your download text.</div>. Tip text You can use this style for useful information like tips, hint or help text. Usage: <p class="text-tip">your tip, hint or help text.</p> <div class="text-tip">your tip, hint or help text.</div> Comment text You can use this style for comment text paragraph. 57

58 Usage: <p class="text-comment">your comment text.</p> <div class="text-comment">your comment text.</div> Attachment text You can use this style for information text paragraph related to attachment file. Usage: <p class="text-attachment">your attachment text.</p>. Video text You can use this style for description text paragraph that related to video file. 58

59 Usage: <p class="text-video">your video text.</p> <div class="text-video">your video text.</div>. Audio text You can use this style for description text paragraph related to audio file. Usage: <p class="text-audio">your attachment text.</p> <div class="text-audio">your attachment text.</div>. 59

60 Link styles Icon link styles You can attach up to 20 predefined icons to the front of any link by adding simple class to it. Usage: <a class="link-icon icon-xxx">this is link text.</a>, where xxx is the name of icon to be applied. Example: <a class="link-icon icon-download">this is link to download something.</a> For more information about available icons and their names, please read section Predefined Icons of this document. Button link styles JSN Epic offers 6 button styles to decorate any call-to-action links you have in the content. Usage: <a class="link-button button-xxx">this is link text.</a>, where xxx is the button color name selected from: light, dark, green, orange, blue and red. Example: <a class="link-button button-orange">see plans & pricing.</a> 60

61 Button and Icon link styles combined You can use both button and icon link style combined. Usage: <a class="link-button button-xxx"><span class="link-icon icon-yyy">this is link text.</span></a>, where xxx and yyy are button color and icon names respectively. Example: <span class="link-button button-green"><a class="link-icon icon-cart">add to cart.</a></span> Extension link styles JSN Epic is able to attach not only descriptive icon to the front of link as described in above section, but also 23 extension icons to the end of the link. There are 2 ways of utilization extension icons. Automatic 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. Moreover, it can detect protocol type to assign icons to links to instant messengers, , etc. Manual assignment 61

62 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. Usage: <a class="link-icon icon-ext-xxx">this is link text.</a>, where xxx is the icon name described bellow. - aim - excel - movie - skype - application - feed - msn - text - archive - flash - music - torrent - calendar - font - pdf - vcard - css - mail - powerpoint - yahoo - doc - mobile - quicktime - windowsmedia JSN Epic utilize CSS sprite technique to reduce amount of HTTP request to server in order to get icons. Technically, all icons are merged in one single image file and visitor will need to make one single request/download to get that file with all icons. If you have some extra time, please read more about CSS sprites. 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. Colorheader table style Usage: <table class="table-style style-colorheader">...</table> 62

63 Color Stripes table style Joomla! template JSN Epic Configuration Manual Usage: <table class="table-style style-colorstripes">...</table> Grey Stripes table style Usage: <table class="table-style style-greystripes">...</table> Attention: In order to get table styles shown correctly, you need to create solid XHTML code as foundation. Bellow is an example of solid XHTML code for table. <table width="100%" class="table-style style-colorheader"> <thead> <tr> <th>table header</th> <th>column header 1</th> <th class= highlight >Column header 2</th> <th>column header 3</th> </tr> </thead> <tbody> 63

64 </table> Joomla! template JSN Epic Configuration Manual <tr class="odd"> <th>row header 1</th> <td>lorem ipsum</td> <td class= highlight >Dolor sit amet</td> <td>lorem ipsum</td> </tr> <tr> <th>row header 1</th> <td>lorem ipsum</td> <td class= highlight >Dolor sit amet</td> <td>lorem ipsum</td> </tr> </tbody> <tfoot> <tr> <th>table footer</th> <td colspan="3">footer data</td> </tr> </tfoot> 64

65 List styles Lists are crucial element in every content, not only online websites, but offline publications as well. List really helps readers to distinguish and remember important things by just a glance. JSN Epic offers 5 standard list with advanced icon list, number list and digit list styles for virtually all kind of information you might want to outline. Standard list styles Unordered list Ordered list Usage: <ul><li> </li></ul> Usage: <ol><li> </li></ol> Arrow list styles Red arrow Blue arrow Usage: <ul class="list-arrow arrow-red"><li> </li></ul> Usage: <ul class="list-arrow arrow-blue"><li> </li></ul> 65

66 Green arrow Usage: <ul class="list-arrow arrow-green"><li> </li></ul> 66

67 Icon list styles Article icon list Folder icon list Usage: <ul class="list-icon icon-article"><li> </li></ul> Usage: <ul class="list-icon icon-folder"><li> </li></ul> Image icon list Online icon list Usage: <ul class="list-icon icon-image"><li> </li></ul> Usage: <ul class="list-icon icon-online"><li> </li></ul> 67

68 Star icon list User icon list Usage: <ul class="list-icon icon-star"><li> </li></ul> Usage: <ul class="list-icon icon-user"><li> </li></ul> 68

69 Number list style Blue Bullet number list Green Bullet number list Usage: <ul class="list-number-bullet bullet-blue"><li> Usage: <ul class="list-number-bullet bullet-green"><li> Grey Bullet number list Orange Bullet number list Usage: <ul class="list-number-bullet bullet-grey"><li> Usage: <ul class="list-number-bullet bullet-orange"><li> 69

70 Red Bullet number list Violet Bullet number list Usage: <ul class="list-number-bullet bullet-red"><li> Usage: <ul class="list-number-bullet bullet-violet"><li> Blue Digit number list Green Digit number list Usage: <ul class="list-number-digit digit-blue"><li> Usage: <ul class="list-number-digit digit-green"><li> 70

71 Grey Digit number list Orange Digit number list Usage: <ul class="list-number-digit digit-grey"><li> Usage: <ul class="list-number-digit digit-orange"><li> Red Digit number list Violet Digit number list Usage: <ul class="list-number-digit digit-red"><li> Usage: <ul class="list-number-digit digit-violet"><li> 71

72 Site Tools JSN Epic provides 3 brand new features to enhance website user experience: Width Selector, Text Size Selector and Color Selector. By enabling these selectors, you surely give visitors best user experience on your website. All settings from Site tools will be stored as visitor s browser cookies for further usage. If all selectors are disabled then the whole Site tools will not be shown. Site tools Presentation You have 2 options to present selectors in Site tools. Dropdown Menu With this option all selectors are elegantly arranged in submenu panel. The drop-down animation, transparency and background color settings will be inherited from settings of Main Menu. See section Menu for more information on this. Inline Row With this option all selectors are located directly on main menu bar. If you want to enable only some selector, this option is the best. Width Selector Width selector allows your website visitor to select what template width they want to use. As mentioned in section Layout dimensions in this document, there are 3 possible width options and visitor can select any of them by selector. You can disable this selector by setting template parameter Enable Width Selector to No. 72

73 Text Size Selector Joomla! template JSN Epic Configuration Manual Text Size Selector allows your website visitors to select the optimal text size for them. For example, old people can experience your website better with Big text size selected. You can disable this selector by setting template parameter Enable Text Size Selector to No. Color Selector Color Selector allows your website visitor choose the color them they like. This is very cool feature for social kind of websites where visitor s preferences are most appreciated. You can even setup what color to include in the selector by setting template parameter Colors in Selector. Just type colors you want to include spitted by comma, like blue,red,green. In the case your website has strong identity color and you don t want visitor to select any other color, just turn this selector off by setting template parameter Enable Color Selector to No. 73

74 SEO & Accessibility Source ordering One of the most important SEO technique is to make sure that search engine can find your critical content before others. To make this possible in our template code structure we generate the center part first and only after that left and right columns. In this way, you can be sure that search engines will see your critical content first. You can use Lynx browser both online or offline to make sure of that. 74

75 Website Title Joomla! template JSN Epic Configuration Manual This feature allows you to use value defined in parameter Site Name from Joomla Global Configuration and show it in tag <title> on every pages. By default Joomla! presents Site Name only at back-end and offline page. Now, with parameter Website Title you can utilize Site Name at front-end on every page. This is great feature to improve your website SEO, since you can define a website title with some important keywords and show it on every page. 75

76 Top H1 tag This feature allows you to wrap website slogan to <h1> tag, which is good for both SEO and accessibility. As we all know, <h1> is the most important content tag and search engine normally pays special attention to the content in that tag. Once you configured your keyword-powered website title and slogan, you can include them in the first h1 tag to increase SE ranking. 76

77 Go to top Link Joomla! template JSN Epic Configuration Manual This feature allows you to put 'Go to top' link at the bottom of page, which smoothly scrolls page to the top, which is nice and good for website usability. 77

78 Printing Optimization Joomla! template JSN Epic Configuration Manual This brand new feature will give your website visitors totally optimized page for printer with only important content included. This is very useful when you want your website visitor to be able to print only the main content of the page and nothing else like side columns content, etc. Before printing optimization After printing optimization 78

79 As you can see on screenshots, not only the content is simplified, but also the styling was optimized to get pure black on white ready for printing page. At anytime, you can turn this feature off so the whole page will be output to printer. 79

80 Analytics Code Position Joomla! template JSN Epic Configuration Manual This parameter allows you to choose wherever to put your Analytics tracking code before ending HEAD tag or before ending BODY tag. Analytics Code This feature allows you to set Analytics code to template parameter and it will be inserted right into the correct place without having to edit index.php file. Nowadays, Analytics becomes standard-de-facto of website tracking and this parameter can be very handy. Custom CSS File(s) This parameter let you load external CSS file into your site, this is the best choice if you want to slightly modify the template, apply your unique style to content but keep the default template CSS files untouched. Attention: All custom CSS file must be located in the template s css folder and each custom CSS file name must be defined in a single line. Compress CSS When this parameter is activated, all template s CSS files will be combined and compressed to single php file which will greatly increase website performance. 80

81 Cache Folder Joomla! template JSN Epic Configuration Manual This feature is designed to store cached compressed CSS file(s), you can change the path to fit your need. Attention: Folder path should be relative from website root path. Extended Styles One of hottest features in JSN Epic is extended styles adapted for 5 most popular Joomla! extension: K2, Community Builder, Virtue Mart, JEvents and JoomGallery. Technically extended styles are overrides of default extension s style (images + CSS) and located in folder /ext inside template folder. All styles are separated in dedicated subfolders for each extension as following: - K2 styles are located in folder /ext/k2 - Community Builder styles are located in folder /ext/cb - Virtue Mart styles are located in folder /ext/vm - JEvents styles are located in folder /ext/jevents - JoomGallery styles are located in folder /ext/jg Some extensions have their own template system and you might want to turn off extended style thru template parameter in order to use those native templates. Attention: The extensions above are not included in the template package and you have to download separately. You can download the extensions on Joomla Extensions Directory 81

82 K2 Extended style for K2 includes adapted tabs color, additional module styles, fixed alignment issues and some other minor visual enhancement. Component styling To apply extended style for K2 you need to set template parameter Enable K2 Style to Yes. Here is how K2 component will look like after extended styles applied. 82

83 Module styling Joomla! template JSN Epic Configuration Manual Besides from extended component styling you can use template module styles for K2 modules as well. - K2 Content Module (mod_k2_content) with module style box-green icon-article applied - K2 Comments Module (mod_k2_comments) with module style box-blue icon-comment applied - K2 Login Module (mod_k2_login) with module style box-yellow icon-user applied 83

84 Community Builder Extended style for Community Builder includes adapted drop down menu style, tabs color, additional module styles and some other minor visual enhancement. Component styling To apply extended style for Community Builder you need to set template parameter Enable Community Builder Style to Yes. Here is how Community Builder component will look like after extended styles applied. Adapted drop-menu style and tabs color on CB Profile page 84

85 Module styling Joomla! template JSN Epic Configuration Manual Besides from extended component styling you can use template module styles for Community Builder modules as well. In the example above: - CB Login Module (mod_cblogin) with module style box-yellow icon-user applied - CB Online Module (mod_comprofileronline) with module style box-blue icon-online applied - CB Workflows (mod_comprofilermoderator) with module style box-grey icon-selection applied 85

86 Virtue Mart Extended style for Virtue Mart includes adapted Add to Cart button, additional module styles, fixed alignment issues, redesigned checkout-steps icons and some other minor visual enhancement. Component Styling To apply extended style for Community Builder you need to set template parameter Enable VirtueMart Style to Yes. Fixed alignment issues on Product Details page 86

87 Module styling Joomla! template JSN Epic Configuration Manual Besides from extended component styling you can use template module styles for Virtue Mart modules as well. - VirtueMart Module (mod_virtuemart) with module style box-blue icon-cart applied. 87

88 JEvents Extended style for JEvents includes redesigned calendar navigation icons and calendar table, adapted table header color, additional module styles, fixed alignment issues and some other minor visual enhancement. Component Styling To apply extended style for JEvents you need to set template parameters Enable JEvents Style to Yes. Totally redesigned calendar navigation icons 88

89 Adapted calendar table header color Module styling Adapted table header color on Event List page Besides from extended component styling you can use template module styles for JEvents modules as well. 89

90 In the example above: - Events Calendar Module (mod_jevents_cal) with module style box-blue icon-calendar applied. - Latest Events Module (mod_jevents_latest) with module style box-green icon-star applied. - JEvents Legend Module (mod_jevents_legend) with module style box-grey icon-info applied. 90

91 JoomGallery Extended style for JoomGallery includes redesigned navigation icons, fixed alignment issues, additional module styles and some other minor visual enhancement. Component Styling To apply extended style for JoomGallery you need to set template parameters Enable JoomGallery Style to Yes. Totally redesigned navigation bar and information panel 91

92 Fixed alignment issues 92

93 Module styling Joomla! template JSN Epic Configuration Manual Besides from extended component styling you can use template module styles for JoomGallery modules as well. - JoomSearch Module (mod_joomsearch) with module style box-blue icon-search applied. - JoomGallery Treeview Module (mod_jgtreeview) with module style boxyellow icon-image applied. - JoomGallery Latest Categories Module (mod_jglatestcart) with module style box-grey icon-star applied. - JoomGallery Stats Module (mod_joomgallerystats) with module style boxgreen icon-statistics applied. 93

94 Multilingual support In our templates all wordings of both back-end and front-end are moved to separated language files, so you can easily translate them into any language you want. More information about how to make your own translation can be found in JSN Epic Customization Manual. Currently our templates support 12 primary languages and more to be come in future. English German 94

95 Dutch Italian 95

96 Spanish French 96

97 Japanese Danish Russian 97

98 Polish Bulgarian Croatian If you want to contribute and add translation of your own language, please feel free to contact us at: 98

99 What s next? Now as you have learnt every features of the template, it s time to move on and customize it for your need. Go ahead and open next documentation came with JSN Epic package called JSN Epic v4 Customization Manual.. In this manual you will find detailed description about how to customize every bits of the template to make it suite you. You can download full documentation package and print for convenient reading. Give a feedback We are continuously working on new releases of our products and would really appreciate any of your comments, feedbacks. Feel free to drop us a line at Feedback Page. Check new templates We are constant updating our template repertoire, so don t forget to visit JoomlaShine templates page to check for something new. 99