Formating the "[tab]" shortcode

  • paulo.tebet

    (@paulotebet)


    9 years, 9 months ago

    I am using the [tab] shortcode to create my FAQ page.

    FAQ
    There is only a minor issue with this implementation. The selected Tab seems out of place in terms of design. The unselected tabs are using my accent color and on hoover it is changing.

    But when I select a tab, it shows Black font on white background…. 🙁

    Is there a way for me to control the background and font color for this?

    Regards.

    Paulo Tebet

Viewing 4 replies - 1 through 4 (of 4 total)
  • Ben Ritner – Kadence WP

    (@britner)

    9 years, 9 months ago

    .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover {
    color: white;
    background: blue;
}

    That is your active tab ^

    .nav-tabs>li>a:hover {
    color: green;
    background: yellow;
}

    ^^ Thats hover

    .nav-tabs>li>a {
    background: white;
    color: black;
}

    And thats your css for standard.

    Kadence Themes

    Thread Starter paulo.tebet

    (@paulotebet)

    9 years, 9 months ago

    Thank you so very much!

    Regards.

    Paulo Tebet

    Thread Starter paulo.tebet

    (@paulotebet)

    9 years, 9 months ago

    It looks like that there is a 4th state, because even with the following code (which doesn´t contains black) I am having a state for the tabs that is using black on white background in FAQ page

    On page load, click on a tab and then move the cursor to other tab and the one just clicked becomes Black on White.

    .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover {
    color: #c688e2;
    background: #fafafa;
}

.nav-tabs>li>a:hover {
    color: white;
    background: #599fb4;
}

.nav-tabs>li>a {
    background: #c688e2;
    color: #fafafa;
}

    Regards,

    Paulo Tebet

    Ben Ritner – Kadence WP

    (@britner)

    9 years, 9 months ago

    .nav-tabs>li.active>a:focus {
color: #c688e2;
    background: #fafafa;
}

    Kadence Themes

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Formating the "[tab]" shortcode’ is closed to new replies.