modifying template

[Julie]

Ok, here's the blog in question.

See the header that says "Blogging Blogs"? I want to change that header image to something other than just a boring old rectangular box. I want to maybe stick in a couple banners next to the title or something.... or create a custom header with images and stuff. How would I alter the header code to do this?

[JuggoPop]

first the link is here: http://googlibrarian.blogspot.com (had an extra quote)

I can answer your question, but I need you to post a copy of the template code here. I used to use blogger and understand all that jazz, but I don't remember how that template looks off-hand. (code wise)

[Julie]

Oopps. Sorry about that.

Here's the code:


</div>

<p class="post-footer">

<em>posted by <$BlogItemAuthorNickname$> @ <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a></em> &nbsp;
<BlogItemCommentsEnabled>
<a class="comment-link" href="<$BlogItemCommentCreate$>"<$BlogItemCommentF ormOnclick$>><$BlogItemCommentCount$> comments</a>
</BlogItemCommentsEnabled><BlogItemBacklinksEnabled>
<a class="comment-link" href="<$BlogItemPermalinkUrl$>#links">links to this post</a>
</BlogItemBacklinksEnabled>
<$BlogItemControl$>
</p>

</div>

<!-- End .post -->

<!-- Begin #comments -->
<ItemPage>

<div id="comments">

<BlogItemCommentsEnabled><a name="comments"></a>

<h4><$BlogItemCommentCount$> Comments:</h4>

<dl id="comments-block">
<BlogItemComments>

<dt class="comment-data" id="c<$BlogCommentNumber$>"><a name="c<$BlogCommentNumber$>"></a>

At <a href="#c<$BlogCommentNumber$>" title="comment permalink"><$BlogCommentDateTime$></a>,

<$BlogCommentAuthor$> said...

</dt>

<dd class="comment-body">

<p><$BlogCommentBody$></p>
<$BlogCommentDeleteIcon$>

</dd>

</BlogItemComments>

</dl>
<p class="comment-timestamp">
<$BlogItemCreate$>
</p>

</BlogItemCommentsEnabled>
<BlogItemBacklinksEnabled>
<a name="links"></a><h4>Links to this post:</h4>
<dl id="comments-block">
<BlogItemBacklinks>
<dt class="comment-title">
<$BlogBacklinkControl$>
<a href="<$BlogBacklinkURL$>" rel="nofollow"><$BlogBacklinkTitle$></a> <$BlogBacklinkDeleteIcon$>
</dt>
<dd class="comment-body"><$BlogBacklinkSnippet$>
<br />
<span class="comment-poster">
<em>posted by <$BlogBacklinkAuthor$> @ <$BlogBacklinkDateTime$></em>
</span>
</dd>
</BlogItemBacklinks>
</dl>
<p class="comment-timestamp"><$BlogItemBacklinkCreate$></p>
</BlogItemBacklinksEnabled>


<p style="padding-left:20px;">
<a href="<$BlogURL$>">&lt;&lt; Home</a>
</p>
</div>

</ItemPage>

<!-- End #comments -->

</Blogger>



</div></div></div>

<!-- End #main -->









<!-- Begin #sidebar -->

<div id="sidebar">

<!-- Begin #profile-container -->
<center><a href="http://www.internet-marketing-blog.com/2006/03/01/clean-up-on-aisle-three/"><img src="http://www.googlelibrarian.com/images/green.gif" border="0"></a></center>
<br>
<script src="http://mapstats.blogflux.com/button.js.php?id=15411" language="JavaScript" type="text/javascript"></script>
<noscript><a href="http://mapstats.blogflux.com/15411.html"><img src="http://mapstats.blogflux.com/button.php?id=15411" alt="Blog Flux MapStats: Stats and Counter for Blogging Blogs" border="0" /></a></noscript>
<!-- End #profile -->



<!-- Begin .box -->

<div class="box"><div class="box2"><div class="box3">

<MainOrArchivePage>
<h2 class="sidebar-title">Notice:</h2>
The Google Librarian blog has moved to the <a href="http://www.googlelibrarian.com/wordpress">Google Librarian</a> website. Please update your bookmarks.
<br>
<h2 class="sidebar-title">My Stuff</h2>
<ul>
<li><a href="http://www.googlelibrarian.com">Google Librarian</a></li>
<li><a href="http://www.googlelibrarian.com/wordpress">Librarian Blog</a></li>
<li><a href="http://www.googlepages.us">Google Pages</a></li>
<li><a href="http://www.oasis-news.com">Oasis News</a></li>
</ul>

<h2 class="sidebar-title">Cool Blogs</h2>
<ul>

<li><a href="http://www.internet-marketing-blog.com">John Scott's IMB</a></li>
<li><a href="http://www.n7v.net/v7ndotcom-elursrebmem/">NeO Blog</a></li>
<li><a href="http://www.toddw.info">Todd W</a></li>
<li><a href="http://www.mystical-twilight.com/">Colleen's Wordpress Themes</a></li>
<li><a href="http://trappercase.wordpress.com">The Trap</a></li>
<li><a href="http://www.juggopop.com">JuggoPop's Worthless Blog</a></li>
</ul>
<h2 class="sidebar-title">Recommended Sites</h2>
<ul>

<li><a href="http://www.v7n.com">v7n</a></li>
<li><a href="http://www.doseuk.com/">Funny Slogan T-Shirts</a></li>
<li><a href="http://crackheadlighters.com/">Crazy T-Shirts</a></li>


</ul>
</MainOrArchivePage>

<h2 class="sidebar-title">Previous Posts</h2>
<ul id="recently">
<BloggerPreviousItems>
<li><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItem Title$></a></li>
</BloggerPreviousItems>
</ul>

<MainOrArchivePage>
<h2 class="sidebar-title">Archives</h2>
<ul class="archive-list">
<BloggerArchives>
<li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
</BloggerArchives>
<ArchivePage><li><a href="<$BlogURL$>">Current Posts</a></li></ArchivePage>

</ul>
</MainOrArchivePage>


<!--

<p>This is a paragraph of text that could go in the sidebar.</p>

-->

</div></div></div>

<!-- End .box -->




</div>

<!-- End #sidebar -->









<!-- Begin #footer -->

<div id="footer"><div><div><hr />



<p><!-- This is an optional footer. If you want text here, place it inside these tags, and remove this comment. -->&nbsp;</p>



</div></div></div>

<!-- End #footer -->








</div>

<!-- End #content -->



</body>

</html>

[JuggoPop]

your missing some of it... starts with the closing of a division tag

also, put it in code brackets...

like this (if you don't mind)

(the mods might care)

[Julie]

Sorry about that. I didn't know about the code option. It must have cut off some of it on default or something. Blah, and now it won't let me post it all in here.. says the message is too long.

Here's the code for my template attached:

[JuggoPop]

If you want to change the grey box at the top to another color to use as your bg of the header change this:

/* Blog Header
----------------------------------------------- */
@media all {
  #header {
    background:#456 url("http://www.blogblog.com/rounders/corners_cap_top.gif") no-repeat left top;
    margin:0 0 0;
    padding:8px 0 0;
    color:#fff;
    }
  #header div {
    background:url("http://www.blogblog.com/rounders/corners_cap_bot.gif") no-repeat left bottom;
    padding:0 15px 8px;
    }
  }
@media handheld {
  #header {
    background:#456;
    }

You need to change the hex value and if you want to keep the corners rounded you will need to edit the two corners_cap images and then change the ref url.

I used this type of layout once and just got rid of the bg color and the rounded images, but I replaced the whole header with one image... which I don't think you want to do.

You will also need to edit this area:

<!-- Blog Header -->

<div id="header"><div>

  <h1 id="blog-title">
    <ItemPage><a href="<$BlogURL$>"></ItemPage>
	<$BlogTitle$>
	<ItemPage></a></ItemPage>
  </h1>
  <p id="description"><$BlogDescription$></p>

</div></div>

If I remember correctly you can just place your logo and banner codes between the DIV tags. Be sure to link your logo the same way they linked the title in the above code. (replacing <$BlogTitle$> with the image but keeping the <ItemPage> tags and the href that they used.

That should do it. Hope that helps.

[Julie]

Awesome...thanks!!!