The SharePoint Designer

Brand. Design. Amaze.

Apr 12

Adding a Touch of Glamour: Part One (as seen on NBSP)

No Gravatar
When people think of SharePoint, the general impression is boring to look at, but they have to use it, because that’s where all the information is. This post is about how to add a touch of glamour to your site, without needing a full designer on your team
Page Content

When people think of SharePoint, the general impression is boring to look at, but they have to use it, because that’s where all the information is. This post is about how to add a touch of glamour to your site, without needing a full designer on your team. Your users will appreciate it, and the user experience is brought up a few notches. A lot of what I will write is common knowledge to most people, but to build a castle, you always need the simple and basic foundation.

So we begin with a stock-standard Team Site.

2011-04-08-AddingGlamour-Part01-01.jpg
Figure 1: an untouched Team Site

Changing your theme

The first change that can be done with 3 clicks, is changing the theme. You do this by going to Site Actions > Site Settings, then look under Look and Feel and click Site Theme. For the purpose of this article, I chose Ricasso. And by simply applying the theme you have already changed your user experience.

2011-04-08-AddingGlamour-Part01-02.jpg
Figure 2: Choosing your Theme

2011-04-08-AddingGlamour-Part01-03.jpg
Figure 3: The applied theme to the Team Site

Simple Master Changes

When any changes have to be made to your master page, I always suggest using the Starter Master Page by Randy Drisgill. I use starter_foundation.master mostly, and for this article that is exactly what we are going to use. Download the file and import it into your Master Pages directory in SharePoint Designer.

2011-04-08-AddingGlamour-Part01-04.jpg
Figure 4: The Master Page folder

Right click on _starter_foundation.master and set it to the default master page. Then refresh your page, you will see that there are a few changes to the look and feel, but not much.

2011-04-08-AddingGlamour-Part01-05.jpg
Figure 5: Setting to Default Master

2011-04-08-AddingGlamour-Part01-06.jpg
Figure 6: _starter_foundations master page applied.

So we have our base, and now we are going to fill it out. Open up the master page and go into Design mode. You will see a small “x” image in the top left hand corner, this is usually where the site icon will go, but we are going to add our sites image instead. Click on the image and then go into Code mode (see Figure 8)

2011-04-08-AddingGlamour-Part01-07.jpg
Figure 7: SPLink Button

2011-04-08-AddingGlamour-Part01-08.jpg
Figure 8: the Code view

Don’t forget to add your image to the Images folder (you do this by going to All Files > Images > Import File. I decided to go with the End User SharePoint logo for this one), Click in between the divs and click the Insert Tab, click Picture, and choose the image you want to use. It will add another line with that image, copy the source (scr) and pop it into the LogoImageURL and then delete the line you just added. Go back to Design Mode and see the finished product.

2011-04-08-AddingGlamour-Part01-09.jpg
Figure 9: Adding an image

2011-04-08-AddingGlamour-Part01-10.jpg
Figure 10: Change the source

2011-04-08-AddingGlamour-Part01-11.jpg
Figure 11: Removing the added line

2011-04-08-AddingGlamour-Part01-12.jpg
Figure 12: the finished result in Design Mode

2011-04-08-AddingGlamour-Part01-13.jpg
Figure 13: How the site looks so far.

In part two, I will show you how to change your menu so it has a simple style, but stands out really nicely (and it is all copy and paste 2011-04-08-AddingGlamour-Part01-14.png)

In part three, we are going to be adding a random quote generator as well as a random picture generator; this will go into the banner space (the white space next to your site logo).

All of this will take only 2 hours to complete, and the change in your site will be seriously significant.

AMENDED

Veronique Palmer of Lets Collaborate mentioned this in the comments on the NBSP EndUser article: She is completely right, and it is an easier way to do it too, but in my article I wanted to introduce you to searching and working with the master page. if you ONLY want to add your company logo this is how you do it:

Veronique Palmer: Yes, but you can also change the site logo without using SharePoint Designer. Upload a pic to library, copy the shortcut, then Site Actions – Site Settings – Title, Description and Icon, and paste it into the URL. Easy peasy for site owners.

Thanks to V for adding this :)

Tags: , ,

3 Comments

  1. Dustin BrunettoNo Gravatar

    July 2, 2011

    Reply

    Awesome info over again. I am looking forward for more updates.

Leave a comment

The SharePoint Designer is using WP-Gravatar