Weird colour effects: apologies

I noticed yesterday that there were some weird colour effects going on with pandammonium.org. Sorry about that. It’s all fixed now.

The problems

There were two problems. The curious thing was that these effects only occured when the user was not logged in. As soon as the user logged in, the colours corrected themselves.

The background colour

The site footer background colour was wrong: it was theme-default red instead of pandammonium purple.

The text colour

Visited navigational links were the wrong colour, affecting the footer, the sidebar, the menus, tags and categories.

The workarounds

These problems were weird, especially because of the difference being logged in or out made.

The background colour

The first thing I did was to check the theme settings in the WP Customiser: the footer background colour was correctly set to purple. I tried changing the background colour to the default red, reloading, and switching it back to purple; no difference. It was time to look into the CSS files.

I discovered that the site-footer class is defined in two different CSS files:

.site-footer {
 background: #d44d5c; /* red */
}
.site-footer {
  background: #7949b1; /* purple */
  color: #fefffa;
}

When the user is logged out, the former overrides the latter; when the user is logged in, the latter overrides the former.

To fix the site footer background colour, I overrode the background-color property in the site-footer class using the Additional CSS section of the Customiser, which did the trick.

.site-footer {
  background-color: #7949b1; /* purple */
}

But it doesn’t explain what happened.

The text colour

I did not look into the weirdness of the visited link colour problems beyond playing with them in the browser’s element inspector because I hoped the two problems were connected.

A better solution

The problematic CSS file is prefixed with wpo; this suggests there might be an issue with a plugin; a quick refresher of my installed plugins reminds me I have WP Optimize installed – did someone say wpo? The guilty party.

Sure enough, one of the ways this plugin optimises a WordPress site is to minify the CSS. I looked at the CSS minification settings. I undid the changes in the workaround (above) and had a little play.

Switching off CSS minification completely in the plugin fixed the weird colours in the background and in the visited links. Looking more closely at the CSS minify settings, I couldn’t find a specific setting or CSS file that caused the problem, so I’ve switched off CSS minification completely.

This plugin also explains the difference between logged-in behaviour and logged-out behaviour: there’s an option to serve logged-in users cached pages. The switch was off, so the minified CSS wasn’t served when the user was logged in, but served when the user was not logged in.

Problem more-or-less solved, although I’m not completely sure what changed. The WP Optimize plugin was updated on my site on 30 November. I wonder what they changed.

An extra irritation

The database keeled over a lot when I was looking into the WP Optimize settings. It’s fortunate that I know how to fix the database error now.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.