Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • September 9, 2014 at 9:33 pm #316107
    djshortkut

    I need some help with changing the colors of the accordion toggle background and font color. I can’t seem to find where to do that anywhere so I assume I just need some Quick CSS

    When not active: I would like the text and plus icon to be white in the box, and the color of the box to be #4880b4 when not active
    On Hover I would like the text color and plus icon to change to black, and the color of the box to change to #2c5b9c
    When active: I would like the text and plus icon to be white in the box, and the color of the box to be #2c5b9c when active
    Dropdown box For the dropdown box I would like the background color to be #fcfcfc and the text can remain the same color as it is now.

    Thank you!

    September 10, 2014 at 4:28 am #316240
    Ismael

    Hi djshortkut!

    Thank you for using Enfold.

    Please use the following:

    Not Active

    .main_color .toggler {
background: #4880b4;
color: white;
}

    Hover

    .main_color .toggler:hover {
color: black;
background: #2c5b9c;
}

    Active:

    .toggler, .main_color .toggler.activeTitle:hover {
background: red;
color: white;
}

    Content:

    .main_color .toggle_content {
background: #fcfcfc;
}

    Regards,
    Ismael

    September 11, 2014 at 7:13 pm #317588
    djshortkut

    Thank you!

    How do I remove the border lines around the toggle title?

    September 11, 2014 at 7:16 pm #317591
    Yigit

    Hi!

    Please add following code to Quick CSS

    .js_active .toggler { border: none !important; }

    Regards,
    Yigit

    September 11, 2014 at 8:50 pm #317628
    djshortkut

    Thanks for the quick response Yigit!

    I need some more slight modifications. I changed up the color scheme a little bit and am having some issues.

    1. I want the plus icon to show up the same as the text color #666666 when not active
    2. When I hover my mouse over the open active title or open a toggle on a mobile device the blue background color #2c5b9c and white text go away. How do I get this to remain when I hover my mouse over the open active title or open one on a mobile device?

    Here’s the Quick CSS I have so far:

    .main_color .toggler {
background: #f1f1f1;
color: #666666;
}

.main_color .toggler:hover {
color: white;
background: #2c5b9c;
}

.toggler, .main_color .toggler.activeTitle {
background: #2c5b9c;
color: white;
}

.main_color .toggle_content {
background: white;
}
    September 12, 2014 at 4:17 am #317807
    Ismael

    Hi!

    1.) Please use this for the + icon:

    .toggle_icon .vert_icon, .toggle_icon .hor_icon, span.toggle_icon {
border-color: #666666;
}

    2.) Use this for the active tab:

    .main_color .toggler, .main_color .toggler.activeTitle:hover {
background: #2c5b9c !important;
color: white !important;
}

    Cheers!
    Ismael

    September 12, 2014 at 5:27 am #317837
    djshortkut

    Thank you for the awesome support as always! Resolved.

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