Tagged: 

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • February 25, 2015 at 8:11 pm #402319
    slui

    Hi,

    I would like to know how to change the color of the accordion tabs:

    #1 – When the tab is ACTIVE – I would like the background to be white and the TEXT to be green
    #2 – When the tab is INACTIVE – I would like the background of the TAB header (e.g. Colors Available, Sizes) to be green color.

    February 26, 2015 at 11:28 am #402576
    Rikard

    Hey slui!

    Please try to add this to your Quick CSS:

    .main_color .tabcontainer .active_tab_content, div .main_color .tabcontainer .active_tab {
background-color: white;
color: green;
}

.tab {
background: green;
}

    Regards,
    Rikard

    • This reply was modified 9 years, 8 months ago by Rikard.
    February 26, 2015 at 8:00 pm #402944
    slui

    Hi,

    This is code that I use now.

    .main_color .tabcontainer, div .main_color .tabcontainer .tab {
    background-color: #86c62a;
    color: green !important;
    font-size: 16px;
    }

    .main_color .tabcontainer .active_tab_content, div .main_color .tabcontainer .active_tab {
    background-color: white !important;
    color: #86c62a;
    }

    I would like to know how to make the text white for the INACTIVE tab titles.

    sl

    February 27, 2015 at 7:56 am #403224
    Rikard

    Hey!

    Please change color to white instead of green in your first CSS block.

    Regards,
    Rikard

    March 3, 2015 at 7:45 pm #405353
    slui

    Hi,

    Thanks that still works. However, I need the active tab content to be a white background and not grey.

    Please view the URL to see what I’m discussing.

    sl

    March 3, 2015 at 7:52 pm #405361
    Yigit

    Hi!

    Please add following code to Quick CSS as well

    .active_tab_content {
background-color: white!important;
}

    Cheers!
    Yigit

    August 31, 2017 at 6:17 am #846078
    theplattrust

    Hi there!
    Just wanted to piggyback off this has I have a similar query.
    Is it possible to set colours for each individual tab?
    Ive used this QSS and tried to adjust it, but it adjusts the accordion as a whole, whereas I would like each tab title to be a different color.

    Thanks

    September 1, 2017 at 6:45 am #846619
    Rikard

    Hi,

    Please try the following in Quick CSS under Enfold->General Styling:

    .single_toggle [data-fake-id=#toggle-id-1] {
  background-color:green !important;
}

    Best regards,
    Rikard

    September 7, 2017 at 9:15 am #848968
    theplattrust

    Hi Rikard
    I tried that but it had no effect at all.
    Is this possible to do?

    Thanks
    Tim

    September 9, 2017 at 4:49 am #849812
    Ismael

    Hi,

    Please try this css code instead:

    .main_color .toggler[data-fake-id="#toggle-id-1"] {
    background-color: red;
    color: blue;
}

.main_color .toggler[data-fake-id="#toggle-id-2"] {
    background-color: blue;
    color: blue;
}

.main_color .toggler[data-fake-id="#toggle-id-3"] {
    background-color: green;
    color: orange;
}

    It should change the color of the first, second and third tab.

    Best regards,
    Ismael

    September 12, 2017 at 9:27 am #850899
    theplattrust

    Hi Ismael,
    This also had no effect. I thought perhaps I needed to give that specific accordion tab a class, which is pr1tab

    Is there something I am doing wrong?

    .main_color .pr1tab[data-fake-id="#toggle-id-1"] {
   background-color: red;
   color: blue;
}

.main_color .pr1tab[data-fake-id="#toggle-id-2"] {
   background-color: blue;
   color: blue;
}

.main_color .pr1tab[data-fake-id="#toggle-id-3"] {
   background-color: green;
   color: orange;
}
    September 12, 2017 at 9:32 am #850905
    Ismael

    Hi,

    What is “pr1tab”? Please use the “.toggler” selector. If you’re using the custom css class attribute, use this.

    .main_color .pr1tab .toggler[data-fake-id="#toggle-id-3"] {
    background-color: green;
    color: orange;
}

    That code should change the background and color of the third toggle.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.