Joomla! template JSN Epic                        Configuration Manual                                           (for JSN E...
Joomla! template JSN Epic Configuration Manual ©                                             Follow us on Twitter http://w...
Joomla! template JSN Epic Configuration Manual ©                           Follow us on Twitter http://www.twitter.com/joo...
Joomla! template JSN Epic Configuration Manual ©                            Follow us on Twitter http://www.twitter.com/jo...
Joomla! template JSN Epic Configuration Manual ©                           Follow us on Twitter http://www.twitter.com/joo...
Joomla! template JSN Epic Configuration Manual ©                           Follow us on Twitter http://www.twitter.com/joo...
Joomla! template JSN Epic Configuration Manual ©                             Follow us on Twitter http://www.twitter.com/j...
Joomla! template JSN Epic Configuration Manual ©                            Follow us on Twitter http://www.twitter.com/jo...
Joomla! template JSN Epic Configuration Manual ©                            Follow us on Twitter http://www.twitter.com/jo...
Joomla! template JSN Epic Configuration Manual ©                            Follow us on Twitter http://www.twitter.com/jo...
Joomla! template JSN Epic Configuration Manual ©                            Follow us on Twitter http://www.twitter.com/jo...
Joomla! template JSN Epic Configuration Manual ©                           Follow us on Twitter http://www.twitter.com/joo...
Joomla! template JSN Epic Configuration Manual ©                            Follow us on Twitter http://www.twitter.com/jo...
Joomla! template JSN Epic Configuration Manual ©                            Follow us on Twitter http://www.twitter.com/jo...
Joomla! template JSN Epic Configuration Manual ©                             Follow us on Twitter http://www.twitter.com/j...
Joomla! template JSN Epic Configuration Manual ©                            Follow us on Twitter http://www.twitter.com/jo...
Joomla! template JSN Epic Configuration Manual ©                            Follow us on Twitter http://www.twitter.com/jo...
Joomla! template JSN Epic Configuration Manual ©                             Follow us on Twitter http://www.twitter.com/j...
Joomla! template JSN Epic Configuration Manual ©                             Follow us on Twitter http://www.twitter.com/j...
Joomla! template JSN Epic Configuration Manual ©                           Follow us on Twitter http://www.twitter.com/joo...
Joomla! template JSN Epic Configuration Manual ©                             Follow us on Twitter http://www.twitter.com/j...
Joomla! template JSN Epic Configuration Manual ©                            Follow us on Twitter http://www.twitter.com/jo...
Joomla! template JSN Epic Configuration Manual ©                            Follow us on Twitter http://www.twitter.com/jo...
Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashineFind us on Faceboo...
Joomla! template JSN Epic Configuration Manual ©                             Follow us on Twitter http://www.twitter.com/j...
Joomla! template JSN Epic Configuration Manual ©                            Follow us on Twitter http://www.twitter.com/jo...
Joomla! template JSN Epic Configuration Manual ©                             Follow us on Twitter http://www.twitter.com/j...
Joomla! template JSN Epic Configuration Manual ©                            Follow us on Twitter http://www.twitter.com/jo...
Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashineFind us on Faceboo...
Joomla! template JSN Epic Configuration Manual ©                            Follow us on Twitter http://www.twitter.com/jo...
Joomla! template JSN Epic Configuration Manual ©                            Follow us on Twitter http://www.twitter.com/jo...
Joomla! template JSN Epic Configuration Manual ©                            Follow us on Twitter http://www.twitter.com/jo...
Joomla! template JSN Epic Configuration Manual ©                             Follow us on Twitter http://www.twitter.com/j...
Joomla! template JSN Epic Configuration Manual ©                            Follow us on Twitter http://www.twitter.com/jo...
Joomla! template JSN Epic Configuration Manual ©                            Follow us on Twitter http://www.twitter.com/jo...
Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashineFind us on Faceboo...
Joomla! template JSN Epic Configuration Manual ©                            Follow us on Twitter http://www.twitter.com/jo...
Joomla! template JSN Epic Configuration Manual ©                           Follow us on Twitter http://www.twitter.com/joo...
Joomla! template JSN Epic Configuration Manual ©                            Follow us on Twitter http://www.twitter.com/jo...
Joomla! template JSN Epic Configuration Manual ©                           Follow us on Twitter http://www.twitter.com/joo...
Joomla! template JSN Epic Configuration Manual ©                            Follow us on Twitter http://www.twitter.com/jo...
Joomla! template JSN Epic Configuration Manual ©                           Follow us on Twitter http://www.twitter.com/joo...
Joomla! template JSN Epic Configuration Manual ©                           Follow us on Twitter http://www.twitter.com/joo...
Joomla! template JSN Epic Configuration Manual ©                           Follow us on Twitter http://www.twitter.com/joo...
Joomla! template JSN Epic Configuration Manual ©                             Follow us on Twitter http://www.twitter.com/j...
Joomla! template JSN Epic Configuration Manual ©                            Follow us on Twitter http://www.twitter.com/jo...
Joomla! template JSN Epic Configuration Manual ©                            Follow us on Twitter http://www.twitter.com/jo...
Joomla! template JSN Epic Configuration Manual ©                            Follow us on Twitter http://www.twitter.com/jo...
Joomla! template JSN Epic Configuration Manual ©                            Follow us on Twitter http://www.twitter.com/jo...
Joomla! template JSN Epic Configuration Manual ©                      Follow us on Twitter http://www.twitter.com/joomlash...
Joomla! template JSN Epic Configuration Manual ©                   Follow us on Twitter http://www.twitter.com/joomlashine...
Joomla! template JSN Epic Configuration Manual ©                           Follow us on Twitter http://www.twitter.com/joo...
Joomla! template JSN Epic Configuration Manual ©                            Follow us on Twitter http://www.twitter.com/jo...
Joomla! template JSN Epic Configuration Manual ©                       Follow us on Twitter http://www.twitter.com/joomlas...
Joomla! template JSN Epic Configuration Manual ©                            Follow us on Twitter http://www.twitter.com/jo...
Joomla! template JSN Epic Configuration Manual ©                           Follow us on Twitter http://www.twitter.com/joo...
Joomla! template JSN Epic Configuration Manual ©                       Follow us on Twitter http://www.twitter.com/joomlas...
Joomla! template JSN Epic Configuration Manual ©                            Follow us on Twitter http://www.twitter.com/jo...
Joomla! template JSN Epic Configuration Manual ©                           Follow us on Twitter http://www.twitter.com/joo...
Joomla! template JSN Epic Configuration Manual ©                            Follow us on Twitter http://www.twitter.com/jo...
Joomla! template JSN Epic Configuration Manual ©                             Follow us on Twitter http://www.twitter.com/j...
Joomla! template JSN Epic Configuration Manual ©                             Follow us on Twitter http://www.twitter.com/j...
Joomla! template JSN Epic Configuration Manual ©                             Follow us on Twitter http://www.twitter.com/j...
Joomla! template JSN Epic Configuration Manual ©                            Follow us on Twitter http://www.twitter.com/jo...
Joomla! template JSN Epic Configuration Manual ©                            Follow us on Twitter http://www.twitter.com/jo...
Joomla! template JSN Epic Configuration Manual ©                           Follow us on Twitter http://www.twitter.com/joo...
Joomla! template JSN Epic Configuration Manual ©                           Follow us on Twitter http://www.twitter.com/joo...
Joomla! template JSN Epic Configuration Manual ©                            Follow us on Twitter http://www.twitter.com/jo...
Joomla! template JSN Epic Configuration Manual ©                             Follow us on Twitter http://www.twitter.com/j...
Joomla! template JSN Epic Configuration Manual ©                            Follow us on Twitter http://www.twitter.com/jo...
Joomla! template JSN Epic Configuration Manual ©                            Follow us on Twitter http://www.twitter.com/jo...
Joomla! template JSN Epic Configuration Manual ©                            Follow us on Twitter http://www.twitter.com/jo...
Joomla! template JSN Epic Configuration Manual ©                            Follow us on Twitter http://www.twitter.com/jo...
Joomla! template JSN Epic Configuration Manual ©                             Follow us on Twitter http://www.twitter.com/j...
Joomla! template JSN Epic Configuration Manual ©                              Follow us on Twitter http://www.twitter.com/...
Joomla! template JSN Epic Configuration Manual ©                             Follow us on Twitter http://www.twitter.com/j...
Joomla! template JSN Epic Configuration Manual ©                             Follow us on Twitter http://www.twitter.com/j...
Joomla! template JSN Epic Configuration Manual ©                            Follow us on Twitter http://www.twitter.com/jo...
Joomla! template JSN Epic Configuration Manual ©                          Follow us on Twitter http://www.twitter.com/joom...
Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashineFind us on Faceboo...
Joomla! template JSN Epic Configuration Manual ©                             Follow us on Twitter http://www.twitter.com/j...
Joomla! template JSN Epic Configuration Manual ©                            Follow us on Twitter http://www.twitter.com/jo...
Joomla! template JSN Epic Configuration Manual ©                         Follow us on Twitter http://www.twitter.com/jooml...
Joomla! template JSN Epic Configuration Manual ©                             Follow us on Twitter http://www.twitter.com/j...
Joomla! template JSN Epic Configuration Manual ©                         Follow us on Twitter http://www.twitter.com/jooml...
Joomla! template JSN Epic Configuration Manual ©                            Follow us on Twitter http://www.twitter.com/jo...
Joomla! template JSN Epic Configuration Manual ©                           Follow us on Twitter http://www.twitter.com/joo...
Joomla! template JSN Epic Configuration Manual ©                          Follow us on Twitter http://www.twitter.com/joom...
Joomla! template JSN Epic Configuration Manual ©                          Follow us on Twitter http://www.twitter.com/joom...
Joomla! template JSN Epic Configuration Manual ©                             Follow us on Twitter http://www.twitter.com/j...
Joomla! template JSN Epic Configuration Manual ©                             Follow us on Twitter http://www.twitter.com/j...
Joomla! template JSN Epic Configuration Manual ©                             Follow us on Twitter http://www.twitter.com/j...
Joomla! template JSN Epic Configuration Manual ©                            Follow us on Twitter http://www.twitter.com/jo...
Joomla! template JSN Epic Configuration Manual ©                           Follow us on Twitter http://www.twitter.com/joo...
Joomla! template JSN Epic Configuration Manual ©                             Follow us on Twitter http://www.twitter.com/j...
Joomla! template JSN Epic Configuration Manual ©                             Follow us on Twitter http://www.twitter.com/j...
Joomla! template JSN Epic Configuration Manual ©                             Follow us on Twitter http://www.twitter.com/j...
Joomla! template JSN Epic Configuration Manual ©                           Follow us on Twitter http://www.twitter.com/joo...
Joomla! template JSN Epic Configuration Manual ©                           Follow us on Twitter http://www.twitter.com/joo...
Joomla! template JSN Epic Configuration Manual ©                            Follow us on Twitter http://www.twitter.com/jo...
Joomla! template JSN Epic Configuration Manual ©                            Follow us on Twitter http://www.twitter.com/jo...
Joomla! template JSN Epic Configuration Manual ©                             Follow us on Twitter http://www.twitter.com/j...
JSN Epic Configuration Manual
JSN Epic Configuration Manual
JSN Epic Configuration Manual
JSN Epic Configuration Manual
JSN Epic Configuration Manual
JSN Epic Configuration Manual
JSN Epic Configuration Manual
JSN Epic Configuration Manual
JSN Epic Configuration Manual
JSN Epic Configuration Manual
JSN Epic Configuration Manual
JSN Epic Configuration Manual
JSN Epic Configuration Manual
JSN Epic Configuration Manual
JSN Epic Configuration Manual
JSN Epic Configuration Manual
JSN Epic Configuration Manual
Upcoming SlideShare
Loading in...5
×

JSN Epic Configuration Manual

4,478

Published on

Learn how to configure JSN Epic - a Joomla template for corporation websites. Here is the demo of JSN Epic: http://demo.joomlashine.com/joomla-templates/jsn-epic.html

To stay on top of Joomla tutorials from JoomlaShine, just:
- Like our fan pages on FB: http://www.facebook.com/joomlashine
- Follow us on Twitter: http://twitter.com/joomlashine

Published in: Business, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,478
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
43
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "JSN Epic Configuration Manual"

  1. 1. Joomla! template JSN Epic Configuration Manual (for JSN Epic 4.x)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 © 2008 - 2012 http://www.joomlashine.com
  2. 2. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineTable of ContentsJoomla! template JSN Epic Configuration Manual ........................................................................................ 1 Table of Contents .................................................................................................................................................................2 Introduction ...........................................................................................................................................................................3 Hot Features Overview .......................................................................................................................................................4 Getting Started....................................................................................................................................................................15 Favicon configuration .......................................................................................................................................................25 Logo.......................................................................................................................................................................................27 Layout....................................................................................................................................................................................28 Colors Variation..................................................................................................................................................................35 Menu Styles .........................................................................................................................................................................39 Font Styles ...........................................................................................................................................................................60 Module Styles......................................................................................................................................................................67 Typography..........................................................................................................................................................................69 Site Tools..............................................................................................................................................................................90 SEO & System.....................................................................................................................................................................92 Mobile Edition ...................................................................................................................................................................104 Multilingual support.........................................................................................................................................................112 What’s next?......................................................................................................................................................................119 2
  3. 3. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineIntroductionThank you for your interest in JSN Epic template. We really appreciate your choice and truly hope our productwill bring more value to your website and business.To have the best template understanding, we recommend you read the documentation in the following order: 1. JSN Epic Quick Start Video – a short video tutorial about the fast way to learn JSN Epic template. Click here to see the video tutorial. 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 show you how to customize the template to make it suit your needs. 4. JSN Epic Konfigurations handbuch (German) - This document will give detailed information about each template feature and how to apply it to your real website on German language. Click here to download the manual.You can print all documents for convenient reading.Attention!Features marked with are available only in JSN Epic PRO Edition and are NOT available in Free Edition.Let’s roll! 3
  4. 4. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineHot Features OverviewSeparated product versions for Joomla! 1.7/2.5 and 1.5All JoomlaShine products are delivered in two separate versions compatible with Joomla! 1.7/2.5 and 1.5.In Customer Area, you can choose to download appropriate installation file for the Joomla! version you are using. 4
  5. 5. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineMobile EditionAll JoomlaShine.com templates have a built-in edition specifically designed for modern mobile devices such asiPhone, Android and Windows mobile-based. Unlike other template providers, we do not develop something thatlooks like a mobile app with heavy menu animation. We built a compact and lightweight version of the templatepreserving the whole original look-and-feel. Header and top content Main body 5
  6. 6. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashine Bottom content Mobile menu and footerBoth of the above screenshots are taken from iPhone 3GS, but the mobile edition works well in all modern largescreen devices based on Android and Windows mobile as well. 6
  7. 7. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineCSS/JS CompressionAt JoomlaShine.com, we put great effort into optimizing our templates performance with multiple techniques likeimage sprites application, clean html code output and now one new step – CSS/JS Compression.What it does is combine all CSS/JS files into a single file and deliver it in GZIP compressed state to browser. Before enabling CSS/JS compression After enabling CSS/JS compressionThis feature significantly reduces http request number to server as well as overall loading size, which results in35% performance boost. 7
  8. 8. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineFor more information, please read the section Compress CSS/JS in this document.UniIconsJSN Epic is shipped with 20 carefully selected icons which can be used for multiple purposes. We call thisconcept UniIcons. - “article” - “download” - “info” - “selection” - “calendar” - “folder” - “mail” - “settings” - “cart” - “help” - “online” - “star” - “comment” - “home” - “rss” - “statistics” - “display” - “image” - “search” - “user”Here you can see quick examples of how these beautiful icons can be utilized. UniIcons attached to menu items UniIcons attached to links 8
  9. 9. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashine UniIcons attached to module header UniIcons attached to list itemsMultiple icons, single imageJSN Epic utilizes the image sprite CSS technique to reduce the number of HTTP requests to the server.Technically, all icons are merged in one single image file and visitors will need to make just one singlerequest/download to the server to get all icons. If you have some extra time, please read more about CSS sprites. 9
  10. 10. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineNative RTL support Right To Left JSN Epic layoutAll JoomlaShine templates are equipped with native RTL support. We spent a huge amount of time tweakingevery tiny detail of the template to make it look absolutely awesome in the RTL mode. Everything is horizontally-flipped including the dropdown main menu and side menu.You don’t have to do any additional template configuration to enable the RTL mode. Just set some RTL languagein Joomla! administration and our template will automatically detect and enable the RTL mode. 10
  11. 11. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineMultilingual supportIn JoomlaShine.com templates, all the wording of both back-end and front-end are moved to separate languagefiles, so you can easily translate them into any language you want. Currently our templates support 12 primarylanguages with more to come in the future. English language German languageFor more information about supported languages, please read section Multilingual support in this document. 11
  12. 12. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineFlash GalleryThe flash gallery you see on our demo website is another cool product JSN ImageShow from JoomlaShine.com.This product is shipped with component, module and content plug-in so that you can present a gallery anywhere onevery website. With flash technology applied, you can be sure that the gallery will work consistently in allbrowsers.JSN ImageShow is NOT included in the template package, but you can download it separately for free.Learn more about JSN ImageShow.Presentation as moduleHere you can see how JSN ImageShow is presented as a slideshow module in position promo. JSN ImageShow presented as slideshow module 12
  13. 13. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashinePresentation as pluginHere you can see how JSN ImageShow is presented as full featured gallery with thumbnails inside the article. JSN ImageShow presented as gallery in main body content 13
  14. 14. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineMobile optimizedFor mobile device, we have built special lightweight Javascript version, so you can be absolutely sure about imagespresentation. Mobile optimized presentation (screenshot made by iPhone 3GS) 14
  15. 15. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineGetting StartedTemplate installationAfter downloading, you should have a template installation file called jsn_epic_XXX_jY.Y_Z.Z.Z.zip, where:  XXX is the template edition. It can be free or pro.  Y.Y is the Joomla version supported by the template. It can be 1.5 or 1.7/2.5.  Z.Z.Z is the template version.This is a standard Joomla! template installation file which can be installed in Joomla! administration as usual. Hereare quick instructions to remind you:For Joomla! 1.7/2.5: 1. In Joomla! administration, go to menu Extensions -> Extension Manager 2. Once you are on Extension Manager, click Browse button and select template installation file jsn_epic_XXX_jY.Y_4.Z.Z.zip. After that, click on button Upload & Install. 3. Installation file will be uploaded to your server and installed in Joomla! 4. Set the templates as default, go to menu Extensions -> Template ManagerFor Joomla! 1.5: 1. In Joomla! administration, go to menu Extensions -> Install/Uninstall 2. Once you are on Extension Manager, click Browse button and select template installation file jsn_epic_XXX_jY.Y_4.Z.Z.zip. After that, click on button Upload File & Install. 3. Installation file will be uploaded to your server and installed in Joomla! 4. Set the templates as default, go to menu Extensions -> Template Manager 15
  16. 16. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineTemplate Parameters Template parameters logically grouped in panelsAll JoomlaShine templates can be effortlessly configured by template parameters. In template setting page, thereare 55 template parameters arranged into logical groups for convenient operation.To access template setting page, please take the following steps: 1. Go to the template manager by menu Extensions -> Template Manager. 2. Click on template name JSN_Epic_XXX, where XXX is the template edition you have. 3. Here in the Template Edit page, you will see the list of template parameters in section Parameters. 4. Click button Save or Apply to save all changes you’ve made. 16
  17. 17. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineTemplate Information & Auto Update notificationThe first parameters section is ABOUT, where you can find important information about the latest templateversion. We really do treat our templates as a piece of software, which needs to be continuously improved. Soalways make sure you are using the latest version.Also, in this section you can find some other relevant information such as Author and Copyright. 17
  18. 18. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineSince JSN Epic version 4.3.0 the template automatically checks the latest version available to download. You haveto click on the link Update now. After that a new modal window appears on your web browser.In the step 1 you fill the login details of JoomlaShine customer account. For the step 2 you use the login details ofSuper Administrator account of your website. Then, click on the button Update template. Your template wouldautomatically up to date to the latest version.The upgrade process should takes about a minute. After that the window about successful upgrade appears in yourweb browser.Please note, if you customized the CSS files of original template, the changes would be lost. The best if you dobackup the customized CSS files before the upgrade process. 18
  19. 19. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineSample Data InstallationAll JoomlaShine templates have unique feature of installing sample data which makes your testing website look thesame as on the template demo website. Unlike other template providers who provide a heavy package with all filesand database of the demo website, we just give you one single link to install sample data right on your currentwebsite.To install sample data, please take the following steps: 1. First, go to the template settings page, open section SAMPLE DATA and click Install sample data button. 2. Next, on page JSN Epic Sample Data Installation follow on-screen instruction to start the process. 19
  20. 20. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashine3. After that, the Install Sample Data process will work automatically that through two steps : 1. Download sample data package of the demo website data such as: demo articles, demo menus, demo template settings, etc. 2. Install sample data: this step will check the template version before installing the sample data.4. Finally, you should click the Finish button to Return to template settings page for further configuration. 20
  21. 21. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineIn the Install Sample Data process, you maybe get some report as below: 1. Unable to download file: The Download sample data function requires an internet connection. If there is no internet connection, you should try manual installation: 2. If your template version is out of date please upgrade it then try to Install sample data again. 21
  22. 22. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineOriginal data restorationBefore the sample data installation process, all original data of your website is automatically backed up into abackup file located in folder /backup inside the joomla_root_folder/templates/jsn_epic_XXX/, where XXX isthe template edition on your server. Technically, this is the zip file which contains a plain text file with SQLinstructions that need to be executed on your Joomla! database.Below are the instructions on how to do that by using software phpMyAdmin 3.2.1. 1. First, login to phpMyAdmin and select your Joomla! database on the left column 2. Next, select tab Import on the horizontal menu bar 22
  23. 23. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashine 3. Next, click button Browse.., then select the backup zip file and click button Go at the right corner of the page.After script execution, you can get back to your website to check how the original data was restored. 23
  24. 24. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashineFind us on Facebook http://www.facebook.com/joomlashine 24
  25. 25. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineFavicon configurationFavicon is a small icon positioned on the left of the address bar of your browser. By default, Joomla! has an icon asshown on the screenshot below. Default Joomla! faviconOn your website, you might want to use your own icon, like the one we are using on our site joomlashine.com. JoomlaShine faviconHere are instructions on how to do that:Step 1: Create your own favicon fileTechnically, favicon is a regular 16px * 16px icon file with exact name favicon.ico. In most cases, favicon is thesized-down version of the company logo saved in the icon format. In some cases, the logo is too specific andfavicon needs to be built from scratch.You can use some professional icon editor software like Axialis IconWorkshop and Iconcool Editor or to use onlinefavicon generators. The first method gives you better quality, but takes more effort. The second method is easier,but the quality is not the best.Step 2: Upload favicon file to your serverAfter you’ve got the favicon file, it’s time to upload it to your server. You need to upload the icon file to templatefolder overwriting the default file. This is the folder joomla_root_folder/templates/jsn_epic_XXX/, where XXXis the template edition. 25
  26. 26. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineIf you have permission problems while using FTP, then we strongly recommend you use a great Joomla! extensioncalled JoomlaXplorer. And you don’t need to declare logo width/height anywhere. Template will automaticallypresent it as it is.If you don’t see your new icon, that doesnt necessarily mean you did anything wrong. Browsers are designed tominimize data traffic, so they dont refresh the favicon every time they show a page. Even refreshing the page (F5)won’t help. So you need to refresh more thoroughly:  Mozilla / Firefox / Safari: hold down Shift while clicking Reload, or press Ctrl-Shift-R (Cmd-Shift-R on Apple Mac)  Internet Explorer: hold Ctrl while clicking Refresh, or press Ctrl-F5  Konqueror: simply click the Reload button, or press F5  Opera: users may need to completely clear their cache in Tools -> Preferences  Chrome: Shift-F5If this doesnt work, you will need to delete the temporary internet files and history and then open your page again. 26
  27. 27. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineLogoThe logo JSN Epic is the default sample logo and you should replace it with your own. Technically, logo is animage file called logo.png located in folder joomla_root_folder/templates/jsn_epic_XXX/images/, where XXXthe template edition you have.You can manually choose your own logo file via template parameter Logo File. Additionally, you don’t need todeclare logo width/height anywhere. Template will automatically present it as it is.When the logo file is ready, you can set up the following parameters:  Logo Link – Set URL where the logo image should link to. You can set here: 1. Absolute link like http://www.joomlashine.com 2. Relative link starting from Joomla! root folder like index.php Leave this parameter empty if you do NOT want your logo to be clickable at all.  Logo Slogan – Set the slogan text to be inserted to the logo image attribute alt. Text in alt attribute is visible to screen readers (good for accessibility) and search engines (good for SEO).  Enable Colored Logo – Define if you want to use special colored logo for each template color. Colored logo file is located under folder images/colors/{color_name}/ inside the template folder.Set up rich-media logo via module in position “logo”JSN Epic provides a module position called logo, where you can put any Custom HTML module with rich-medialogo. Another advantage is that you can create multiple modules with different logos and display them in variouspages using the menu-module assignment feature in Joomla!.Attention!If template detects that there are some module presented in position logo, then it will disable default logo with alllogo parameters: Enable Colored Logo, Logo Link and Logo Slogan. 27
  28. 28. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineLayoutModule positionsJSN Epic provides 40 module positions allowing you to have multiple layout configurations. All module positionsare collapsible which means if you don’t use all the positions they will be left as blank for neighboring modules. 28
  29. 29. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashineFind us on Facebook http://www.facebook.com/joomlashine 29
  30. 30. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineLayout dimensionsJSN Epic allows you to change the width size of several critical layout elements. All settings can be done viatemplate parameters in the section LAYOUT SETTINGS.Template WidthTemplate width can be configured in three different ways.Configuration by template parameter (lowest priority) Template width can be set by template parameter Template Width. There are three options for you to choose:  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 (%). This is the default setting and has the lowest priority. 30
  31. 31. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineConfiguration by "Page Class" (higher priority) Template width can be set by Page Class of a menu item with syntax custom-width-xxx, where xxx is the width value you choose. There are the following possible values: narrow, wide and float. For example:  custom-width-float This setting will override the default settings by template parameter Template Width.Configuration by Site tools panel (top priority) Template color can be selected by Width Selector from Site tools. This setting is considered as the visitor’s preference and has top priority. It will overwrite both Page Class and default settings of parameter Template Width.Promo Left WidthYou can configure the width of module position promo-left in the two following ways: 1. By template parameter Promo Left Width. This is the default setting and has the lowest priority. 2. By Page Class of menu item with syntax custom-promoleftwidth-xx, where xx is the width value you want to have. For example: custom-promoleftwidth-30Parameter value can be specified only in integer, for example 25% is correct, but 25.5% is incorrect.Promo Right WidthYou can configure the width of module position promo-right in the two following ways: 1. By template parameter Promo Right Width. This is the default setting and has the lowest priority. 2. By Page Class of menu item with syntax custom-promorightwidth-xx, where xx is the width value you want to have. For example: custom-promorightwidth-30Parameter value can be specified only in integer, for example 25% is correct, but 25.5% is incorrect. 31
  32. 32. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineLeft Column WidthYou can configure the left column width in the following two ways: 1. By template parameter Left Column Width. This is the default setting and has the lowest priority. 2. By Page Class of a menu item with syntax custom-leftwidth-xx, where xx is the width value you want to have. For example: custom-leftwidth-30Parameter value can be specified only in integer, for example 25% is correct, but 25.5% is incorrect.Right Column WidthYou can configure the left column width in the following two ways: 1. By template parameter Right Column Width. This is the default setting and has the lowest priority. 2. By Page Class of a menu item with syntax custom-rightwidth-xx, where xx is the width value you want to have. For example: custom-rightwidth-30Parameter value can be specified only in integer, for example 25% is correct, but 25.5% is incorrect.Inner Left Column WidthYou can configure the inner left column width in the following two ways: 1. By template parameter Inner Left Column Width. This is the default setting and has the lowest priority. 2. By Page Class of a menu item with syntax custom-innerleftwidth-xx, where xx is the width value you want to have. For example: custom-innerleftwidth-30Parameter value can be specified only in integer, for example 25% is correct, but 25.5% is incorrect.Inner Right Column WidthYou can configure the inner right column width by 2 following ways: 1. By template parameter Inner Right Column Width. This is the default setting and has the lowest priority. 2. By Page Class of a menu item with syntax custom-innerrightwidth-xx, where xx is the width value you want to have. For example: custom-innerrightwidth-30Parameter value can be specified only in integer, for example 25% is correct, but 25.5% is incorrect.Main Body on FrontpageSome websites do not use the main body content area in the Frontpage, just modules. So JSN Epic creates thisparameter for you can control the display of main body flexibly. 32
  33. 33. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineSelect No if you want to hide the main body only in home page. And select Yes to show it in all pages normally.Equal HeightJSN Epic builds this feature to make all modules within the horizontal layout that have the equal height. This isa creative improvement for template layout however this technique does not support for the dynamic contentmodules. Before enabling equal height feature in content- bottom position After enabling equal height feature in content-bottom position 33
  34. 34. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineStick PositionsThe template layout includes 6 stick positions: stick-lefttop, stick-leftmiddle, stick-leftbottom, stick-righttop,stick-rightmiddle, and stick-rightbottom. You can assign any modules or create custom HTML module intomentioned positions for better website presentation. The module “sticks” into your layout, so when you scrollmouse up and down, the assigned module is moved in appropriate direction.Let’s see how we can create a custom HTML module then place it in the stick-lefttop position. 1. In Joomla Administration you go to Extensions -> Module Manager 2. Click on a button New then choose Custom HTML 3. Fill the settings: 3. Title: My stick module 4. Show Title: No 5. Published: Published 6. Position: stick-lefttop 7. Customer Output: Type HTML code into this fieldAbove, we created a new module then assigned to the position stick-lefttop. You can assign a module to the rest 5stick positions: stick-leftmiddle, stick-leftbottom, stick-righttop, stick-rightmiddle, stick-rightbottom. 34
  35. 35. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineColors VariationTemplate ColorJSN Epic provides six major color variations for you to choose from. Each color variation covers not only themain background, but also fills drop-down menu, links, table’s header and some others.All available colors are described below. Blue Red 35
  36. 36. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashineFind us on Facebook http://www.facebook.com/joomlashine Green Violet 36
  37. 37. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashine Orange GreyTemplate color can be configured in three different ways. 37
  38. 38. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineConfiguration by template parameter (lowest priority) Template color can be set by template parameter Template Color. This is the default setting and has the lowest priority.Configuration by "Page Class" (higher priority) Template color can be set by Page Class of a menu item with syntax custom- color-xxx, where xxx is the color you want to have. There are the following possible values: blue, red, green, violet, orange and grey. For example:  custom-color-red This setting will override the default settings by template parameter Template Color.Configuration by Site tools panel (top priority) Template color can be selected by Color Selector from Site tools. This setting is considered as the visitor’s preference and has top priority. It will overwrite both Page Class and default settings of parameter Template Color. 38
  39. 39. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineMenu StylesJSN Epic provides five menu styles to present your website navigation. The default Joomla! built-in menu module(mod_mainmenu) is utilized, so you don’t need to install any external menu modules.Top MenuTop Menu allows you to arrange menu items in horizontal lines and assign icons to them. All icons are configureddirectly in the menu item settings page which is very convenient.To set up Top Menu please select the menu module you want to use and set up parameters as follows:For Joomla! 1.7/2.5:  Title: Top Menu (or any other you like)  Show title: Hide  Position: top  Access: public  Language: All  Select Menu: Top Menu (you might want to use another sources here)  Start Level: 1  End Level: 2  Show sub-menu items: No  Menu Class Suffix: menu-topmenu menu-iconmenu 39
  40. 40. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineFor Joomla! 1.5:  Title: Top Menu (or any other you like)  Show title: No  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 Class Suffix: menu-topmenu menu-iconmenuAttention!There is a common misconception about Menu Class Suffix and Module Class Suffix. They are absolutelydifferent parameters, so please pay attention to their settings. 40
  41. 41. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineTop Menu iconsYou can attach any of the UniIcons to top menu items to make them more appealing. UniIcons is the set of 20predefined icons that can be used for multiple purposes. For more information about the available icons and theirnames, please read section UniIcons of this document.To set up icons, you need to go to menu item settings and take the following steps:For Joomla! 1.7/2.5Add symbol combination icon-xxx to menu item’s parameter Link CSS Style, where xxx is the icon name. 41
  42. 42. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineFor Joomla! 1.5Add symbol combination (icon-xxx) to menu item’s title where xxx is the icon name. 42
  43. 43. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineMain MenuMain Menu is a powerful menu built with clean accessible XHTML code structure and effective drop-downsubmenu panels.To set up Main Menu please select the menu module you want to use and set up parameters as follows:For Joomla! 1.7/2.5:  Title: Main Menu (or any other you like)  Show title: Hide  Position: mainmenu  Access: public  Language: All  Select Menu: Main Menu (you might want to use another menu source here)  Start Level: 1  End Level: All  Show Sub-menu Items: Yes  Menu Class Suffix: menu-mainmenu menu-iconmenu menu-richmenu 43
  44. 44. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineFor Joomla! 1.5:  Title: Main Menu (or any other you like)  Show title: No  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  Menu Class Suffix: menu-mainmenu menu-iconmenu menu-richmenuAttention!There is a common misconception about Menu Class Suffix and Module Class Suffix. They are absolutelydifferent parameters, so please pay attention to their settings. 44
  45. 45. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineSpecial visual effectsMain Menu EffectJSN Epic provides smooth drop down animation for submenu panels. It utilizes built-in Joomla! MooToolsJavascript library so there is no need to integrate any other Javascript framework. To enable the effect, go to thetemplate configuration page and set template parameter Main Menu Effect to Yes.Main Menu TransparencyAnother visual effect is transparency for submenu panels (about 90%). To enable submenu transparency, you needto set template parameter Main Menu Transparency to Yes. 45
  46. 46. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineMain Menu IconsYou can attach any of the UniIcons to menu items to make them more appealing.To set up icons, you need to go to menu item settings and take the following steps:For Joomla! 1.7/2.5Add symbol combination icon-xxx to menu item’s parameter Link CSS Style, where xxx is the icon name. 46
  47. 47. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineFor Joomla! 1.5Add symbol combination (icon-xxx) to menu item’s title where xxx is the icon name.UniIcons is the set of 20 predefined icons that can be used for multiple purposes. For more information aboutavailable icons and their names, please read section UniIcons of this document. 47
  48. 48. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineMain Menu Rich TextYou can add descriptive text to menu items to make them much clearer.To set up descriptive text, you need to go to menu item settings and take the following steps:For Joomla! 1.7/2.5Add descriptive text to menu item’s parameter Link Title Attribute. 48
  49. 49. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineFor Joomla! 1.5Add the symbol combination (=) as a separator between main and descriptive text in menu item’s title.In the example above text Home is the main text and Lorem ipsum dolor sit... is the descriptive text. Theseparator between them is the symbol combination (=). 49
  50. 50. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineMain Menu Icons and Rich Text in combinationYou can set up menu items to utilize both icons and rich text in combination.For Joomla! 1.7/2.5 50
  51. 51. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineFor Joomla! 1.5 51
  52. 52. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineSide MenuSide Menu is a unique vertical menu with slide-out panels. This menu is extremely efficient when you havecomplex navigation with a lot of menu items.To set up Side Menu please select the menu module you want to use and set up parameters as following:For Joomla! 1.7/2.5:  Title: Side Menu (or any other you like)  Show Title: Show  Position: left  Access: Public  Language: All  Select Menu: Main Menu (you might want to use another menu source here)  Start Level: 1  End Level: All  Show sub-menu items: Yes  Menu Class Suffix: menu-sidemenu menu-iconmenu menu-richmenu 52
  53. 53. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineFor Joomla! 1.5:  Title: Side Menu (or any other you like)  Position: left  Menus: All (or at least Home)  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  Menu Class Suffix: menu-sidemenu menu-iconmenu menu-richmenuAttention!There is a common misconception about Menu Class Suffix and Module Class Suffix. They are absolutelydifferent parameters, so please pay attention to their settings.Special visual effectsSide Menu EffectSimilar to Main Menu, JSN Epic provides smooth slide out animation for submenu panels of Side Menu. Thisfeature also utilizes built-in Joomla! MooTools Javascript so there is no need to integrate any other Javascriptframework. To enable the effect, go to the template configuration page and set template parameter Side MenuEffect to Yes.Side Menu TransparencySubmenu panels of Side Menu can be semi-transparent as well. To enable sub-menu transparency, you need to settemplate parameter Side Menu Transparency to Yes. 53
  54. 54. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineSide Menu Icons and Rich TextYou can set up menu items to utilize both icons and rich text just as you can with Main Menu. 54
  55. 55. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineTree MenuTree Menu represents menu items in a clear tree-like hierarchy which is very appropriate for indexing menu. Bydefault all sub-menu items are collapsed until you select the parent menu item.To set up Tree Menu please select the menu module you want to use and set up parameters as following:For Joomla! 1.7/2.5:  Title: Tree Menu (or any other you like)  Show Title: Show  Position: right  Access: Public  Language: All  Select Menu: Main Menu (you might want to use another menu source here)  Start Level: 1  End Level: All  Show sub-menu items: No  Menu Class Suffix: menu-treemenu menu-iconmenu menu-richmenu 55
  56. 56. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineFor Joomla! 1.5:  Title: Tree Menu (or any other you like)  Position: left  Menu Assignment: All (or at least Home)  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: No  Menu Class Suffix: menu-treemenu menu-iconmenu menu-richmenu 56
  57. 57. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineTree Menu Icons and Rich TextYou can set up menu items to utilize both icons and rich text just as you can with Main Menu. 57
  58. 58. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineDiv MenuDiv Menu is a simple yet nice menu bar with items separated by barely visible dashes. This menu is very suitablefor footer navigation presentation.To set up Div Menu please select the menu module you want to use and set up parameters as following:For Joomla! 1.7/2.5:  Title: Div Menu (or any other you like)  Show title: Hide  Position: footer  Access: Public  Language: All  Menu Name: othermenu (you might want to use another menu source here)  Start Level: 1  End Level: 1  Show sub-menu items: No  Menu Class Suffix: menu-divmenu 58
  59. 59. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineFor Joomla! 1.5:  Title: Div Menu (or any other you like)  Show title: No  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 Class Suffix: menu-divmenuAttention!There is a common misconception about Menu Class Suffix and Module Class Suffix. They are absolutelydifferent parameters, so please pay attention to their settings. 59
  60. 60. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineFont StylesFont FaceJSN Epic provides three font face options for major website types. Each font face option is actually a combinationof two font types: one for content text, another for heading text and main navigation text. Additionally, for eachfont face, JSN Epic provides special font powered by Google Font Directory. 60
  61. 61. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineBusiness / Corporation Website (default) Normal font face Special font faceThis compact neat text style is an excellent choice for business oriented websites as well as corporate websites. Thecombination of Verdana and Arial font type looks very natural and common for most of users since they are mostpopular font types used on the Internet.Below is the description of each font face: Normal font for PC Normal font for Mac Special fontHeading/menu text Verdana Geneva NobileContent text Arial Helvetica N/A 61
  62. 62. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashinePersonal / Blog Website Normal font face Special font faceThis text style is a little bigger than normal, which makes it a perfect choice for small websites like personal orblog websites. The combination of Georgia and Trebuchet MS makes content very easy to read and the looksimpressive.Below is the description of each font face: Normal font for PC Normal font for Mac Special fontHeading/menu text Georgia serif LobsterContent text Trebuchet MS Helvetica N/A 62
  63. 63. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineOnline News / Magazines Normal font face Special font faceThis text style utilizes another very popular font called Times New Roman. This font is widely used in the printingindustry and in some of the extremely popular online news websites like The New York Times. If you want to runan online news / magazine website, it’s worth trying this font combination.Below is the description of each font face: Normal font for PC Normal font for Mac Special fontHeading/menu text Palatino Linotype Palatino Droid SerifContent text Times New Romam Times N/A 63
  64. 64. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineText style configurationYou can configure template text style in the two following ways:Configuration by template parameter (lowest priority) Template text style can be set by template parameter Template Text Style. This is the default setting and has the lowest priority.Configuration by "Page Class" (higher priority) Template text style can be set by Page Class of a menu item with syntax custom-textstyle-xxx, where xxx is the style you want to have. There are the following possible values: business, personal and news. For example:  custom-textstyle-personal This setting will override the default settings by template parameter Template Text Style. 64
  65. 65. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineFont SizeJSN Epic provides 3 text size options for major website audience types. Small font size Medium font size 65
  66. 66. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashine Large font sizeYou can configure template text size by 3 following ways:Configuration by template parameter (lowest priority) Template text size can be set by template parameter Template Text Size. This is the default setting and has the lowest priority.Configuration by "Page Class" (higher priority) Template text size can be set by Page Class of a menu item with syntax custom-textsize-xxx, where xxx is the size you want to have. There are following possible values: small, medium and big. For example:  custom-textsize- big This setting will override the default settings by template parameter Template Text Size.Configuration by Site tools panel (top priority) Template text size can be selected by Text Size Selector from Site tools. This setting is considered as visitor’s preference and has top priority. It will overwrite both Page Class and default settings of parameter Template Text Size. 66
  67. 67. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineModule StylesJSN Epic provides four box designs for module background styling which can be combined with UniIcons formodule title styling.Module styles are configured by module’s parameter Module Class Suffix. All available values are describedbelow and need to be applied without double quotes.Module Box DesignsBox designs to be applied to modules. “box-yellow” “box-grey”Box designs available in PRO edition only “box-blue” “box-green” 67
  68. 68. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineModule Icon DesignsYou can attach any of the UniIcons to the module’s title. To set up icons, you need to add the string icon-xxx tothe module class suffix, where xxx is the icon name. “icon-star” “icon-online”All icon designs can be used in combination with a module box design like examples below: “box-green icon-user” “box-yellow icon-comment”For more information about available icons and their names, please read section UniIcons of this document. 68
  69. 69. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineTypographyJSN Epic was created with a strong focus on typography and we believe it contains the most comprehensivecontent presentation capability. Headings, text, links, tables, images, everything was designed with high level ofrefinement. Let’s take a look. 69
  70. 70. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineContent columnsIt’s a pretty common situation when you need to arrange your content in multiple columns. JSN Epic offers youvery a convenient and accessible method to create multiple column content. This is a real step forward removingtable tags from your content and leaving them only for showing tabular data.You can arrange your content in as many columns as you like. JSN Epic will detect the number of columns youhave and automatically arrange them. The only thing you need to do is to set class grid-layout to parent DIV tag.Below are screenshots of how this feature looks and example how to use it.Content arranged in 2 columnsUsage:<div class=”grid-layout”> <div>Text in column 1</div> <div> Text in column 2</div></div>Content arranged in 3 columnsUsage:<div class=”grid-layout”> <div>Text in column 1</div> <div>Text in column 2</div> <div> Text in column 3</div></div> 70
  71. 71. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineHeading stylesAs we all know, headings are “title” of undergoing text blocks, so it must have a distinguish look. JSN Epicprovides styling for five main headings. To apply them you just need to wrap your heading text in regular headingtags like <h1>…</h1>, <h2>…</h2>, <h3>…</h3>, etc. 71
  72. 72. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineText stylesJSN Epic provides 12 text styles for making your content easier to scan and read. Below are screenshots of textstyles and usage examples.Preformatted textYou can use this style to present text with preserved spaces like text block of CSS code or other programminglanguage.Usage:<pre>Your preformatted text</pre>Quote textYou can use this style to quote somebody’s speech, idea or a fragment from books, articles, etc.Usage:<blockquote>Your quote text</blockquote> 72
  73. 73. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineDrop cap symbolYou can use this special drop cap symbol style for magazine / newspaper text paragraph.Usage:<p class=”text-dropcap”>Your magazine text paragraph.</p>Highlighted textYou 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> 73
  74. 74. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineAlert textYou can use this style for alert or warning text paragraphs which require 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 textYou can use this style for regular information text paragraphs that do not require much user’s attention.Usage:<p class="text-info">Your information text.</p>.<div class="text-info">Your information text.</div>. 74
  75. 75. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineDownload textYou can use this style for information text paragraph related to the download process.Usage:<p class="text-download">Your download text.</p>.<div class="text-download">Your download text.</div>.Tip textYou can use this style for useful information like tips, hints 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> 75
  76. 76. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineComment textYou can use this style for comment text paragraphs.Usage:<p class="text-comment">Your comment text.</p><div class="text-comment">Your comment text.</div>Attachment textYou can use this style for information text paragraphs related to attachment file.Usage:<p class="text-attachment">Your attachment text.</p>. 76
  77. 77. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineVideo textYou can use this style for description text paragraphs that related to video file.Usage:<p class="text-video">Your video text.</p><div class="text-video">Your video text.</div>.Audio textYou 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>. 77
  78. 78. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineLink stylesIcon link stylesYou can attach any of UniIcons 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>Button link stylesJSN 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: 78
  79. 79. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashine<a class="link-button button-orange">See plans & pricing.</a>Button and Icon link styles combinedYou 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 stylesJSN Epic is able to attach not only descriptive icon to the front of link as described in the above section, but also 24extension icons to the end of the link.There are 2 ways of utilization extension icons. 79
  80. 80. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashineFind us on Facebook http://www.facebook.com/joomlashine 80
  81. 81. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineAutomatic assignmentJSN Epic is able to detect links to various popular file extensions and assign icons accordingly. This feature utilizesthe modern CSS2 specification allowing you to have links with meaningful icons assigned without anymodification in XHTML code. Moreover, it can detect the protocol type to assign icons to links to instantmessengers, email, etc.Manual assignmentAs stated before, most browsers icons will be automatically assigned thanks to the modern CSS2 specification.Unfortunately IE6 does not support this specification and you have manually set an appropriate class for links.Also, this can help if, for some reason, you turned off the auto icon link template parameter but still want tomanually apply icons to links.Usage: <a class="link-icon-ext icon-ext-xxx">This is link text.</a>, where xxx is the icon name describedbelow. - “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 utilizes the CSS sprite technique to reduce the number of HTTP requests to server in order to get icons.Technically, all icons are merged in one single image file and visitors will need to make one singlerequest/download to get that file with all icons. If you have extra time, please read more about CSS sprites. 81
  82. 82. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineTable stylesTabular data is a very common type of information to be presented on the web. By default, tables look ugly and notmuch readable. With JSN Epic you have 3 table styles to present virtually any kind of tabular data you have.Color Header table styleUsage:<table class="table-style style-colorheader">...</table>Color Stripes table styleUsage:<table class="table-style style-colorstripes">...</table> 82
  83. 83. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineGrey Stripes table styleUsage:<table class="table-style style-greystripes">...</table>Attention!In order to get table styles shown correctly, you need to create solid XHTML code as show bellow.<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> <tfoot> <tr> <th>Table footer</th> <td colspan="3">Footer data</td> </tr> </tfoot> <tbody> <tr class="odd"> <th>Row header 1</th> <td>Lorem ipsum</td> <td class=”highlight”>Dolor sit amet</td> <td>Lorem ipsum</td> </tr> </tbody></table> 83
  84. 84. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineList stylesList is the crucial element in every content, not only online websites. List can really help readers to scan thecontent and catch important pieces by just a glance.Standard list stylesUnordered list Ordered listUsage: <ul><li>…</li></ul> Usage: <ol><li>…</li></ol>Nobullet list Horizontal listUsage: <ul class="list-nobullet"><li>…</li></ul> Usage: < ul class="list-horizontal"><li>…</li></ul> 84
  85. 85. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineArrow list stylesRed arrow Blue arrowUsage: Usage:<ul class="list-arrow arrow-red"><li>…</li></ul> <ul class="list-arrow arrow-blue"><li>…</li></ul>Green arrowUsage:<ul class="list-arrow arrow-green"><li>…</li></ul> 85
  86. 86. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineIcon list stylesYou can attach any of UniIcons to items in the list. To set up icons, you need to add string icon-xxx to <ul> class,where xxx is the icon name.Article icon list Folder icon listUsage: Usage:<ul class="list-icon icon-article"><li>…</li></ul> <ul class="list-icon icon-folder"><li>…</li></ul>For more information about available icons and their names, please read section UniIcons of this document. 86
  87. 87. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineNumber list styleBlue Bullet number list Green Bullet number listUsage: Usage:<ul class="list-number-bullet bullet-blue"><li>… <ul class="list-number-bullet bullet-green"><li>…Grey Bullet number list Orange Bullet number listUsage: Usage:<ul class="list-number-bullet bullet-grey"><li>… <ul class="list-number-bullet bullet-orange"><li>… 87
  88. 88. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineRed Bullet number list Violet Bullet number listUsage: Usage:<ul class="list-number-bullet bullet-red"><li>… <ul class="list-number-bullet bullet-violet"><li>…Blue Digit number list Green Digit number listUsage: Usage:<ul class="list-number-digit digit-blue"><li>… <ul class="list-number-digit digit-green"><li>… 88
  89. 89. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineGrey Digit number list Orange Digit number listUsage: Usage:<ul class="list-number-digit digit-grey"><li>… <ul class="list-number-digit digit-orange"><li>…Red Digit number list Violet Digit number listUsage: Usage:<ul class="list-number-digit digit-red"><li>… <ul class="list-number-digit digit-violet"><li>… 89
  90. 90. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineSite ToolsJSN Epic provides three brand new features to enhance website user experience: Width Selector, Text SizeSelector and Color Selector. By enabling these selectors, you will certainly be giving visitors the best userexperience on your website. All settings from Site tools will be stored as visitor’s browser cookies for furtherusage. If all selectors are disabled, nothing from Site Tools will be shown.Site tools PresentationYou have two options to present Site tools.Dropdown MenuWith this option, all selectors are elegantly arranged in the submenu panel. The drop-down animation, transparencyand background color settings will be inherited from the Main Menu settings.Inline RowWith this option, all selectors are located directly on the main menu bar. If you want to enable only some selectors,this option is the best. 90
  91. 91. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineWidth Selector Width Selector allows your website visitors to select the optimal template width for them. More information about template width can be found in section Layout Dimensions in this document. You can disable this selector by setting template parameter Enable Width Selector to No.Text Size Selector Text Size Selector allows your website visitors to select the optimal text size for them. For example, poor vision people can select a big text size. More information about template width can be found in section Font Size in this document. You can disable this selector by setting template parameter Enable Text Size Selector to No.Color Selector Color Selector allows your website visitors to choose the color theme they like. This is a very cool feature for social websites where visitors’ preferences are the most important. You can set up what color to include in the selector by defining them in template parameter Colors in Selector. For example: blue,red,green.If your website has a strong identity color and you don’t want visitors to select any other color, just turn thisselector off by setting template parameter Enable Color Selector to No. 91
  92. 92. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineSEO & SystemSource orderingOne of the most important SEO techniques is to make sure that search engines can find your critical content beforeothers. 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 bothonline or offline to make sure of that. 92
  93. 93. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineWebsite TitleThis feature allows you to use the value defined in parameter Site Name from Joomla! Global Configuration andshow it in tag <title> on every page. 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 a great feature toimprove your website SEO, since you can define your website title with some important keywords and show it onevery page. Please note that the parameter is available only in Joomla 1.5.x. Since Joomla 1.7.x the parameter bydefault is included in the Global Configuration of Joomla CMS. 93
  94. 94. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineTop H1 tagThis feature allows you to wrap the website slogan to <h1> tag, which is good for both SEO and accessibility. Aswe all know, <h1> is the most important content tag and search engines normally pay special attention to thecontent in that tag. Once you’ve configured your keyword-powered website title and slogan, you can include themin the first h1 tag to increase SEO ranking. 94
  95. 95. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashine“Go to top” LinkThis feature allows you to put Go to top link at the bottom of page. It will smoothly scroll your page to the top,which is nice and good for website usability. 95
  96. 96. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashinePrinting OptimizationThis feature will give your website visitors a totally optimized page for a printer with only the important contentincluded. This is very useful when you want your website visitors to be able to print only the main content of thepage and nothing else like the side-column content, etc. Before printing optimization After printing optimization 96
  97. 97. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineAs you can see on screenshots, not only the content is simplified, but also the styling is optimized to get pure blackon white ready for printing page.At anytime, you can turn this feature off so the whole page will be output to a printer. 97
  98. 98. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineAnalytics CodeThis feature allows you to present any analytical code on your website HTML code by template parameter withouthaving to edit index.php file.Analytics Code PositionYou can define where to insert the code by template parameter Analytics Code Position. There are two options tochoose from:  Before ending …</head> tag  Before ending …</body> tag 98
  99. 99. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineCustom 404 Error PageThe default error page comes from Joomla! is super ugly and sure to scare people away from your site at firstglance, so begin from JSN Epic 4.2.x we provide a clean and good looking Custom 404 Error page for your need. 99
  100. 100. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineCustom Offline PageThe default Joomla! offline page hasn’t changed much since the old days and doesn’t really look good. Therefore,we provide a Custom Offline page with professional and easy to customize your own way. 100
  101. 101. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineCustom CSS File(s)This feature allows you to load multiple custom CSS files among with template default files. If you enable CSS/JSCompression feature, all custom CSS files will be compressed as well. This feature is very useful, when you havespecial dedicated CSS file for content styling. Custom CSS files are loaded with other template CSS filesJust put custom CSS files to template’s CSS folder and define them in template parameter Custom CSS File(s)each file name at a line. 101
  102. 102. Joomla! template JSN Epic Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineCSS/JS CompressionThis feature combines all CSS/JS files into a single file and delivers it in a compressed state to the browser. Before enabling CSS/JS compression After enabling CSS/JS compressionBy enabling CSS/JS compression feature, you can increase your website performance by about 35%.Cache FolderCompressed files will be stored in cache folder defined by template parameter Cache Folder. You can define anyfolder starting from Joomla root folder. 102

×