Jennifer Marriott Blog

We had a very helpful email from a reader of the Official Joomla! Book regarding the override css files we demonstrate in the sample site chapters.  While I thought I had included them in the color scheme downloads, I realized that I hadn't.  Sorry for any inconvenience that anyone may have experienced in trying to find the override files for download.

Here are all three override files for everyone to download/copy.  To download please right click and "save link as" the file you would like to use to your hard drive (Mac users use control click),  or click on the file and it will open in a new browser for you to copy the contents to them paste into your own override file.   These files will also be placed for download in the appropriate individual Chapter Introductions accessible through The Official Joomla Book Chapters menu link.

Business Override CSS File   School Override CSS File    Nonprofit Override CSS File

In August 2008 I contributed an article to the Joomla Community Magazine - August 2008 Issue.  I thought it would be a good idea to revisit some of the tips, techniques and resources I mentioned two and a half years ago, add some new resources and do a follow-up.

Finding Design Ideas and Solutions to Problems

One of the things I love the best about the Joomla! Community is how people share tips, tricks and resources with each other. Hopefully with this article I will be sharing some new resources to add to your designer "toolbox", some that I have used for years and some recently shared with me by others.

Update February 2011 - I still feel that the Joomla! template forum is one of the best ways to get assistance from the community when you are stumped by a particular design or css question.  There are always new helpful faces willing to take a look and help each other out.  Another great resource is the newly reorganized Joomla! Community Magazine.  The monthly section "Designers Studio" I think will be a space to watch to find Joomla! specific solutions and resources. 

Read more: Great Ideas Revisited

This chapter discusses the basics of changing a color scheme on the existing default template "Beez" from a pink scheme to a blue monochromatic color scheme.

To show an example of the changes that were made we have created a blue beez installable template. The color changes are located in the additional css files called:

• 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:

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

beez_blue.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_blue 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.

You can see the color swatches for this template in the article regarding 1.5 Beez Color Scheme Changes.

This chapter discusses changing a color scheme on the existing default template "Beez" from a pink scheme to a green monochromatic color scheme.

To show an example of the changes that were made we have created a green beez installable template. The color changes are located in the additional css files called:

• 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 green variation of Beez download the zipped up template file:

beez_green.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_green 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 for this template: