Home / Forums / DynamiX Support / How to Change the Active Tab Color?

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts

  • Rebecca
    Participant

    Hi there Andy, it’s me again!

    Hopefully this is a small and easy question, but how does one change the color of an active tab…just the tab part?

    I have a tab set up on this page: http://www.presby.edu/library/

    and they are saying it’s a bit confusing being that nothing “lights up to show what tab you are really on”….

    Thank you sooooo much!!!

    -Rebecca

    Andy
    Andy
    Keymaster

    Hi Rebecca,

    You could try making the link bold when it’s clicked on. Try adding the following to Appearance > Theme options > customize > custom CSS

    li.ui-state-default.ui-corner-top.ui-tabs-active.ui-state-active a {
    font-weight: bold;
    }


    Rebecca
    Participant

    Thanks for the reply!

    I tried that code, but nothing seemed to happen to the tabs….(tried a few browsers to make sure things weren’t cached).

    We’re still working with the Dynamix theme for this one.

    any other ideas?

    -Rebecca


    Rebecca
    Participant

    D’oh!!! My bad!

    I put a . in front of that bit of code….when I removed the . it worked!

    I will ask to see if they will go with the bolding…but I have a bad feeling they will want the color change bit, if possible?

    Thank you thank you thank you!!!

    -Rebecca

    Andy
    Andy
    Keymaster

    Hi Rebecca,

    Same CSS reference, just change to the following ( change the color accordingly ):

    li.ui-state-default.ui-corner-top.ui-tabs-active.ui-state-active a {
    color: #000;
    }


    Rebecca
    Participant

    hmmm, tried that, and put in the hex code for the color they wanted, but the tab part of the tabs block did not change color…..

    Andy
    Andy
    Keymaster

    Hi,

    Try :

    li.ui-state-default.ui-corner-top.ui-tabs-active.ui-state-active a {
    color: #000 !important;
    }

    If that doesn’t work, please post a link with the code applied and I’ll see what maybe preventing it from working.


    Rebecca
    Participant

    hmmm, nope, same issue…… no color change….

    This is what we have in the css custom atm:

    .wpb_wrapper > ul.ui-tabs li {list-style:none;}

    li.ui-state-default.ui-corner-top.ui-tabs-active.ui-state-active a {font-weight: bold;}

    .shadow.top.custom-layer {display:none;}
    .post-titles h1 {display: none;}
    .menu-highlight {top:0 !important;}
    #nv-tabs .menubreak:first-child {display:none;}
    #header {margin-bottom: 0px;}
    span.dropmenu-icon {display:none !important;}
    #menu-item-743 .menutitle {color: #f85555 !important;}
    #primary-wrapper .skinset-main {-moz-border-radius: 0 !important;-webkit-border-radius: 0 !important;border-radius: 0 !important;}
    .skinset-background .widget.widget_nav_menu li a {color: #0060a9;}

    .widget_nav_menu li a, .widget ul.menu li a, body select {background-image: none;}

    .mid ul li {list-stlye-type: none;}

    .widget_nav_menu li a, .widget ul.menu li a, body select {background-image: none !important;}

    span.dropmenu-icon {display:none !important;}

    .widget_nav_menu li a, .widget ul.menu li a, body select {background-image: none;}

    .divider-medium .widget_nav_menu li, .divider-medium .widget ul.menu li, .divider-medium .widget_nav_menu ul, .divider-medium .widget ul.menu {background: none !important;}

    Thanks for your help with this!! I really appreciate it!!!!

    -Rebecca

    Andy
    Andy
    Keymaster

    Hi Rebecca,

    I’d need you to add this bit of CSS so i can see what is overriding it:

    li.ui-state-default.ui-corner-top.ui-tabs-active.ui-state-active a {
    color: #000 !important;
    }

    It maybe best if I had your WP login details too, I’ll be able to test it.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.