« A view from the road (Information Worker Deep Dives) | Main | Boot Camp: Mac + Windows »
A few months ago while creating the Free Theme Pack I made numerous posts on theme and css customization which spawned several other discussions and comments. One noteable was how to add your company logo to the page using CSS, quite a few of us tried different things and in the end we were left with manipulating .ms-banner and .ms-bannerframe in order to get the job done.
Today while working on a new project I found myself again implementing the company logo with the theme, however this time I needed more. I needed the menu bar separate.
With the current version there is no way to separate the "logo background from the top navigation background"

However with a little thought and some slightly more advanced CSS I was able to accomplish exactly what I needed. The screenshot below shows the separation between the logo and nav bar."

To accomplish this I used the same method of manipulating the .ms-banner and .ms-bannerframe but with a few extras.
This time I added a border to .ms-banner which would ultimately act as the navigation bar. Then I added position:relative to the .ms-banner a:link states so that I could then move them down onto the border using the "top" property.
This lets me have a background color for the menu (technically it's the border) and still keep a clear separation of the background behind the logo which is actually .ms-bannerframe.
Download the company logo via themes walkthrough in PDF
Hope it helps - happy customizing!
TrackBack URL for this entry:
http://www.graphicalwonder.com/cgi-bin/mt-tb.cgi/389
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 | 29 |
| 30 |