Styling the Collapse-O-Matic plugin for WordPress

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!

Advertisements

Premium WordPress plugins from CodeCanyon: Leaping into the dark

My aim was to create a grid that is automatically generated from a custom post type (CPT), and having the CPT content displayed in a modal window/popup/lightbox.

I searched thoroughly through the usual blog posts and plugin recommendation lists. One plugin I came across again and again was “Media Grid“. This premium plugin that is sold through CodeCanyon.net by Envato seemed to have the respective functionality aboard – among many more features.

Maybe I missed this in the item description and I didn’t search through the comments before buying (like this one)…

But, as I found out after buying and installing the plugin and working my way through the rather unusual user interface – the grid created by “Media Grid” can not be automatically populated. As far as I can see, all grid items must be created one by one, manually. Which makes sense if you are building a non-dynamic portfolio-type grid with many different item types.

In my case thought the plugin is useless as I need my grid to filled up dynamically with around 35 items the least. By the way, I could not get my custom fields to be displayed in the lightbox, too. But that might be another story.

The plugin functionality seems pretty far reaching and well thought through but documentation needs an update as I could only find a few narrated videos that show an outdated UI. The plugin does not have a free version in the WordPress repository I wasn’t able to test it out beforehand. Therefore: Money down the drain in my case as Envato’s refund policy is, well, rather off-putting.