Designing Web Part borders

There are many books and articles about SharePoint 2010 branding, and I will read them one day as it is an important issue. Until then, here's a quick guide to designing the web part borders (very basic but useful).

The web part frame is known as Chrome, and it can be configured to one of these states - Default / None / Title and Border / Title only / Border Only:
chrome type

These are the CSS classes used to define each state (you can download the complete file here:)

border in 'Border Only'

border only
.ms-WPBorderBorderOnly {
    border: 1px lime solid;
}

border in 'Title and Border'

title and border
.ms-rtestate-field table {
    border-collapse: separate;
}
.ms-WPBorder {
    border-top: none;
    border-right: 1px fuchsia solid;
    border-bottom: 1px fuchsia solid;
    border-left: 1px fuchsia solid;
}

title in 'Title and Border' and 'Title only'

title and border
title only
.ms-WPHeader > td {
    border-top: 1px aqua solid;
    border-bottom: 1px aqua solid !important;
}
.ms-WPHeader > td:first-child {
    border-left: 1px aqua solid;
}
.ms-WPHeader > td + td.ms-wpTdSpace {
    border-right: 1px aqua solid;
}
tr.ms-WPHeader {
    background-color: yellow;
}

Print Friendly and PDF

2 comments:

Ashwin Sidharthan said...

Hi, Based on your post both the Title and Title and Border option has ms-WPHeader as common, will it be possible to customize Title to show the title in a different manner and Title and Border options Title to show up in a different manner?

Ami said...

Hi,
Since they both use the same CSS class (.ms-WPHeader) it's impossible to customize only one. Once you change .ms-WPHeader, it will reflect wherever you use it.

Post a Comment