Discovering Styles in Designer 2010

The standard method for finding out what classes are being used on a page in SharePoint is to use Firebug or IE Developer Tollbar. SharePoint Designer 2010 has a few new features that can also help in finding this information.

Skewer Click

In SharePoint Designer, open a page or masterpage and make sure that you are in Design or Split view. Click the Skewer Click button from the Home tab on the ribbon and then click on an object on the page:

Skewer Click

A list will then display with all of the classes that affect the object.

Skewer Click

When you select a class, its properties will display in the CSS Properties panel.

CSS Properties Panel

Copy Styles

An easy way to make a copy of a style that is applied to an object is to select the object, view the list of styles in the CSS Properties panel, and then right-click on a style and select New Style Copy:

New Style Copy

A dialog box will display. To copy the style into your custom css stylesheet, under Define in, select Existing Stylesheet. Then Browse for your custom stylesheet. You can then make changes to the css through the dialog box or you can keep it as is. Click OK.

New Style Dialog

Your custom stylesheet will then open in Designer with the selected style copied into it.

Copied Style

You can also choose to add the copy directly into your page by selecting Current Page from Define In and then clicking the box next to Apply new style to document selection.

Current Page

Designer will add the word Copy to the style, insert it into the page, and update the reference to the style within the HTML. Obviously, adding a bunch of styles directly to a page is not a best practice, but it is a possibility.

Advertisements

2 thoughts on “Discovering Styles in Designer 2010

  1. Pingback: Why Hilton Uses SharePoint 2010; The Road to Office 365; Google Rigging Search Results? - SharePoint Daily - Bamboo Nation

  2. Pingback: SharePoint Daily » Blog Archive » Why Hilton Uses SharePoint 2010; The Road to Office 365; Google Rigging Search Results?

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