Styling individual webparts

Question

I've got a publishing site where webparts need to look different based on which siteType they are in.

Got a 3 webpart styles (each style can be applied by simply adding a class to the top level webpart div) and a couple of different siteTypes. For example, in siteType A you want all news-webparts to have a blue style, but in siteType B you want them to have a red style.

What would be the best practice for applying the styles for the webparts?

My current plan is to have a page layout for each siteType where I run some js that style the webparts based on their ID ( the id starts with #MSOZoneCell_WebPartWPQ and ends with a number ) But that doesn't feel like a solid approach. What if the ID's change?

What is the general best practice for styling individual webparts.

Answer 1

The styling should be done with css and of course if you create your own Page Layouts you can easily control each web part zone so whatever web part you put inside of that web part zone will get the style you are after. Without the creation of control adapters or any custom deployed code.

Example:

<div class="content-zone news-area">
<WebPartPages:WebPartZone runat="server" FrameType="Default" AllowPersonalization="true" ID="LeftZone" Title="Left Zone" Orientation="Vertical" /> 
</div>

The css will for example be:

div.content-zone.news-area tr.ms-WPHeader td.ms-WPHeaderTd {
    background: transparent ('/_layouts/images/customer/icons/news.png') no-repeat left top;padding-left:40px !important;
}
div.content-size.news-area td.ms-WPBorder {
 /* content for your web part */
}

You can use jquery for setting different header styles if there are chrome type borders or not which is not possible otherways but that is as far as I would do with JQuery. I have several examples on different techniques but they don't fit in this answer.. :)

Answer 2

JavaScript to brand web parts = Not a good idea unless it is utmost necessary.

This is possible by creating Control Adapters for each type of web part you want to brand.

It requires some code though. But the essence of it is that you can wrap the web part within a <div /> with a class and then you can do whatever to it with CSS and JavaScript.

Here are 2 guides to help you start

guide1
guide2

Hope it helps :)