Blogger Beta - adding a header
Hans was kind enough to leave a comment on Blogger Beta - First experience with editing HTML as to a cleaner way to get my header to show as I want. Here is part of his comment (bold is my editing):
Hi Annie, good to see a fellow-blogger exploring this unknown territory. I guess your approach to replacing your title is quite good. It looks good at your testblog, so it works like it should.
I have a few suggestions for the coding:
You could remove the border-statement from your header-wrapper, instead of setting it to 0px;
If there are no other calls to the $bordercolor-variable, you can remove this variable from the css; this will remove it from the fonts&colors layout editor as well.
You have made the title invisible by setting its color to white and its size to 0 (is that correct?).
You could instead insert the code
display: none; in the css-part of header h1.
I did it, and it works! I suppose there are other ways to accomplish the same thing, but I like this. It is clean and simple. Thanks, Hans!
Labels:
Blogger Beta,
Design,
Graphics,
Hacks,
Header
13 Comments:
Hi Annie, wow, thanks for the honors!
You know, what I like about the new Beta features is that you can define all the colors and fonts you use as variables. In that way you can edit them from the layout editor, and see directly what a different color, font or fontsize does to your blog's appearance. I think that is really nice.
By keeping as much to the Blogger standards as possible, and by only editing the css for all the id's and classes that are relevant to your layout, your template can be used by many other users.
If you want to see more of the workings of css, take a look at CssZenGarden. On this site you can find many layouts made in css for one and the same html-file. All the layout is done with css, not in the html. It is really amazing.
Hans
Hans
Hans, you are so welcome. Your posts have really helped. I know I'm just scratching the surface of getting into the Beta.
I understand about keeping to the Blogger standards, and I'm trying. Not always able to know exactly what to do.
And I have been a fan of CSS Zen Garden for ages! Great site.
Yikes, help. I created a header. How do I incorporate it into my layout (avoiding the HTML). Just learning. Help!
okay i used some of your ideas on tesco-complaint.blogspot.com but i have one problem which you have too. how do we make the graphic clickable to return to homepage?
@blogwhore, The good news is ...it can be done...the bad news is...it involves CSS.
Here is what you will look for in your template:
#header { background:url("http://www.blogblog.com/rounders2/corners_cap_bot.gif") no-repeat left bottom;
padding:0 15px 8px;
}
You will replace it with:
#header {
background:#456 url("YOUR HEADER URL") no-repeat left top;
margin:0 0 0;
padding:158px 0 0;
color:#fff;
}
I haven't worked with the 'Rounders' template much, so we'll start here. I'm sure there will be some adjusting of sizes. (I'm finding it is always something.) But, stick that in and let's see what happens. (remember to save your template on your computer first) If the sizes don't match up, send me a link to your image and I will see what I can do.
@tesco-complaint...guess it depends upon how you look at it. I never saw it as a problem because I didn't care if my header was clickable or not :-)
But it seems I've had a flood of interest in this recently, so I'm working on a post/tutorial for both classic and beta blogger. I should have it in a day or so...depending on free time.
In that case its time for me to subscribe - Thank you!
@tesco-complaint,
No, thank you!! It is usually from readers requesting features that I come up with my posts. You are instrumental in this post.
:)
Hi Annie!
I've used your blog a great deal as you just have an easy way with explaining things for people not overly educated in HTML and the like. Anyway, I do have a question. I've been adding a personalized header to my blog every now and then, but this latest one has me a little baffled. I'm not able to figure out how to get rid of the border, and to center the header. I'm unsure of the codes, is basicly it.
Any advice you can spare? Thanks bunches!
@rach,
1. Find this code in the CSS style sheet:
#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
}
2. And remove:
width:660px;
border:1px solid #ccc;
3. Find:
#blog-title {
margin:5px 5px 0;
padding:20px 20px .25em;
border:1px solid #eee;
border-width:1px 1px 0;
font-size:200%;
line-height:1.2em;
font-weight:normal;
color:#D2B48C;
text-transform:uppercase;
letter-spacing:.2em;
}
4. And remove:
border:1px solid #eee;
border-width:1px 1px 0;
:-)
Annie! Thank you so much! It worked and things look great now. Much thanks! :D
Annie, I love your blog it is so helpful. I have a terrible time with html or anything technical for that matter so this is an awesome resource for me. Thank you so much!
Nicky