Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #1045366

    I am trying to apply toggle ids and also style the icon to be one color and the text another…

    .my-custom-class .toggle_icon { color: #ffffff !important; background: #00aeef !important; }
    .my-custom-class .toggle_icon { color: #ffffff; background: #ed4f3e; }
    .my-custom-class-2 .toggler, .my-custom-class .toggler { font-size: 18px; font-weight: 600; color: #222222; }

    But the toggle ids (something I’ve done many other times) don’t work and neither do the custom styles I’m trying to apply?


    Hey lzevon,

    I have checked your site, and could see your css code working effectively:

    .the-nine-topics .toggle_icon {
        padding: 2px;
        color: #ffffff !important;
        background: #00aeef !important;

    but since you mentioned ids, maybe this selector can help:

    .the-nine-topics [data-fake-id="#toggle-id-1"] .toggle_icon {
      //css code here

    Best regards,


    I still can’t see the padding and formatting I’m trying to achieve with everything I can think of (border-spacing, padding, margins, etc)? The imgur link shows how I want the ‘+’ centered and not so bold (I set the border-width which helped) – any suggestions?


    Hi lzevon,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    #top .toggle_icon .vert_icon,
    #top .toggle_icon .hor_icon {
        border-width: 1px;
    #top .toggle_icon .hor_icon {
        top: 8px;

    If you need further assistance please let us know.

    Best regards,

Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Accordions custom toggle ids and css not working’ is closed to new replies.