Graphicalwonder - Shane Perran's SharePoint Customization Blog

« A view from the road (Information Worker Deep Dives) | Main | Boot Camp: Mac + Windows »

April 04, 2006

Advanced SharePoint Customization: Adding your company logo with a twist

Download the PDF walkthrough for adding your company logo to a page while keeping the navigation bar and logo backgrounds separate.

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"
before.jpg


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."
after.jpg

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 Pings

TrackBack URL for this entry:
http://www.graphicalwonder.com/cgi-bin/mt-tb.cgi/389

Comments

Post a comment




Remember Me?

(you may use HTML tags for style)

divider.jpg
April 2006
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            
divider.jpg
Categories
divider.jpg divider.jpg