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…
Tags: CSS, moss, sharepoint, style, webpart
Wim's Blog 
May 15, 2009 at 1:42 am |
…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
May 20, 2009 at 9:11 am |
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?
May 20, 2009 at 3:01 pm |
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
May 20, 2009 at 3:39 pm
hey wim,
that sounds good. There is also a css-solution based on the title of the webpart:
http://www.heathersolomon.com/blog/articles/Controlling-Single-Web-Parts-with-CSS.aspx
But in Sharepoint you can change the title. so thats also not a dynamic solution.
Create me an example with jquery, i want to see it 🙂
May 20, 2009 at 11:37 am |
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… 😉
August 6, 2017 at 5:01 am |
copy Writing
Style webparts differently | Wim’s Blog