Wednesday, December 15, 2010

Change SharePoint 2010 Site Logo Via CSS

I thought that I created this post before, but I guess it was either the SharePoint 2007 Logo, or the SharePoint 2010 Search Button. So here it is.

Very much like the two examples above, if you simply want to change the site logo via CSS globally, or for a single site. Without having to go to the Site Actions > Site Settings > Title and description > adding in a URL to site logo. Then simply do the following:

  • Copy your image anywhere users can access it
  • Paste in the following CSS into your custom CSS file

.s4-titlelogo{
background-image: url(/_layouts/images/centraladmin_security_48x48.png);
background-position:left center;
background-repeat: no-repeat;
}
.s4-titlelogo > a > img{
visibility: hidden;
width: 48px;
height: 48px;
}

  • Update the background image URL path above in red to where you uploaded the image
  • Change the width and height above in Blue to match the image dimensions.

Before:
image

After:
image

12 comments:

Anonymous said...

It is possible to change the logo directly in the properties of the site.
I do not have a SharePoint 2010 under my hand to point it for you but I have done it before so I am sure

Erik Swenson said...

Yes, if you simply go to site settings, Title, description, and icon. You can manually add in a URL path to the logo but that only changes it for that specific site. By using CSS you can easily update all sites with just CSS and it can be made globally.

Stacy said...

Good post!

Most people don't realize that a lot of design customization in SharePoint can be done just by CSS modifications.

jhonblack said...

Excellent post, thanks for collating the information. I have been searching google and yahoo for information related to this and it led me to your bloglogo design

Cori said...

Worked perfectly, thank you.

Affordable Logo Design Packages said...

Nice post. Great blog. Thanks for the share. It was very interesting and informative. Keep posting. I follow you.

Anonymous said...

Hello,
I would like to change the link in the logo, so once you click on the new logo will redirect to another page.

alex said...

Thank you for sharing this! Just what I’ve been searching for. Great info!

Assignment Writing

alex said...

There Is Obviously a lot to know about this. I suppose you made Some Great points in the Feature also.

Custom Essay Writing

kurt me said...

great work thanks for sharing great source of information. thesis writing service

Arabella Simson said...


This blog Is very informative, I am really pleased to post my comment on this blog. It helped me with ocean of knowledge so I really belive you will do much better in the future. Good job
Airport Taxi

Hamza Shahzad Shahzad said...

Awsome blog! I will for sure drop by it more often!
Toronto Pearson Airport Taxi
Toronto Airport Taxi
Pearson Airport Taxi