Adventures in CSS: Putting a banner image above the menubar in WSS

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.

4 Comments

  • Thanks Heather for the info. I need to check but I thought it didn't work with the menubar using just the offset. The problem is that there's a valign=middle that's hard coded into the banner area so that's why the &lt;A&gt; tag is there to offset this.

  • There are always several ways to skin a cat. If you use a short graphic, then yes it will be centered in the middle. But if you are creating a header image (when I think header I think full width) and build a graphic at the width specifications I suggest (1800 pixels), then it will not be centered.

  • Hmmm, I don't agree that if you use a wider graphic that the text will not be centred. It's hard coded to the TD surrounding it so there's no way to get the text to move, except to offset it (with the padding) and that will only work if the &lt;A&gt; tag is set to 100% height.



    Maybe we're saying the same thing. I'll post a step-by-step with images to show the differences as it's clear to me when you look at it and text blogs and comments can always get lost in translation.

  • I just finished a quick-n-cheezy christmas theme which I'll put up later. I used this approach in the theme and it worked fine.



    A couple of small things that I tweaked:



    1) I added the rest of the link states (a:link, a:visited, a:hover, a:active).



    2) I found adding a small amount of bottom padding on the banner gave the nav a little breathing room.

Comments have been disabled for this content.