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

Salient Theme: Conflict in Safari with Bootstrap 3 styles in Caldera Forms

I recently detected a CSS conflict in Safari when using the popular Caldera Forms plugin.

While other Browsers work fine – in Safari (and Cliqz) the input that a frontend user enters into form fields is cut off so you only see the very bottom of the letters.

The problem is probably the same as described in this ticket: https://themenectar.ticksy.com/ticket/899910/

The CSS fix provided there by the theme author did not work for me though.

Caldera Forms adds Bootstrap 3 styles to its forms by default, but this can be deactivated. This leaves the from somewhat unpretty but fixes the problem.​

The CSS code in question seems to be the height defined by the Bootstrap styles:

.caldera-grid .form-control {

}

My workaround: I disabled the Bootstrap styling in the settings of Caldera Forms and extracted the styles that were necessary to get that nice styling and put them into my child theme CSS file.

Here’s the code I used:

.caldera-grid label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}

.caldera-grid .radio label {
    min-height: 20px;
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: 400;
    cursor: pointer;
}

.caldera-grid .form-control {
    width: 100%;
    /* height: 34px; commenting out the height definition */
    padding: 6px 12px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 2px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.caldera-grid textarea.form-control {
    padding-right: 4px;
    height: auto;
}

.caldera-grid .form-control, .caldera-grid output {
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    display: block;
}


.caldera-grid .btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc!important;
}

.caldera-grid .btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 2px;
    user-select: none;
}

Addition from August 01, 2017: A similar conflict appears when using the Toolset suite of plugins by OnTheGoSystems, with Types being its most popular plugin. Toolset is loading loading its own instance of Bootstrap styles, apparently. The fix is easy: Just change to Bootstrap loading presets in the WordPress Dashboard under Toolset > Settings. In my case, I selected “The theme or another plugin is already loading Bootstrap 3.0” in order to get Caldera Forms back to working.