Jennifer Marriott Blog

This is another example of a color scheme change on the default Joomla! 1.5 template "Beez".  Next template edits to be posted will be for Joomla! 1.6, but for now hopefully these template examples will help newcomers to editing existing templates get an idea of where to start, and how to change colors in a css file.

The files that have been added to the beez package are:

• override.css -This contains an override of all the color changes need for general.css, template.css, position.css and layout.css. This file also shows overrides for the icon images used in the template were edited to be png files with transparent backgrounds.
• color_template_rtl.css
• color_ieonly.css
• color_print.css

The index.php file also has been edited to link to our new css files. The change in the index.php happens at line number 40:

<!-- Changes below load the new color stylesheets -->
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/css/override.css" type="text/css" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/css/color_print.css" type="text/css" media="print" />
    <!--[if lte IE 6]>
        <link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/css/color_ieonly.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    <?php if($this->direction == 'rtl') : ?>
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/css/color_template_rtl.css" type="text/css" />
    <?php endif; ?>
<!-- End of the changes to load the new color stylesheets -->

To get this red variation of Beez download the zipped up template file:

beez_burnt_red.zip

Once the file has been downloaded, navigate to the Administrator back-end of your site, and use the Extension installer to install the template. Once the template is installed navigate to the Template Manager and you will see the template in the list of available templates to use. Set beez_burnt_red as your default template and refresh the front-end of your site to see how the template looks. To further edit the template, use the override.css file to change existing styles that are defined it it, or add your own styles to the end.

The color swatches:
 

• < Prev
• Next >