[Resolved] I've changed to https, problem with inline css background images

[2fer]

Hi Tom,
I switched a site over to https: yesterday and everything went well except that the GP header has inline css that uses the original http: URIs for the background images. I have checked the headers, the images are redirecting fine to https: but it prevents my site from having the pretty green padlock that should be there. I can’t find where to edit that inline css. It contains all the settings that were made when I originally set up the appearance and layout for the site.

I went first to WP to see if it is a general problem but all I found there were suggestions to use a plugin. That would not correct the inline css. OK. So I had read that background images uploaded prior to changing to https: could cause the problem so I decided to delete/replace those background images with fresh uploads.

But trying to edit background images under “Appearance” I had a problem because it will not load. The sidebar loads with the tools, but when I uploaded one new background image I got that “will not load” error again – oh, and it deleted other settings I had in place for body and sidebars so now all the sidebar widgets are separate blocks. I have no way to correct these issues. Since my theme is up to date, WP is up to date, my plugins are up to date, but the GP plugins are not working as expected.

I could try to remedy this with the child theme css, but that won’t remove the original inline css in the headers which is the problem.

I am not certain about the plugin “update” process. It is extremely confusing. I have followed the instructions, uploaded, installed and activated the GP Premium zip, but when I go to Appearance > GeneratePress I see a list of the plugins I use along with a place to either deactivate or enter the key, but there are a dozen keys and one space. There is no way to tell what should be done to ensure everything is current and functional. It appears to be OK from the plugins area, but it does not work at all so something is not right.

When I went for the keys, it said I have no sites authorized. I am using the theme and the plugins across 4 domains, each installed and set up per instructions and functional. But now I am afraid to make any changes on any of them. The site looks like poop without those background images and without the body background a solid color – and without the security icon.

Help, please?
Thank you,
2fer

[Tom]

From the sounds of it, the backgrounds you have set in the Backgrounds add-on are still using http, correct?

Those options use the core image upload control, which uses the URL instead of ID (unfortunately).

What you need to do when you change the URL is use a search and replace plugin to search your DB for the old http:// URL and replace it with the new https:// URL.

Before you make any changes to your DB, do a database backup.

One of these plugins should help:
https://en-ca.wordpress.org/plugins/search-and-replace/
https://en-ca.wordpress.org/plugins/velvet-blues-update-urls/

Edit: Just noticed you said you already tried replacing the images, but it won’t work. Can you post the exact error you’re getting when trying to upload the new image? Or a screenshot would be even better.

It looks like you purchased the Super Package when it existed, and then upgraded to GP Premium. Can you confirm that all of the individual add-on plugins are deactivated and removed from your site? Only GP Premium should be activated.

If only GP Premium is activated, you should only see one area to update your license key, and you should see an area to activate the individual add-ons.

[2fer]

Thank you Tom,
I deleted all the existing plugins I had for GP before I uploaded, installed and activated the most recent GP Premium zip. It looks like I had first uploaded the generate-backgrounds-1.0.18 after deleting them all. That may be part of the issue so I am redoing that install.

I will try for a screenshot of the error. I copied down the headers when I first had the problem last night so I can see it was redirecting in a loop while trying to load. That was before I decided to go look for updates. I did reinstall the latest GP Theme also, in case it did not like the new address. For the plugins, I had activated the “Receive Updates” widget previously so I thought that was supposed to keep things up to date for the plugins. I was wrong. I had the GP Premium plugin installed back in 2015, I also had each indivual plugin installed and that was back when I set it all up. The images were uploaded then as well, from 04/2015 when they were http.

I now have only one non https issue on the site, it is a different background image from 04/2015 linked via the header’s inline css: .site-header { background-image: url(http://www.example.com/wp-content/uploads/2015/04/page_t.png); }

I am very concerned about trying to upload a replacement since all the unrelated changes that happened when I replaced the other http: image in the header’s .css are quite noticeable, would not want to multiply that effect. But I believe I can duplicate the error without making a change.

I’ll be back when I wrap that up. Thank you!
2fer

[2fer]

Hi Tom,
I completely deactivated and deleted the GP plugins, then uploaded the GP Premium only. Installed and activated it and still it does not load the tools. I have screenshots of the confusing plugin page which might be part of the problem (?) because I don’t do anything on that page. Also the error screenshot which simply says the request can never load, it is a loop. I needed to wait until 24 hours later to be able to download the access logs to examine better, to see what errors are happening and why. It is now about that time when I can examine the logs.

I used the live headers extension to show me the loop, it just keeps repeating the redirect:

https://www.example.com/?customize_changeset_uuid=7a1234b9-9290-4301-8477-12345b88160bf&customize_messenger_channel=preview-0

GET /?customize_changeset_uuid=7a1234b9-9290-4301-8477-12345b88160bf&customize_messenger_channel=preview-0 HTTP/1.1
Host: http://www.example.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:51.0) Gecko/20100101 Firefox/51.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Referer: https://www.example.com/wp-admin/customize.php?return=%2Fwp-admin%2Fthemes.php
Cookie: cookiestuff..G4InvpFB7XZrXIBDN9yxWqe9s%7C36b505c8fcff1ce047fad173d123456efde128cd8c506ede1e3bec10e7204; wp-settings-1=editor%3Dhtml%26m10%3Do%26m5%3Do%26m8%3Do%26m7%3Do%26m2%3Dc%26urlbtton%3Dnone%26align%3Dright%26hidetb%3D1%269%3Do%26imgsize%3Dmedium%26m4%3Do%266%3Do%26wplink%3D1%26ed_size%3D389%26libraryContent%3Dbrowse; wp-settings-time-1=1488023456
Connection: keep-alive
Upgrade-Insecure-Requests: 1
Cache-Control: max-age=0

HTTP/1.1 301 Moved Permanently
Date: Sun, 26 Feb 2017 05:30:53 GMT
Server: Apache
X-Robots: noindex, nofollow, noarchive
Expires: Wed, 11 Jan 1984 05:00:00 GMT
Cache-Control: no-cache, must-revalidate, max-age=0
X-Frame-Options: ALLOW-FROM https://www.example.com/wp-admin/customize.php
content-security-policy: frame-ancestors https://www.example.com
Location: https://www.example.com/?customize_changeset_uuid=7a1234b9-9290-4301-8477-3590b12345bf&customize_messenger_channel=preview-0
p3p: policyref=”/w3c/p3p.xml”
Vary: Accept-Encoding
Content-Encoding: gzip
Content-Length: 20
Keep-Alive: timeout=5, max=48
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8

(NOT Verbatim/only cookies/login edited.) These request repeats several times, then I get the error screen. I don’t see a way to upload the screenshots here, sorry.

One other thing I have noticed is that when I first set it all up, there was a spacing option which is gone now. The header’s inline css is changed since I replaced that one image, I can see where the spacing went wonky:
old:
.inside-article, .comments-area, .page-header,.one-container .container,.paging-navigation,.inside-page-header
{
background-color: #FFFFFF;
color: #545454;
}
——————
new:
.separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .one-container .container, .separate-containers .paging-navigation, .inside-page-header
{
color: #545454;
background-color: #ffffff;
}
———–
I can put the old setting into the child theme css but inline css takes priority over linked resources. So I don’t know if that will fix the appearance.

Any help appreciated.
Thank you,
2fer

[Tom]

I’m not seeing any issues in the log you supplied.

I’m also not seeing any screenshots of the issue?

When you go into the Customizer and go into Background Images > Body – you can’t re-upload the image?

In “Settings > General”, are your URLs set to the new https URL?

[2fer]

Hi Tom,
Even before updating the .htaccess to 301 to https, I set the Settings > General to https. The problem with the data I shared is that those are the headers and that was only one of half a dozen identical requests that take place while the “Appearance” is trying to load, before I get the error screen. It is a loop.

This is the error screen:

This is what I see when I go to Appearance, before I get the error:

I do not want to compound the damage I have already done by uploading a new image to replace one of the old background images. I am not willing to try without being able to see what I’m doing after it changed the layout by taking this action once already. If I can’t get it working, I’m out of luck. I can’t get that old image out of the css and can’t reasonably want to upload another surprise. Sorry.
Thanks,
2fer

[Tom]

So that redirecting issue most likely means there’s something wrong with the way you’ve redirected from http to https. What if you remove the code added to .htaccess and only have your URLs changed in “Settings > Reading”?

[2fer]

Hi Tom,
If I use only the WP settings, then only the WP URLs would be redirected. Not a solution, the domain has sections besides WP on it.

I am planning to check through the logs this evening and see what I find there.
Thanks,
2fer

[Tom]

Not meant to be a full solution, just meant to narrow down exactly where the issue is coming from.

Let me know if you find anything in the logs.

[2fer]

Hi Tom,
The insecure image issue has been taken care of. I added a few more lines to the child theme style.css that replaced the changes between old/new header inline css that I posted above, and that fixed it so at least I have the secure icon now. That also addressed having the background image in the content area starting right after the content. The white page background now goes down to the footer. The sidebar is still shown as a series of blocks, but after I sleep a bit I am sure I can iron that out as well.

Thanks for trying anyway. The GP Premium plugin still is not functional, I was hoping that screenshot of the list of activated components could tell you what I was doing wrong. I see no 500 errors in my logs that would tell me there was some configuration error.
Thanks!
2fer

[Tom]

A 500 error would just be a white screen. You’re getting a too many redirects error which is caused by the code you’re using to redirect the URL.

Perhaps contacting your host and asking them what the best method is for setting up the kind of redirect you need on their server would be helpful.

[Author]

Posts