WordPress.org

Ready to get started?Download WordPress

Forums

Squelch Tabs and Accordions Shortcodes
[resolved] Tab Titles Font Color - Active and Hover (9 posts)

  1. mineralman
    Member
    Posted 1 year ago #

    Hey Matt,

    I was wondering, as the title indicates, if the plugin has the ability for the tab titles to have an active tab font color and a hover tab font color. Quite similar to menus?

    I know the actual tab BG uses a white (active) and light grey (inactive) tab shading, which I believe can be adjusted as desired.

    Seems the example here does that have that ability, maybe I just missed it in the documentation. I'll look again.

    Just thought I would ask. Icons, Hover color.... now that would be some "top drawer" stuff there.

    "Tip of the hat" to you for this plugin!

    http://wordpress.org/extend/plugins/squelch-tabs-and-accordions-shortcodes/

  2. Matt Lowe
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  3. mineralman
    Member
    Posted 1 year ago #

    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

  4. Matt Lowe
    Member
    Plugin Author

    Posted 1 year ago #

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

    Here's an example I just rolled: http://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: http://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.

  5. mineralman
    Member
    Posted 1 year ago #

    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!

  6. Matt Lowe
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  7. mineralman
    Member
    Posted 1 year ago #

    Learn something new every day!

    Thanks again!

  8. mariz_p
    Member
    Posted 1 year ago #

    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: http://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

  9. Matt Lowe
    Member
    Plugin Author

    Posted 1 year ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic