Edit External CSS

I am currently building a website: https://coldwellbankerblair.com/idx/mls-203859-164_red_rhododendron_road_boone_nc_28607

I recently switched my site to HTTPs. Many of the elements on my site (images, scripts, etc.) were not loading when I switched. To fix this I installed SSL Insecure Context Filter. While this helped a majority of my elements load correctly, one element that is integral to my website is not.

On the webpage that I linked previously, there is supposed to be a slider that is powered by Juicebox that is not loading correctly because the script is using a URL that is not using HTTPS.

Image of my error
Image of the error I’m receiving.

I need to edit my WordPress theme to change the url of that CSS stylesheet so that I can load it over HTTPS.

Solutions Collecting From Web of "Edit External CSS"

You have alot of mixed content warnings, be sure to change your scripts and images to call https.

For example if you can find the reference the following URL in your theme

http://api-idx.diversesolutions.com/Styles/Libraries/juicebox/theme.css

Replace it with:

https://api-idx.diversesolutions.com/Styles/Libraries/juicebox/theme.css

which will work because the provider has a valid SSL certificate.

But I would highly recommend physically searching and replacing your old http URLs and replacing them with https equivalents.

This is a great plugin for doing so if you are not familiar with SQL :

https://en-gb.wordpress.org/plugins/better-search-replace/

but obviously make a backup of your database prior to using it. You may also need to go through your theme CSS, script and enqueue to make sure there is no absolute URL’s.

Besides the find and replace in the database, you’ll also want to scan and update plug-ins and themes. In particular, check that the following are loaded protocol agnostic (using // in lieu of http:// or https://):

  • Web fonts loaded in the tag of any static html or parent template

  • web fonts as imported in sass source files or css files

  • 3rd party scripts loaded from CDNs  in the tag of any static html or parent template

  • 3rd party scripts as imported in javascript source files