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

1. SSH into your Bitnami instance
2. Edit the /home/bitnami/apps/wordpress/conf/htaccess.conf file on your server and append this line there: ModPagespeedForbidFilters rewrite_css.
3. Restart your Bitnami instance by running sudo /opt/bitnami/ctlscript.sh restart.
4. 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.