Pro: Accordian Image instead of icon

Support
#1

Hello
See this page
http://staging1.kidsmagicworld.com.au/kids-magician/

on the right hand side you will see 2 blue buttons “instant online quote and instant sms quote”

both have a nice image before the wording

Underneath those are accordions with white stars- is it possible to replace those stars with images

(as I would like to replace the quote buttons with accordians) there is nosetting on the accordians header options

#2

Hello @b960a518-a049-4215-9,

Thanks for asking. :slight_smile:

Please take a look at following thread to change accordion indicator icon with image:

Thanks.

#3

yes that changed the icon to the image however- all accordians now have the image

what I need is individual accordians to have their own image

the online quote would have a computer- the sms quote would have a smartphone

#4

so the css needs to be specific for each individual accordian

when I add an accordian it auto adds 2 items (where I simply delete 1 of them)

is there css to specifically target that accordian

(when I paste into the customize>>>>css of an individual accordian it changes it for all on the page)

#5

Hi There,

Yes, you need to apply the CSS code for each accordion item. Please update the given CSS code to this:

$el .x-acc-header .x-acc-header-indicator i.x-icon:before {
content: url('IMAGE URL HERE');
}

Then place that in each Accordion Items’ Element CSS area.



Be sure that your image is relatively small.

If you don’t want the image to rotate when the accordion item is clicked, please set the indicator start and end rotation option to 0 0.



Please be reminded that further customization with any elements from here would be outside of the scope of support that we can offer.

Thanks,

#6

thank you for that- that worked great

so for future when I find some css that changes something- if I want it to be specific to that element only

i add

$el

in front of the css and put it into customize>>>>css section?

#7

Hi there,

That is right.

You may read more about the Element CSS option here:

#8

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