Really Simple SSL

How to fix CSS and JS files with mixed content

If you have Really Simple SSL Pro installed, you might get the warning that your site contains JS or CSS files which in turn contain non-secure links.

For example, your site probably has style.css included. If this stylesheet uses a background image, this might look like this:

body {
 background-image: url("https://www.domain.com/paper.gif");
 }
 

This may cause mixed content issues because Really Simple SSL can’t fix this dynamically, as it is located in a CSS file.

You can get four kinds of files here, files in:

  • Uploads directory
    Files in the uploads directory are often generated by a plugin or theme. Try to regenerate these files by clearing the plugin or theme cache (if available), or by regenerating the files. How this has to be done depends on your plugin or theme. It’s also possible you have to re-save the theme settings to regenerate the file with the correct URLs.
  • Themes or Plugins directory
    These are files included in a plugin or theme. If this is not a child theme, the best way to fix this is to reach out to the author and ask to change the problematic URL to a protocol independent URL. (// instead of http://).
    You can also override the theme or plugin. With a theme, this can be accomplished with a child theme.
  • Other
    If the file is on your server but is not located in one of the aforementioned folders, you can look this file up and change the URL as described below.

To fix:

  • Open your FTP client
  • Look up the file that is mentioned in the fix list, and open it (e.g. wp-content/uploads/etc).
  • Search for the “URL with http link”
  • Change http:// into // so that the result would look like this:
    body {
    background-image: url(“//www.domain.com/paper.gif”);
    }

This way, the URL is protocol independent and it won’t matter anymore if you’re on http:// or on https://

Rogier

Rogier

Related articles

Join our mailing list - 8 Tips & Tricks in your inbox over the next 8 weeks!