WordPress.org

Ready to get started?Download WordPress

Forums

Magazine Basic
[resolved] Part of child style.css being over-rode by parent (11 posts)

  1. cbridges
    Member
    Posted 1 year ago #

    Hi all,
    I am using the magazine basic theme. I have a child theme created and am using a child style.css file. This file imports the style.css from the parent and then I make any style changes I want in the child style.css. All of the changes are working except for the changes to the navigation menu. I am trying to change the color of the navigation menu, however the color keeps reverting back to the parent style.css. I copied the entire navigation area from the parent style.css to the child file so I made sure I had everything. Here is a link to my first page of the test site.

    I tried adding !important to the areas that I changed the color but that did not work either. I can't figure out why the parent style.css is overriding my changes.

    Any help would be greatly appreciated. Thank You!

  2. c.bavota
    Member
    Theme Author

    Posted 1 year ago #

    Some CSS may require the use of the !important declaration. You can read about it here: http://bavotasan.com/2009/how-to-use-the-important-declaration-in-css/

  3. cbridges
    Member
    Posted 1 year ago #

    Thanks for your reply. I have tried using the !important declaration but it doesn't seem be working. Below is the code for the site navigation that I copied from the parent theme and changed in my custom css (using important declaration). When viewing the site using Chrome's element inspector, I can copy the code below and put it into the element inspector and the navigation color changes as it should. However, when viewing my test site normally, the navigation menu colors are the default black. Could you glance at the code below and see if you see anything? I didn't actually link the site above so here is a link test site
    Thank you!

    [ 304 lines of CSS moderated. Please just post a link to your CSS directly. ]

  4. c.bavota
    Member
    Theme Author

    Posted 1 year ago #

    What CSS selector are you using to change the color?

  5. cbridges
    Member
    Posted 1 year ago #

    I am using the following selectors. Along with the following I also have copied the rest of the main navigation CSS but these are the ones I have changed.

    #site-navigation,
    #site-sub-navigation {
    	background: #2d4262 !important;
    	}
    #site-navigation li:hover {
    	background: #456596 !Important;
    	}
    #site-navigation ul ul,
    #site-sub-navigation ul ul {
    	background: #2d4262 important;
    	}
    #site-sub-navigation li li:hover {
             background: #2d4262 !Important;
    	}

    Thanks

  6. Gilbert
    Member
    Posted 1 year ago #

    Try not to capitalize the "!important" CSS declaration.
    See '!important' rules on W3C

  7. cbridges
    Member
    Posted 1 year ago #

    I removed the capitals and that still didn't work. I have no idea whats going on. I can't figure out why I can change it in google's element inspector using this code but not in my theme itself.

  8. cbridges
    Member
    Posted 1 year ago #

    After doing some more looking....it appears that any changes I would like to make to the child style.css are being over rode by the parent if the same selector is in the parent style.css. If I am adding new or unique selectors to the child style.css (say to change a plugin appearance), those work. However, if the same selector is in the parent and child (e.g, #site-sub-navigation{} or .widget {} ), the parent selector seems to take precedence. I noticed this because I tried to change the background color of the .widget {} selector so I created the same selector in my child style.css and made the changes, however the background did not change.
    Thanks!

  9. Gilbert
    Member
    Posted 1 year ago #

    I have tested your CSS code on your child theme - /wp-content/themes/magazine-basic-child/style.css - and it was just fine. I don't see any problem there.

    #site-navigation, #site-sub-navigation {
        background: #2d4262;
    }
    #site-navigation li:hover {
        background: #456596;
    }
    #site-navigation ul ul, #site-sub-navigation ul ul {
        background: #2d4262;
    }
    #site-sub-navigation li li:hover {
        background: #2d4262;
    }

    No "!important" declaration needed. Your child style.css is overwriting the MB style.css
    Check for other issues, like this double hash ##:
    .blue {background-color: ##00688B; ... }

  10. cbridges
    Member
    Posted 1 year ago #

    Gilbert,
    Thank you very much! I reviewed the css again (for about the 3rd time:) I have been overlooking the closing } after my last column shortcode css. This is listed just prior to my code for the navigation menu and was causing all of the problems.
    Thanks everyone for the help! I am new to WordPress so I'm sure I will be back with more questions.

  11. mydragoon_ecig
    Member
    Posted 5 months ago #

    it does not work for me on my blog myDragooN. Is anyone can tell me where it comes from.
    thank you very much.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.