Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • March 7, 2024 at 5:20 am #1436568
    ezimbron

    Hello.

    I am using an accordion with elegant styling and need to customize elements, maybe using CSS code, if possible.

    I would like to:

    1. Assign color to background, borders and fonts, using exact code by #XXXXXX format or at least RGB combination.
    2. Change toggle box height
    3. Manage font styles, color and weight (no strong) separately. Different attributes for toggle titles and text content.

    Is it possible?

    Thank you

    March 7, 2024 at 11:25 am #1436596
    Ismael

    Hey Eduardo,

    Thank you for the inquiry.

    1.) You can edit the Accordion element and adjust the colors in the Styling > Colors toggle.

    2.) To adjust the style of the toggler, you adjust can the values in this css rule:

    .js_active .toggler, .avia-admin-preview-container .toggler {
    padding: 9px 3px 9px 35px;
    line-height: 1.65em;
}

    3.) You can also adjust the font styles in the Styling > Font Sizes toggle.

    Best regards,
    Ismael

    March 7, 2024 at 9:34 pm #1436682
    ezimbron

    Hello Ismael.

    CSS code for changing toggler height works fine, thank you.

    Regarding changing color of elements, I had followed the same steps you suggest, but can’t see the “Select color” field into which I can write #fcf7f2 code. I need to applay exactly this one, not only aproximations.

    Select color field is absent

    “Styling>font styling” works for both (title and text) together.

    Custom font color function

    The only way I have succeed changing text attributes is through adding HTML code to my text, then I have had doing this for each toggle. It works though.

    Text attributes result

    Regards.

    March 10, 2024 at 3:59 pm #1436882
    Mike

    Hi,
    Glad to hear that you have this sorted out, shall we close this thread then?

    Best regards,
    Mike

    March 10, 2024 at 7:59 pm #1436885
    ezimbron

    Thanks Mike.

    I just want to know if there is a way to assign exact colors to Accordion elements (like background, title, border, text) by a CSS Class. There is no field to write a # code into custom styling.

    Regards.

    March 10, 2024 at 9:44 pm #1436888
    Mike

    Hi,
    Your screenshot of the accordion color options do not look correct, your element seem to be missing the manual color input, this is how it should look:
    Enfold_Support_5009.jpeg
    Try disabling any plugins, and if that doesn’t help include a admin login in the Private Content area so we can examine.

    Best regards,
    Mike

    March 11, 2024 at 2:35 am #1436903
    ezimbron

    Thank you Mike.

    Interface you posted is a little different than the one I see. Manual color input is missing indeed.

    The site is new, it was recently created just in order to show some ideas to a possible client. Then, as you suggested, I deleted the two plugins which were added while WordPress instalation and nothing changed.

    I leave you my credentials in the Private Content area, so you can take a look directly.

    Best regards.

    Eduardo

    March 11, 2024 at 8:03 am #1436910
    Ismael

    Hi,

    Thank you for the inquiry.

    The color field is visible on our end. We manually specified the color as #fcf7f2 and updated the page accordingly. Please let us know if this is the correct color.

    If you can’t see the color field, try to toggle the element preview in the Enfold > Layout Builder > Disable Advanced Layout Builder Preview In Backend option.

    Best regards,
    Ismael

    March 11, 2024 at 4:22 pm #1436970
    ezimbron

    It worked Ismael, thank you.

    Now I can see manual color input box.

    Best regards.
    Eduardo

    March 11, 2024 at 4:42 pm #1436972
    Mike

    Hi,

    Glad to hear this is sorted out now.If you have any further questions, please open a new thread.Thank you

    Best regards,
    Mike

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Customize accordion elements’ is closed to new replies.