When Header Image is Stuck, Won't "Remove"

When the blog header image you decided you don't like after all won't let itself be removed, what are you supposed to do? People say their photo is stuck there and won't be removed! I believe them, but I've barely had it happen to me, so my experience has been of small proportions! I only had a stuck header image once. What did I do? I panicked, of course. WHAT was it doing? So I tried everything that I ever heard of or could vaguely imagine might work!. Attempts to "Remove Image" NO REAL SUCCESS AT THIS: I hit "Escape". I cleared the cache and cookies. Put the cursor over the window for the image and alternately clicked "Home" and "End" a few times. (This didn't work, although in the past, it DID WORK, turning out to be the odd solution to a newly-added header url that wouldn't go ahead and appear as an image in the same "Configure Header" Gadget. If the url doesn't change to an image in that small window, it usually means that the url had not actually "taken".) I closed the Gadget and then reopened it. I logged out of Blogger and logged back in. I restarted or changed the browser (or both). I did break it loose at last, but not before I'd gotten so flustered that I very unscientifically lost track of the order in which I did all these things. I can't even guess which one really "fixed" it. I nearly feel that it just gave up when it saw how hard I was going to work at it! (You can see how insensible it made me!!!) Remove Gadget, Not Just The Image! SUCCESS! The thing that has always occurred to me is this, though I only just now tested it. It seems to work. Why can't we just "Remove" the Header Page Element entirely if the header image stays stuck? Remove it, then add it back with "Add a Gadget" just like we do when some glitch kicks the "Archive" or "About Me" off the blog? This does work, although I had to "test" it without having a stuck header image. My solution was: IF THERE IS A "REMOVE" IN THE "CONFIGURE HEADER" AS THERE IS IN MANY PAGE ELEMENTS: Click "Remove" in the lower left corner of the "Configure Header" page. Confirm that request when you see "Are you sure?" Go to Layout page and click "Add a gadget". Select the "Header" type. IF THERE IS NO "REMOVE" IN "CONFIGURE HEADER": Go to Layout page. Click "Edit Html". Click "Expand widgets". locate the "header" widget. If the header widget code says "maxwidgets=1", change 1 to 2. (You may want to put something extra up there some day!) If the code says that "Locked="yes", change "yes" to "no". (This is the one that's NECESSARY. This action is what will put "Remove" in the lower left corner of the Configure Header page--otherwise, you have no icon to click!) Return to Layout page and click "Edit" on the Header. Click "Remove" Confirm that request when you see "Are you sure?" Go to Layout page and click "Add a gadget". Select the "Header" type. After either the short or the long list, I can only hope that you can finally remove the header image (replace it, too, if that's what you'd meant to do!). In my case, I ended up with a new Header Gadget with no image as I'd expected. I was then able to put a new image in the header, remove it, replace it (just to see if it would!). But I had no way of knowing that if it had originally been stuck, would the next attempt to add an image also stick?! This may be the problem, the "rub"--I had to test this (all 3 times) without a "stuck" header! So I wish you great Good Luck. You may learn a number of new things, but I can't promise any success! If anyone tries this, let me know if it fails or succeeds!

Change Format Of Date Header

Reset format of the date header At the top of all posts!
Go to your Dashboard. Click Basic Settings. Click Formatting. Find Date Header Format. Open the dropdown menu and choose one. Click on "Save Settings" at the bottom of the page.

Find Width of Header For New Image

Header Width

This will tell you places to look for the width of your header. The image you want to place there should not exceed that. You should use a photo program to alter the width of your image BEFORE you upload it to your photo host (whether Blogger or otherwise). To find the width of the header 1. Click Template 2. Click Edit Html 3. Scroll down to the header,header-wrapper, or wrap code and look for the WIDTH parameter. 4. If not found, look for outer-wrapper and see it's width. It will look something like this : #outer-wrapper { width: 1000px; }

Or you could adjust the same WIDTH in the template CSS

If you are unwilling to fuss with making your photo width match the width of the header, you could try this. You might find some code like the one above or this one below showing the #wrap; change the width of 100px to 900, 850, or so until it begins to look acceptable to you. Don't Save until then. If your photo just wasn't nearly wide enough, it may still look odd (short) to some eyes. Actually adjusting the width of your image in a photo program would then be the better choice.

Another possible location of header width: #wrap { margin: 10px auto 0px; padding: 0px 5px; width: 900px; text-align:left; }

END.

Centering Header Image

A. First try making the image the right size

To center image in the header, use a photo program to resize the width of the image to fit the size of the header. To find the width of the header 1. Click Template 2. Click Edit Html 3. Scroll down to the header,header-wrapper, or wrap code and look for the WIDTH parameter. 4. If not found, look for outer-wrapper and see it's width. It will look something like this : #outer-wrapper { width: 1000px; }

[More below...]

B. Or you could adjust the same WIDTH in the template CSS

If you are unwilling to fuss with making your photo width match the width of the header, you could try this. You might find some code like the one above or this one below; change the width of 100px to 900, 850, or so until it begins to look acceptable to you. Don't Save until then. If your photo just wasn't nearly wide enough, it may still look odd (short) to some eyes. Selection A would then be the better choice. #wrap { margin: 10px auto 0px; padding: 0px 5px; width: 1000px; text-align:left; }

Hopefully you made a safety copy of your template before you started monkeying with the code or making any changes--you know, in case all hell breaks loose and you need to rescue yourself!

Use CSS To Align Header Text

Text-align: center/left/right

Header Alignment
Setting alignment for the header has to be done in the template. The first section below of CSS instructions (from my blog, "The Rat Squeaks") does various things including that it sets the blog title to be centered. .Header h1 { margin:0 0 .25em; color:$titlecolor; font: $pagetitlefont; font-variant: small-caps ; text-align: center; }

[More below...Description alignment]

Description Alignment
Not far behind it comes this section for parameters of the Description, also setting the alignment to Center: .Header .description { margin:0; max-width:700px; line-height:1.8em; text-transform:none; text-align:center; letter-spacing:.2em; color:$titlecolor; font: $blogDescriptionFont; }

Your template may vary, so I can only give this example of where and how to find/place these CSS instructions. Use the exact formula if you are placing a new instruction there. Examples given below:

text-align:center; text-align:left; text-align:right;

END.

Header Picture Code

Unscrambling Blogger photo code for Header picture code

Blogger's picture icon is good for regular pictures in the post or in the sidebar, but it's overdone for the purpose of putting a photo in your header. You don't need both large and small versions for the header.

What Blogger may give you when you upload the photo to a post (Save it, but don't Publish it!) will resemble this:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW0WfYsy_i4SwyaYumkQqxeLUFNu54pRYjaZfSPrMVvC1TPTUd7jd65bUanoyRQUUy5h3wInYtFVCoSkf5Co99QUH5n6v9_ZBhOF9fr-fIX6vW0oLQm-kfyfZnyJBk1p1KXlBU/s1600-h/dgblues.jpg"><img id="BLOGGER_PHOTO_ID_5025971925707284738" style="DISPLAY: block; MARGIN: 0px auto 10px; CURSOR: hand; TEXT-ALIGN: center" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW0WfYsy_i4SwyaYumkQqxeLUFNu54pRYjaZfSPrMVvC1TPTUd7jd65bUanoyRQUUy5h3wInYtFVCoSkf5Co99QUH5n6v9_ZBhOF9fr-fIX6vW0oLQm-kfyfZnyJBk1p1KXlBU/s400/dgblues.jpg" border="0" /></a>

What you would need to extract is this:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW0WfYsy_i4SwyaYumkQqxeLUFNu54pRYjaZfSPrMVvC1TPTUd7jd65bUanoyRQUUy5h3wInYtFVCoSkf5Co99QUH5n6v9_ZBhOF9fr-fIX6vW0oLQm-kfyfZnyJBk1p1KXlBU/s1600/dgblues.jpg

If you didn't notice on your own, the difference between the red code at the top and the red code above this paragraph is that the -h has been deleted after S1600.

---

SMALL IMAGE: The url contained in the blue text (marked S400) is the smaller of the images and will need no correction--just the code, such as this, shown above:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW0WfYsy_i4SwyaYumkQqxeLUFNu54pRYjaZfSPrMVvC1TPTUd7jd65bUanoyRQUUy5h3wInYtFVCoSkf5Co99QUH5n6v9_ZBhOF9fr-fIX6vW0oLQm-kfyfZnyJBk1p1KXlBU/s400/dgblues.jpg

Assuming that the S400 is actually small and not just less than the large one, you could enter that code, as shown, into the Photo Url as your Profile Photo.

END.

Where To Place A Graphic For The Header

New Blogger method, easier for most

1. In Dashboard go to Layout. 2. Click Header in the Layout. 3. Have the url of the image you want to use handy. 4. Type or paste or Browse for the url into one of the two Image boxes, 5. Either an image on your computer or one already hosted on the Web. 6. You can choose to add the photo Behind the Title and Description or 7. You can Replace the Title and Description with the photo. 8. Be sure to Save Changes.

I can't emphasize how much easier the method above is!

Below is the old (Classic) method

This method still useable and ultimately more flexible (but you may be well satisfied with the first method above):

The code you'd look for to put a graphic into the header seems to come from a variety of locations in your template. It might go in the #header or #header-wrapper. The method I usually use is to locate a background url that already exists like these:

#header {
margin: 0 2%;
background-color: $headerBgColor; background:url("
http://2.bp.blogspot.com/_AVxLoZ0mR_0/Rb_W1nLeYQI/AAAAAAAAAIg/
qCR5JYhLf6o/s1600/dgblues.jpg") no-repeat bottom 10px;
color: $headerTextColor;
padding: 0;
font: $headerFont;
position: relative;
}

or

#wrap2
{background:url("xxxhttp://4.bp.blogspot.com/_AVxLoZ0mR_0/
RcNxJHiGO3I/AAAAAAAAAKA/5GfVtiwhGRE/s1600/jg2.jpg")
no-repeat center top; }

If this doesn't make anything more clear, ask again. I won't mind. But I don't know everything!

------------------------------------

It also worked for me to place an extra html/javascript page element above the header, with code like below:


<a href="http://jgblues.blogspot.com/"><img top
src="http://4.bp.blogspot.com/_AVxLoZ0mR_0/RcNxJHiGO3I/AAAAAAAAAKA/
5GfVtiwhGRE/s1600/jg2.jpg" no-repeat center/></a>

but first you'll have to go into the header widget in the template and change it so that the extra header is allowed, like this:

1. Go to Template.
2. Click on Edit Html
3. Click on Expand widget templates.
4. Locate the header widget.
5. It might look like this:
<b:section class='header' id='header' maxwidgets='1'>
6. Change the maxwidgets number to 2 or more.
7. If there's a showaddelement='no', change it to say 'yes'.
8. I don't advise removing the old header entirely unless you can otherwise preserve the title for the search engines, but if you mean to try, I understand that you'll have to change locked='yes' to 'no'.
9. Save your new template.

Some have remarked that they have no header at all, and I don't know what that's about. In new blogger, you might find a section like this, which reflects the fact above that I have the mentioned html/javascript page element added to that header.

<b:section class='header' id='header' maxwidgets='4'><b:widget id='HTML6' locked='false' title='' type='HTML'/><b:widget id='Header1' locked='true' title='JUDY GARLAND BLUES (Header)' type='Header'/></b:section>

Various statements of fact and warnings on this subject may be missing or careless at present, so beware.