Customizing SharePoint with Web Parts: Web Part Appearance

While writing about how to modify a shared Web Part yesterday, I showed an example of the Web Part properties task pane.  There are three humble, yet key components of every Web Part that are represented in its properties task pane, and they are:  Appearance, Layout, and Advanced:

As you would expect, each one of these three components affects the appearance of the Web Part on your site.  In many cases, the defaults will suffice, but for the times that additional customization of your Web Part is required, it pays to be familiar with the options presented here.  Today I'm going to address how you can make your Web Part's Appearance look sharp. 

Clicking on the + symbol next to Appearance (as pictured above) in your properties task pane will expand the customization options associated with the appearance of your Web Part:

Shown above are the Appearance options for the Content Editor Web Part, but these options are pretty much the basic appearance options for all Web Parts.

A Title is optional, though by default it will show the name of the Web Part.  You may replace this default title with a title which fits your needs, or simply delete the default content and leave the field blank for a title-free Web Part appearance.

As you can see, both the Height and Width of your Web Part are individually customizable.  You may either stick with the default (automatically adjusting the height and width to fit the Web Part zone in which the Web Part will live), or choose a fixed height/width by selecting the Yes radio button.  Should you choose a fixed height/width, you'll just need to enter a positive number in the input field, and choose your unit of measurement from the dropdown (with Centimeters, Inches, Millimeters, Points, Picas, and Pixels being your options).

Your Chrome State options are Minimized or Normal, with Normal being the default.  Normal will display your Web Part on the site in its entirety, whereas Minimized will display only the Web Part's title bar.

Chrome Type provides several customization options regarding the manner in which your Web Part's frame is displayed.  Since I think it's helpful to note the differences by showing as well as telling, that's what I've done below:

Default renders the visual Web Part components that have been determined as being the standard Chrome Style Web Part appearance for your site.  Your mileage may vary, but this is what the default looked like on my test site:

None will only display the contents of the Web Part, with no border or title bar:

Title and Border displays the contents, border, and title bar:

Title Only displays the content and title bar, but no border.  As you can see, in the case of my test site, the default setting (pictured above) is for title only:

Border Only displays the content and border, but no title bar: 

I hope this was a helpful intoduction to the Appearance options associated with Web Parts.  Tune in tomorrow for a crash course in the Web Part Layout options.


Posted Sep 30 2008, 06:51 PM by John Anderson

About John Anderson

John Anderson joined Bamboo Solutions as Manager of Content & Syndication in May 2008 after a 12-year career at AOL.  New to SharePoint at the time of his hiring, John was tasked with creating a new blog for the just-launched Bamboo Nation community in which he would document his daily SharePoint learning process.  Thus was born the end user-centric SharePoint Blank, for which John authored 200 posts within a year, and which he continues to write today.  John writes SharePoint Blank in addition to his responsibilities as Bamboo Nation's de facto managing editor and, while he has learned much about SharePoint in his first year, he gleefully awaits the release of SharePoint 2010, and the reset button that release will represent for SharePoint Blank.

Bamboo Solutions Corporation, 2002-2010