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

coloured webparts 

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

See you next time…

Advertisements

Tags: , , , ,

5 Responses to “Style webparts differently”

  1. Warren Says:

    …02:30 in the morning, and i have a demo in a couple hours. This came in just in time and works brilliantly..

    Thank you, 🙂

    Regards
    Warren

  2. André Says:

    i think it’s not a good solution, because its not dynamic. You can’t style a specific webpart as you want. When you add, for example, a new task-webpart, it gets a new ID and so there is no style. You never know the right ID for the specific webpart. But I want e.g. that all Task-Webparts are green. any solutions?

    • wimdeboel Says:

      André,

      That is correct and will be hard to do without server side code since the client has no idea of the list type.

      I also colored webparts using JQuery based on the url which is behind the title of the webpart or based on the title of the webpart. But that still is no solution to color based on the list type.

      If you want I can try to create an example on how this is done with JQuery

      Wim

  3. Warren Says:

    Then what you could do, is what I’m trying to avoid….

    is change the VWStyles.xml on the server to include your styling options, note you’ll need to understand CAML to an extent. Another possible solution is to create “Copes” of the webparts through SharePoint Designer and name them eg Green_TaskList, and style accordingly, that way when you want to add a webpart you can specify Either Green_Tasklist or “Std” Tasklist..

    i dunno, i’m on training today so my mind is not all mine at the moment… 😉

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: