Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • December 3, 2015 at 5:41 pm #546541
    Stephenvato

    Hi Enfold Team,

    I have created a custom class for 1 of my accordion (named “SB-Accord-3Actions”) and have added the following code to Quick CSS:

    .SB-Accord-3Actions .toggler { background-color:#ffffff; color: #24c1b7; font-size: 1.2em; }
    .SB-Accord-3Actions .toggler:hover { background-color: #53dfd5; color: #ffffff; }
    .SB-Accord-3Actions .toggler.activeTitle { background-color: #53dfd5; color: #ffffff; }
    .SB-Accord-3Actions .toggler.activeTitle:hover { background-color: #53dfd5; color: #eafbfa }
    .SB-Accord-3Actions .toggle_content { background: white; }

    All this above works well but there are 3 titles in my accordion and I would like to customize a little bit more each toggler by giving a different font color to each of them 3 (only title).
    I thought I could access each of them by the following:

    #toggle-id-1 .SB-Accord-3Actions .toggler { color: …}
    #toggle-id-2 .SB-Accord-3Actions .toggler { color: …}
    #toggle-id-3 .SB-Accord-3Actions .toggler { color: …}

    But this doen not work…
    Any idea on how I can get access to each toggle ID specifically?

    Thanks in advance for your help!
    Steph.

    December 3, 2015 at 5:43 pm #546548
    Yigit

    Hi Steph!

    Can you please post the link to your page so we can provide you an accurate custom CSS code?

    Best regards,
    Yigit

    December 3, 2015 at 5:56 pm #546565
    Stephenvato

    Hi Yigit and thanks for your quick reply!
    The accordion is on the home page.

    Regards,
    Steph.

    December 3, 2015 at 6:15 pm #546576
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    p.toggler[data-fake-id="#toggle-id-3"] {
    color: blue;
}
p.toggler[data-fake-id="#toggle-id-2"] {
    color: red;
}
p.toggler[data-fake-id="#toggle-id-1"] {
    color: orange;
}

    Cheers!
    Yigit

    December 3, 2015 at 7:16 pm #546602
    Stephenvato

    Awesome Yigit!
    Thanks a lot for your support.
    This topic can now be closed.

    Regards,
    Steph.

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Accordion customization’ is closed to new replies.