BUILDER – How to Change Navigation Tab Colors for Custom Layout

[elliscain]

I created a custom layout using the Builder feature in the theme Akita (The Theme which I LOVE). I’d really like to make the light gray colored ajax looking tabs after the slider stand out more with a bold red color. I’ve searched and searched through the theme CSS and/or asset images. I can not find this light gray color anywhere. Can you please point me to the right file or css code to change so that the navigation tabs (Home, Research DBs, Reading Recommendations…) can be changed to a different color. Here is my example URL for one of my custom layouts using the Builder feature:

http://indianhillschools.org/hs/for-students-parents/learning-commons-media-center/

THANK YOU!
Jennifer

Topic

[Jason Bobich]

Hello Jennifer,

Make sure you’re not trying to dig through actual theme assets to make changes like this. 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.

For example, using our inspector, we can see that these are some of the selectors currently being utilized which you could override from your own custom CSS:

/* Active tab */
.tb-tabs-framed .tab-nav ul li.active a {
	...
}

/* Non-active tabs */
.tb-tabs-framed .tab-nav ul li a {
	...
}

Trust me, learn how to use either Firebug or the Inspector built into Chrome. Your life will change! 😉

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.

=====

Also you may want to note moving forward that a couple months ago a very large update was released and you’re currently using the older version. I would suggest looking into updating moving forward before you get too crazy into making customizations like this.

Here’s the updated demo:

http://demoblvd.com/themes/alyeska/

Here’s the changelog of everything that changed in the update (see 3.0.0):

http://themeblvd.com/changelog?theme=alyeska

And here’s an outline you can skim that outlines everything you need to be aware of that is different in the way the theme works:

http://support.themeblvd.com/updating-to-framework-v2-3/

Here’s a video that will walk you through the basics of updating a WordPress theme:

https://vimeo.com/41533135

And then moving forward from this update, you can setup updates to stream through your WordPress admin:

http://support.themeblvd.com/docs/theme-updates/#themeforest

[Author]

Replies