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.

 

Dustin Miller and Heather Solomon from SharePoint Experts