Custom close button styles

if you want to change all expand elements, you don’t need the trigclass, you can just overwrite the .collapseomatic and .colomat-close classes.

However, if you wanted to just control how some of the expand elements are rendered, then you would use the trigclass attribute as above with the following classes:

closed status:
.pink
(.collapseomatic.pink would also work)

open status:
.pink.colomat-close
(.collapseomatic.pink.colomat-close would also work)

Hope this helps!

Thanks you for your reply, I’ve written the css as below:
I do need different coloured close buttons and arrows to match each coloured section:

I am trying to call the class: .section-close.pink a {

with [expand title=”The Academy” trigpos=”below” targclass=”maptastic” trigclass=”pink” findme=”1714″]

I still cant get it to work? Hope this makes it clearer.

see the academy link below:

.collapseomatic {
background-image: url(“https://www.wordybirdy.co.uk/wbdev/wp-content/plugins/jquery-collapse-o-matic/images/arrow-down-white.png”);
background-repeat: no-repeat;
background-position: 50% 12px;
padding: 0px 0px 10px 6px;
margin-left: -5px;
cursor: pointer;}

.collapseomatic.pink {
background-image: url(“https://www.wordybirdy.co.uk/wbdev/wp-content/plugins/jquery-collapse-o-matic/images/arrow-down-pink.png”);
background-repeat: no-repeat;
background-position: 50% 12px;
padding: 0px 0px 10px 6px;
margin-left: -5px;
cursor: pointer;}

.section-close a {
display: block;
background: transparent url(“https://www.wordybirdy.co.uk/wbdev/wp-content/plugins/jquery-collapse-o-matic/images/section_close_green.png”) no-repeat scroll center center;
height: 40px;
width: 40px;
text-indent: -999em;
margin-top: 10px;
}
.section-close.pink a {
display: block;
background: transparent url(“https://www.wordybirdy.co.uk/wbdev/wp-content/plugins/jquery-collapse-o-matic/images/section_close_pink.png”) no-repeat scroll center center;
height: 40px;
width: 40px;
text-indent: -999em;
margin-top: 10px;
}

Many thanks

where are you storing this css? It should be in the plugins options page under Custom CSS. Yo do not want to change the plugin’s css, as this will be lost during upgrades.
you do not need to re-write the entire collapseomatic class, just what you want to change. Change one thing at a time. you might need to include the !important flag. Remove all of that CSS and start with this:

Shortcode:

[expand title="The Academy" trigpos="below" targclass="maptastic" trigclass="pink" findme="1714"]

CSS:

.pink {
    background-image: url("your_uploaded_ping_down_arrow_goes_here.png") !important;
}

Check out this post for more details:
https://spacedonkey.de/1578/collapse-o-pro-matic-css-tricks-arrows/