Share this with your friends:

Problem:

After installing a valid lets encrypt certificate on https://www.personalzone.com I was presented with the following error in my Chrome browser which didn't 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 backend 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 shut down and re-opened and chrome started displaying the site as secure.

 pz secure url

 

Job Done  ... another problem solved.

 

 

 

 

Comments

Copyright © Startearning.com