Css options only work with !important tag

Css options only work with !important tag

by Antony Barela -
Number of replies: 2

First of all let me apologise english is not my native language,

i tried to find a solution for my issue but i could not even if there is exist

answer in the manual.

I tried to customize my moodle template with costume css file.

I made the modification by firefox  copy the changed parameters to the costum.css file.


The result is i can see there my updated lines and also the original(i also cleared the cache) which has stronger

priority. I only had luck when i used the !important tag but the manual state that its not good for use it.

 

.navbar .brand { /*i think this selector is correct */
    color: #728 !important;
    display: block !important;
    float: left !important;
    font-size: 20px !important;
    font-weight: 200 !important;
    margin-left: -20px !important;
    padding: 20px 0 !important;
    text-shadow: 0 1px 0 #fff !important;
}


Thank you very much your help

Average of ratings: -
In reply to Antony Barela

Re: Css options only work with !important tag

by lior gil -
Picture of Core developers

First of all, the !important option should really be used as a last resort.

Secondly, CSS uses a different cache, so while working on it you'd better switch that cache off. To do that, go to the Administration block: Site administration->Appearance->Themes->Theme settings and select the 'Theme designer mode'.


Now, I'm guessing this is an issue of css selector priority. If my guess is correct, then if you'll look at the element in your browser's developer tools, you'll probably find that the overriding rule for your changes has a longer selector then yours (.navbar .brand) and because of the it takes priority. Try to make your rule more detailed (for example: div.navbar span.brand) so it will be more dominant

For better understanding of this issue, search for sites that explain the priority of css selectors rules.

Average of ratings: Useful (1)
In reply to lior gil

Re: Css options only work with !important tag

by Antony Barela -

Thank you for your help lior gil,

Yes i know that using !important is not properly.

The cache was switched off.

I tried to use more specific selectors:


div.navbar a.brand {
    color: #778;
    display: block;
    float: left;
    font-size: 20px;
    font-weight: 200;
    margin-left: -20px;
    padding: 20px 0;
    text-shadow: 0 1px 0 #fff;
}


But this not even shown in the firebug.

only .navbar.brand{....} will be show(but only the !important tags will apply)



Average of ratings: -