Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / productivity / SharePoint

Why is my WebPart so Ugly?

4.75/5 (5 votes)
19 Dec 2010CPOL 19.7K  
Apply the current Theme to your WebPart
Have you wondered why the custom webpart does not follow the current themes? Well, there is a easy way to apply this; however the tricky part is to know the "Class Name".

Here is the code to load the Theme in CreateChildControls():

C#
String themeCssUrl = SPContext.Current.Site.OpenWeb(SPContext.Current.Web.ID).ThemeCssUrl;
CssLink cssLink = new CssLink();
cssLink.DefaultUrl = themeCssUrl;
this.Page.Header.Controls.Add(cssLink);
this.CssClass = "ms-WPBody";


Refer here: Cascading Style Sheets Class Definitions for Windows SharePoint Services

Following are the styles that are applied for a WebPart:

Area around the menu in Web Parts.
CSS
.ms-WPMenu


Title of a Web Part.
CSS
.ms-WPTitle
.ms-WPTitle A:link, .ms-WPTitle A:visited
.ms-WPTitle A:hover


Border around a Web Part when the part is selected.
CSS
.ms-WPSelected


Contents of a Web Part.
CSS
.ms-WPBody
.ms-WPBody TABLE, .ms-TPBody TABLE
.ms-WPBody A:link, .ms-WPBody A:visited
.ms-WPBody A:hover
.ms-WPBody th, .ms-TPBody th
.ms-WPBody TD
.ms-WPBody h1, .ms-TPBody h1
.ms-WPBody h2, .ms-TPBody h2
.ms-WPBody h3, .ms-TPBody h3
.ms-WPBody h4, .ms-TPBody h4
.ms-WPBody h5, .ms-TPBody h5
.ms-WPBody h6, .ms-TPBody h6


Border around a Web Part.
CSS
.ms-WPBorder


Enjoy.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)