Accordion Border as Image

[uxmediahouse]

Hi, is it possible to get an image as an accordion item border? I have a designer that has “hand-drawn” images for this in their layout. I have exported a .png of the “line” they want. Noyt sure how to implement this tho.

you can see the page itself here:
https://www.goedison.com/dental/

here is a screenshot of what they would like to see:

[prakash_s]

Hello @uxmediahouse,

Thanks for writing to us.

I would suggest you please add this custom CSS code to the Accordion element —>customize —>Element CSS.

$el .x-acc-item > .x-acc-header{
border-bottom: 5px solid transparent !important;
border-image: url(image_source_URL) 20% round;
} 

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.In case you have no idea about coding you can subscribe to One where customization questions are answered.

Hope it helps.
Thanks

[uxmediahouse]

got it. Thanks! for those looking for a solution here is what I did:

$el .x-acc-item::after {
content:'';
height:0.09em;
width:100%;
bottom:0;
background:url('/wp-content/uploads/2024/06/accordion-line.png') no-repeat center/100%;
}

[ruenel]

You are most welcome, Riceman.