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

SharePoint: Append link to bottom of CQWP using jQuery

Task

Append link to the bottom of Content Query Web Parts that show articles from News subsite so that users can click the link to view more news articles of the specific category.
The picture below is in Finnish, but link at the bottom called “Lisää…” is the one added using jQuery. Also the CQWP style is quite heavily modified, but I’m sure you get the point.

Solution

Not being a fan of custom CQWP implementations for this purpose nor modifying the out-of-the-box XSL Style Sheets using SharePoint Designer, I decided to solve this using jQuery.
Add the following code to CEWP inside <script> tags:
$("#" + $('td[title^="WEBPARTTITLE"]').attr("id").replace("Title", "") + " ul").append("<li class='moreNews'><a href='/news/Pages/Forms/Article.aspx?TreeField=METADATACATEGORY&TreeValue=METADATAGUID'>More news...</a></li>");

Where WEBPARTTITLE is the title of CQWP. Note that you need to use the starts with selector (^=), as the actual HTML node title attribute contains also other text after the actual title you define in web part properties. For the style moreNews, you can define what you see best, I just added some padding around the link. For the link I redirect the user to a site pages library view that has metadata filtering enabled and visible on the left: this is done using the TreeField and TreeValue parameters.

UPDATE:
For SharePoint Online, use code such as this:

<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.0.min.js"></script>
<script>
$("span[title='YOURWEBPARTITLE']").closest(".ms-webpart-chrome").find("ul").append("<a href='/Lists/YOURLIST/Forms/AllItems.aspx'>All items...</a>")
</script>