Custom Header
I have a custom header idea for this blog and have the complete set of Photoshop skills to put one together (a link should be here to the Seppo World Tour thread on TGF) but I have no IDEA where to stick it in my template in order to get it to show up. Any Blogger fans have an idea?
And please make sure the obligatory "stick it in my template" jokes are well thought out and hillarious. Thanks!
posted by Jeremy @ 2:39 PM
17 Comments:
So, are you talking like a background that your blog title will sit on top of? Something that will replace that entirely?
Your template will have a section that says something like the following:
<h1 id="blog-title">
<ItemPage><a href=">$BlogURL$<"></ItemPage>
<$BlogTitle$>
<ItemPage></a></ItemPage>
</h1>
<p id="description"><$BlogDescription$></p>
The <h1> part encloses your title and a link to the main page of your blog. The <p> part encloses your blog description. You can replace the <$BlogTitle$> and remove the <h1> (standing for heading type 1, generally used for text and formats your heading bigger than other text) if you want to replace the entire title. If you want to underlay the image, then you have to work with the stylesheet area. If you tell me exactly what you want, I can send you a snippet you can place into your template.
One word of advice when fiddling with your templates is to keep a copy of the part you are changing around in a comment (enclosed with <!-- and -->) rather than deleting it and adding new parts.
Awesome, awesome, awesome!
Yeah, what I want to do is instead of the current green header background with the auto blogger text on top, I want to simply do a fixed image header with a graphic that I design and dump the text all together. Then make the entire header a link back to the homepage.
Do you know what pixel size I need to make the image for the header. Is that info provided somewhere?
Working with blogspot templates is particularly trying because it combines three different things you need to know:
1. HTML
2. CSS
3. Blogger template tags
HTML gives you the "markup" of the text: Is this text the title of your page? Is this a heading? A link? Should it be flashing? The answer to that last one is always no. :D
CSS gives you the styles to apply to your markup: All your level 1 heading can be in giant bold italics with an orange background, and all your paragraph font can be in a tiny Arial font, aligned right with pictures of rainbow behind it. Or not.
The blogger template tags give you the ability to create auto links to archives, comments, etc.
Ok, Your template looks like it has a section that looks more like this:
<div id="blog-header"><h1>
<ItemPage><a href=">$BlogURL$>"></ItemPage>
<$BlogTitle$>
<ItemPage></a></ItemPage>
</h1>
<p><$BlogDescription$></p></div>
Replace that with
<div id="blog-header">
<ItemPage><a href=">$BlogURL$>"></ItemPage>
<img src="your_image_url" />
<ItemPage></a></ItemPage>
</div>
removing the description and the h1.
I think this will work, but your style sheet area might need some editing. I think from what I can see that your image should be 692px wide.
Also, if you want to remove your little diamond shape print that goes along the bottom of your heading and the green background of the heading, you can remove the part that says id="blog-header" within the div tag.
I think that the total heading, with the green topper and the diamond pattern, is 75 px tall.
The second link should have pointed to here.
I missed the part about the link! Replace <$BlogUrl$> (I made the wrong bracket in my previous posts) with your link. Also, you can remove the ItemPage tags, as they are just conditions to check to see if you are on the non-main pages or not. If you want the link on all the pages, then you can remove all the ItemPage tags.
Wow! You know your stuff. So, I prepared my image and replaced the text in the template per your instructions, but when I previewed it, the old header was gone and the new one was there but the rest of the page was ALL over the place. Hmm... Any ideas?
It's probably a sizing issue. If you tell me where the image is that you will be using, I can fiddle with a dummy blog I will create for myself that uses the same template that you do, and let you know how to make it work.
You are the best!!
Here it is on flickr, of course.
http://photos22.flickr.com/34383362_91fb23db7a_o.jpg
Um...yeah, what Eingy said.
Yeah, Chad and I are late to this party. Carry on.
I'll get back to you during my lunch break with what I hope is a complete solution. :D
Oh noes! That was me, Ei-Nyung, not Seppo.
Can't wait to see it.
I really appreaciate all the help.
I think your image is one pixel too wide. When I look at the "all sizes" page on flickr, it says that it's 693 px wide.
After you clip off one pixel, try replacing
<div id="blog-header"><h1>
<ItemPage><a href="<$BlogURL$>"></ItemPage>
<$BlogTitle$>
<ItemPage></a></ItemPage>
</h1>
<p><$BlogDescription$></p></div>
With:
<div><a href="your_link_here"><img src="http://photos22.flickr.com/34383362_91fb23db7a_o.jpg" /></a></div>
The spacing within the div tags is important. Any whitespace enclosed within the start and end of the div tag and outside of the other tags within it (ha!) will be displayed as a blank space and mess up your layout.
Check out http://templatesandbox.blogspot.com/ for the version with the slightly wide pic that you posted. I check on both Firefox and IE and it seemed to render fine.
I had that replacement code all in one line, but the comment thingy wrapped the lines.
Post a Comment
<< Home