Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • May 23, 2016 at 4:18 pm #636911
    eKMUch

    Dear Kriesi,

    We’re using the akkordeon feature on the page indicated in the private content and we’re very happy about this feature. However, we would like to have an individual background color for each toggle-title, in order to give the page a more colorfulness to the page. It should look something similar like this: http://prntscr.com/b7fzd8

    I have activated custom css for akkordeon but couldn’t find a solution in the forum. Would you have a solution for this?

    Thank you and all the best,
    Raphael

    May 24, 2016 at 7:09 am #637280
    Vinay

    Hey eKMUch,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    Add as many nth-childs 4,5,6, to color the rest of the tabs.

    .av_toggle_section:nth-child(1) .toggler, .av_toggle_section:nth-child(1) .toggler:hover {
background: red!important;
}

.av_toggle_section:nth-child(2) .toggler, .av_toggle_section:nth-child(2) .toggler:hover {
background: gold!important;
}

.av_toggle_section:nth-child(3) .toggler, .av_toggle_section:nth-child(3) .toggler:hover {
background: green!important;
}


    Best regards,
    Vinay

    May 24, 2016 at 2:43 pm #637497
    eKMUch

    Dear Vinay,

    This looks great, thank you, I’ll test it right away. Two questions however:

    1) Does this then change the color of all Toggle Elements (also on other pages of the site) or just the one under the respective link? It should only apply to the one Toggle (Akkordeon) element.

    2) Can I enter RGB or Hex Color code?

    Thank you very much and all the best,
    Raphael

    May 24, 2016 at 3:25 pm #637522
    Vinay

    Hi,

    Yes this will affect all toggle elements, however it’s very easy to contain the changes to a specific element by enabling custom class support and adding your own class name to the accordion element.

    Turn on Custom CSS Class field for all ALB Elements

    Best regards,
    Vinay

    June 6, 2016 at 12:39 pm #643423
    eKMUch

    Hi Vinay,

    Thank you very much, this worked nicely.

    However, regarding the second question, do you know if there is a way to use RGB or Hex Color code instead of “red” and “green”?

    Thanks,
    Raphael

    June 6, 2016 at 1:10 pm #643437
    Yigit

    Hi!

    Yes, please see following examples

    .av_toggle_section:nth-child(1) .toggler, .av_toggle_section:nth-child(1) .toggler:hover {
background: #000000 !important;
}
.av_toggle_section:nth-child(1) .toggler, .av_toggle_section:nth-child(1) .toggler:hover {
background: rgb(244,255,0) !important;
}

    Regards,
    Yigit

    June 6, 2016 at 1:39 pm #643444
    eKMUch

    Hi Yigit,

    Awesome, thank you very much.

    Best,
    Raphael

    June 7, 2016 at 5:40 am #643785
    Rikard

    Hi Raphael,

    Glad we could help, please let us know if you should need any more help on the topic.

    Best regards,
    Rikard

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