WordPress.org

Forums

Elbee Elgee
Menu and Link COlors (12 posts)

  1. calpolyjalumni
    Member
    Posted 2 years ago #

    I would like to change the menu colors (including sidebar widgets, etc.) as well as the link color. I'm just learning CSS, and the child themes threw me for a loop.

    Any help would be fantastic, thank you.

  2. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    - Open your website in Google Chrome,
    - Right click on the element you want to colour,
    - Select 'Inspect element',
    - A new toolbar appears. Look to the right of it. Look at the CSS,
    - Find the CSS that applies the colour (scroll down if you need to),
    - Copy the found style,
    - Go to your Child Theme style.css file,
    - Paste,
    - Change colour.

    Rinse & repeat for other elements.

  3. calpolyjalumni
    Member
    Posted 2 years ago #

    It doesn't seem to want to work. Is it because my base stylesheet is ng.css?

  4. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    There could be many reasons why. Link the webpage with the issue.

  5. calpolyjalumni
    Member
    Posted 2 years ago #

  6. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    So what CSS did you add to your Child Theme regarding the colour changes?

  7. calpolyjalumni
    Member
    Posted 2 years ago #

    }
    
    a:link,
    a:visited{
    	color: #1a2955;
    	text-decoration: none;
    }
    
    }
    
    #lb-bp-nav ul.menu > li a:hover,
    #lb-bp-nav ul.menu > li a:active {
    	padding: 1em;
    	background: #29551a;
    	color: #fff;
    }
    
    div#menu,
    div.menu {
    	border-color:#29551a;
    	border-style: solid;
    	border-width: 1px 0 1px 0;
    	background-color: #29551a;
    	width: 100%;
    	margin: 0 auto;
    	float: none;
    
    }
    
    #menu a:active,
    #menu a:hover {
    	background: #fff;
    	color: #867754;
    }
    
    }
    
    .children li.current_page_item > a:link,
    .children li.current_page_item > a:visited,
    #lb-bp-nav ul.menu > li.current-menu-item a:link,
    #lb-bp-nav ul.menu > li.current-menu-item a:visited {
    	color: #000;
    }
    
    li.current_page_item a:hover,
    li.current_page_item a:active,
    #lb-bp-nav ul.menu > li.current-menu-item a:active,
    #lb-bp-nav ul.menu > li.current-menu-item a:hover {
    	background: #fff;
    	color: #867754;
    }
    
    }
    
    #primarysb h4,
    #secondarysb h4,
    #footerleft h4,
    #footerright h4 {
    	background-color: #29551a;
    	width: 97%;
    	color: #fff;
    	padding: 3px;
    	font-weight: bold;
    }
    
    div#footer {
    	background: #29551a;
    }
  8. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    Sorry, you need to be specific as to what style you added that is not working.

  9. calpolyjalumni
    Member
    Posted 2 years ago #

    I just added it to my Child's Theme style.css.

    Under my child theme's settings, I have ng.css selected as my Theme Stylesheet.

    Is that what you meant?

  10. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    I just don't understand your issue.

  11. calpolyjalumni
    Member
    Posted 2 years ago #

    Okay, so I tried again. Erased all the code on my Child's Theme style.css, so it's back to what is was when I downloaded it.

    I used the developer tools on Google Chrome. When I inspected the sidebar menu's gray bar ("Recent News"), I looked at the CSS (Under Matched CSS Rules) I saw this:

    media="screen"               mustangdaily.net
    #primary sb h4, #secondarysb h4,    ng.css:342
       background-color: #333;
       width 97%;
       color: #fff;
       padding: 3px;
    }

    I clicked on "ng.css:342" which opened up the CSS. Showing me this:

    }
    
    #primarysb h4,
    #secondarysb h4,
    #footerleft h4,
    #footerright h4 {
    	background-color: #333;
    	width: 97%;
    	color: #fff;
    	padding: 3px;
    }

    I changed 333 to 29551a and copied just that code onto my Child's Theme style.css.

    The change did not show up after I updated the file.

    So I was thinking it had to do with the ng.css.

  12. Doug
    Member
    Theme Author

    Posted 2 years ago #

    calpoly:
    First off: wow! The site looks great! Definitely one of my favorite implementations thus far.

    Specificity is weird in version 1.3.x. I'm working hard to fix this in 1.4, but the crux of your issue is that you'll need to out-specify ng.css in order to make your changes "take".

    It looks like, though, you figured it out.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic