I recently did a theme on a site and the desire was to have the WSS sites look similar to the Portal areas. I don't know how many times I've seen this kind of request and it usually leads to all kinds of having to edit tons of pages directly, doing funky things with default.aspx, etc. Here's the styles you need to override in your theme to get a banner above the WSS menubar. The trick is all done through CSS by positioning the image and using offsets, so this shows up on all pages (including the admin pages).
.ms-banner a {
height: 100%;
padding-top: 54px;
}
.ms-bannerframe img {
display: none;
}
.ms-bannerframe td {
padding-left: 8px;
}
.ms-bannerframe, .ms-grheaderbackground, .ms-stormefree {
background-image: url(sitelogo.jpg);
background-repeat: no-repeat;
border-bottom: 0px solid;
height: 72px;
}
A bit of explaination of the tags here. Heather Solomon had an excellent posting here about doing this by just overriding the .ms-bannerframe, etc. styles. The problem however is that if you want the effect of the menubar below the image, this doesn't work. There's a hard coded valign=middle in the default.aspx page that will always override any CSS style you apply to it.
.ms-banner a
Unlike the portal menus (where there's a style for every frickin' menu item, selected and unselected) the WSS menu is wrapped up in a single <A> tag. We override this to a) set it to 100% and b) push the text down towards the bottom of the <TD> that surrounds it. Why set it to 100% height? If we don't, the padding value doesn't work.
.ms-bannerframe img
This is overidden to hide the logo.gif image. As we now have a <TD> that is much larger than it was, the image gets stretched and looks silly so overriding this tag hides it.
.ms-bannerframe td
With the image hidden, it still has a <TD> that it lives inside so we need to push the <TD> over so the menu text has a bit of an indent.
A couple of things to note. Change the sitelogo.jpg to whatever you want here. This should be an image that stretches across the page, but can be partial. Just use the background-color (not specified here) to be the background and blend your image into it. You'll have to change the height and offset values here to match your image. Also this CSS will hide the default logo.gif image that appears to the left of the menu. Why? Because this trick requires you to pad the <A> tags so it pushes them down onto the menu bar (which really is the background color) so the logo.gif image gets stretched as well. There may be a way to do this using margin-top or something which will push the text down without making the <TD> tag the full height, but I haven't tried that yet.
Also a friend turned me onto a fantastic CSS resource here. It's a cheatsheet for CSS, but is very handy so if you're mucking about with Themes and Styles, check it out. Cheers!
UPDATE: I've updated this blog to be a bit more clear on why the tags are doing what they do. I'll follow up tommorow with some screenshots as a picture is worth a few hundred lines in a blog somewhere.