How to Modify a Site Look by Changing the CSS in MS SharePoint Designer

This content requires Flash

To view this content, JavaScript must be enabled, and you need the latest version of the Adobe Flash Player.

Video Transcript

Another way that you can modify the site look and feel is by changing the CSS inside of the core.css file. In order to do so I will again, I will Alt+Tab over to shift on Designer and then bring up the Manage Styles Task pane. I click on Task panes and Manage Styles. Notice over on the right here that the Manage Styles Task pane came up with all of the styles inside of core.css loaded. Now there are a lot of styles in core.css. So in order to make this a little bit more manageable, we offer some options. I am going to click on the Options drop-down and choose to Show Style used in current page. This reduces the number of styles in this dialog by quite a bit and I am going to scroll down so I can modify the MS Web part title tag.

To do so I can either right-click and choose to modify the style or I can double-click which will open up core.css with that style selected inside of the CSS file. Once inside the CSS file, I can change the font-family using IntelliSense and I am going to choose MS Gothic in this case. I am also going to change the weight from bold to normal. I am going to save this page, now what happens when I modify core.css is that the file has to be copied down into the current site collection otherwise modifying core.css would modify every site collection on the server.

So when I press Ctrl+S to save this file I will be prompted to customize the SharePoint stylesheet and of course, this action may change the appearance of all pages on the site, because every page uses core.css. I will click Yes to the warning and then I am also going to modify the Web Part title A:link and the A:visited tag because most of the Web Part titles are in fact hyperlinks back to the list that they reference. I am going to change the color here by selecting it and hitting the colon, getting IntelliSense and choosing to change them to maroon and I am going to make them so that they have a text declaration of underline.

Again, save this page and now every page that references core.css should have the Web Part titles both maroon and underlined. I am also going to change the hover property of the Web Part title so that when you hover it, the underline will go away, I am going to scroll down to the Web Part title, hover selector. Select the underline property and change that to none. Save this again.

Notice, over in the Task pane that as I move around inside of the CSS file, the selection of the Task pane changes as well. So when I click to see the A:link I see that the A:link is selected inside of the Manage Styles Task pane and when I click on A:hover, I see that A:hover is selected inside of the Manage Styles Task pane.

Now I am going to Preview, default.aspx in the browser and we should see the changes that I just committed. I will expand Internet Explorer to explore to its full size and I can see here that in fact, the Projects list Web Part title is maroon and underlined and then when I hover it, the underline goes away. Same goes for the Projects list and the Project task and you will see what I mean by this is a hyperlink, because when I click on it, it takes us to the Projects list, All items page.