Friday, April 17, 2009

Changing look and feel for Webpart header

Scenario:
I wanted to change look and feel for Webpart header to use my favorite font Calibri :-)

Solution:
Insert the following CSS in the page header or may be using a Content Editor Webpart

Code:

<style>

.ms-WPBorder{
border-right:#6C1717 1px solid;
border-left:#6C1717 1px solid;
border-top:none;
border-bottom:#6C1717 1px solid;
}

.ms-PartSpacingVertical, .ms-PartSpacingHorizontal{
padding-top:10px;
}

.ms-WPHeader{
Color:#FFF;
background-image:none;
background-color:#6C1717;
}

.ms-WPTitle a:hover {
font-weight:normal;
font-size:18px;
font-family:Calibri,Arial,Helvetica,sans-serif;
text-decoration:none;
margin-left:8px;
Color:#FFF;
}

.ms-WPTitle span {
font-weight:normal;
font-size:16px;
font-family:Calibri,Arial,Helvetica,sans-serif;
text-decoration:none;
margin-left:8px;
Color:#FFF;
}

</style>

0 comments: