Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #23273

    Hi,

    is it possible to have a different color for each toggle/tab?

    is it possible to have tabs within toggles?

    #119167

    Hi,

    Yes. Each tab has a unique selector you can target that is enumerated

    tab_counter_1

    so you would target each one like

    #top .tab_counter_1{
    background-color: red;
    }
    #top .tab_counter_2{
    background-color: blue;
    }

    =================

    I know for a fact that toggles can go inside tabs and now i tested and indeed tabs can go inside toggles http://www.clipular.com/c?5467048=oV3jP3PzTlJi-zdAhjACXX1_8ak&f=.png

    You would create a shortcode for tabs , copy it into Advanced Layout Editor and paste into toggle.

    Thanks,

    Nick

    #119168

    I tried a few thing but it didn’t work. What do I have to put in QuickCSS instead of this for toggles with different colors?

    .js_active .toggler {

    background-color: #1994e6;

    color: #fff;

    }

    #119169

    Hi,

    You can style them like this

    /* Style for the first toggle */
    div.toggler {
    background-color: yellow !important;
    border: 1px solid #EEE;
    }

    /* Style for the second toggle */
    div.toggler:nth-child(3) {
    background-color: green !important;
    border: 1px solid #EEE;
    }

    /* Style for the third toggle */
    div.toggler:nth-child(5) {
    background-color: blue !important;
    border: 1px solid #EEE;
    }

    /* Style for the fourth toggle */
    div.toggler:nth-child(7) {
    background-color: pink !important;
    border: 1px solid #EEE;
    }

    Regards,

    Ismael

    #119170

    Thanks, that worked. How do you make changes to the font (ie bold, color)?

    #119171

    Hi,

    You can use this.

    /* Style for the first toggle */
    div.toggler {
    background-color: yellow !important;
    border: 1px solid #EEE;
    font-weight: bold;
    color: red;
    }

    /* Style for the second toggle */
    div.toggler:nth-child(3) {
    background-color: green !important;
    border: 1px solid #EEE;
    font-weight: bold;
    color: gray;
    }

    /* Style for the third toggle */
    div.toggler:nth-child(5) {
    background-color: blue !important;
    border: 1px solid #EEE;
    font-weight: normal;
    text-decoration: line-through;
    color: #FC0;
    }

    /* Style for the fourth toggle */
    div.toggler:nth-child(7) {
    background-color: pink !important;
    font-style: italic;
    border: 1px solid #EEE;
    }

    Regards,

    Ismael

    #119172

    perfect thanks!

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

The topic ‘Toggle Colors’ is closed to new replies.