Monday, November 17, 2008

Alternative way to Change Site Logo

OOTB SharePoint allows you to change the logo of the page from the default:  titlegraphic.gif image to another image by going into site settings > Title, Description, and Icon.

The following method is a way to add a new logo to your page with just CSS. If you wanted to make this more global you will need to use an alternate method to override the default CSS classes.

  • Upload your new logo to either the server or to a list on your site.
  • Add a Content Editor webpart to the page.
  • Add in the following to the source viewer.

<STYLE>
.ms-titleimagearea{
background-image:url("/_layouts/images/xyzcorp.gif");
background-repeat: no-repeat;
background-position: top left;
}
#ctl00_onetidHeadbnnr0{
visibility: hidden;
height:130px;
width: 126px;

}
</STYLE>

  • In the example above I have uploaded the xyzcorp.gif logo to the images folder on the server.
  • Make sure you modify the elements above in bold green: logo name, height, and width (of logo).
  • Save the page and you should now have the new logo on the page.

Default:
image

Modified:
image