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.
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.
Figure 2: Choosing your Theme
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.
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.
Figure 5: Setting to Default Master
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)
Figure 7: SPLink Button
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.
Figure 9: Adding an image
Figure 10: Change the source
Figure 11: Removing the added line
Figure 12: the finished result in Design Mode
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 )
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.
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 🙂