Joomla! 1.5 Templates Cookbook

By Richard Carter
  • Instant online access to over 8,000+ books and videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies
  1. Joomla! Theming Basics

About this book

Templates in Joomla! provide a powerful way to make your site look exactly the way you want either using a single template for the entire site or a separate template for each site section. Although it sounds like an easy task to build and maintain templates, it can be challenging to get beyond the basics and customize templates to meet your needs perfectly.

Joomla! 1.5 Templates Cookbook consists of a series of self-contained step-by-step recipes that cover everything from common tasks such as changing your site's logo or favicon and altering color schemes, to custom error pages and template overrides. It starts off with the basics of template design and then digs deep into more complex concepts. It will help you make your site more attractive and user-friendly. You will integrate your site with various social media such as Twitter and YouTube; make your site mobile-friendly with the help of recipes for creating and customizing mobile spreadsheets; and use miscellaneous tricks and tips to get the most out of your website. You get all of this in a simple recipe format that guides you quickly through the steps and explains how it all happened.

Publication date:
July 2010
Publisher
Packt
Pages
236
ISBN
9781849511247

 

Chapter 1. Joomla! Theming Basics

In this chapter, we will cover the basics of theming our Joomla! website:

  • Finding the current default template

  • Locating Joomla! templates in your website's hierarchy

  • Understanding Joomla! templates

  • Changing your template's color variation

  • Adding a color variation

  • Changing your template's logo

  • Selecting the default Joomla! template

  • Editing the HTML template in the administration panel

  • Editing CSS in the administration panel

Introduction

In this chapter, you'll cover the basics of changing your Joomla! template, from finding the location of the default Joomla! template to changing your website's logo and altering your template's color scheme.

 

Introduction


In this chapter, you'll cover the basics of changing your Joomla! template, from finding the location of the default Joomla! template to changing your website's logo and altering your template's color scheme.

 

Finding the current default template


Our first task is to discover which Joomla! template our website is using.

Getting ready

Log in to the Joomla! administration panel, which you can reach by going to the http://www.example.com/administrator directory (where Joomla! is installed) in your web browser.

How to do it...

  1. 1. Once logged in to your Joomla! website's administration panel, navigate to the Template Manager feature under Extensions | Template Manager in the menu.

  1. 2. Once the page has loaded, you will see a list of the templates that are currently installed on your Joomla!-powered website.

  2. 3. The current default template displays a star icon under the Default title in the table, so the template that is the current default on your website is called rhuk_milkyway, which is installed by default.

How it works...

Joomla!'s Template Manager feature in the administration panel allows you to see which templates are currently installed. It also allows you to change which template is the current default that your website's visitors will see.

There's more...

You can view more information on a template by clicking on the name of the template in the administration panel's Template Manager section.

Note

If you hover over the name of the template in the list, you'll see a small thumbnail preview of what the Joomla! template looks like: it can be useful picking a new default template for your website.

See also

  • Finding the current default template

  • Locating Joomla! templates in your website's hierarchy

  • Understanding Joomla! templates

  • Changing your template's logo

 

Locating Joomla! templates in your website's hierarchy


When building your Joomla! template it's useful to know where in Joomla! the files for each template are stored within your website's hierarchy.

Getting ready

Open your FTP program if your Joomla! website is stored on a remote server and locate the root directory of your Joomla! installation. Let's assume that our Joomla! installation is on example.com and that we're using FTP throughout the book. We'll use FileZilla, which can be downloaded for free from http://filezilla-project.org.

How to do it...

  1. 1. Locate the directory where your Joomla! is installed. Joomla! templates are stored in the templates directory. We're looking for the default template we identified previously, rhuk_milkyway, which is located in the rhuk_milkyway directory:

How it works...

By storing related files such as CSS files, images, and the template files together in a Joomla! template, it's easier to see which files relate to a particular Joomla! template.

See also

You may find these other recipes helpful:

  • Understanding Joomla! templates

  • Installing a Joomla! template

 

Understanding Joomla! templates


If you have some experience with theming other content management systems, this can be a good start for learning Joomla! template design. As with theming any content management system, Joomla! does have its quirks and it's useful to look at the structure of a Joomla! template.

Getting ready

View your Joomla! website's files in an FTP program.

How to do it...

If you now view the contents of the templates\rhuk_milkyway directory, you can see what a Joomla! template is composed of:

As you can see in the preceding screenshot, there are three directories, which are used in the following ways:

  • The css directory contains the CSS files

  • The html directory (which we can ignore for now) contains template overrides for various components and modules if they differ from the default templates provided by that module or component

  • The images directory contains images associated with the template

There are also a few other files which you'll find useful in building and customizing Joomla! templates:

  • The favicon.ico file or the 'favorites icon' displays a small icon next to your website's address in the address bar of the visitors' browsers.

  • The index.php file outputs the (X)HTML of your template.

  • params.ini defines the color and other variations in your Joomla! template (this file is optional).

  • template_thumbnail.png provides a screenshot preview of the template that is displayed in Joomla!'s administration panel.

  • templateDetails.xml provides information about the template itself, such as the designer, the designer's own website address, and any notes the author of the template may have for its users. This file is incredibly important as it is required to be able to allow the template to be installable via the standard Joomla! installation process.

How it works...

When a template is enabled, Joomla! looks for certain files in the template's directory. It looks for the index.php file to generate each page's HTML, which may then reference CSS and other style files. By convention, the CSS files and images referenced in the template's index.php file of a Joomla! theme are stored in subdirectories of the template's main directory.

See also

  • Understanding the templateDetails.xml file

 

Changing your template's color variation


Some Joomla! templates allow you to change some of their aspects from the administration panel.

Getting ready

Log in to your Joomla! website's administration panel and select Extensions | Template Manager. From there, select the rhuk_milkyway template, which you'll find has been installed and enabled by default for your Joomla! website. (If you're stuck, view the recipe for Finding the current default Joomla! template.)

How to do it...

  1. 1. Under the Parameters section of the template's detailed view, you will see that the rhuk_milkyway template has three options to change:

    • The foreground color scheme

    • The background color scheme

    • The width of your pages

      By default, with the parameters set to Blue, your Joomla! website looks like this—the background color of the page turns to blue, as do the color of headings and the panels surrounding the modules in the left-hand column.

  2. 2. Let's select Red in the Parameters section of the administration page in Joomla!'s Template Manager area as the value for the template's Color Variation and Background Variation values and select the Save or Apply button to the top-right of the screen. After refreshing your website you should now see that the colors have changed. In particular, the color of the background, headings, and links would have changed.

How it works...

Changing these values alters the theme's params.ini file, which affects how a theme is displayed by loading additional CSS files in the<head> element of your Joomla! template.

The range of values for each parameter is defined in the template's templateDetails.xml file. The values that can be selected will vary by template.

There's more...

You may need to make a change to the file permissions to allow these changes to be made from the Joomla! administration panel.

Making the templates\rhuk_milkyway\params.ini file writable

You may find that you are unable to change these values if you see a message that reads The parameter file /templates/rhuk_milkyway/params.ini is unwritable!:

To rectify this problem so that you are able to change the template's parameters, open the \templates\rhuk_milkyway\ directory in your FTP program. You should then be able to right-click on the params.ini file and see a File Permissions option in most FTP programs.

Note

You shouldn't have trouble with file permissions on the Windows operating system. For more information on file permissions, see this article on Wikipedia: http://en.wikipedia.org/wiki/Filesystem_permissions.

Ensure that the Group and Public write permissions are checked to allow Joomla! to change this file. Alternatively, you can change the numeric value to 666, which is the numerical representation of the permissions we need:

See also

  • Understanding the templateDetails.xml file.

  • Understanding Joomla! templates

 

Adding a color variation


You are not restricted to the color variations provided with a Joomla! template; you can add your own color variations to suit.

To match our website's new logo, we'll be creating a pink/purple color variation of the rhuk_milkyway template, though this technique can be adapted for other Joomla! themes that offer color variation options too!

Getting ready

We'll need the hexadecimal color references for our new color variation, taken from the logo file that we'll add to the template in another recipe. These are:

  • #D400AA for pink

  • #660080 for purple

We'll be calling our new color variation "pink".

How to do it...

There are three major stages to creating a color variation of a Joomla! template. Firstly, CSS is required. Secondly, any images that need to change with the variation are also required. Then, to make the color variation visible in our administration panel, we need to edit the templateDetails.xml file.

  1. 1. In the templates\rhuk_milkyway\css\ directory, create a CSS file named pink.css. This file will overwrite the foreground colors for the Joomla! template that you're using:

    a:link, a:visited {
    color: #D400AA /* pink */
    }
    a:hover {
    color: #660080; /* purple */
    }
    #pillmenu a:hover {
    color: #D400AA;
    }
    #pillmenu a#active_menu-nav {
    background: url(../images/pink/mw_menu_active_bg.png) 0 0 repeat-x;
    color: #fff;
    }
    #pillmenu a#active_menu-nav:hover {
    color: #fff;
    }
    h3, .componentheading, table.moduletable th {
    color: #D400AA;
    }
    div.module_menu {
    background: url(../images/pink/mw_box_br.png) 100% 100% no-repeat;
    }
    div.module_menu div {
    background: url(../images/pink/mw_box_bl.png) 0 100% no-repeat;
    }
    div.module_menu div div {
    background: url(../images/pink/mw_box_tr.png) 100% 0 no-repeat;
    }
    div.module_menu div div div {
    background: url(../images/pink/mw_box_tl.png) 0 0 no-repeat;
    }
    
  2. 2. If you want the background colors to change too, you'll need to create another CSS file in this directory called pink_bg.css:

    #page_bg {
    background: #660080;
    }
    div#wrapper {
    background: #f7f7f7 url(../images/pink/mw_shadow_l.png) 0 0 repeat-y;
    }
    div#wrapper_r {
    background: url(../images/pink/mw_shadow_r.png) 100% 0 repeat-y;
    }
    div#header {
    background: url(../images/pink/mw_header_t.png) 0 0 repeat-x;
    }
    div#header_l {
    background: url(../images/pink/mw_header_t_l.png) 0 0 no-repeat;
    }
    div#header_r {
    background: url(../images/pink/mw_header_t_r.png) 100% 0 no-repeat;
    }
    div#footer {
    background: #f7f7f7 url(../images/pink/mw_footer_b.png) 0 100% repeat-x;
    }
    div#footer_l {
    background: url(../images/pink/mw_footer_b_l.png) 0 0 no-repeat;
    }
    div#footer_r {
    background: url(../images/pink/mw_footer_b_r.png) 100% 0 no-repeat;
    }
    
  3. From the CSS, you may have noticed that a large number of image files are referenced, which provide the corners within the template's design, and a color-coordinated image that appears when you hover over an item in the navigation menu of your website.

  1. 3. In the templates\rhuk_milkyway\images\ directory, copy and paste the images from one color variation (for example, black) to create a new directory, and name it pink.

    These images now need recreating, aliased to our new background colors. Luckily for you, they should be included in the code download provided with the book!

    To ensure that the new color variation is detected by Joomla!'s administration panel, you now need to edit the templateDetails.xml file in templates\rhuk_milkyway\.

  2. 4. Locate the code in templateDetails.xml that begins with<param>:

    <param name="colorVariation" type="list" default="white" label="Color Variation" description="Color variation to use">
    <option value="blue">Blue</option>
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="orange">Orange</option>
    <option value="black">Black</option>
    <option value="white">White</option>
    </param>
    
  3. 5. Here, you need to add an option for your new pink color variation:

    <param name="colorVariation" type="list" default="white" label="Color Variation" description="Color variation to use">
    <option value="blue">Blue</option>
    <option value="pink">Pink</option>
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="orange">Orange</option>
    <option value="black">Black</option>
    <option value="white">White</option>
    </param>
    
  4. Beneath this code, you also need an option to be able to change the template's background color scheme to your new pink variation:

    <param name="backgroundVariation" type="list" default="blue" label="Background Variation" description="Background color variation to use">
    <option value="blue">Blue</option>
    <option value="pink">Pink</option>
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="orange">Orange</option>
    <option value="black">Black</option>
    <option value="white">White</option>
    </param>
    
  5. 6. Save and upload the templateDetails.xml file to your server.

  6. 7. Now all you need to do is change the template's color variation in the Parameters area of the template's settings screen in your Joomla! website's administration panel. Select the Pink option for both the Color Variation and Background Variation values and click on Apply. Refresh the page and you should see the new color variation on your Joomla! theme:

If you need help doing this, see the Changing your template's color variation section of this chapter.

How it works...

After setting the color variation parameters for the template, when Joomla! loads a page for a visitor it also loads additional CSS files that overwrite particular references for colors throughout the theme.

See also

  • Changing your template's color variation

  • Changing your template's logo

 

Changing your template's logo


One of the most fundamental changes that you will want to make to your Joomla! template is to change the logo.

Getting ready

You will find the logo of rhuk_milkyway in the templates\rhuk_milkyway\images directory of your Joomla! website's installation. The file that we're looking for is called mw_joomla_logo.png.

How to do it...

  1. 1. Save the logo file as mw_joomla_logo.png. You'll be using this logo for your Joomla! website:

  2. 2. Upload the new logo file from your computer to the template's image directory. Refresh your website and you should see your new logo display:

Note

You may find it helpful to save a backup copy of the default logo, just in case!

Can't see the new logo? If you don't see the new logo, you may need to delete your browser's cache.

How it works...

By overwriting the default logo file for your Joomla! template, you can quickly and relatively easily start customizing your website for your own needs.

See also

  • Changing your template's color variation

 

Selecting the default Joomla! template


You can select the default Joomla! template to be displayed on your website from the administration panel.

Getting ready

Log in to the administration panel and navigate to the Template Manager feature (available from the Extensions | Template Manager option in the menu).

How to do it...

  1. 1. Select the radio button next to the theme's name; we'll select the JA_Purity template for this example.

  1. 2. Click on the Default button to select that template as the default template displayed on your website:

  2. 3. Refresh the frontend of your website, and you'll see the new template in action:

Notice that the content remains the same, but the design changes. For the purposes of this book, we'll now revert the default template to rhuk_milkyway.

How it works...

By selecting a new template as the default, you can change Joomla!'s look and feel quite substantially.

See also

  • Changing your template's logo

  • Changing your template's color variation

 

Editing the HTML template in the administration panel


Joomla! allows administrators of their website to edit HTML templates of their Joomla! templates within the administration panel.

Getting ready

Log in to your website's administration panel and navigate to the Template Manager feature. From here, select the theme that is the current default. For this example, we'll assume it's the rhuk_milkyway template:

How to do it...

  1. 1. Select the Edit HTML option at the top-right of your screen. You'll be presented with a text box containing the contents of the template's index.php file:

  1. 2. Once you have finished editing the file, click on Save or Apply, or simply click on Cancel to preserve the template file as it was.

    Being able to edit a template's HTML from the administration panel is convenient for smaller tasks. For example, what if we wanted to remove the text at the bottom of the website that reads Powered by Joomla!?

  1. 3. Now locate the code that reads as follows:

    <p id="power_by">
    <?php echo JText::_('Powered by') ?>
    <a href="http://www.joomla.org">Joomla!</a>.
    <?php echo JText::_('Valid') ?>
    <a href="http://validator.w3.org/check/referer">XHTML</a>
    <?php echo JText::_('and') ?>
    <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS </a>.
    </p>
    
  2. By removing the highlighted lines of code in the previous code snippet, we can remove reference to the website being powered by Joomla!, if we wish to. Depending on the template you're editing, this process will almost certainly vary.

  3. 4. Once the Save or Apply button has been clicked, refresh the frontend of your website (that is, not the administration panel):

How it works...

When you edit the HTML of your template in Joomla!'s administration panel, Joomla! overwrites the index.php of your template with the changes that you've made. If you have downloaded your template for editing, you will need to download the index.php file again to prevent overwriting any changes.

See also

  • Editing CSS in the administration panel

 

Editing CSS in the administration panel


Joomla! also allows administrators of their website to edit the CSS files associated with their Joomla! templates from the administration panel.

Getting ready

Navigate to the Template Manager feature in the administration panel. From here, select the theme that is currently the default. For this example, we'll assume it's the rhuk_milkyway template again.

How to do it...

  1. 1. Select the Edit CSS option at the top-right of your screen. You'll be presented with a list of the CSS files associated with the current template:

  1. 2. Select a CSS file by selecting the radio button next to the CSS file's name, and click on the Edit button at the top-right of the screen. You will then be presented with the CSS to edit:

  2. 3. Once you have finished editing, click on Save or Apply or simply click on Cancel to negate any changes that you've made to the file.

How it works...

When you edit a CSS file from your Joomla! template in the administration panel, Joomla! overwrites the relevant CSS file with the changes that you've made, so long as the file is writable.

There's more...

There is one common problem that you may face when trying to edit your template's CSS files via the administration panel. You may find that the CSS files for your template are not writable from the administration panel.

To rectify this problem, navigate to the \templates\rhuk_milkyway\css directory where you have Joomla! installed. Select all of the CSS files you wish to be able to edit from the administration panel, right-click, and select File permissions:

When changing the permissions to allow access to the template's params.ini file, you need to allow Write permission for Group and Public:

Note

Don't allow execution for security

Generally, it's wise to prevent execution of files unless explicitly required, as this can prevent a security risk to your Joomla! website.

Once you refresh the page in the administration panel you should now be able to edit the CSS files associated with the template.

See also

  • Editing the HTML template in the administration panel

About the Author

  • Richard Carter

    Richard Carter is a seasoned front-end web developer who has worked with Magento since 2008. He lives in Newcastle upon Tyne in the North East of England.

    He is the founder of the e-commerce agency Peacock Carter, an e-commerce and web design agency based in the North East of England, and has worked for clients including the Scottish Government, City & Guilds, NHS, and the University of Edinburgh.

    Richard is the author of four books on Magento, including Magento Responsive Theme Design, and has written three further books on e-commerce and content management systems.

    Browse publications by this author
Book Title
Access this book, plus 8,000 other titles for FREE
Access now