Problem:

After installing a valid letsencypt certificate on https://www.personalzone.com I was presented with the following error in my Chrome browser which didnt make much sense given the certificate had just been installed.

personalzone chrome insecure

 

Solution

To investigate I went to the developer tools security tab.

First  click on settings  ( 3 dots in top right of browser )  ->  More tools -> Developer tools.

chrome developer tools

Then click on the security tab of the developer tools console

developer security tab

 

From here it could be seen that the browser was alerting to  active mixed content and the cause was google fonts that were being pulled in via http: instead of https:

 mixed content error

 

Knowing that the css for my Joomla website is  included in the template in use I went to the active template and started looking in the css files

CSS files for a template can be found  in the Joomla backen at extensions -> templates  

 templates

 

and then clicking on the template in the right hand column of results.

 template listing

Clicking on the template ( Jsn_mini_pro by Joomlashine  in this case )  shows all the files associated  with the template.

After a bit of browsing  I found the following  culprit in the css/styles/news.css file

@import url(http://fonts.googleapis.com/css?family=Sanchez);

css file

To fix the issue this was changed to:

@import url(https://fonts.googleapis.com/css?family=Sanchez);

To ensure that the fonts were requested from Google via a secure connection.

Once this was done the browser was shut down and  the personalzone tab was shutdown and re-opened and chrome started displaying the site as secure.

 pz secure url

 

Job Done  ... another problem solved.

 

 

 

 

Go to top