Header image disappeared

bztaylor · Member · May 22, 2013 at 3:43 pm
Copy link

Add topic to favorites
I customized this blog five years ago, but others maintain. I don’t post or even visit it often, but those who do just notified me the header image is no longer displaying, so I don’t know how long that has been the case. I checked and nothing has changed in settings for header – image is still there – I even removed and added it back from media library, but it does not display when blog is viewed.

The blog I need help with is: (visible only to logged in users)
timethief · Member · May 22, 2013 at 7:35 pm
Copy link
I don’t see a header image using Firefox 21. When I click the header image area this is what I see: http://s0.wp.com/%27http:/pflagalamance.files.wordpress.com/2008/04/pflag.jpg%27

I have tagged this thread for Staff help. Please subscribe to it so you are notified when they respond.
timethief · Member · May 22, 2013 at 7:37 pm
Copy link
Does this help?
Maintaining your Custom Header http://en.support.wordpress.com/custom-design/editing-css/#maintaining-your-custom-header
bztaylor · Member · May 22, 2013 at 8:28 pm
Copy link
Thanks for replies timethief. I do not see the url you see when I click in the header area when viewing the blog. That url does include inside the single quotes (%27) the header image which is located in the media library at: http://pflagalamance.files.wordpress.com/2008/04/pflag.jpg

As per your second suggestion, I have not touched the css in the last five years, and all of that time, the header image from location above in media library displayed correctly. I just checked the css, and it includes the following.

#headerimg { height:140px; width:100%; background-image:url(’http://pflagalamance.files.wordpress.com/2008/04/pflag.jpg’); }
kathrynwp · Staff · May 22, 2013 at 8:30 pm
Copy link
Hi there, it looks like one of your site administrators has added a lot of custom CSS, and much of it looks like it’s unnecessary.

I removed a line that referenced your header image and the graphic has now reappeared.

It does look like the CSS editor was adding backslashes before quote marks, so I will report this to our developers as it’s causing unintended results.

If you need anything else, just let me know.
kathrynwp · Staff · May 22, 2013 at 8:37 pm
Copy link
On further testing, it appears that it wasn’t the CSS customizer adding the backslashes in front of quote marks, so the code was likely pasted in with the backslashes already present.

You can remove the extraneous backslashes under Appearance > Custom Design > CSS. Example:

#topbar { font-family:'Lucida Grande', Verdana, Arial, Sans-Serif; text-align:right; padding-right:5px; }

Should be:
```
#topbar { font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; 	text-align:right; padding-right:5px; }
```
bztaylor · Member · May 22, 2013 at 8:57 pm
Copy link
Things are going from bad to worse. I am sure nobody other than me has touched the css, and I haven’t touched it in five years. Whatever you did has removed much of the color customization I had done at that time AND the image is still not showing for me (yes, I’ve refreshed). Here is annotated screenshot of how blog appeared earlier today when I first reported header image had disappeared:
http://pflagalamance.files.wordpress.com/2013/05/blogappearancebefore.png?w=769

Here is how it appears now – custom colors have been removed and image is still not showing:
http://pflagalamance.files.wordpress.com/2013/05/blogappearanceafter.png?w=710
bztaylor · Member · May 22, 2013 at 9:09 pm
Copy link
I should add I have not touched the css today – I only opened it to copy and paste the code showing the header image was referenced. I did not change anything. So where did all the backslashes come from?
timethief · Member · May 22, 2013 at 9:10 pm
Copy link
Not to worry as Staff will respond when they can.
kathrynwp · Staff · May 22, 2013 at 9:29 pm
Copy link
Are you able to see the header image now? I’ve removed all the backslashes in your CSS code.

It’s possible that some of your CSS wasn’t rendering correctly earlier with the backslashes in place, and we might need to do a bit of tweaking now.

For example, this code was defining the colour of your menubar rollovers:
```
#pagebar a:hover {
  background-color: #F67718;
  text-decoration: none;
}
```
I adjusted that to the following, and the orange background colour has returned:
```
#pagebar li a:hover {
  background-color: #F67718;
  text-decoration: none;
}
```
Please let me know if you see anything else that needs tweaking and I’m glad to help you get it sorted out. I’m sorry for the inconvenience.
kathrynwp · Staff · May 22, 2013 at 9:32 pm
Copy link
Ah, I just noticed you mentioned on the screenshot that the text colour of menu items and widget headings has changed – let me work on that next.
kathrynwp · Staff · May 22, 2013 at 9:41 pm
Copy link
I’ve tweaked the code for those two additional bits of text. Just let me know if there’s anything else, thanks.
bztaylor · Member · May 22, 2013 at 9:53 pm
Copy link
Thanks Kathryn – looks like it’s all restored. I’m still confused about what went wrong that required all the tweaking on your part, but very appreciative of your time and effort.
kathrynwp · Staff · May 22, 2013 at 10:02 pm
Copy link
You’re very welcome. I’m not sure what triggered the issue, but if you spot any further problems, just let me know.
bztaylor · Member · May 23, 2013 at 3:06 pm
Copy link
Argh! A new day and problems have returned. Header image is displaying, but colors that were fine at the start of this conversation, that changed (not like I wanted ) yesterday after you tweaked css, and then were back to original after you retweaked are now no longer as I had them. I have done nothing to css code since confirming (by viewing blog) that colors were corrected (5/22 @5:53pm). Before submitting this, I thought I would just edit the css myself, but when I try to do that, the css editor flashes on and off, and when I can view the css, it is all run together with only one numbered line (#1). It is color coded, but still very difficult to read. Is there a way to get this into an editor where I can see neatly indented and aligned code with line numbers? I have the code saved offline from five years ago – nicely formatted and commented (why aren’t my comments in the current css?). I am sure I copied and pasted that code into whatever the css editor looked like at the time. There are no slashes in that code – the ones that mysteriously were showing up yesterday. I could just try to copy and paste my original css that worked before into the editor now, but my concern is it worked for five years and then with NO changes on my part, things started breaking. Please advise.
timethief · Member · May 23, 2013 at 3:07 pm
Copy link
That’s weird because I see the header image.
bztaylor · Member · May 23, 2013 at 3:11 pm
Copy link
Yes header image is there as I said above. That was original problem reported in this topic. In process of Kathryn’s fix of that, my custom colors disappeared. She then fixed those and all was back to normal yesterday, and I had laid it to rest. Then I happened to look this morning and found colors messed up again.
timethief · Member · May 23, 2013 at 3:21 pm
Copy link
Which colors are messed up?
I see a purple background color, red menu bar background and yellow background color on widget headers. The links are blue.
bztaylor · Member · May 23, 2013 at 3:25 pm
Copy link
To see my concerns, backtrack in this topic to earlier posts – I included screenshots with color concerns. They were fixed and now are not.
timethief · Member · May 23, 2013 at 3:36 pm
Copy link
I think you may have a browser related issue because I don’t see the issues you see. I tagged this thread for Staff assistance.

No items found.