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:

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.


Contact Form 7 & Lay Theme: Show Radio Buttons in Chrome & Safari

Apparantly, some WordPress theme authors (accidentally?) override the display of radio buttons and checkboxes of the popular Contact Form 7 plugin in Chrome and Safari browsers.

I recently encountered this problem with the rather extra-ordinary Lay Theme.

Thanks to these sources (1, 2) I found a solution that seems to be working across browsers.

.wpcf7 input[type="checkbox"]{
-webkit-appearance: checkbox;
-O-appearance: checkbox;
-moz-appearance: checkbox;

.wpcf7 input[type="radio"]{
-webkit-appearance: radio;
-O-appearance: radio;
-moz-appearance: radio;

User Avatars: Adding an Author’s Photo with a Plugin

I guess it’s due to the major role that Automattic plays for the WordPress community that WordPress out of the box still doesn’t support local user avatars. Instead, users have to register with Automattic’s Gravatar to have a profile image displayed on their website (as long as the theme in use supports this). This is weird and a hassle.

While this is most probably solved with a little coding of your own, it’s also a niche for plugins – especially if you want your users to upload their pictures themselves.

The plugin with the most active installations, WP User Avatar, seems to do the job pretty good. Not acceptable in my opinion though is the fact that the plugin adds a new top level menu item in the WordPress admin bar – instead nesting into “Settings”, where settings like these should go.

The settings page of the plugin WP User Avatar (picture by

This is really intrusive and displays a sense of entitlement by the developers that I can’t really understand. Of course, there are ways to clean up the WordPress dashboard – but why clutter it up in the first place? I really don’t get why this plugin is so widely recommended.

Enter the competition: The very similar named WP User Avatars has 10.000+ active installs and is actively maintained – by widely known WordPress core contributer John James Jacoby. This plugin may has less settings than the afore-mentioned one but it’s light-weight, fast and does the trick.

WPML: Translating a User Bio

Many themes display the biographical info about authors that can be entered through the User Management section in the WordPress Dashboard. Whenever you run a multi-lingual site you obviously want the author info to be translated as well.

The poplular multi-language plugin WPML (affiliate link) does support this – but you don’t only have to enable “String Translation”, you have to explicitly make WMPL scan the author info as well. Just follow the steps below and easily translate your user biographies. This thread from the WPML support forum brought me on the right track.

  • in the WordPress Dashboard, navigate to WPML > String translation
  • on the bottom right of the page there will be a box named “More Options”
    – click on the “edit” link next to “Translating users of types:” and select the checkbox for “Author” (or the user role you want the biography translated for), then click “Apply”
  • now to to WPML > Theme and plugins localization
  • (If you haven’t activated String Translation yet, select “Translate the theme and plugins using WPML’s String Translation”)
  • after the initial options and lists, find the button “Scan the theme for strings” and click it
  • go again to WPML -> String Translation
  • on the filter field “Select strings within domain”, select “Authors” (or the user role you previously selected to be scanned). The page will then refresh itself and the list will now contain all author’s fields available for translation, including the biography/description.

WPML: Language Switcher Not Showing All Languages

I encountered the following problem: I was building a multi-lingual website with three languages, powered by the popular WPML plugin (affiliate link). I had the regular language switcher set up in a menu. Now, when I was looking at pages in the main language – in this case English – the two other languages, Romanian and Russian, were elegible in the language switcher. Whenever though I switched the language to Romanian, the Russian selector went missing. This wasn’t the case the other way around, though: Looking at Russian pages, all three languages showed up in the switcher.

The fix was quite easy: I only had to clear the WPML cache. In order to do this I had to navigate to WPML > Support > Troubleshooting in the WordPress dashboard. Here, under the heading “Clean up” was the option to “Clear the cache in WPML”. This was all it took – just remember to backup your database beforehand.