Click here to Skip to main content
15,867,568 members
Articles / Productivity Apps and Services / Sharepoint
Tip/Trick

Why is my WebPart so Ugly?

Rate me:
Please Sign up or sign in to vote.
4.75/5 (5 votes)
19 Dec 2010CPOL 18.3K   4   4
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)


Written By
Architect AdhiMarg Technologies Ltd.
Hong Kong Hong Kong
Resident of Hong Kong, TOGAF 8 certified architect with over 15 years of international experience in the IT industry. Exceptional exposure to the marine / shipping technologies and knowledge of large scale database system architecture, enterprise systems design and work flow implementation.

Comments and Discussions

 
GeneralMy vote 5 for good work! Pin
Abdul Quader Mamun17-Dec-10 5:23
Abdul Quader Mamun17-Dec-10 5:23 
GeneralGood work Pin
Abdul Quader Mamun16-Dec-10 8:46
Abdul Quader Mamun16-Dec-10 8:46 
GeneralReason for my vote of 5 Excellent Pin
Member 313707815-Dec-10 23:55
Member 313707815-Dec-10 23:55 
GeneralReason for my vote of 5 nice idea Pin
rokarthik13-Dec-10 21:45
rokarthik13-Dec-10 21:45 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.