SharePoint 2010 Web Parts Customization

SharePoint 2010 Web Parts Customization

In this post i am trying to explain, how we can customise SharePoitn 2010 webparts into different styles and colors.

Step 1:

Add Content Editor Web Part to page

SharePoint 2010 Web Parts Customization
SP 2010 Content Editor

Step 2:
Hide Layout for content editor web part

SharePoint 2010 Web Parts Customization
Content Editor Properties

Now content editor web part is on page but it is hidden.

Step 3:
Click inside content editor web part, Editing Tools breadcrumb will appear on top menu.

SharePoint 2010 Web Parts Customization
Editing Tools breadcrumb

Click on Insert
Click on HTML tag button then select edit html source. Html source editor will appear like this:

SharePoint 2010 Web Parts Customization
Html Source Editor

Step 4:

Write following code in Html Source Editor

• To change back ground color of web part title:

.ms-WPTitle {BACKGROUND-COLOR: #ffba0c; }

SharePoint 2010 Web Parts Customization
WP title background color

If we want to change title back ground color for specific web part then we have to specify class id for that web part e.g.

#rtWPQ3 .ms-WPTitle {BACKGROUND-COLOR: #ffba0c;}

• To change the color of web part body:

.ms-WPBody { BACKGROUND-COLOR: #ffeca5}

SharePoint 2010 Web Parts Customization
web part body color

• To Change Link Hover Color

.ms-WPBody A:hover
{
color:#66cc00;
}

SharePoint 2010 Web Parts Customization
WP Hover Color

• To change Web Part Title text color

.ms-WPTitle
{
color:#6600cc;
background-color:#ff9999;
}

SharePoint 2010 Web Parts Customization
WP Title Text Color

Thanks very much for reading have a good day!

Share this post

Comments (4)

  • Elliptical Guide Reply

    Great! thanks for the share!

    November 14, 2011 at 5:13 am
  • Leon Twitty Reply

    Aloha dude! I’ve just stopped by to thank you for this awesome site! Keep working that way.

    November 20, 2011 at 11:45 am
  • Amado Bedocs Reply

    Hi! Many thanks for your website ! Frankly speaking I have never come across anything that informative.

    November 26, 2011 at 12:41 am
  • kevin Reply

    Many thanks for this! Genius! I;m using it to override stupid MS defaults for page on intranet.

    July 19, 2013 at 1:23 am

Leave a Reply

Your email address will not be published. Required fields are marked *