Optimizing Images For The Slideshow

If you plan to include a number of images in the template slideshow which will be displayed on the home page or other pages at  your site we recommend you optimize / compress the images first to make the images smaller.

Reducing the size of the JPEG images will make your website load faster and give your visitors a better user experience.

Free Image Optimization Sites & Software

The following websites are great for compressing JPEG files and can reduce the size of the image by up to 30% without loosing any image quality.

We recommend visiting all the sites noted below and experimenting with each one to see which one gives you the best result.

JPEG Mini

The JPEG Mini is a free and easy to use site. All you need to do is upload the JPEG image via the website and it will automatically compress the image which you can then download to your computer.

The great thing about JPEG Mini is that you don’t loose the image quality after the image is compressed.

Yahoo Smush It

The image optimizer tool at Yahoo is free and easy to use and produces some good results.

Again all you have to do is select the up loader tab and choose the JPEG image you want to compress.

Once the image is compressed then you can download it to your PC.

Another very useful feature included in Smush It is that you can enter your website address and the tool will scan all the images included in your site and give you the option to compress them.

RIOT

One piece of free software we would recommend you download is called RIOT which stands for Radical Image Optimization Tool. RIOT is free and very easy to use and produces some great results.

From the tests we have competed we have compressed JPEG images by up to 30% without loosing any image quality.

RIOT is compatible with Windows 2000, XP, Vista, Windows 7

Template zip Package Contents

All the template zip packages we have released at the website are structured in the following way to make it easy for you to quickly access all the information you need.

Zip File Contents

1. Joomla – The Joomla directory includes the template zip file for the latest version of Joomla
2. Photoshop Files – This directory include the Adobe Photoshop PSD used to create the design
3. Template Images – This directory includes all the images we have used for the design
4. Template Install Guide – The directory includes a step by step installation guide which will guide you through installing and setting up the template at your website.
5. Template Quick Start – The directory includes the quick start files and installation guide to help you setup the quick start package.
6. Photoshop Files – Directory includes the Adobe Photoshop source files

How Do I Add The Google Analytics Code To The Template

Google Analytics is a powerful reporting tool which you can use to understand where your web site traffic is coming from plus it will give you a better understanding about your web site visitors behavior and help you to make improvements at your Joomla site.

Why should you use Google Analytics

1. It’s free to use
2. Provides you with detailed reports about where your traffic is coming from including demographics, technology used, visitors flow plus much more all of which can be easily accessed via the online reporting tool
3. You can get a better understanding of your website visitor behavior patterns. For example which page they most visited, which page did they exit at, how long they spent on a page and lots more
4. You can make improvements to your website based on the reports generated by the reporting tool
5. Its easy to add the Analytics code to the Joomla template

Step 1 Create a new Google Analytics account

• Visit the Google Analytics site and create a new account
• Once you have created the new account log into the website
• Select the Admin button located in the top right menu
• Click the new account button to create the new account for your website
• Complete all the fields for the account
• Select the create new account button located at the bottom of the form

Step 2 How do I get the Analytics code

• From any Analytics page select the Admin button
• From the account administrator area select the property (account profile name you setup for the website you want to track)
• You will now see a number of tabs, select the tracking info tab as show in the screen shot below

• Open up the Notepad application on your computer
• Copy the code from the analytics page and paste the code into Notepad
• The reason why we advise you to use notepad is because it is a raw editor and will not generate any unwanted, rogue code when you are copying and pasting code.

Step 3: How do add the Analytics code in the Joomla template

All the templates we have released at the website for Joomla 3.3 plus some of the latest templates we have created for Joomla 2.5 allow you to easily add the analytics code via the built-in control panel.

For more information read the how do I update the header and footer code article in the knowledge base

If you are using one of the templates which use version 1 of the control panel please follow the instructions noted below.

• Open the FTP software you have installed on your computer
• Connect to your Joomla site via FTP
• Browse to the /templates/template-name/ directory
• Change the template-name to the name of the template you have downloaded at this website
• Download the index.php file to your computer
• Before making any changes to the index.php file make a backup of the file first on your computer
• Open the index.php file using Notepad and search for closing head tag </head> included in the template index.php file
• Copy and paste the Analytics code just before the closing head tag </head> as shown in the screen shot below

• Save the changes to the index.php file
• Upload the updated index.php file using the FTP software to the /templates/template-name/ directory

You have now successfully included the Google Analytics code in the template.

If you need any help with the above please log into the website and open a support ticket.

How Do I Change The Login And Register Buttons Text

To change the log in and register buttons text which appears at the top of the template complete the following steps outlined in this document

How do I change the log in button text

1. Log into the Joomla administrator area of your website
2. Select the Extensions menu and Module manager menu
3. Open the log in module you have published to the loginform module position
4. Change the title for module to the text you want to appear in the login button
5. Show the title for the module
6. Save the settings
7. The button will now display the text you have entered into the module title field

1. How do I change the Register button text
2. Open the FTP software you have installed on your computer
3. Download the template index.php file to your computer
4. Make a backup of the index.php file first before making any changes to it
5. Open the index.php file using notepad.exe installed on your computer
6. Look for this code <?php echo JText::_('Register');?>
7. Replace the Register text between the ‘ ‘ with the text you want to appear in the button.
8. For example it could look like this <?php echo JText::_('Register A New Account'); ?>
9. Save the changes to the index.php file
10. Upload the updated template index.php to your website

If you have any questions about the above please feel free to open a support ticket at the website

How Do I Update The Copyright Footer Text

To update the footer copyright text which appears at the bottom of the template complete the following steps.

The first step is to log into the Joomla administrator area of your website and create a custom HTML module.

To create a custom HTML module select the Extensions menu and Module Manager menu.

Now select the green new button to create the module.

You will now see a number of options to choose from. Select the “Custom HTML This Module allows you to create your own HTML Module using a WYSIWYG editor” as show in the screen shot below.

After you have selected the Custom HTML option you can now setup the module to include the footer copyright text as show in the screen shot below.

Module settings

1. Enter title for module
2. Hide the module title
3. Publish the module to the footer-right module position
4. In the WYSIWYG editor enter the text which will appear in the footer of the template

Now you need to select the Menu Assignment tab to assign the custom HTML module to all menu items as show in the screen shot below so the module position will be displayed on all pages of your website

Once you have setup the Custom HTML module and assigned the module to all menu items select the save button to save the settings.

The footer copyright text will now appear in the bottom right of the template and be displayed on all the pages at your site.

Video Tutorial

Joomla Template Add Custom css Code

This tutorial will guide you through including custom CSS code in the Joomla template you have downloaded at the website.

Why would you add custom CSS code to the template

1. You have downloaded a 3rd party module or extension and installed it at your website. The 3rd party module or extension may need some custom styles written for it so it fits in with the overall style of the template and renders correctly across the various browsers.
2. It is easier to manage and update one CSS file with any custom changes you have made or may need to make in the future.
3. When you come to upgrade the template for Joomla you will not loose any of the customization work you have made

How do I create a custom CSS file

1. Open notepad.exe installed on your computer and create a new file name called custom.css
2. Save the CSS file to a location on your computer
3. Open the custom.css file using notepad.exe and include the CSS code you have written for the 3rd party extension or module
4. Save the changes to the file

How do I apply the changes to the template

Note: change the /template-name/ directory referenced in this article to the name of the template you have downloaded at the website.

1. Open the FTP software installed on your computer and browse to the /templates/template-name/css/ directory
2. Upload the custom.css file you have created to the /templates/template-name/css/ directory
3. Browse to the root of the /templates/template-name/ directory and download the index.php file to your computer
4. Before you make any changes to the index.php file make a backup of the file first
5. After you have made a backup of the file open the index.php file using notepad.exe
6. Now search this code </head>
7. Copy and paste the code in point 8 into the index.php file so it appears just before </head> tag
8. <link rel="stylesheet" type="text/css" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/custom.css" />
9. The code noted above will basically call the custom.css file every time the template loads at your site and apply the customized style changes to the 3rd party extension or module.
10. Once you have updated the index.php file save the changes
11. Upload the updated index.php file using the FTP software installed on your computer to the root of the /templates/template-name/ directory

You have now completed all the required steps to create and apply custom CSS styles to the template.

How Do I Assign Modules To Pages

Assigning modules to specific pages or all pages is a great way to control where the module will appear at your Joomla site.

For example a number of the templates we have created at the website make use of custom HTML module positions for the built-in slideshow.

After you have created a custom HTML module for each slide you want to publish to the slideshow to can assign the slides included in the slideshow to all pages at the website or you can assign the slides to specific pages.

To assign a module to a menu item complete the following steps

1. Select the Extension menu and module manager menu
2. Open the custom HTML module you have created for the slideshow
3. Select the menu assignment tab
4. You will now see a number of options where you can assign the module to all pages or only on selected pages

The above approach is an example of how you can assign the slides includes in the slideshow to all pages or specific pages.

The above tutorial is not just for the slideshow or custom HTML modules it can be used for any modules you create at your website.

How Do I Change The Template Colors

We have tried to make the templates we have created at the website for Joomla as easy to use and customize as possible.

One of the features we have included in the template control panel is a color customization tool which allows you to easily change almost every part of the designs color scheme using the easy to use built in color picker tool.

The built in color picker tool gives you both the freedom and control to customize almost every part of the template color scheme to suit your exact needs. You don’t need to know CSS code or know how to edit the CSS files to change the color scheme of the design to suit your needs as everything can be easily changed and updated via the template control panel with a click of a button.

How Do I Access The Color Customization Tool

To open the color customization tool complete the following steps

1. Log into the Joomla administrator area of your website
2. Select the Extensions menu and Template Manager menu
3. Open the template you have downloaded and installed at your website
4. You will now see the template control panel as show in the screen shot below

5. Now select the Theme setting tab to access the options to customize the template colors

Built-in Color Styles

A number of the templates we have created come supplied with a variety of ready made color styles for you to choose from which you can easily switch between by selecting the style from the drop down list.

You can easily switch between the different color styles we have created by selecting the style from the drop down list and then selecting the save button to save the changes you have made. Once you have selected one of the built-in styles and saved the changes to the control panel your Joomla site will automatically be updated with the new color style you have selected.

How Do I Create A Custom Color Style

To create and customize your own unique color style for the template complete the following steps

1. Turn the Built-in theme option from ON to OFF this will put the control panel into customization mode
2. Once you have put the control panel into customization mode you can now easily change the colors for different parts of the template
3. To change the colors just select the color wheel button next to each section and the color wheel option will appear in a pop-up window
4. From here you can select a color from the color chart or you can enter the # HEX color code, example HEX CODE #FFFFFF
5. Once you have customized the colors to suit your needs just select the save button and all the changes you have made will be automatically applied to your website.

Noted below is a complete list of the color options we have included in the built-in color customize picker tool.

Template Module Positions

All the templates we have developed at the website for Joomla include support for a number of collapsible module positions which allows you to publish, position and display content at your website within the module positions you create at your website.

Module usage examples

You can use the module positions included in the template for the following.

1. Built in default modules which comes supplied with Joomla including menus, latest news, user log in, search, RSS Feeds, news flash and much more.
2. Third party extensions may come with modules which can be published to the module positions
3. You can create custom HTML modules which allows you to add text or images inside the custom module positions you publish at the website
4. A number of the designs we have created at the  website come with a built-in slideshow. The slideshow makes use of the custom HTML module positions to give you more control and flexibility over where the slides appear at your site.

Standard Template Module Positions

All the Joomla templates available for download at the website support the following standard module positions as show in the screen shot below.

Module Position Details

The following information will provide you with more information about each module position show in the above screen shot.

1. The module positions can be enabled or disabled
2. All the modules are fully collapsible
3. You can assign the modules to specific menu items you create at your website which gives you a lot more control over where content is displayed

Standard Module Position descriptions

1. Site name and slogan is used to display your site name or slogan text or images you create and publish at the website
2. Loginform is used to for the default Joomla log in module which allows your visitors to register new accounts and log into your website
3. Position-1 is used to display the top menu navigation
4. Position-0 can be used to display the default search form at your site
5. The built-in slideshow module is used to display the slides you create and publish to the slideshow
6. Top-1, top-2, top-3, top-4, top-5, top-6, top-7, top-8, top-9, top-10, top-11, top-12 can be used to display custom module content you create at your site or you can use the positions to publish the default Joomla or 3rd party modules
7. Position-2 and position-3 can be used to display custom content, images or welcome text.
8. Top-Long can be used to display custom content, images, default Joomla or a 3rd party module
9. Top-left-1, top-left-2, position-7, bottom-left-1, bottom-left-2 can be used to display the left menu navigation for your website plus other modules you create and publish at your site
10. Top-a, top-b, top-c, top-d can be used to display custom, Joomla default or 3rd party modules you publish to your site
11. Component is used to display all the content you create and publish to your website.
12. Bottom-a, bottom-b, bottom-c, bottom-d can be used to display custom, Joomla default or 3rd party module content
13. Top-right-1, top-right-2, position-6, bottom-right-1, bottom-right-2 can be used any modules you wish to publish at your website
14. Bottom-long can be used to display any type of module you wish to publish to your website
15. Bottom-1, bottom-2, bottom-3, bottom-4, bottom-5, bottom-6 can be used to display custom content, images, Joomla default or 3rd party modules
16. Footer can be used to display any module you wish to publish to your website
17. Footer-left can be used for the footer menu navigation module
18. Footer-right can be used for the website copyright text

Other ways to view the template module positions

You can also view the module positions the template supports using the following methods noted below.

1. The template installation guide includes a screen shot of the module position layout plus detailed notes about each module
2. You can enable the Preview Module Positions settings via the Joomla administrator area

How do I enable the preview module positions

Complete the following to enable the review module positions setting

1. Log into the administrator area of your Joomla website
2. Select the Extensions menu and Template Manager menu

3. Select the Options button which appears just above the filer and search field

4. You will now see the global configuration for templates settings where you can enable or disable the preview modules

5. After you have enabled the above setting select the Save & Close button

How Do I Preview The Module Positions

1. Open your web browser and enter your website address followed by a forward slash / and after the / enter index.php?tp=1
2. Example would look like this http://www.mywebsiteaddress.com/index.php?tp=1
3. You will now see an outline of the module positions the template supports

Note: after you have previewed the module positions and taken a screen shot of them it is recommended that you disable the module positions preview option at your website.