Adding A Customised CSS to Joomla’s Beez 2

Adding A Customised CSS to Joomla’s Beez 2

I did some clean up on our web site these days and one of the most critical parts was the CSS stylesheet I added years ago. All the time it was included by a customised index.php and every update forced me to patch the original file – of course a pretty dirty way. There is a better way and I post my documentation of changes.

Problem

I had a customised stylsheet beez_20/css/scio.css to be included. It defines some extensions to personal.css. Therefore I added the following code to the template’s index.php located in directory templates/beez_20

<link rel=“stylesheet“ href=“<?php echo $this->baseurl ?>/templates/beez_20/css/scio.css“ type=“text/css“ />

So after every update I had to either copy my old version or inspect the code to find an appropriate location to include scio.css.

index.php was more than once subject to heavy code changes. Although it’s not too hard to understand, there is always a risk to introduce security holes or bugs when patching there.

 

Solution

Searching for an improved solution I found HELP: How can I use the black.css file for Beez 20? and Re: additional Template Color describing a safer way by just adding one line to the templateDetail.xml. Although this might get overwritten as well on Joomla updates, it is far more easier to add a line to an XML file than fiddling in php code. I customised their approach a little bit to include personal.css implying the following changes:

  • 3 new files in directory templates/beez_20/css/ that should remain untouched on Joomla updates:
    scio-impl.css
    scio_rtl.css
    scio.css
  • One line to add in templates/beez_20/templateDetail.xml
  • One change in the administrator back end in the styles section of template manager

scio-impl.css contains the css code.

scio_rtl.css contains jsut one line to import the original styles from personal.css

@import url(personal_rtl.css);

scio.css has two import statements

@import url(personal.css);
@import url(scio_impl.css);

So possible changes of personal.css in the future will be reflected automatically.

In templateDetail.xml I added the following line in the options listing of <field name=“templatecolor“>:

<option value=“scio“>SCIO</option>

This should be the only file to change after an update. So keeping a copy is a must.

In back end go to Extensions / Template Manager / Styles and open the style you are using (Beez2 or the name of your copy). In Advanced Options you now choose the new template color which adds the styles:

If you are running a mult-language site, you have to repeat this step for all languages.

 

Joomla Updates

After the update check that:

  • all 3 css files exist
  • templateDetails.xml still has the <option value=“scio“> entry
  • template color is set to SCIO

At the moment I am not sure if none, all or some of these steps have to be performed again after a Joomla update – we will see.

Comments are closed.

Durch die weitere Nutzung der Webseite stimmen Sie der Verwendung von Cookies zu Mehr
By continuing to use the site, you agree to the use of cookies. More

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close