Friday, June 18, 2010


If only this were job related, then I'd be REALLY happy!  But for now I'll take my small consolation prizes and small victories.  In relation to my previous blog post, I was finally successful last night in getting my blog header centered and getting the margins and spacing where I wanted it.  After all the countless hours reading blogs and help pages, I finally figured out on my own through trial and error how to center it.  Turns out it was far more difficult to find than I thought, but of course all it needed was the <center> and </center> tags around it and voila!  On my desktop, which uses a standard 4:3 monitor, nothing looks different because the header image is slightly wider than the blog's margins.  On my laptop, though, which has a 16:9 monitor, it is definitely centered now!

The trick was finding just where the command was in the script.  What made it difficult is that it was in the more detailed version, so I first had to click on "Expand Widget Templates" when I was in the "Edit HTML" part of the blog design (not to be confused with the "Edit HTML" tab above the area where you compose your posts).  Once I expanded the HTML to basically show everything, I was able to locate the section on the main header "widget".  There I found three "options" written into the code; the three you can choose if you upload an image to use as your blog header: behind title text, above the title text, or in place of the title text.  Since I was using the image in place of the title text, I found the small section that dealt with it.  It was under <!--Show the image only-->.  I placed the "center commands" (seen above) around this:
<img expr:alt="data:title" expr:height="data:height" expr:id="data:widget.instanceId + "_headerimg"" expr:src="data:sourceUrl" expr:width="data:width" style="display: block;" /> 
Of course that doesn't mean much to anyone, but it's basically telling the computer how to display the image when it's in place of the title text.  I figured I needed to find the specific command because everything else I was trying wasn't centering my image and I noticed the header itself was centered, just not the image in the header.  I was able to figure that out when I put a border around the header and the box itself was centered, but the image inside the box was still on the left.  Whew...

1 comment:

Anonymous said...

The "center" html tag has been deprecated for quite some time now and should not be used on new code. Look up some replacements and google css center tags. It will give you a more uniform look across browsers.