Custom css

[mercedes2]

Hi, I'm new to this forum so please forgive me it this topic has been dealt with but I couldn't find it.
This is my problem!! I am using Cloudbase3 template and when I add a custom style sheet it always appears in the source code before the template css and therefore does not have any effect. How can I place it after existing styles. Thanks in anticipation

[Per Yngve Berg]

Mod. Note: Relocated the topic to the Templates Forum.

Sorry, don't know that template. I presume you can find the loading of the css files in the templates index.php file.

[thekrotek]

The order of CSS files doesn't really matter. What does matter is how you override definitions. If your changes don't have any effect, then you're doing it the wrong way.

[annahersh]

The order of CSS files doesn't really matter. What does matter is how you override definitions. If your changes don't have any effect, then you're doing it the wrong way.

On the contrary, css file order does matter and will determine if a rule is overridden.

Example
override.css
.title {font-size: 22px;}
core.css
.title {font-size: 16px;}

In such scenario, the core takes precedence. The override will require that the !important rule has to be added in the override .title rule, and that also fails if the core also uses !important.

when I add a custom style sheet it always appears in the source code before the template css and therefore does not have any effect. How can I place it after existing styles.

How are you placing the .css file? Did you create the template? If the latter is true, use the following in your template's index.php to ensure the file loads after the template.css

Code: Select all

$this->addCustomTag('<link href="'.Juri::root(true).'/templates/'.$this->template.'/css/custom.css" rel="stylesheet" type="text/css" />');

[thekrotek]

On the contrary, css file order does matter and will determine if a rule is overridden.

Example
override.css
.title {font-size: 22px;}
core.css
.title {font-size: 16px;}

In such scenario, the core takes precedence. The override will require that the !important rule has to be added in the override .title rule, and that also fails if the core also uses !important.

My point was, that is doesn't matter, when you want to override styles, because they can easily be overridden no matter what. And no, not only placing "!important" can be the way. I'd even suggest to avoid using "!important", especially when CSS modifications are complex. The best approach is to make your definition more strict. For example:

.title -> body .title

The latter will override the original without "!important".