Each navigation tab a different color?

[klapinig]

Hi! Just made the purchase, and while I’m ok with CSS (although new to WordPress).. I’m trying to figure out how to change each individual tab at the top to not be transparent and to be a distinct color. Basically, I’m trying to mimic the top of my main website (mametchi.com) as much as possible. I’m guessing I’ll have to manually change the CSS after creating each tab since each tab will have a unique ID? How can I go about this? Thanks!

Topic

[Jason Bobich]

Hello,

For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme or in the “Custom CSS” option on your theme options page.

When WordPress outputs the menu, if you inspect it, you’ll see it gives you all kinds of classes you can use to do whatever custom styling you can think of. WordPress appends these classes to the list items and the theme targets the anchor tags of the menu’s list items.

#access li.menu-item-832 > a { background: ...; }
#access li.menu-item-833 > a { background: ...; }
#access li.menu-item-834 > a { background: ...; }
#access li.menu-item-835 > a { background: ...; }
#access li.menu-item-836 > a { background: ...; }

=========

Also, here’s a helpful tutorial on how to use Firebug – http://vimeo.com/20917974. The only thing I’d suggest not doing is actually making edits to the theme’s CSS files, as it shows at the end of that video. However, the video serves as a good introduction to Firebug and how it can be used to find what CSS is effecting certain areas of your site without ever digging around in any files.

[klapinig]

Thanks! I’m trying it out right now. Firebug is really useful, but why is it some changes I make aren’t working when I bring them over to edit into my child theme’s stylesheet?

For example, I wanted to adjust the height of the header’s general area:

#branding #header_content {
position: absolute;
padding: 0px 325px 0px 20px;
}

#top #branding .content #access .content {
padding: 100px 0px 0px 0px;
}

I made it 720px so that the social media icons can go back on the right side. When viewing it in Firefox/Firebug, it looks exactly how I want it to be. I bring over that code, but nothing happens in the actual save. At this point is it okay to just go into the parent’s theme and edit the CSS where that code is located? I also tried doing the same for the width of the thick line between the menu and content, but I ultimately just directly edited the parent’s CSS – I know that’s not suggested though.. but it works. Am I doing something wrong in the child theme?

Thanks again for your help and patience!

• This reply was modified 8 years, 5 months ago by klapinig.
• This reply was modified 8 years, 5 months ago by Jason Bobich.

[Jason Bobich]

At this point is it okay to just go into the parent’s theme and edit the CSS where that code is located?

Trust me. Don’t do this. It’s going to make your life a mess down the road. If you can’t get the style overrides to work in your Child theme, it means you’re just misunderstanding something simple. Can I see a live link to the site you’re working on so I can see how you’re doing it?

[klapinig]

http://keithlapinig.com/blog/

[Jason Bobich]

All right so the issue is that you’re putting your custom CSS into style.css of your Child theme. It’s totally understandable why you’d do this, but this is the problem with this theme. In the process of loading the CSS files, you have:

1) style.css
2) framework styles
3) theme styles

So, when you put something in style.css, you have the theme’s styles still coming after it. In the sample Child theme that came with the theme, there is a file setup for you here: /assets/css/custom.css

If you look in functions.php of the sample Child theme, you can see how this has been incorporated. This CSS file is setup to come after all other CSS. So, you want to put your CSS overrides in this custom.css.

Give this video a quick watch, and it will explain all this in more detail: http://vimeo.com/41331677

[Author]

Replies