Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • March 8, 2021 at 2:16 pm #1286443
    Saline_Sawks_Salad

    Hi
    I’d like to style a simple accordion to look like this – link attached.
    I have had a play with the css on the kriesi.at/documentation/enfold/accordion page
    but am struggling and can’t quite work it out. I’d like to

    – make the border line to 2px solid #b6b8ba
    – remove the padding to the right of the text
    – have button icon to the right.

    Any tips would be greatly appreciated. Thanks..

    March 9, 2021 at 5:40 pm #1286801
    Saline_Sawks_Salad

    What I think I have worked out here is that to move the icon to the right is not an option if I use the accordion element rather than shortcode in a code block?
    As this is a large accordion with a lot of content I don’t think using shortcode is going to work for editing.

    March 10, 2021 at 5:38 am #1286977
    Rikard

    Hi,

    Please try the following in Quick CSS under Enfold->General Styling:

    .toggle_icon {
    left: auto;
    right: 5px;
    border-radius: 50%;
    padding: 10px;
}

.toggle_icon .vert_icon {
    left: 9px;
    top: 4px;
}

.toggle_icon .hor_icon {
    top: 8px;
    left: 5px;
}

    Best regards,
    Rikard

    March 10, 2021 at 7:49 pm #1287231
    Saline_Sawks_Salad

    Thanks. That worked.

    March 13, 2021 at 1:33 pm #1287957
    Victoria

    Hi Saline_Sawks_Salad,

    Glad we could help :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

    March 16, 2021 at 7:41 pm #1288610
    Saline_Sawks_Salad

    Hi, thank you for the assistance so far regarding styling the accordion.

    The information that we want to put into the Accordian is lists by year such as the following.

    2013 Text about something
    2011 Text about something
    2010 Text about something
    2009 Text about something

    I think we will need to set columns in the accordion for the years and text to appear orderly row by row as we have tried dropping the year and text in but can’t get it to display properly in a column format.

    Is it possible to put code in to form columns?
    Thanks in advance for any help you can offer here.

    March 21, 2021 at 3:10 pm #1289440
    Victoria

    Hi Saline_Sawks_Salad,

    Could you please attach a mockup of what you’re trying to achieve?

    Best regards,
    Victoria

    March 22, 2021 at 7:23 pm #1289690
    Saline_Sawks_Salad

    HI Victoria,

    I put a link in the Private data section in my last message to a mock up of a section called Biography. Let me know if you have problems accessing it.

    Best regards

    March 26, 2021 at 6:59 am #1290480
    Rikard

    Hi,

    Thanks for the update, and sorry for the late reply. I think you will have to use some custom html markup in order to achieve that, you could try using a table for example: https://www.w3schools.com/howto/howto_css_two_columns.asp

    Best regards,
    Rikard

    March 26, 2021 at 4:18 pm #1290591
    Saline_Sawks_Salad

    Hi Rikard,

    Thanks very much for your help on this and the link.
    We weren’t sure if we could put html in the Accordion. We have put code in for columns and it is giving us what we need.

    Thanks very much.

    March 26, 2021 at 4:22 pm #1290593
    Yigit

    Hi,

    Glad Rikard could help!
    Let us know if you have any other questions and enjoy the rest of your day! :)

    Regards,
    Yigit

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