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. 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. 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;
   }
   

   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.

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\.

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>
   

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>
   

   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>
   

6. Save and upload the templateDetails.xml file to your server.
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