Add shadow to accordion

[Ayla]

Hi guys,

I’m trying to make my accordion boxes match my buttons, and it’s almost worked out, except for the shadow.

This is the CSS for my buttons:
.x-btn.x-btn-alt,
.button.x-btn-alt,[type=“submit”].x-btn-alt {
border-color: #02aed6;
background-color: #02aed6;
box-shadow: 0 0.25em 0 0 #0b8ead, 0 4px 9px rgba(0, 0, 0, 0.75);

And this is the current CSS for my (Classic) accordion headings:
.x-accordion-heading .x-accordion-toggle.collapsed {
border-style: solid;
border-width: 1px;
border-color: #14326F;
background-color: #2257BF;
box-shadow: 0 0.25em 0 0 #14326F, 0 4px 9px rgba(0, 0, 0, 0.75);
color: #FDFBF7;}

It looks the same to me when it comes to the box-shadow and I don’t understand why it won’t work! Hope you can help

[nabeel]

Hi Ayla,

Thank you for reaching out to us. I tested your code in my local setup and the box-shadow property works fine for the classic accordion element. I can see the box shadow around the accordion item, however to make it prominent you can use this code instead:

.x-accordion-heading .x-accordion-toggle, .x-accordion-heading .x-accordion-toggle.collapsed {
	border-style: solid;
	border-width: 1px;
	border-color: #14326F;
	background-color: #2257BF;
	box-shadow: 0 0.25em 7px 0px #14326F, 0 4px 20px 5px rgba(0, 0, 0, 0.75);
	color: #FDFBF7;
}

I’d suggest you to use V2 Accordion element so you customize it completely using it’s settings in Cornerstone and you won’t have to use the custom CSS for that.

Hope this helps!