Affiliate Disclosure: We may be compensated if you use our links to make a purchase. We are extremely selective in who we partner with & only recommend products we believe in. Our affiliate relationships do not influence our recommendations.
Several customers have had issues with the styles from our Design Upgrade Pro for H5P plugin not appearing on the frontend of their site. Things looks good in the Customizer, but the styles don’t show up on the actual website. The cause of this issue is almost always due to the server configuration.
Because of the way the H5P WordPress plugin requires us to add styles to H5P content, we have to use a
.php file to load CSS code. This is a bit unconventional. Typically, you’d use a
.css file to load CSS code, and a
.php file to load PHP code.
I’ll explain a few things you can try to resolve this issue. It usually involves contacting your host and asking them to make a pretty simple change.
Access to CSS File Blocked
In most cases, your server is blocking access to our plugin’s CSS file. It happens on select hosting configurations, and with some extra strong security setups.
Our CSS file, which uses a
.php extension, is returning a 403 error.
This often happens when your server’s
nginx.conf rules block access to CSS files that don’t have the MIME type of
- Please ask your host to allow access to the file linked above, and allow it to be treated as a CSS file.
You can reach out to your hosting support and…
- First, ask them if there is a way to allow
.phpfiles to be used for CSS (
text/cssMIME type), or disable strict MIME checking. … If that’s not an option…
- Ask them to use the
nginx.conffile to override the MIME type of our CSS file and make it
We’ve had customers on the following hosts be able to resolve the issue successfully:
- Cloudways – Submit a support ticket
- SiteGround – Submit a support ticket
- Bigscoots – Submit a support ticket and they will update the
nginx.conffile for you
Some features in WordPress security plugins can also block our CSS file from loading. Try disabling your security plugin briefly to see if that helps. Clear your cache after doing so.
If disabling the plugin works, then reach out to the plugin’s support team to ask them how to allow access to the above file. There should be an option to either include or exclude certain files, or bypass whatever feature the plugin is using to disable access to the file.
Because of the way H5P is added to WordPress pages, I have to use a
.php file to deliver the CSS. This is unconventional, but it’s the only way I can do it because of how the H5P plugin is set up.
I wish there was an easier way, but I’ve researched everything I can find and I’m doing everything possible. It’s just a limitation of how the H5P plugin works, and therefore, an issue on some server setups.
Feel free to leave a comment below if you’re still having trouble and I’ll try to help you out.