Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • December 18, 2019 at 12:20 am #1167050
    beachcitiescryo

    I would like to change the color options for a specific Accordion element instance. I would like the background color blue and the text white for both the title and content. How would I go about achieving this?

    December 19, 2019 at 10:11 pm #1167960
    Victoria

    Hey beachcitiescryo,

    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

    
.togglecontainer .single_toggle:first-child .toggler,
.togglecontainer .taglist + .single_toggle .toggler,
#top .main_color .toggle_content {
    background: blue;
    color: #fff;
    border: blue;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    December 19, 2019 at 10:45 pm #1167970
    beachcitiescryo

    Great, and how about I make this apply to only one instance of the widget?

    December 20, 2019 at 6:40 pm #1168257
    Victoria

    Hi beachcitiescryo,

    Yes, which one, on which page?

    Best regards,
    Victoria

    December 20, 2019 at 9:28 pm #1168331
    beachcitiescryo

    The element I’m trying to style will be on multiple pages in different sections. I’m giving the elements I want to change the class “blue-background”

    I added this to the code but it doesn’t seem to work. I also need the background color of the text title also to be blue and the text white. 

    #blue-background .togglecontainer .single_toggle:first-child .toggler,
.togglecontainer .taglist + .single_toggle .toggler,
#top .main_color .toggle_content {
    background: #206281;
    color: #fff;
    border: #206281;
}
    December 21, 2019 at 7:03 pm #1168487
    Victoria

    Hi beachcitiescryo,

    https://share.getcloudapp.com/nOumD5Og It is the class and not the id and so the css selector has to be:

    
.togglecontainer.blue-background .single_toggle:first-child .toggler,
.togglecontainer.blue-background .taglist + .single_toggle .toggler,
#top .main_color .blue-background .toggle_content {
    background: #206281;
    color: #fff;
    border: #206281;
}

    Best regards,
    Victoria

    December 23, 2019 at 8:53 pm #1168809
    beachcitiescryo

    How would I go about targeting the specific class? Im going to apply this to multiple accordion toggles on different pages so I need to be able to pick and choose which elements are this style. Some of the accordion toggles will also be the default style. I have already added the class to the sample page element as a test.

    December 24, 2019 at 12:00 am #1168830
    Yigit

    Hey!

    You can edit other accordion elements which should have the same styling and give them “blue-background” custom class as well.

    If that is not what you meant, please elaborate :)

    Regards,
    Yigit

    January 2, 2020 at 11:18 pm #1169209
    beachcitiescryo

    Hi Yigit,

    Sorry, I think there is some confusion. I want some of my accordion elements to be blue and other to be the default. I was trying to achieve this by giving the accordion elements I want blue a class. Victorias CSS makes all the accordion elements blue which I do not want. I was specific accordion elements to have those styles.

    January 3, 2020 at 8:35 am #1169252
    Vinay

    Hi,

    Thank you for writing to us.

    Please take a look at our documentation page we have several examples with code snippets listed here

    Accordion

    If you still have any questions please post a screenshot of the end result you are looking for so we can help you better :)

    Best regards,
    Vinay

    January 3, 2020 at 7:20 pm #1170105
    beachcitiescryo

    Hi Vinay, Thank you for that.

    January 4, 2020 at 6:15 am #1170187
    Rikard

    Hi,

    Thanks for the update. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

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