This is Part 4 of my series on ‘My Users Don’t Like SharePoint…‘
“Can you make it not look like SharePoint?”
Sorry, I can’t use the Mustang metaphor on this one, it’s too beautiful.
SharePoint can be a little rough to stare at day after day. It’s basic, and a little boring. The 2010 interface was a huge improvement over 2007’s, and the 2013 is an improvement over 2010’s. Eventually, they’ll be hatred for the 2013 design I’m sure. I don’t remember the last SharePoint gig I was on where branding wasn’t a part of it, in some manner. It’s ugly, it is, but it is functional.
Fortunately SharePoint can be branded/themed/designed, whatever you want to call it, to look like anything but SharePoint. Don’t believe me? Check out TopSharePoint.com, an entire site dedicated to showcasing awesome SharePoint sites. Small disclaimer: these sites listed are publicly facing marketing sites and not intranets for a company. Making your SharePoint look like one of these might be an unrealistic expectation. However, it is a great start for getting ideas for cleaning it up and removing the SharePoint look and feel.
Branding SharePoint can be a basic task (change a color or two, layout, etc.) using a custom CSS file to a large project (new master pages, page layouts, full styling, images, etc.) which can engage a team of designers and developers. Branding can be setup to automatically handle mobile devices, giving a richer user interface to SharePoint for iPads, tablets and phones.
If you have the money, pay for a team to come in and brand SharePoint until it’s not recognizable anymore. Go to town and make SharePoint look like anything but SharePoint.
If you’re like most, budgets don’t allow for a full redesign. I’m going to walk through taking a SharePoint site and doing some basic tasks to spruce it up a little. My CSS file is linked at the end of the walk
Before we dive in. True design takes into greater consideration the user experience (UX) along with the user interface (UI). Not only should it look good, but is it functional. Up to now, my other posts have been about improving UX, and though this post might be about UI, it should really be considered in tandem with UX. If you make it look pretty, but users still can’t do anything, what’s the point?
With that said, let’s make SharePoint look a little prettier.
Change the theme. Pretty easy, go to Site Settings > Site Theme (under Look and Feel). Pick your desired colors. If you’re using SharePoint Server, you have the option of taking it a step further and customizing your colors as well.
I’ve picked a new theme, Construct. When you do, you’ll notice it’s a slight change, but definitely still looks like SharePoint.
Use a custom CSS file. This isn’t tough. A Site Owner can do apply a custom CSS file, no need for SharePoint Designer or custom master pages, with the Publishing Site Feature enabled. If not, you’ll need to modify your master page to link to your CSS file.
To really make a noticeable difference, I decided to set the page fixed width (see Lesson Learned: Using Fixed-Width Layouts in SharePoint. Explore whether or not your SharePoint design should flow with the browser or be set to a fixed width.). And since the page is fixed width, I threw in a background color. Notice I took out the large image. A caveat with fixed width is that content can spill over and make the page look bad. I went ahead and removed that image.
Disclaimer, I’m terrible at matching colors, which is why I leaned towards an almost monochromatic theme.
Let’s rework the left quick launch a little bit, adding a little depth and style by bolding the section headers and indenting the links.
Change the site logo to your company’s logo. If the logo isn’t a solid square (most aren’t), make sure its background is transparent so it will fit nicely. Save it to the Site Assets folder, and then set the logo in Site Settings > Tile, Description and Icon.
Now let’s take the top link bar, add a little custom styling, and modify the left quick launch to add some gradient. Check out the Ultimate CSS Gradient Generator for a great free tool for creating gradients that even work in IE9.
It’s coming along isn’t it? Using the same gradient tool, and a little more styling to the background and web part titles, here’s my finished result.
Not bad eh?
This is all in one CSS file, which you can download here. This took me about 20 minutes to do, spent most of the time playing with colors.
Upload the CSS file to your Site Assets folder, and then specify this as your custom CSS file (Site Settings > Master Page > Alternate CSS URL). If you don’t have the Master Page option, you’ll need to enable the Site Publishing feature. If you can’t enable this, or don’t want all of the other stuff that comes with it, you can link to your CSS file by editing your master page in SharePoint Designer.
There are a ton of resources online for how to customize your master page, apply a custom CSS and do some pretty cool stuff using jQuery. Here’s a few I’ve booked marked along the way:
- Use some coloring in your calendars.
- Start off with some FREE master pages and designs:
- Add a little styling to your web parts: Customize the UI of web parts in SharePoint 2010.
- Kyle Schaeffer ‘s blog focuses on branding and design on SharePoint. http://kyleschaeffer.com.
- Branding SharePoint 2010 – The Basics Part 1
- Customization and branding options in SharePoint 2010
- Use different styles for your views
- Color scheme tools and creating a SharePoint color theme
Til next week, Happy SharePointing!
When you say “Making your SharePoint look like one of these might be an unrealistic expectation.” who do you mean? We have a full time webmaster but he’s never used SharePoint before. He is a talented graphic artist with long-time experience with Flash, Dreamweaver, the Adobe Creative suite. He’s also had some limited experience with CSS. Is it reasonable to hope that he may be able to make a share point site look like one of those highlighted. Or, are you saying you need to be an experienced SharePoint developer? Fingers crossed here.
It takes a lot of effort, in SP2010, to get it to look slick like a fully branded public web site. SP2013 boasts developer friendly tools can be used, like Dreamweaver, and the master pages are a little simpler now. It’s still a significant effort for a fully branded site as you need to override a lot of SPs default CSS, but it’s possible.
Also, I am starting to see a push for intranets to look more like public sites, to help with user adoption and internal brand recognition. Didn’t see it as much a few years ago when I wrote this one.
I would love to continue this discussion, feel free to email me David.lozzi at slalom.com
Is it possible to color code a Sharepoint 2013 calendar? I’m not finding anything addressing 2013.
Yes! My color code solution works on 2013 as well!
Hey David – Great post! I tried to look at the CSS file for this but only found PowerShell scripts on CodePlex.
Thanks for the heads up, try again.
It works now. Thanks again!
Terrific stuff Dave, I hadn’t realised how easy it was to customise SharePoint. Many thanks.
Excellent, glad I could help!
As always,thanks Dave! This is great.