Controlling Single Web Parts with CSS

I often get questions about how can a particular web part be branded separately from all the rest or be branded by type.  For example you want every Contacts list to have a green header bar instead of a tan header bar.  Or perhaps you want a column of web parts on a page to look different than the main area that contains other web parts.

The latter I have always had a solution for, the former I figured out something today.  As with everything that I focus on, these are “no custom development” / “no .NET code” solutions. You can usually build whatever customization you need with custom code.  If you would like to just rely on CSS however, here you go….

Modify a Web Part Based on Type

All web parts use the same code for formatting.  It is just a part of the package deal when working with dynamically generated content and web pages.   All OOTB web parts will use .ms-WPHeader, .ms-WPTitle, .ms-WPBody, etc.  For a full list of styles used by web parts, check out my online CSS reference chart.

If you add one of these styles to your custom CSS file and make any changes, all web parts will be affected.   If you want to selectively control a single web part, you will need to employ the use of some other CSS methods.  For this example I will  be using attribute selectorsPlease note that IE6 doesn’t support attribute selectors, for more info, go here.

Attribute selectors allow you to set up CSS rules based on the presence of an attribute(s) in the HTML element (tag). With this approach, it doesn’t matter that every web part uses the same CSS class names, we are going to look at the unique attributes of a single web part instead.

Find the Attributes

If you run a View Source on a SharePoint page, you can find the code with CSS classes creating the web part title bar:

<tr class=”ms-WPHeader”>
<td title=”Contacts – Create a contacts list when you want to manage information about people that your team works with such as customers or partners. You can share information between your contacts list and Windows SharePoint Services-compatible contacts programs.” id=”WebPartTitleWPQ3″ style=”width:100%;”>
<h3 class=”ms-standardheader ms-WPTitle”><a accesskey=”W” tabindex=”0″ href=”/sites/heather/Lists/Contacts/AllItems.aspx”><nobr><span>Contacts</span><span id=”WebPartCaptionWPQ3″></span></nobr></a></h3></td>…….

If you look at the wrapper table cell, it contains a title attribute among other things.  We can use the value of this title attribute to pinpoint a style change.  This particular title includes “Contacts”.

<td title=”Contacts- Create a……

So now I can create an attribute selector for this HTML element:
selector [attribute=”value”]  {declarations}

Create the CSS Rule

  1. First I am going to set up a basic style that will alter all web part title bars:
    .ms-WPHeader TD {
    background-color:yellow;
    border-bottom:1px solid red;
    }
    View a screen shot of the results.
  2. I can then take the title attribute with the identified value of “Contacts” and add that to my rule using an attribute selector:
    .ms-WPHeader TD[title^=”Contacts”] {
    background-color:yellow;
    border-bottom:1px solid red;
    }
    Now just web parts that include “Contacts” in the title attribute for the table cell tag will pick up the styling.  View a screen shot of the results.

Description of what and why for included items:

 

 

.ms-WPHeader This is the parent table row tag.  I added this to make sure any other random table cells that included “Contacts” in a title attribute would not be affected by this style change.  Including the parent CSS class is optional.
TD This is the HTML element that is the container of the web part title bar.
[   ] Attributes need to be in square brackets [  ].
title This indicates the attribute we are targeting, the table cell’s title attribute.
= The attribute’s value must equal whatever comes next.
^ Including this alters the rule to look for a value that starts with the string (text in the quotes) as opposed to not including the carat (^) which would signal the attribute’s value must equal the string exactly.
value String, which is a fancy programming term for characters, or in this case, “the info you are looking for”.

There are several ways and other characters you can use to target attributes and values:

 

[attribute] Apply whenever an element includes this attribute, no matter the value.
[attribute=value] Apply when the string matches the attribute’s value exactly.
[attribute~=value] Apply when the string shows up somewhere in the value. Used for space separated words such as, “Chicken Dance”.
[attribute|=value] Apply when the string shows up somewhere in the value. Used for hyphen separated words such as, “Hokey-pokey”.
[attribute^=value]  Apply when the start of the value matches the string.
[attribute$=value]  Apply when the end of the value matches the string.

This approach could be used to control the background formatting, add an icon before the title text, change the font formatting, etc.  You could use this method on other areas of the web part or SharePoint components where you have limited control over the CSS classes used and assigned.

This works in FireFox and can work in IE if you are using a DOCTYPE.  This will not work in quirks mode in IE. If you are working with a custom master page, this probably won’t be a big deal.  If you are working with just a theme and default.master, this won’t work unless you edit default.master to include a DOCTYPE.   Watch out though, doing so will likely alter (for the worse) other elements in the page.

 

Modify a Single or Group of Web Parts Based on Location in the Layout

If you have an area of your page that needs to style the web parts differently than the rest of the page, modify the master page, content page or page layout to include a container tag for the area that needs to be different. Then use descendent (also called contextual) selectors in your CSS file to target the changes.

The type of container you use will be dependent on your site design/layout/existing code.  You may already have a container set up that could be used.  Generally, you need to create something like this:

<div class=”Column”>
<Web Part Zone />
</div>

This is a very basic example, you will probably have content placeholders and other code involved.  The idea is to create a new CSS class wrapped around the area that will contain the web parts.

(If you are reading this article in full, here is deja vu…) All web parts use the same code for formatting.  It is just a part of the package deal when working with dynamically generated content and web pages.   All OOTB web parts will use .ms-WPHeader, .ms-WPTitle, .ms-WPBody, etc.  For a full list of styles used by web parts, check out my online CSS reference chart.

If you add one of these styles to your custom CSS file and make any changes, all web parts will be affected.   If you want to selectively control a web part(s) based on location in the web page, you will need to employ the use of some other CSS methods.  For this example I will  be using descendant selectors.

Descendant selectors allow you to specify CSS rules based on the hierarchal relationship of which the elements appear.   If you want to control every paragraph tag that is within a div tag and only those paragraphs that are within a div, you would use a selector formatted like this:

div p {declaration}

By using the custom container you wrapped around the area of the page you need to control, you can target your web part changes.

Create the CSS Rule

  1. First I am going to set up a basic style that will alter all web part title bars:
    .ms-WPHeader TD {
    background-color:green;
    border-bottom:1px solid red;
    }
    View a screen shot of the results.
  2. I can then add the CSS class name of the newly added parent container:
    .Column .ms-WPHeader TD {
    background-color:yellow;
    border-bottom:1px solid red;
    }
    Now just web parts that are within the Column div tag will pick up the styling.  View a screen shot of the results.  In this sample screen shot I also added a border to my container div so you can see where it is.

This approach is very flexible, but does require that you modify the master page, content page or page layout in order to add that parent container.  If this isn’t an option, poke around your View Source to see if there is a “parent container” already available for the web parts you want to alter.

 

11 thoughts on “Controlling Single Web Parts with CSS”

  1. This looks like a smart way to customize a Web Part, but it is not always possible to know the name of the Web Part. Is it possible to add more Chrome types and let the customer choose from a longer list? Like “Border and title”, “Red border and blue title”.Maybe you could also add a server control or a web part to the page that is only visible in design mode and renders some CSS in view mode that customize some web parts.

  2. Neat. I keep getting asked about this, and the best I’ve been able to offer is styling based on web part zones (as at the end of the article). Is there an easy way to include the DOCTYPE to the default master page, though? What steps would be needed to correct the default master? Often our customers look for designs that wouldn’t need a new master page or a heavily customised master page.

  3. Thanks for the tip Heather.Question: on Benjamin P. Stegink’s blog posting (http://www.benstegink.com/2008/12/10/hide-column-header-in-a-list-web-parts/) he shows how to turn off all web part column headings using <style>.ms-viewheadertr { display: none;}</style>in a hidden Content Editor Web Part.Is there anyway to combine your method with his (using a CEWP) to turn off only selected web part column headings? The .ms-viewheadertr class for my target web part doesn’t have a title attribute.Thanks

  4. Hey Heather, thanks for another gr8 post. One question: Is there a way to achieve this in IE6? It doesn’t seem to work in IE6 apparently 🙁

  5. Thank you for this information! I’d like to adjust the spacing of the <UL> line items. Currently, SharePoint inserts extra spacing when using bulleted lists in the Content Editor Web Part’s Rich Text Editor. The extra spacing occurs between the end of the sentence prior to the list and the first item of the list. How can I change the line spacing and indent?

  6. Thanks for the post Heather – it’s a useful reminder that CSS has a lot more than IE7 appears to implement at first glance.

  7. Interesting method to di this, but I have a comment on the use of attribute selectors. I found out about those a while back, but my elation was short lived, because it’s not fully supported.Specifically, IE6, which though old, is still in the market. I feel this is somewhat prevalent when talking about branding a Microsoft product like SharePoint.

  8. Cheers for the info 🙂 Is it safe to use for example id=”WebPartWPQ4″ for styling child elements in that div?

  9. Heather, great article I had been hunting for individual web part customisation OOTB tricks for some time and finally came across this article today. What I’d like to understand is how you use this technique for (as your article says) “…….. to control the background formatting, add an icon before the title text, change the font formatting, etc.”. I’ve tried all sorts of things in CSS to change an individual web parts title font colors, family, etc. as well as the header background, but nothing I have tried works. I’d be very grateful for some pointers on how to implement font and other changes individually in web part headers. Regards,David

Comments are closed.