Sometimes it happens so that the sites made with Blocksy look broken and it seems like CSS isn’t applied at all to it. That can happen for a couple of reasons. We’re going to take a look at the two most common causes for this situation and ways to fix it.
The first step for finding the cause of this problem is to take a look at the Dynamic CSS Output option from the Performance panel and please try to read and understand that section of the documentation. Then based on the current value of the option read on the following sections and try to switch the option from one value to another and see if this helps.
1. When the “File” value doesn’t work
When this is the case, it’s most likely that Blocksy doesn’t have access to file system to be able to write the global.css
file.
Try to add define('FS_METHOD', 'direct');
to your wp-config.php
file and save your Customizer settings again. In most cases, this should properly generate your global.css
file. To check if the file is properly generated, just check the source of your site (how to check the source).
If that still didn’t helped, change the Dynamic CSS Output to Inline and read on.
2. When the “Inline” value doesn’t work
If you had no luck on getting it to work with File strategy, it will work in 99% of cases with Inline strategy. If that’s still not the case, there is one more thing you can try.
Turns out, on some specific web hostings, there is an optimizer called PageSpeed Modules. It is a very good piece of software that improves the speed of your site, but some of it’s options don’t work well with modern CSS features, specifically with CSS Custom Properties — and Blocksy relies on them to work.
// Correct behavior for Inline CSS output
--linkInitialColor: #ccc
// Wrong behavior for Inline CSS ouptut
--linkinitialcolor: #ccc
And because CSS custom properties are case sensitive, that breaks the output of the site. We have filled an issue on their GitHub reposity, to better track the problem, also more details about the issue can be found there. Hopefully PageSpeed Module will get this issue fixed in the mean time as this is really quite sad.
Now this problem can be temporarily fixed by manually editing your .htaccess
file (or nginx.conf
file for Nginx) and adding some rules there, specifically the rewrite_css
filter. Here’s how to do it for Apache:
ModPagespeedDisableFilters rewrite_css
# If the above doesn't help, please try this one
ModPagespeedForbidFilters rewrite_css
More details can be found in the PageSpeed documentation about configuring filters.
With that in place, the CSS now should be not lowercased anymore.
Disable rewrite_css filter for Bitnami WordPress package
- SSH into your Bitnami instance
- Edit the
/home/bitnami/apps/wordpress/conf/htaccess.conf
file on your server and append this line there:ModPagespeedForbidFilters rewrite_css
. - Restart your Bitnami instance by running
sudo /opt/bitnami/ctlscript.sh restart
. - Now your Bitnami enabled server should output proper CSS, without lowercasing it.
As always, never hesitate to ping support if you’re still not able to get this to work.