The Gimp: new custom header (Part 2)
After looking at Writing in Wax, a blog that has implemented some of my tips, I saw I left out something in this post, The Gimp: new custom header. I told you how to remove part of the border. Here is how you remove the rest of the border.
Locate this code in the CSS:
#description {Delete border:1px solid #222; and that will remove the rest of the border.
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #222;
border-width:0 1px 1px;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#777;
}
Also see: Customizing your Header: Add an Image
Labels:
Classic Blogger,
Design,
GIMP,
Graphics,
Header
6 Comments:
Just used your suggestion to get rid of that pesky border and it worked like a charm. As a blogging novice, I bow down to the master. :)
K.
PS. Thank you for both the comments and the link!
I may just be going nuts, or I could be slightly retarded (I'm actually sleep deprived, lol).. But you never showed the code required to actually insert the new image into the blogger template....
My template preview now just shows a blank header :(
All I wanna do is use my shiny new banner...and Blogger isn't making it easy for me,lol. I've tried lifting some html from here and there with no luck...
Actually, your text hiding tactics have proven most helpfull, but it just doesn't tell me how to get that bannner up there...
I think I found the code! Finally...it's all about using the right search terms, ayy ?
Here goes:
* put this code in your template between the (style> and (/style> tags in your blogger template:
#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
background: #fff url(http://your image.jpg) no-repeat top right;
}
* change the URL between the parenthesis from http://your image.jpg to the URL assigned by your web host
You notice that it says "no-repeat top right". That moved my image to the right. You can change that to left or center.
sly hoax, I did post that, but in another post...
Customizing your header: add an image
When I get home I will cross reference these posts.
Hey Annie,
Did you notice any negative effects in removing your header and description? I want to do it on the blog I copied your style for but I'm wondering if there will be a negative effect in the future in searches and page rank. I'm wondering because I've toyed a little with SEO on it and have managed to get that blog in the top 5 for a couple of gardening related searches and I don't want to shoot myself in the foot.
Also recently I downloaded a little program called Inskcape that I've played around with for making vector images. It's a little confusing for me since I'm more familiar with Photoshop but they say if you can use GIMP then it should be pretty easy to use also. Thought I'd pass it on if you didn't know about it so you can have something else in your graphics tool bar.
@mrbrownthumb, No, I haven't noticed a difference. It is my thinking that the search engines get their information from another part of the template. That part is just eye candy for us and the readers. In doing a search for something relevant to my blog topics, I consistently come up on the the first page it seems. But, to tell you the truth, I just don't pay a lot of attention to it.
I'm going to look into Inskcape...thanks for the heads up. I can never have enough programs in my graphic arsenal.