Green Skills

Header image slideshow

The header image slideshow you see on JSN Epic demo website is another cool Joomla! extension from JoomlaShine.com called JSN ImageShow. This extension is NOT included in the template download package and you have to download it separately. Please visit JSN ImageShow homepage for more details.

After installation of JSN ImageShow you need to prepare your images and configure JSN ImageShow appropriately.

Stage 1: Prepare images to be included in slideshow

In this stage you are going to get your images ready for the slideshow. JSN ImageShow is able to automatically resize your images to match the slideshow size, but for the best result we’d recommend you to pay attention to preparing your images. The main thing here is to crop your images so they have size similar to slideshow area size. That means the width/height ratio of sizes should be the same or similar. For example, if you have slideshow area with size 450px * 300px (the ratio is 1.5) then your images would better be: 375px * 235px (the ratio is 1.6) or 525px * 375px (the ratio is 1.4).

Another thing worth mention here is JSN ImageShow works best with JPEG format, so if you are going to show photos, please use JPEG format.

Stage 2: Upload images to your server

Now, when your images are ready, it’s time to upload them to your server. You can use Media Manager in Joomla! administration or you can use your favorite FTP client. For example, you can create folder myphotos under folder http://demo.joomlashine.com/joomla-templates/jsn_epic/images/stories and upload all your images there.

Stage 3: Setup parameters for JSN ImageShow module

Now when you have your images prepared and uploaded to some folder on your server, it’s time to setup JSN ImageShow module. Please make following steps:

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

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

Promo user modules

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

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

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

Logo

The logo JSN Epic is default sample logo and you are free to replace with your own. The logo image file is called logo.png and located in folder joomla_root_folder/templates/jsn_epic_pro/http://demo.joomlashine.com/joomla-templates/jsn_epic/images/. There are 3 stages involved in changing the default logo to your own:

Stage 1: Prepare your own logo image file

First, you need to prepare your own logo image file in some graphic editor like Adobe Photoshop or Fireworks. We recommend you to save your logo in format PNG-8, but you can use any other as well. Don’t forget to give some white margin space around the logo. Also you need remember logo’s width/height dimension to set them up in template parameters later.

The included JSN Epic logo source file logo.psd can be perfect starting point.

Stage 2: Upload logo image file to your server

Once your logo file is ready, it’s time to upload it to your server. You can upload it to any folder under your Joomla! root folder by using standard Joomla! Media Manager or by FTP client.

Stage 3: Setup template parameter to use new logo

If you uploaded your logo to template’s images folder overwriting the original file, then you don’t need to do anything thing additionally. Otherwise you need to setup JSN Epic PRO to apply your new logo.

1. Go to template manager by menu Extensions -> Template Manager.
2. Click on template name JSN_Epic_PRO.
3. Here in the Template Edit page you will see the list of template parameters in section Parameters. You need to configure following parameters:
   • Logo Path ? path to your logo image file starting from your Joomla! root folder. For example if you named your logo image file as mylogo.png and placed it in folder /http://demo.joomlashine.com/joomla-templates/jsn_epic/images/stories, then the logo path should be /http://demo.joomlashine.com/joomla-templates/jsn_epic/images/stories/mylogo.png;
   • Logo Width ? the width of your logo image file;
   • Logo Height – the height of your logo image file;
4. Additionally you can setup following logo parameters:
   • Logo Link ? URL where logo image should link to (! without preceding slash !).
   • Logo Slogan – Slogan text to be attached to the logo image ALT text for SEO purpose.
5. Click button Save.

Top Icon Menu

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

1. In module manager click on the menu module you want to use as top menu module. By default, Joomla! 1.5 comes with various menu modules and there is Top Menu module among them. That might be the perfect choice.
2. In module’s configuration page setup following parameters:
   • Title: Top Menu (or any other you like)
   • Show title: No
   • Enabled: Yes
   • Position: top
   • Menu Assignment: 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: empty or any other you like
   • Menu Class Suffix: -icon
3. Now you need to pick what icons to show in the menu. As stated before there are 20 predefined icons for you to choose. You need to setup template parameter Menu Icons by specifying icons’ name separated with a comma. In our example template parameter Menu Icons should be ?home,cart,download?.

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

Main Suckerfish Menu

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

1. In module manager click on the menu module you want to use as main menu module. By default, Joomla! 1.5 comes with various menu modules and there is Main Menu module among them. That might be the perfect choice.
2. In module’s configuration page setup following parameters:
   • Title: Main Menu (or any other you like)
   • Show title: No
   • Enabled: Yes
   • Position: toolbar
   • Menu Assignment: 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 Tag ID: empty or any other you like
   • Menu Class Suffix: -suckerfish

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

Font Size Changer

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

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

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

Stage 1: Create your own favicon file

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

Stage 2: Upload favicon file to your server

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