SharePoint: Web part title bar colors using jQuery, part 1

Challenge

How to set web part title bar colors so that different web parts have different colors?

Solution

With jQuery, you can set the web part title bar background color using two lines of code.

$('td[title^="WPTITLE"]').siblings().andSelf().addClass("WPTITLEPURPLE");
$('td[title^="WPTITLE"]>h3').addClass("WPTITLEPURPLE");

WPTITLE can be the full web part title, or just something from the beginning of the title. In this example jQuery starts with selector is used (^=) because the actual title attribute of the HTML contains also other text after the actual web part title. The color is set in a CSS class, which in this example is WPTITLEPURPLE.

See part 2 for improved approach that gives content editors easier and more controllable way to set the web part title bar colors.

Technorati Tags: SharePoint,jQuery

Technorati claim code: N48QKHDE2CM5