SharePoint Customization Tip: Add your company logo without site definitions or unghosting

In the last tip I quickly showed you how to use a theme to remove the logo.gif logo that shows up in the top left of all SharePoint sites by default.

The tip was based on adding the following class to your theme.css file:

.ms-bannerframe td img {
display:none;
}

Let’s take this one more step:

One of the most commonly asked for customizations I get and I would guess most people get is “Can I add my company logo to the page”.

The answer is most definately yes. In the past this has generally been done using a custom site definition or by editing the page in FrontPage 2003 which unghosts the site. There is another alternative that I have never seen mentioned, adding it via the theme and it’s actually quite easy.

Now that we have removed the logo.gif from the page using the method above, we have a blank top bar to work with. We also know that ms-bannerframe is applied to a table which extends across the entire top of the screen.

Based on this we can create a background-image that will a) extend across the entire screen and b) hold the company logo.

Quick steps to accomplish this:

Add the class above to your stylesheet to remove the logo.gif.
Create a background image with your company logo placed to the far left. You don’t want your image to tile so you need to make it nice and wide 1600pixels recommended.
Edit the ms-bannerframe class to display your background image.
Specify the height in ms-bannerframe. It should be the same height as your background image.

It should read
(pixels are relevent only to YOUR design obviously).

.ms-bannerframe {
background-image:url (yourimage.gif);
repeat:no-repeat;
height:50px;
}

One small glitch! – The navigation is going to overlap your company logo because we hid the original logo.gif that was there.

That’s easy to work around. We also know the .ms-banner class is applied to the top navigation which is overlapping the logo. Just add a little left padding to push that over.

To add left padding add this to your ms-banner class:
/* The padding should be about the same width of your company logo */
.ms-banner: {
padding-left: 50px;
}

That should do it. Simple but effective way of adding your own custom company logo to a SharePoint site without site definitions or unghosting.

Before

After

With a little thought you can accomplish a lot through your theme.css.

You may also like...

6 Responses

  1. Darrell says:

    I’m trying add a background image to a subpage without modifying any of the other pages. Is there any way to add an actual background image not just the header image? If so can it be done on a subpage?

  2. Danielle says:

    We’ve already added our own company logo to our areas. How do you change the link on the company logo? We have several portals, one of which is our main portal. On each portal we would like the logo that sits at the very upper left corner on our “areas” to only link back to our main portal, and not the main page of each portal.

    Danie

  3. Bil Simser says:

    I have a new post that shows you how to have your logo image above the menu section. You can find it here:
    http://weblogs.asp.net/bsimser/archive/2005/12/19/433512.aspx

    I’ll be blogging tommorow with a more detailed entry on this with images which might help explain it better.

  4. Shane Perran says:

    Kirk,

    You edit themes by editing the CSS located in the theme.css.

    The first thing you have to do is apply a theme. You can do that via the site settings link, then “Apply a theme to site”.

    Your best bet is to follow these steps:

    1) create a dummy site that can be deleted later after you are done tweaking/testing your theme.

    2) Apply a theme. If you are new to this, your best option is to download our theme pack of 10 free themes, you can get them here: http://www.infotechcanada.com/teamtools and click the “Free Theme Pack” link on the left. Instructions on installing the themes included in the zip file.

    3) The reason I say to use these is because I have added fairly detailed comments to the theme.css stylesheets which will help you get started customizing themes. Installing these should be easy, just follow the instructions in the read me file.

    4) Apply on the the theme pack themes (for example: glass.

    5) Open your site in FrontPage 2003, and locate the _themes folder on the left. Then locate the theme.css file.

    6) From there you can start sifting for through the comments and make changes are you see fit.

    7) Once you have created a look you really like you can save the theme.css file to your DESKTOP and then read the following post for instructions on creating a new theme which you can from there on out apply to any WSS site you wish.

    Read the New Theme Setup/Creation Article

    Hope this helps.

    Shane

  5. kirk says:

    I would like info on how to modify the theme!! I’ve changed the company logo on my sharepoint site, I can change a page individually, but how do I modify the theme?

  1. November 10, 2005

    SharePoint Customization

    For what seems like years I pushed and I pushed. And then finally one day it happened. Shane started blogging. These days, I seem to spend more time reading his posts than I do writing my own and I couldn’t…

I would love to hear from you.

%d bloggers like this: