I used the Collapse-O-Matic plugin for a recent project in order to display content with a so-called accordion effect: a visitor has to click on a headline or different element to reveal more content beneath.
The Collapse-O-Matic plugin stood out through its number of active installations (70,000) and by having a pretty large community around it that actively is supporting the plugin.
Just a few customizations were necessary.
I wanted to customize the arrows which let’s you open and close the “accordion”. As they are included as image files I made new ones in the format of 12×16px. In order to not having them overwritten when updating the plugin I uploaded them to an “/images” folder in my child theme and added the following to the style.css of my child theme (in order with the instructions by the plugin author here):
.collapseomatic { background-image: url(images/arrow-down.png) !important; } .colomat-close { background-image: url(images/arrow-up.png) !important; }
I also wanted to move the arrows down a notch. As these are included as background images I used the CSS background-position property as detailed here on w3schools.com:
.collapseomatic { background-position: 0 6px!important; } .colomat-close { background-position: 0 6px!important; }
Further customizations included indenting the content a little bit from the left and making some room to the bottom of the expanded content:
.collapseomatic { padding: 0 0 10px 22px!important; } .collapseomatic_excerpt, .collapseomatic_content { margin-left: 22px!important; padding: 0 0 16px 0!important; }
Overall, a pretty good experience with this plugin!
0 comments on “Styling the Collapse-O-Matic plugin for WordPress”