| Author |
 Topic  |
|
|
KathyR
Permanent Resident
New Zealand
2969 Posts |
 Posted - 11/27/2006 : 7:20:42 PM
|
I am trying to tweak my blog to make it more "mine" (visitors may note that it does look a little different than it did originally!) and would like to place an image in the main header with the blog name superimposed on it. Others have done it before me so I know it can be done. But I am not a computer geek nor am I very html familiar.  I have tried searching various blogger helps but have not found anything satisfactory.
I did actually manage, at one point, to get a picture on the header but the blog name was beside it, instead of on top of it, and I was not able to stretch the image the full width of the header. Anyone, HELP!! Please!
KathyR
Rudeness is the weak man's imitation of strength.
My Blog |
|
|
jacquieh
New Pal
12 Posts |
Posted - 11/28/2006 : 05:41:33 AM
|
This is just the sort of question we can answer at Bloggers' Paradise
This is what you need to do:
Find the part of your template that looks something like:
#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
}
Add in a background-image attribute like this
#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
background-image:url("YOUR URL");
}
where YOUR URL is the URL of your image which should be cropped to a suitable size.
If there is already a background there, replace the exsiting URL with yours.
If you don't like what that does please show us exactly what your header style looks like and tell us what you don't like about it.
Jacquie
http://jacquie.typepad.com
http://bloggersparadise.forumhum.com/ |
 |
|
|
KathyR
Permanent Resident
New Zealand
2969 Posts |
Posted - 11/28/2006 : 1:44:45 PM
|
Thanks so much Jacquie! I will try that and post back here on how it goes. I think what I have already tried was similar but I'm not sure! Time will tell. A blog is a great learning process and they say you are never too old to learn!
KathyR
Rudeness is the weak man's imitation of strength.
My Blog |
|
|
|
kpc19011
Chatty Knitter
146 Posts |
Posted - 11/28/2006 : 1:52:29 PM
|
Hi KathyR, I noticed that we both have the same blog template and I too have been wanting to change my header bar to look more...me! Well, here is what I did, I hope this helps.
Create an image that is 740 pixels wide. Upload the picture onto a Draft post. Copy the URL from that post (it's the http between the quotes). Click on your Template button and scroll thru the code till you come to...
/* Blog Header
----------------------------------------------- */
@media all {
#header {
background:#476 url("http://photos1.blogger.com/your-header.jpg") no-repeat left bottom;
Paste the URL into the quote marks. Save template and then view blog. I still have to fingure out how to edit or remove my Blog Name & Tag...it's hard to read off the background...I'll figure it out soon, I hope:)
Kris
SouthSub-Chicago
Just Let Me Finish This Row
http://kniftyred.blogspot.com |
|
|
|
KathyR
Permanent Resident
New Zealand
2969 Posts |
Posted - 11/29/2006 : 8:52:33 PM
|
Thanks, Kris. I have got part of the image on my header but am not yet totally happy with it. Only the bottom part of the photo is showing (at least it stretches right across now!) and the bottom corners are square instead of rounded. But it is getting there! A work in progress. When the weather clears up again (it is raining cats and dogs again right now with a light dusting of snow on the hills behind us - and we are supposed to be going into summer here!) I'll get back out in the garden and see if I can get a few more photos and try and get something the right size. In the meantime, my blog looks better, to me, than it did.
KathyR
Rudeness is the weak man's imitation of strength.
My Blog |
|
|
|
jacquieh
New Pal
12 Posts |
Posted - 12/01/2006 : 12:04:15 AM
|
The rounded corners are actually part of the original images - the corners are the same color as the background so it appears that the image itself has rounded corners even though it is really square cornered.
It will only show as much of the background as it needs to to accommodate the text in the header box. You can change which part of the picture it shows by changing the word 'bottom' to 'top' or 'center' in the #header clause.
Jacquie
http://jacquie.typepad.com
http://bloggersparadise.forumhum.com/ |
|
|
|
KathyR
Permanent Resident
New Zealand
2969 Posts |
Posted - 12/01/2006 : 4:41:35 PM
|
Thanks, Jacquie. Looks like I may have to be content with having square corners. I will try out changing the word in the header clause when I have some time to play.
I really do appreciate all the help I have been getting on this. I really am flying fairly blind when it comes to this type of thing.
KathyR
Rudeness is the weak man's imitation of strength.
My Blog |
|
|
|
lella
Permanent Resident
9701 Posts |
Posted - 12/02/2006 : 12:30:19 AM
|
I loved the way you tweaked your blog header. It's very beautiful.
Lella
[img]http://www.geocities.com/zippianna/carrot.gif[/img]
Blabbity Blog
|
|
|
|
Jane
SustaYning Member
USA
4298 Posts |
Posted - 12/02/2006 : 03:55:52 AM
|
My blog has the same template, too. My header photo seems to look different on different computers and in different browsers, but I just let it be. I went into the template and removed all the code for the rounded corners, and left all the little do-dads that I like.
You can also change the font, color, and size of your title and description by altering your template in the same manner. Mine is Fine Hand, with an alternate of Trebuchet; again, which one is displayed depends on each person's computer.
I like your header, Kathy - and Kris' Clapotis, too (Lella already knows that I love hers!).
Jane
Blog: Not Plain Jane
Photos: My Flickr Album
|
|
|
|
KathyR
Permanent Resident
New Zealand
2969 Posts |
Posted - 12/02/2006 : 2:55:44 PM
|
Since I have been attempting to tweak the look of my blog I have been taking more notice of the look of other people's blogs. You guys have cool-looking blogs!
I took your advice, Jacquie, and centred the image in the header. I like it a lot better now. Thank you! Now, maybe a little colour tweaking next!
KathyR
Rudeness is the weak man's imitation of strength.
My Blog |
|
|
| |
Topic |
|
Images in Header
