CSS !important - am I doing it right ?

[Brett Peters]

I have been having a go at throwing some css at the editor in the extra.css template so that it doesn't look so bland but rather blends in to my color scheme, considering I dont know much about css I am happy that the css does what I want it to do but when looking at the code I am slightly concerned that I went nuts using !important.

So when do you use or not use !important ?

Here is the css

.xenForoSkin table.mceLayout {
border-left: 1px solid transparent !important;
border-right: 1px solid transparent  !important;
border-bottom: 1px solid transparent !important;
border-top: 1px solid transparent  !important;
background: #A5CAE4  url('styles/default/xenforo/gradients/form-button-white-25px.png') repeat-x top !important;
}
.xenForoSkin table {
background: #A5CAE4 url('styles/default/xenforo/gradients/form-button-white-25px.png') repeat-x top !important;
}
.xenForoSkin .mceButton {
display: block;
border: 1px solid #176093 !important;
}
.xenForoSkin a.mceButtonActive, .xenForoSkin a.mceButtonSelected {
background-color: #ffffc8 !important;
}

Result

 

[Dad.]

Hey there, what exactly are you trying to do? You are using !important correctly, but as long as the CSS shows up after the file and the property doesn't have !important then you don't even need to use it. In other words .mike {color: red !important} in a css file above EXTRA.css and .mike{color: blue} in EXTRA.css would make the mike class red, not blue. I hope that makes sense

Are you trying to remove the border? Let me know and Ill see if I can help you more. Other than that, you can compress all those border-left, border-right properties into one:

.xenForoSkin table.mceLayout {
border: 1px solid transparent !important;
background: #A5CAE4  url('styles/default/xenforo/gradients/form-button-white-25px.png') repeat-x top !important;
}

 

[Brett Peters]

Thanks Audentio you have been very helpfull

To answer your questions I am trying to edit the look of the editor and although I get the intended result that I am after I knew that some help with the above example would give me a much clearer picture regarding css and how to use it correctly.

I wanted the boarders to be blue and the top to be transparent, then I just set them all to transparent because it seemed to be using the appropriate colors, I will use your simplified border method and insert blue to all boarders and revisit the top boarder at a later date.

 

[James]

CSS cascades, meaning in the most common case, the property that is declared last is the one that is used. The !important keyword forces that property to be used, no matter what is redeclared after. Consider this CSS:

div{ color:red; }
div{ color:blue; }

By default, div text will be blue because it was declared last. Using the !important keyword, we can make all div text red like so:
div{ color:red !important; }
div{ color:blue; }

 

[Brett Peters]

Cheers James, Think I have got my head around it now

 

[Brett Peters]

If anyone has better presentational and css skills than me it probably would be a good idea to edit the css to use the @colors and do a general tidy up and submit the css to the Tips, Tricks and Guides forum.