Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Nov 2013
    Posts
    33
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Dealing with the !important declarations

    Aloha guys. I am having issues with conflicting !important declarations when adding word-press customs css rules. For some reason I have to use !important on both color declarations, if I do not use it then the first one does not work at all. This it is making it so that the second one is not over riding the first one and I am not sure how to get around this.

    Code:
    #menu-default-header a{
       color:#D8A863!important;
       background:#000000;
    }
    
    .current-menu-item>a {
       color:#000000!important;
       background:#D8A863!important;
    }
    My site
    Last edited by xris; 03-08-2014 at 05:56 PM.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,630
    Thanks
    6
    Thanked 1,002 Times in 975 Posts
    Your link doesn’t work.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello xris,
    This is a perfect example why you should not use !important and should learn specificity instead.
    It's also pretty handy to have Firebug for Firefox to help figure out what CSS is already styling elements.

    Link is still broken.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New Coder
    Join Date
    Nov 2013
    Posts
    33
    Thanks
    2
    Thanked 0 Times in 0 Posts
    The link on top now works. I know that you should really never use !important but like I said in the OP that using this WP theme because of the way they coded it I have to use it. Even when I use the FULL css path I still have to use it.

    Specificity Score = 470
    Code:
    html.js body.page div#outer-wrap div#inner-wrap div.main-wrapper div.container div.header-wrapper div.navigation-wrapper nav#navigation ul#menu-default-header.navigation
    I already use and know how to use Firebug but my question still stands how can I have 2 !important tags...

    Code:
     
    #menu-default-header a{
       color:#e1c11f !important;
       background:#000000;
    }
    
    .current-menu-item>a {
       color:#000000!important;
       background:#e1c11f !important;
    }
    Notice that the background from the first one works without the !important but the color one HAS to have it...so what other options are there? Also why would backgrounds work but not colors?
    Last edited by xris; 03-08-2014 at 10:59 PM.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by xris View Post
    ... how can I have 2 !important tags...
    Did you look at that link about specificity? You just need to figure out how to be specific enough, either with existing CSS/markup or what you are allowed to add/edit/change within your template.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New Coder
    Join Date
    Nov 2013
    Posts
    33
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Did you look at that link about specificity?
    Do you read my post about specificity?

    If I did not read your link then how would I know that my score is a 470? I can not get more specific then I am. Look I even went back to the html tag... Also notice that the background one works but the color does not thus indicating that it is not an issue with my selector or both of them would not work, right?

    Specificity Score = 470
    Code:
    html.js body.page div#outer-wrap div#inner-wrap div.main-wrapper div.container div.header-wrapper div.navigation-wrapper nav#navigation ul#menu-default-header.navigation
    I can not change or edit any of the existing HTML or CSS, the only thing that I can do is to use custom css that over writes the things. The issue is that when the person that made the theme made it he made it as specific as he could. This will should you that I can not change anything thus I hope showing you I am not a moron.

    Screenshot of my editing panel.
    Screenshot of my editing panel 2.
    Last edited by xris; 03-09-2014 at 12:07 AM.

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    [QUOTE=xris;1389502]

    If I did not read your link then how would I know that my score is a 470? [\QUOTE]

    Sorry I didn't read your post.
    It helps a lot that you fixed the link. Up to now, it's just been a guessing game. Using FireFox, once I remove conflicting CSS, this seems to work fine on my end -
    Code:
    li.current-menu-item a {
    background: #00f;
    color: #f00;
    }
    li.menu-item a {
    background: #f00;
    color: #00f;
    }
    Now, whether you're able to remove it with your limited editing ability is more of a WP question than an HTML/CSS question.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    New Coder
    Join Date
    Nov 2013
    Posts
    33
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Nope that did not work...its even worse now...lol. There has to be some way to do this in word press its a stupid menu that I could program in 15 minutes from nothing myself. Mind you I have not done any websites since 2001 but I thought WP was meant to make things easier and that even some large companies are using it. It does not seem easy when you can not even set the colors of menus, it starting to look like they are trying to dumb down the internet like they did Windows.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •