Style webparts differently

Here we go…

We are constructing our new intranet based on Sharepoint technology. One of the requirements of our Internal Comms department is to have coloured webparts based on the content they contain.

Now, this might seem a straightforward thing to do, one could expect that one of the properties of a webpart is style… but that’s off course not the case (as often with Sharepoint).

Looking through the webparts using the IE Developer toolbar I wondered if it would be possible to target styles to the specific webparts without going into code. So I started adding a content editor webpart (CEWP) to the page and editing the source to define some styles.

After some digging with the toolbar it seemed that these styles do exactly what I want:

• td#MSOZoneCell_WebPartWPQx table tr This style formats the full webpart
• .ms-WPHeader td#WebPartTitleWPQx h3 a This style formats the title text
• td#MSOZoneCell_WebPartWPQx table tbody tr td table tbody tr.ms-WPHeader td This one formats the title bar

The x has to be replaced with the number of the webpart (you can find this when looking at the source of the page or by using the IE Developer toolbar)

example source for the CEWP

<style>

/* ———————————————————
   This style overrides the colors for announcements webpart
   ———————————————————*/
/* Set text color for title*/
.ms-WPHeader td#WebPartTitleWPQ2 h3 a{
  color: white;
}
/* Set background color for title and remove the bottom border*/
td#MSOZoneCell_WebPartWPQ2 table tbody tr td table tbody tr.ms-WPHeader td{
  border-bottom: blue 0px solid;
  background-color: blue;
}
/* This style completely colors a specific webpart*/
td#MSOZoneCell_WebPartWPQ2 table tr{
background-color: #d5d9ec;
}
/* —————————————————-
   This style overrides the colors for calendar webpart
   —————————————————-*/
/* Set text color for title*/
.ms-WPHeader td#WebPartTitleWPQ3 h3 a{
  color: white;
}
/* Set background color for title and remove the bottom border*/
td#MSOZoneCell_WebPartWPQ3 table tbody tr td table tbody tr.ms-WPHeader td{
  border-bottom: #ff9900 0px solid;
  background-color: #ff9900;
}
/* This style completely colors a specific webpart*/
td#MSOZoneCell_WebPartWPQ3 table tr{
background-color: #ffcc99;
}
/* ————————————————-
   This style overrides the colors for tasks webpart
   ————————————————-*/
/* Set text color for title*/
.ms-WPHeader td#WebPartTitleWPQ6 h3 a{
  color: white;
}
/* Set background color for title and remove the bottom border*/
td#MSOZoneCell_WebPartWPQ6 table tbody tr td table tbody tr.ms-WPHeader td{
  border-bottom: #006600 0px solid;
  background-color: #006600;
}
/* This style completely colors a specific webpart*/
td#MSOZoneCell_WebPartWPQ6 table tr{
background-color: #00ff99;
}
</style>

Resulting in

 

 Don’t forget to set the chrome type of the CEWP to none.

See you next time…