How to use module CSS override?

2007-01-18T00:00:00+00:00

Many of you have already heard about it but not everyone knows what it is and how to use it. In this short "how to" tutorial we will explain what CSS override is and how to use it

on your websites. First rule of CSS is the last defined property in CSS file order is the one that is going to be used in layout. Basically if you have same property defined in your stylesheet twice , the one that is last will be the one that is used.

Example:

[yjsgpre pretty="1" scroll="0"] p.text{ padding:0; } /* this one will be used in your layout */ p.text{ padding:5px; } [/yjsgpre]

So how do we use this in our Joomla templates?

Your Joomla template CSS files are loaded after the main head Joomla tags. Main head Joomla tags

[yjsgpre pretty="1" scroll="0"] [/yjsgpre]

load any JS and CSS files before your template CSS. So if we for example use YJ NS 8 module , the module CSS will be loaded before the template css files and this way we will get the advantage of using CSS override for this or any module in our template CSS and adapt it to fit our website.

Here is the default YJ NS 8 module look. And here is the same module (called YouNews Entertainment on our demo ) but with CSS overrides.
You would never say that this is a same module right? What did we do ? Well here is default module css file which is loading before our layout.css . We took few CSS properties from that stylesheet and moved it to our template layout.css file. You can find the lines starting with /*NEWS SLIDER 8.0*/

This technique can be used with any Joomla module and this way you do not have to edit default module CSS file to accomplish desired layout.

PHP conditional comments

2007-01-18T00:00:00+00:00

As web developers we often have to use different CSS techniques for different browser types. Now days every browser has it's own hack but imagine if you have to use custom CSS

hack for each browser there is and load html conditional comments for each! That would be to much code in head tag . To keep it neat and load conditional comment only when specific browser is used here is a small PHP snippet that can help keep your code organized.

First we place the browser detection snippet in our index.php file :

[yjsgpre pretty="1" scroll="0"] $who = strtolower($_SERVER['HTTP_USER_AGENT']); [/yjsgpre]

Than we load the conditional comment to be used only if visitor is using IE6 browser :

[yjsgpre pretty="1" scroll="0"] if(preg_match("/msie 6.0/", $who)){ echo' '; } [/yjsgpre]

To load different style for other browsers simply change the browser name in first line of code

[yjsgpre pretty="1" scroll="0"] if(preg_match("/chrome/", $who)) { [/yjsgpre]

Here is the list of other browsers you can use:

mozila // Firefox
msie 7.0 // Internet Explorer 7.0
msie 8.0 // Internet Explorer 8.0
opera // Opera
chrome // Chrome
safari // Safari

Joomla! Tutorials

How to use module CSS override?

PHP conditional comments