After installing a valid lets encrypt certificate on 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



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  



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(;

css file

To fix the issue this was changed to:

@import url(;

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.