No Link to Template CSS after install SSL https #1892

pintobuck · 2017-02-27T15:55:39Z

Question: Does Hydrogen template need a path modification that is compatible with https?

Problem Description:

I added an SSL certificate to my Joomla website and https broke my Gantry 5 Hydrogen template. The differences can be seen using Firefox browser at http://backgroundsearch.com and https://backgroundsearch.com.

I’m using Joomla 3.6.5 with the latest auto updates for Joomla, Gantry 5, and Hydrogen template.

Background Info:

When I enabled Joomla Admin/ System / Global configuration / Server / Force HTTPS, then the website would not display in any browser. Chrome browser said too many redirects. So, now I set Joomla to Forcing HTTPS = none.
I tried making all URL’s relative, by deleting the strings http://www.backgroundsearch.com and http://backgroundsearch.com from the mySql database. That made no apparent change to the website on the front end, and https still will not display properly.
The path to custom.scss is not stated in the Gantry 5 Hydrogen template, but the actual path (as determined by the website file manager) is:
/backgroundsearch.com/templates/g5_hydrogen/custom/scss/custom.scss
In Joomla Configuration.php, I changed:
$live_site = 'http://backgroundsearch.com';
to
$live_site = 'https://backgroundsearch.com';  notice https
which allowed swMenuPro extension to display the menu’s properly, but it did not help with the Hydrogen template custom CSS.
At http://backgroundsearch.com (not https), there is a Swiffy.js annimation (Google’s Swiffy) displaying properly, but it completely disappears at https://backgroundsearch.com .

Paths used by the Swiffy.js annimation are:

5a) In the Hydrogen Template Page Settings, the Custom JS Atom contains some in-line JS. The
Atom uses the default path: gantry-assets://custom/files/custom.js

5b) In the Hydrogen Template Layout, a Custom HTML module uses the path:

Again, this Swiffy animation works fine at http://backgroundsearch.com, but not at https://bacgroundsearch.com.

Thank you for any suggestions.

pintobuck · 2017-02-28T15:47:07Z

Could this be part of the problem? View page source shows:
<base href="http://backgroundsearch.com/" />

By default, Joomla adds the base tag to your header (as in the example below):


<head>
<base href='http://www.domain.com/page.php' />
</head>

Google search on that implies that it may cause problems with relative URLs on sites using SSL https
http://www.inmotionhosting.com/support/website/website-troubleshooting/protocol-relative-urls-not-working
http://stackoverflow.com/questions/19733229/joomla-base-href-uses-http-instead-of-https

I found this discussion on Joomla.org Forum
No link to template CSS

pintobuck · 2017-02-28T21:00:52Z

Progress Report

Problem:
Activated SSL certificate, engaged Joomla Force HTTPS, and the whole website went down because of too may redirects for the browsers (Chrome, IE, and Firefox).

Summary of changes to fix the problem:

Made all URLs relative by deleting http://www.backgroundsearch.com from the mysql database. Also, deleted http://backgroundsearch.com (without the www) from the database.
In Joomla Configuration.php, changed http to https in $live

$live_site = 'http://backgroundsearch.com';
to
$live_site = 'https://backgroundsearch.com';

In .htaccess, added this code at top of file:

##  ------- begin HACK TO CHANGE HTTP TO HTTPS IN
## <base href="http://backgroundsearch.com/" />
<IfModule mod_env.c>
   SetEnv HTTPS on
</IfModule>
##  ------- end HACK TO CHANGE HTTP TO HTTPS

The .htaccess hack came from http://stackoverflow.com/questions/19733229/joomla-base-href-uses-http-instead-of-https

As Joomla super user in back end, set System / Global Configuration / Server / Force HTTPS = Entire Site.

NEW RESULTS WITH JOOMLA FORCED HTTPS = ENTIRE SITE

Using Chrome Browser,
Chrome works, and no longer shows Error too many redirects.
Chrome redirects all http:// to https://
Chrome displays template CSS styling
Problem: Chrome will not display any images on the website.

Using FireFox or Internet Explorer Browsers.
Both browsers display template CSS styling and all the images.
Problem: neither browser will redirect http:// to https://
That may be caused by the hack code put into .htaccess.

Template suggestion
per http://www.inmotionhosting.com/support/edu/joomla-3/remove-base-tag
You can remove the base tag
<base href="http://YourDomainName.com/" />
If you don't use the base tag and simply want to remove it, you can easily do so. This base tag is stored in $doc / $document. You can use unset, as in the following example, to remove the base tag:

$doc = JFactory::getDocument();
unset($doc->base);

Using the code sample above in your Joomla template should remove the base tag.

As it stands, my site still has two problems:
Problem: Chrome browser will not display any images on the website.
Problem: Firefox and IE browsers will not redirect http:// to https://
Also, I would like to do without the .htaccess hack.

pintobuck · 2017-03-01T20:11:18Z

I made some progress. I'll make a summary post pretty soon.

mahagr · 2017-03-06T08:41:35Z

Gantry doesn't use protocol in its URLs, but a path from the webserver root or http/https independent // schema.

To me it looks like that your server doesn't give access to generated CSS files:

Accessing files via HTTP work:
http://www.backgroundsearch.com/templates/g5_hydrogen/custom/css-compiled/custom_62.css

But HTTPS doesn't:
https://www.backgroundsearch.com/templates/g5_hydrogen/custom/css-compiled/custom_62.css

So it looks like server configuration issue and not related to Joomla or Gantry.

pintobuck · 2017-03-06T20:24:51Z

Thank you for your reply, mahagr. I did have that problem for a while, in that http could access images and css, but https could not.

This is my latest post at Joomla.org Forum, which should best explain my current situation.

Solution Version 2 - A solution that worked for me.

This method is different than my first post above, so I'm starting this post over again from the beginning.

I returned my Joomla website to all of its previous settings from before I started working on SSL https.

I’m using Joomla 3.6,5, Gantry 5 template Framework with its Hydrogen template, and swMenuPro extension for menu styling. Everything is auto updated to the latest version.

I bought an SSL certificate from my large hosting service provider for $37 per year.

Initial Problems

I set Joomla to Force HTTPS = Entire Site, and no browser would display my website.
(Joomla Administrator / System / Global Configuration / Server / Force HTTPS = Entire Site.)

Chrome browser said:
The backgroundsearch.com page isn’t working
backgroundsearch.com redirected you too many times.

Firefox browser said:
The page isn’t redirecting properly
Firefox has detected that the server is redirecting the request for this address in a way that will never complete.

Internet Explorer browser said:
This page can’t be displayed
Make sure the web address https://backgroundsearch.com is correct

Solution

Get back into your website.
In Joomla’s Configuration.php file, find public $force_ssl = '2'; and change the 2 to 0.
Also, log in as administrator and confirm that System / Global Configuration / Server / Force HTTPS = None.
Backup your mysql database and your entire site. (It is best to back up before beginning any changes to your website. Better yet, work on a test site, as recommended Webdongle. A test site might require its own SSL certificate, but they can be bought for $9.95 as mentioned by Leolam.

New Method

I gave up on trying to make Joomla Force HTTPS = Entire site. In my humble opinion, it has a problem which I could only partially resolve with a modification to the .htaccess file.

My website is running on a shared hosting service of a very large company. I bought my SSL certificate from them, and their server offers a feature to force HTTP > HTTPS, so I enabled that feature and adapted Joomla accordingly. I left Joomla Force HTTPS = none.

Additional Info: After the fact, I checked Joomla.org documentation. A page called Switching between HTTP and HTTPS is under construction. That page says " For setting up the certificate, the simplest way is to get your host to do it for you. Once you've bought a Dedicated IP and SSL certificate, simply ask your host to help and they will get it signed and install it in the correct location for you." However, that page does not yet address the problems that I experienced.

.htaccess modification

Before I modified Joomla in any way, I looked at my displayed page using my browser (right click) View Page Source, and I saw:
<base href="http://backgroundsearch.com/" />
Notice it shows http and not https. Based on my experiments, this is the single item that caused web browsers to refuse to display my website due to too many redirects when I set Joomla Force HTTPS = Entire Site.

Also, Joomla.org, itself, uses
<base href="http:s//joomla.org/" />
Notice the https.

The only way that I found to change my

<base href="http://backgroundsearch.com/" />
to 
<base href="https://backgroundsearch.com/" />

was with the following addition to the top of my .htaccess file.

####### ---- begin MOD TO CHANGE HTTP TO HTTPS IN 
####### <base href="http://backgroundsearch.com/" />
<IfModule mod_env.c>
SetEnv HTTPS on
</IfModule>
######## ------- end MOD TO CHANGE HTTP TO HTTPS

Joomla Adaptations

I discovered the following Joomla adaptations by going to Joomla.org, and using my browser (right click) View Page Source to see Joomla's code on their home page.

Joomla Adaptation #1 - Joomla.org home page code shows:
<base href="https://joomla.org/" />
Notice the https. I made the necessary https change to my website by using the .htaccess modification described above.

Joomla Adaptation #2 - Joomla.org home page uses .png images

After I forced HTTPS (either through Joomla Force HTTPS or through my web hosting provider), all of my web site images disappeared, including images in the template and other content images. This was true even when I used the Joomla's Beez template.

In Joomla.org's page code, I noticed that all of the images were .png files (not .jpg or .gif).
Also, all of the template images were in the directory /templates/Your-Template-Name/images .
So, I converted my template images to .png files, put them in that directory, and the images showed up on my website again. Notice that the template images had to be both .png files and in the stated directory. It was ok for me to created subdirectories in /templates/Your-Template-Name/images, if I wanted to.

Changing the template image location was particularly pertinent for my Gantry 5 Hydrogen template, because the Gantry 5 template defaulted to a different image location and path.

Article content images also had to be changed to .png images before they would display on my website. It was ok for them to stay in their original directory.

Notice that every path to the images had to be revised accordingly, even if only to change the file name extension to .png .

Additional Info: Joomla.org's home page code linked to some .jpg images, but all the .jpg links seemed to use full domain name links to other subdomains or other websites.

Results

SSL https is working for my entire site with all three browsers (Chrome, Firefox, and Internet Explorer), without the remaining problems that I discussed in my first post on this thread. All of my .png images are displaying properly.

Suggestions and Requests, Please

Joomla could offer a method to change the base tag:

<base href="http://Your-Domain-Name.com/" /> 
to 
<base href="https://Your-Domain-Name.com/" /> (notice the https)

without requiring the .htaccess modification shown above.

Joomla could address or explain the apparent requirement for images to be .png files.
Joomla and/or Gantry 5 could address or explain the apparent requirement for template images to be exclusively in the directory: /templates/Your-Template-Name/images
Joomla Documentation will probably complete their SSL instruction page.

mahagr · 2017-03-07T17:35:35Z

I don't think your solution is correct. The way I would do it is to enable mod_rewrite and add redirect rule from non-https into https. Google and you will find million solutions on how to do that.

pintobuck · 2017-03-14T17:59:42Z

Thank you for your suggestion. It was a big help. I updated my post in Joomla forum to include your suggestion, and my modification to htaccess. I would post my htaccess mod here, but pound signs turned most of the post into bold type.

Mahagr (from github.com, Gantry 5 project) suggested that I use mod_rewrite in the .htaccess file.
Good Result is that I could use jpg and gif images, which I could not use in Version 2. Also, Version 3 allowed me to use my original path to the images, for example Gantry 5 templates' default path to template images.

mahagr · 2017-03-20T08:19:13Z

Have you solved your issue? I don't think your issue is in any way Joomla or Gantry related. You just have badly configured server.

pintobuck · 2017-04-13T19:56:56Z

Thank you for your help. Sorry that I have not checked back here for a while. Your hint about mod_rewrite put me on the right track to a solution that worked for me. Specifically it led me to a Joomla post that left Joomla Force HTTPS turned off, and then used mod rewrite to redirect URLS to his https.

My own solution was to leave Joomla Force HTTPS turned off, and then use my web site hosting service to force HTTP > HTTPS. I still used rewrite to redirect www.MyDomainName to MyDomainName.

Apparently, the Joomla Force HTTPS feature has a track record of causing too many redirects on some servers and setups. Joomla GitHub project is still discussing the issue here joomla/joomla-cms#14861 (comment)

More specific to this thread about getting Gantry 5 Hydrogen template to link to CSS when using HTTPS, I used .htaccess to upgrade internal requests to https, because my site layout broke when visiting the site via https. I inserted this line into .htaccess:
Header set Content-Security-Policy "upgrade-insecure-requests"

pintobuck · 2017-04-14T11:59:37Z

Now, if you use Chrome or Firefox to visit backgroundsearch.com, the Gantry 5 Hydrogen template looks fine. However, if you use Internet Explorer and visit backgroundsearch.com, then the Hydrogen template breaks apart. I.E. gives a popup warning at the bottom of the page "Only secure content is displayed...what's the risk?" with an option to "Show all content. The popup warning only last about 10 seconds. If you click "Show all content," then the Hydrogen template displays correctly. If you do not click that option, then the Hydrogen template stays broken apart because it cannot access its own CSS and JS.

mahagr · 2017-04-21T07:53:23Z

If you look at the document, you still have a few http:// urls in your document. They are either hardcoded by you (in the content) or there's something wrong in the server configuration making Joomla to think it's under http instead of https.

I generally recommend replacing all references to http:// with //, which basically tells the browser to use the same protocol.

pintobuck · 2017-04-23T22:46:53Z

Thanks for the observation and suggestion. I think you put me on the right track, Joomla extension swMenuPro put some http URLs into my Gantry 5 Hydrogen template. I was able to get rid of most of the swMenuPro http URLs. I still have couple left that I'm working on at my test site. I'll post again when I make more progress.

mahagr · 2017-04-26T09:21:55Z

In the meantime, I'm closing this issue as it is really not Gantry issue. Be free to keep commenting, though!

pintobuck changed the title ~~Does Gantry 5 Hydrogen template need a new Joomla path to Custom.scss when using SSL Https~~ No Link to Template CSS after install SSL https Feb 28, 2017

mahagr closed this as completed Apr 26, 2017

mahagr added joomla question labels Apr 26, 2017

mahagr added this to the 5.4.12 milestone Apr 26, 2017

pintobuck mentioned this issue Oct 17, 2017

Successful SSL, Gantry 5.4.18, Hydrogen template, and Joomla 3.8.1 on Shared Hosting #2147

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

No Link to Template CSS after install SSL https #1892

No Link to Template CSS after install SSL https #1892

pintobuck commented Feb 27, 2017 •

edited

Loading

pintobuck commented Feb 28, 2017 •

edited

Loading

pintobuck commented Feb 28, 2017 •

edited

Loading

pintobuck commented Mar 1, 2017

mahagr commented Mar 6, 2017

pintobuck commented Mar 6, 2017 •

edited

Loading

mahagr commented Mar 7, 2017

pintobuck commented Mar 14, 2017 •

edited

Loading

mahagr commented Mar 20, 2017

pintobuck commented Apr 13, 2017 •

edited

Loading

pintobuck commented Apr 14, 2017

mahagr commented Apr 21, 2017

pintobuck commented Apr 23, 2017

mahagr commented Apr 26, 2017

No Link to Template CSS after install SSL https #1892

No Link to Template CSS after install SSL https #1892

Comments

pintobuck commented Feb 27, 2017 • edited Loading

pintobuck commented Feb 28, 2017 • edited Loading

pintobuck commented Feb 28, 2017 • edited Loading

pintobuck commented Mar 1, 2017

mahagr commented Mar 6, 2017

pintobuck commented Mar 6, 2017 • edited Loading

mahagr commented Mar 7, 2017

pintobuck commented Mar 14, 2017 • edited Loading

mahagr commented Mar 20, 2017

pintobuck commented Apr 13, 2017 • edited Loading

pintobuck commented Apr 14, 2017

mahagr commented Apr 21, 2017

pintobuck commented Apr 23, 2017

mahagr commented Apr 26, 2017

pintobuck commented Feb 27, 2017 •

edited

Loading

pintobuck commented Feb 28, 2017 •

edited

Loading

pintobuck commented Feb 28, 2017 •

edited

Loading

pintobuck commented Mar 6, 2017 •

edited

Loading

pintobuck commented Mar 14, 2017 •

edited

Loading

pintobuck commented Apr 13, 2017 •

edited

Loading