Advanced Accordion text alignment

  • Resolved jokubas2000k

    (@jokubas2000k)


    5 years, 8 months ago

    Hi,

    I have a question about the Essential Addons’ Advanced Accordion.

    Is it possible to change the text alignment of the title? I want everything to be centered.

    I use the Advanced Accordion in several different places, so if the solution is to use custom CSS, it would need to only affect specific Accordions, not all of them.

    Thanks in advance

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Support Abid Hasan

    (@abidhasan112)

    5 years, 8 months ago

    Hi @jokubas2000k ,

    Actually you can get it done with Custom CSS. Also if you define a class name from Elementor panel of your each Advanced Accordion widget and write CSS according that class name, It should not effect on all Advanced Accordion of your website.

    Here is the full video that I made for you. In this video, I take two Advanced Accordion widget and define different class into it. And then I write Custom CSS for the first one only which will not effect on the second Advanced Accordion widget: https://d.pr/v/uuvJCv

    So, The custom CSS will be for center the title of Advanced Accordion is:

    .your-class-name .eael-accordion-tab-title {
    text-align: center !important
}

    NOTE: This .your-class-name will be your defined class name that you set from Advanced > CSS Classes from Elementor panel of Advanced Accordion widget followed by the video.

    Hope you understand.
    Thanks!

    Thread Starter jokubas2000k

    (@jokubas2000k)

    5 years, 8 months ago

    Hi @abidhasan112,

    Thanks, this helped but I have another question.

    Is it possible to center the Toggle Icon as well? I would like the Toggle Icon to stay next to the Title on the left.

    The custom CSS you provided centered the title but left the Toggle Icon to stay as it is: https://ibb.co/8nCCvMm

    Thanks in advance

    Plugin Support Abid Hasan

    (@abidhasan112)

    5 years, 8 months ago

    Hi @jokubas2000k ,

    Add this CSS on your stylesheet:

    .your-class-name .eael-accordion-header {
    display: list-item !important;
}

    So basically you can just add display: list-item !important; inside your previous CSS that I gave you on my previous reply.

    Let me know how it goes.
    Cheers!

    Thread Starter jokubas2000k

    (@jokubas2000k)

    5 years, 8 months ago

    Hi @abidhasan112,

    This did not help. I added this CSS:

    .advanced-accordion-1 .eael-accordion-tab-title {
     text-align: center !important;
     display: list-item !important;
}

    And here’s the result: https://ibb.co/bbmGmqP
    display: list-item !important; just added some kind of dot under the Toggle Icon.

    This is what I’m trying to achieve (this is photoshopped): https://ibb.co/YT1xcWj

    Is this possible?

    Thanks

    Plugin Support Abid Hasan

    (@abidhasan112)

    5 years, 8 months ago

    I see @jokubas2000k !
    Well, Remove all previous CSS according this and then just add this one:

    .advanced-accordion-1 .eael-accordion-header {
    display: list-item !important;
    text-align: center !important;
}

    Hope this will works in your case.
    Cheers!

    Thread Starter jokubas2000k

    (@jokubas2000k)

    5 years, 8 months ago

    Hi @abidhasan112,

    Thanks this worked; however, a black dot appeared on the left: https://ibb.co/CmyD31d

    Is it possible to remove it? Or at least change the colour of it to white so it’s not visible.

    Thank you for your help!

    Plugin Support Abid Hasan

    (@abidhasan112)

    5 years, 8 months ago

    @jokubas2000k , I think that comes from your theme CSS. It would be good if you share your page url.

    However, You can try adding list-style: none !important; in your previous CSS rule

    So your final CSS will be,

    .advanced-accordion-1 .eael-accordion-header {
    display: list-item !important;
    text-align: center !important;
    list-style: none !important;
}

    Thanks!

    Thread Starter jokubas2000k

    (@jokubas2000k)

    5 years, 8 months ago

    list-style: none !important; worked.

    Thanks @abidhasan112!

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Advanced Accordion text alignment’ is closed to new replies.