Customizing a SharePoint site is not necessary -- you can use the default theme or related themes straight from the box. And this is really how SharePoint was intended to be used by the mainstream. But if you don't want your SharePoint site to look like the hundred other SharePoint sites at your company, you can customize the look and feel. This is something I've been experimenting with.
I am, by no means, an expert on SharePoint customization. But I am able to transform a default SharePoint site, such as the following --
Into a SharePoint site that looks like this:
Or like this:
(I removed the content of the above image for confidentiality reasons.)
Here are the steps I follow to customize a SharePoint site. Before jumping into this tutorial, you should know that not all SharePoint implementations are the same. My process may be different from yours. Still, I think the general steps for customization are relatively similar. The steps assume some familiarity with SharePoint.
Note: These steps explain how to install and customize the SharePoint blog site type as the root site. If the blog is a subsite, the steps are a bit different (but the basic techniques are the same.) See the last section, "Alternative Method: Creating the Blog as a Subsite."
By the way, I'd really appreciate any feedback on this post, especially if you are a SharePoint expert. Is there a better method for doing this? Are the quirks due to a unique implementation, or is this how SharePoint works universally?
Whatever your process is for creating a new site (it's usually a one-button click process), go through it, choosing the blog site type. When you choose the Blog site type, you can embed posts on the home page of the site, rather than creating the blog as a subsite.
After the SharePoint blog site installs, you're prompted to set up groups for the site. By default, SharePoint provides you with three groups: Visitors, Members, and Owners. Usually these groups tie in with your Active Directory, so add the names of the people you want to access your site.
After setting up your groups, your SharePoint site shows the Default theme, which doesn't look bad -- it's just so unoriginal.
You'll be limited to the basic selection of themes until you activate the publishing features. To activate these features, you must activate them at the site collection level first and then at the site level.
Note: The order of activation is critical. If you reverse the order, it's not possible to activate the publishing features.
After activating SharePoint's publishing features, you'll notice that you have a lot more options available on the Site Actions menu.
With publishing available, you now have the option of implementing master pages (rather than just themes). Selecting a different master page radically changes the look and feel of your SharePoint site, whereas simply selecting a new theme changes only the color tones of the default install.
To select a master page:
Now when you view your site, you'll notice that it looks like the Blueband master theme, except for the Quick Launch sidebar.
Note: Whether the Quick Launch sidebar displays problematically or not may be due to the way your SharePoint system was installed -- I'm not sure.
This step may not be necessary, depending on how your SharePoint site looks. But in my environment, the Quick Launch sidebars don't match the theme. This irregularity is either due to some glitch in the implementation of SharePoint at my work, or it's a defect in the SharePoint product itself. Either way, there's a quick workaround for it. You'll need SharePoint Designer, by the way.
To make the Quick Launch sidebar match the master page you selected:
Now when you go back to your SharePoint site, the sidebars should match the mater pages you selected. (Before I figured out this fix, I nearly give up on SharePoint's master pages altogether. )
If you see an error message, refresh your page a few times. It sometimes takes SharePoint a few minutes for this change to set it. When it does, your sidebar should be fixed.
Note: If you install the team site type (rather than the blog site type) and follow the same steps -- activating the Publishing feature and selecting the master theme -- you may not have any trouble with the sidebar.
At this point, you have the basic frame, which looks all right, but no doubt you'll want to customize the site even further. To do this, you need to unghost the style sheet. Currently, most of your site's styles exist at the server's root level, which you probably don't have access to unless you administer SharePoint for your entire company. When you sever the link to this parent, the parent's stylesheet will copy down to your local level (the process of "unghosting").
After doing this step, you'll see two new stylesheets that you can customize: band.css and core.css. These stylesheets are what you'll modify to change the look and feel of your site.
Note: If you install the blog as a subsite, rather than having the band.css and core.css stylesheet unghost (or copy down), you'll see only the core.css stylesheet. I'm not sure why.
Although these stylesheets has been copied down from the server, only the stylesheet copies down, not the images. So the stylesheet will still have references to images located in the default server root that you don't have access to. Nevertheless, this turns out not to be such a big deal. For now, you have access to the stylesheets that drive your site. Later, when you need to modify the images, you just change the background URL references in the stylsheet to absolute URL references to images you upload to an image library.
As you customize the stylesheet, you'll notice that two main stylesheets drive the design: core.css and band.css.
In your efforts to modify the styles, you'll find the Web Developer extension and the Firebug extension for Firefox are indispensable. These extensions allow you to see the styles for the different elements of your SharePoint site. It's also helpful to have dual monitors, because the content is SharePoint is nested in about a thousand tables, and often the style name isn't visible unless you can stretch your window across both monitors.
To customize the stylesheet:
Note: SharePoint is tricky in that sometimes edits are only visible to you. They need to be checked in and published before others can see them. Make sure you have a test account in which you can log in as another person and see if the changes you made are visible.
With images, you'll see in your stylesheet an attribute such as background-image: url('../../Images/bl_Shadow_Right.jpg');. SharePoint is using the image stored in the root directory. As far as I know, you need server access to actually access this directory. To change the image, upload an image into an image library on your SharePoint site, grab the URL, and replace it in the above, such as this:
Note: Sometimes you have to check out a file before you can make changes to it. After you make changes to it, you have to check it back in. The Check In and Check Out options are available in the right-click menu when you select a file.
Unfortunately, searching content on SharePoint blog sites returns mixed results. Often you get a dozen view files rather than the actual page files you want. SharePoint search allows you to define specific scopes that you want to search, but you have to configure this scope.
To set the scope to search only blog posts on your site:
You may not want to install the blog as the main site type. Instead, you may prefer to install a team site, and then install the blog as a subsite. The blog site types are a little more fragile. If you break the blog, you can't merely add a new one. You have to fix it or reinstall the entire site. As a subsite, you avoid this scenario.
When I created the blog as a subsite, the behavior varied from the above steps. The toolbar wouldn't inherit from the default.master of the team site, even though I clearly made these settings on the master gallery page. The reason? I believe the toolbar on the blog isn't the same component as the toolbar on the team site. Also, the stylesheet for the blog subsite wasn't unghosting.
To fix this, I changed the settings on the Master Page to not inherit from the parent site. I then made a change on the blog subsite's default.master file. After the core.css unghosted, I then navigated to the _styles > core.css of the parent site, copied the stylesheet, and then pasted it over the _styles>core.css file of the blog subsite. Strangely, I didn't have to do the same for band.css. Band.css doesn't even appear on the blog subsite. I believe the inheritance problems occur because the parent site is a team site and the subsite is a blog site, and the two don't have entirely interchangeable components.
Get new posts delivered straight to your inbox.
I'm a technical writer based in the California San Francisco Bay area. Topics I write about on this blog include the following technical communication topics: Swagger, agile, trends, learning, plain language, quick reference guides, tech comm careers, and certificate programs. I'm interested in information design, API documentation, visual communication, information architecture and findability, and more. If you're a professional or aspiring technical writer, be sure to subscribe to email updates using the form above. You can learn more about me here. You can also contact me with questions.