Changing color of menu buttons

[oest]

hi there, I would like to be able to customise the colors of the top menu buttons beyond the presets that are offered by the theme. Could you tell me where the css and scripts are located so i can make this change? I want to use green but the one offered is too “vibrant” for the website theme.

Topic

[Jason Bobich]

Hello,

As always, you shouldn’t be digging through any files to change any CSS or images. You should be writing your custom CSS that overrides from your Child theme. You should be using some kind of inspector to locate the proper styles to edit and you can find PSD source images for the menu buttons in your download package.

==========

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.

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.

[oest]

Thanks Jason, will be looking into the PSD files and using the custom css in child theme to do the modifications. Sounds fairly straightforward enough. Will be looking at your tutorial with using firebug – i still haven’t quite got a handle on that yet.. Editing the css in the child theme has little to no affect to overide parent theme styles i have found (in many themes) but using custom css does get the results that i need. You previously told me that if i used custom css on the child theme, that any future updates should not affect this custom css as it is related to the child theme – would this be correct?

Thanks

[Jason Bobich]

Yes, this is correct. When you update the Parent theme everything in the Child theme remains as-is. The only time things may be effected is if possibly something in the Parent theme actually changed that directly effects what you did your Child theme.

[oest]

Changing the PNG files was the go. no need for script changes although i did edit your color.css to take out colors that are not needed to increase load time.

[Jason Bobich]

Yeah, so that’s going to be an issue when you try to update the theme. This is why you should make these CSS edits from your Child theme. You can just as easily do it there. Just copy the code you changed to your Child theme’s custom.css and make sure whatever images you’re referencing have the correct file path in your Child theme relative to the CSS in your custom.css file.

[Author]

Replies