Tab Titles Font Color – Active and Hover

Hi, I think all of the provided jQuery UI themes already provide this functionality. But maybe I’m not fully understanding what it is you’re trying to do.

Using TABS , my goal is to have the active tab title – font color – RED, and have the font color of other tabs as you hover over them, RED. Black as a default color when not active or when not hovered over.

Mirroring the main menu above as seen on nutritionap.com

only exception being, with white TABS BG color comes black fonts, the menu is black with white fonts

Hi mineralman, if the theme you’re using isn’t quite right then you can tweak it over at the jQuery UI theme roller: https://jqueryui.com/themeroller/

Here’s an example I just rolled: https://bit.ly/12cRB0k You could do the same thing by selecting one of the existing themes and then just tweaking the clickable: default state, clickable: hover state, clickable: active state options.

You’d then need to download the generated theme and install it onto your website, link to the CSS and choose “No jQuery UI theme” from the options for Squelch Tabs and Accordions Shortcodes.

If you don’t want to go to those lengths then you should read the section “Tweaking the styles” in the docs: https://squelchdesign.com/wordpress-plugin-squelch-tabs-accordions-shortcodes/#squelch-taas-tab-group-2, specifically the section on tabs. Note the following style:

.squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-tabs-nav li.ui-tabs-active {
    /* Styles relating to the button of the currently open tab */
}

You’ll also need to style the .ui-state-hover class appropriately.

Thanks!

I tried to use the preferred method:

.squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-tabs-nav li.ui-tabs-active {color: #FF1C33;}

But, didnt seem take. So I ended up with:

#content .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {color: #FF1C33;}

#content .ui-state-hover a, .ui-state-hover a:link, .ui-state-hover a:visited {color: #FF1C33;}

I am not sure if its my code using the -override method that is at fault… or my theme getting in the way, but good ole CSS seems to work like it did in the 2nd support thread here for Modify BG color.

Thanks Again! Cheers!

You were applying the style to the li (li.ui-tabs-active) rather than the a. In your second example you’re applying the style to the a, which is correct. Using #content as the root of your selector is fine, but is dependent on your theme where as .squelch-taas-override is always applied to the root level of each of the Tabs and Accordions widgets and therefore portable. If you change your original example to…

.squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-tabs-nav li.ui-tabs-active a {color: #FF1C33;}

…you should find it then works.

Learn something new every day!

Thanks again!

Hi Matt,

Good day!

I just want to ask if you can resize the tab? Since in my site it’s kind of awkward to see it’s going down. Please refer to this link: https://twef.org/IFLS/register/#squelch-taas-accordion-shortcode-content-3 I have tried reading your documentation but just got to no luck. I am hoping for your kind response.

Thanks and have a great day ahead! Btw, great plugin! ??

Best regards,
Mariz

You should be able to tweak this in the CSS with something like:

.squelch-taas-override.ui-tabs .ui-tabs-nav li a,
.squelch-taas-override.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a {
    font-size: 0.65em;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

The problem is your tab titles are so long you have to make the font absolutely tiny to fit all of it in. I think you’d be better either not using tabs for this application, or re-thinking the names of the tabs. Something like: Registration | Sponsorship | Luncheon | Tickets.