I often get the requirement from the business to draw borders around all webparts, change the background color of specific webparts or even other styling issues. After the first prototype, they often change their mind and tell you which zones (best case) or even which webparts (worst case) they want styled and which not. At first it looks like a challenging problem, but with todays cascading stylesheets you can do a lot. Let me demonstrate this with some examples.
CSS refreshment
Let me first introduce those who are not familiar with CSS to some basic selection rules …
- htmltag : apply style to all elements of a specific type (or htmltag) (styling via html element)
- #someid : apply style to all elements with an id attribute like someid (styling via html attribute id)
- .someclass : apply style to all elements with a class attribute containing someclass (styling via html attribute class)
and some more advanced rules …
- td.someclass : apply style to all td elements with a class attribute containing someclass
- .someclass td : apply style to all td elements which are siblings from a html element with a class attribute containing someclass
- table.someclass td : apply style to all td elements which are siblings from a table element with a class attribute containing someclass
and finally some selectors where we filter an the attribute values …
- [attribute] : apply style whenever an element has this attribute, no matter what it’s value is
- [attribute=somevalue] : apply style whenever an element has this attribute with the specified value
- [attribute~=somevalue] : apply style whenever an element has this attribute and contains somevalue (the values have to be space separated words)
- [attribute|=somevalue] : apply style whenever an element has this attribute and somevalue is in it (the values have to be hyphen separated words)
- [attribute^=somevalue] : apply style whenever an element has this attribute and his value starts with somevalue
- [attribute$=somevalue] : apply style whenever an element has this attribute and his value ends with somevalue
You can find more CSS tutorials and samples on the internet.
Styling the WebPartZones
We use the out-of-the-box pagelayout ‘Blank Web Part Page’ to style the Web Part zones. If you look at the source of the page, you will notice that every zone starts with a table cell (td) and has an id and name, ‘_invisibleIfEmpty’. A simple style to draw a border around every zone is:
td[id=_invisibleIfEmpty] { border: solid 1px #000000; } or td[name=_invisibleIfEmpty] { border: solid 1px #000000; }
If we want to style only the webparts in a specific zone, we will have to alter the pagelayout. Go the the page layout library, download a copy, make some changes and upload it again. Or better, create your own page layouts and page content types and publish these to the site collection. Let’s add a class, borders, in the ‘Blank Web Part Page’ page layout to the webpart zones ‘Center Left’, ‘Center’ and ‘Center Right’ by adding a class attribute with the value borders to the td’s. Change the CSS definitions to:
td.borders[id=_invisibleIfEmpty] { border: solid 1px #000000; } or td.borders[name=_invisibleIfEmpty] { border: solid 1px #000000; }
Styling the WebParts
Those who take a closer look at the source code of a page with some webparts on it, will notice that the parent table of every web part has an attribute TOPLEVEL. To style a border for example around every webpart (including the title and content) you can start with a very simple CSS definition:
table[TOPLEVEL] { border: solid 1px #000000; }
To address specific webparts, for example in a zone, you can change the page layout like described before and add the class before the definition:
.borders table[TOPLEVEL] { border: solid 1px #000000; }
The table with the TOPLEVEL attribute contains two rows, one for the title and one for the content of the webpart. The title resp. content have a specific class ms-WPHeader resp. ms-WPBody. These classes can be used to style the title and content:
.ms-WPHeader { background-color: yellow; } resp. ms-WPBody { background-color: yellow; }
If you dive deeper, you will notice that the title row has a td with a title attribute. This way you can even style individual webparts (as long as the title stays the same) with the following CSS definition:
.ms-WPHeader[title="sometitle"] { background-color: blue; }
There is even a class for the h3 html element specific for webparts, nl ms-WPTitle.
Conclusion
Styling all zones or webparts is rather simple and costs a minimal of time. Once you get some specific requirements for webparts or zones, you have to dive into the page layouts and webparts. Styling custom build webparts gives you more flexibility, but you will often notice that they want to use OOTB and Custom webparts together and style them all the same way. This can be accomplished with some more work, but is not undoable.
