Making accordion elements rounded?

Support
#1

Hi, how to make the accordion element proper rounded?
I’ve tried this code:

.x-accordion-group,.x-accordion {
border-radius: 15px; 
}

But as seen from the screenshot it rounds it with bugs.
http://nimb.ws/hXuyGg

How to make it round?
Thanks!

#2

Hello @Kashevko,

Thanks for asking. :slight_smile:

Please add following CSS under X > Launch > Options > CSS to have rounded accordion:

.x-accordion-group, .x-accordion-heading {
    border-radius: 15px;
}
.x-accordion-inner {
    border-radius: 0 0 15px 15px;
}

Thanks.

#3

Hi Prasant,

Great, thanks!

How now to fill those space?
http://nimb.ws/jnYurU

#4

Hi there,

Please update this:

.x-accordion-group, .x-accordion-heading {
    border-radius: 15px;
}

to

.x-accordion-group, .x-accordion-heading {
    border-radius: 15px 15px 0 0;
}
#5

Hi, while this fixes the initial issue it:
makes the bottom sharp: http://nimb.ws/keO2Zc
And leaves the empty spaces here: http://nimb.ws/dYxVlK

#6

Hi there,

Please try this code:

.x-accordion-heading .x-accordion-toggle.collapsed {
    border-radius: 15px;
}

.x-accordion-group {
    border: 0;
}

.x-accordion-group, .x-accordion-heading {
    border-radius: 0;
}

.x-accordion-heading .x-accordion-toggle {
    border-radius: 15px 15px 0 0;
}

Please note that CSS customization that falls beyond the scope of our support. In case you want to further customize your site, you may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding. Take care!

#7

Hi Jade, that worked perfect!

Thank you so much!

#8

You’re most welcome, Kashevko.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.