Joomla’s Beez_20 template is easy to modify once understood. It has elements to correctly render any kind of website content, text, graphics, tables, you may have. To modify any Joomla template one could edit basically 3-files: index.php, templateDetails.xml and the stylesheet, depending on the task at hand.
Beez_20 has about 17-CSS files and its often a bore to spend time looking around for what CSS file to modify to have something particularly changed, only to forget where I made the changes some days / weeks later. Then I start looking through all my comments and get myself confused all over, etc.
Joomla’s override possibility comes to the rescue. In this lesson, we’ll create an override.css-file, properly reference it in index.php and test to make sure it works.
1) Create a file named override.css, place it in the templates css dir : templates\beez_20\css
2) Modify index.php and add a reference to your newly created css file.
How?
a) Copy this line:
<link rel="stylesheet" href="/&lt;?php echo $this->baseurl ?>
/templates/php echo $this->template; ?>/css/position.css"
type="text/css" media="screen,projection" />
b) Scroll down and paste it just before , and modify it as follows: note that position.css was changed to override.css
<link rel="stylesheet" href="/&lt;?php echo $this->baseurl ?>
/templates/php echo $this->template; ?>/css/override.css"
type="text/css" />
The reason for pasting just before the closing is to make sure it overwrites every other css-file referenced in the template, from opening-head to closing head.
3) Test and see that things are working:
Lets change the background color from white to black.
Open your override.css file and add the code below, save and refresh the page:
body {
background: #000000;
}
Holla, background is completely black.
Lets change background color to RED:
body {
background: #F40404;
}
Cool, Beez_20’s background is completely red.
Great, override.css is now completely overriding every other css-file.
As you decide on more css-related changes to be made, place each of them inside override.css. As such, there is no need modifying various css-files only to forget was done a couple of days back.
