1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

CSS !important - am I doing it right ?

Discussion in 'Styling and Customization Questions' started by Brett Peters, Oct 22, 2011.

  1. Brett Peters

    Brett Peters Well-Known Member

    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

    Code:
    .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

    Screen Shot 2011-10-22 at 9.26.12 AM.png
     
  2. Mike Creuzer

    Mike Creuzer Well-Known Member

    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 :p

    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:

    Code:
    .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 likes this.
  3. Brett Peters

    Brett Peters Well-Known Member

    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.
     
  4. James

    James Well-Known Member

    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 likes this.
  5. Brett Peters

    Brett Peters Well-Known Member

    Cheers James, Think I have got my head around it now
     
  6. Brett Peters

    Brett Peters Well-Known Member

    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.
     

Share This Page