Customizing SharePoint Themes with SharePoint Designer 2007 and IE8

 

Whilst battling with customisations of SharePoint Online, I found the following information on Kirk Evans Blog… The following post is a really good set of instructions on how to modify out of the box Themes in SharePoint 2007,

It turns out to be pretty easy to customize the look and feel of a SharePoint site using SharePoint Designer 2007 and Internet Explorer 8. Using IE8, you can easily find the CSS class for a particular element and modify it, and SharePoint Designer 2007 makes it easy to make changes to the styles for a site. This is really cool because you can do this even when you don’t have console access to the box or administrative rights to deploy new features.

This may even work with SharePoint Online instances

Apply an Out of Box Theme to Your Site

To get started, create a new site in SharePoint. I am going to create a site called “ThemeDemo” using my MySite, which I don’t have administrative access for in Microsoft’s internal network. Go to Site Actions / Create / Sites and Workspaces” and create a new site called “ThemeDemo” using the “Team Site” template. What you will end up with is the familiar SharePoint look and feel.

image

Open up SharePoint Designer 2007. On the File menu, choose “Open Site” and use the URL to the site you just created. The URL I will use is “http://my/sites/kirke/themedemo”. The thing to notice is the Folder List pane, it will look like this:

image

The next step is to apply an out-of-box theme to the site. Go back to Internet Explorer. Go to Site Actions / Site Settings. Look under the “Look and Feel” column and you’ll see a link to manage the Site theme.

image

The will pull up a new page where you can select from a set of pre-defined themes. I chose the “Reflector” theme. Once you have chosen, click “Apply”.

image

Now that your site has a theme applied to it, you might want to customize it a little bit. For instance, the “Recycle Bin” link is green. Let’s see how you can make modifications like this.

Customizing an Out of Box Theme

Internet Explorer 8 introduces the Developer Tools feature that enables you to inspect a web page’s various components such as HTML layout, CSS, images, JavaScript DOM, etc. You can find this in Internet Explorer 8 by clicking Tools / Developer Tools or simply hitting F12 on a web page to bring up a new window. In the Developer Tools window’s menu, choose “Find / Select Element by Click”. Then switch back over to the IE8 window and click the Recycle Bin link. The Developer Tools window should now jump to the HTML that is used to render the link, and the pane on the right shows the CSS style being applied.

image

We can use the information in this window to customize the theme. At the bottom right, we see that the file Refl1011-65001.css contains a CSS rule “TABLE.ms-recyclebin TD A” with a colour value of #008800. We’ll customize this value to change the Recycle Bin link colour to blue.

Go back to SharePoint Designer 2007 and hit F5 to refresh the site. You’ll see a new folder in the Folder List called “_themes”.

image

Open that folder and expand the Reflector node. Scroll down a bit and you’ll find a file, Refl1011-65001.css. Open that file and look for the CSS rule “table.ms-recyclebin td a” and click on it. You’ll see a wealth of information about that style.

image

Now, it’s as simple as going to the CSS Properties and changing the color. Perhaps you want the color of the link to match another color elsewhere in the page. It’s as simple as going to the CSS Properties pane and clicking on the color property. Choose “More Colors” in that dropdown.

image

In the More Colours dialog, click the “Select” button with the eyedropper icon to select a colour.

image

In IE8 or IE9, hover over the element that has the colour you want. You will see the colour change in the More Colours dialog from green to whatever colour you are hovering over. When you finally pick the colour you want, click and the colour will be chosen. Click OK to choose that colour, and the new colour will be reflected in SharePoint Designer 2007. Finally, click the Save button in SharePoint Designer 2007 to apply the change.

Go back to IE8 and refresh the page to see the change.

image

Does That Change All the Sites?!?!

When you use this method to customize the theme for a site, you are only customizing the current site you are working with. You can verify this by creating a new site and choosing the Reflector theme like we did previously, you’ll see that the Recycle Bin link is still green. If you decide you want to undo all of your modifications to the current site, you can go to the Site Settings menu and choose an out of box theme… all of your modifications will be discarded.

What If You Want to Create a Reusable Theme?

If you want to create a custom theme and make it available to others, see the post “Create a custom site theme and make it available to others”.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s