WordPress.org

Forums

Tabby Responsive Tabs
[resolved] Active color issue (10 posts)

  1. Mika Kaltoft
    Member
    Posted 1 year ago #

    Hi,

    Great plugin!!

    I would like to change the active tab-title color. I have changed the color of the tabs title to #fff, which works fine. However, even after using all my css tricks, I can't get the active color to #000.

    Can you help me out?

    You can see my clients website here: http://col323webdesign.dk/ivan/ (especially under the section TERAPI and TIL FAGFOLK.

    Thanks a lot!
    Sincerely,
    Mika

    https://wordpress.org/plugins/tabby-responsive-tabs/

  2. cubecolour
    ɹoʇɐɹǝpoɯ
    Plugin Author

    Posted 1 year ago #

    This appears to be caused by {color:#fff!important;} in your child theme stylesheet at:
    http://col323webdesign.dk/ivan/wp-content/themes/minimable-premium-child/style.css

    To see that this is the cause, change the #fff to #bada55

  3. Mika Kaltoft
    Member
    Posted 1 year ago #

    Hey there,

    Thanks for the reply and the answer to the issue.

    How can I change the overall title color to white but keep the active color black?

    Thanks,
    Mika

  4. cubecolour
    ɹoʇɐɹǝpoɯ
    Plugin Author

    Posted 1 year ago #

    What you have at the moment is unnecessarily complicated because you are overriding the default rules with the !important declaration instead of increasing specificity.

    You need to follow the instructions on the plugin page to unhook the stylesheet that is added by the plugin and then copy the contents of the stylesheet to your child theme custom styles and make changes to that.

    Once you have that in place, you should be able to achieve the style you have described with something like:

    .responsive-tabs .responsive-tabs__list__item {
    	color: #fff;
    }
    
    .responsive-tabs .responsive-tabs__list__item--active {
    	color: #000;
    }
  5. Mika Kaltoft
    Member
    Posted 1 year ago #

    Hi there,

    Great, I will have to look into the documentation.

    The reason why I have specified the css with this code:

    li#tablist2-tab1, li#tablist2-tab2, li#tablist2-tab3, li#tablist2-tab4, li#tablist2-tab5, li#tablist2-tab6, li#tablist2-tab7,  li#tablist2-tab8, li#tablist2-tab9, li#tablist2-tab10, li#tablist2-tab11, li#tablist4-tab1, li#tablist4-tab2, li#tablist4-tab3, li#tablist4-tab4, li#tablist4-tab5 {
    	color: #fff !important;
    }

    Is simple because I want to target certain tab-lists and certain tabs in those lists.

    If I apply the code as you have described it, it will make a general rule to all the lists on the page, however, since my background changes on some sections where the tabs are enabled, I need to be able keep the default colors for these sections and then change the styling for the other sections. Make sense?

    Sincerely,
    Mika

  6. cubecolour
    ɹoʇɐɹǝpoɯ
    Plugin Author

    Posted 1 year ago #

    You can usethe css rules I posted above as a starting point and adapt them to increase their specificity to enable you to target the specific tabgroups as you have mentioned.

    If you unhooked the default styles as outlined in the documentation you won't need the !important declaration

  7. Mika Kaltoft
    Member
    Posted 1 year ago #

    I will take a look at it!

    Thanks!

  8. Mika Kaltoft
    Member
    Posted 1 year ago #

    Please take a look at my clients website: http://col323webdesign.dk/ivan/

    As you can see, it didn't work.

    Whenever I add this function: <?php remove_action('wp_print_styles', 'cc_tabby_css', 30); ?>

    It doesn't respond to the css which is placed in my child themes css folder.

    Any suggestions?

    Sincerely,
    Mika

  9. cubecolour
    ɹoʇɐɹǝpoɯ
    Plugin Author

    Posted 1 year ago #

    It looks like its working from here - the default stylesheet doesn't seem to be loading and the tabs look pretty much as you described you want them to look

  10. Mika Kaltoft
    Member
    Posted 1 year ago #

    Hmm, I will see if I'm having a cache issue.

    I will get back to you :-)

    Sincerely,
    Mika

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Tabby Responsive Tabs
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic

Tags