Branding Tip (WebPart BackGround CSS)

Heather es sinonimo de Branding y no solo por Heather Solomon, una de las referentes en el tema, sino por que ahora, otra Heather (Waterman) incursiona en este apasionante mundo con muy buenos aportes, en este caso en la personalizacion del entorno grafico de los WebParts :

En el articulo veremos como podemos mediante el uso de CSS personalizar los Encabezados de los WebParts para lograr esto:

La adición de una imagen de fondo, redondeada, en 3 simples pasos :

En el diseño de la Pagina, es necesario encontrar el encabezado : .ms-wpheader, y generar la imagen, que en este caso es de 1024px por 50px

tr.ms-WPHeader { 
background-color: transparent;
background-image: url('wp-bg.jpg');
background-repeat: no-repeat;
background-position: top right; 
margin: 0px;
padding: 0px;}

El Segundo paso es agregar los punteros de la imagen, con los bordes redondeados :

.ms-standardheader { /* Background for headings */  
background-color: transparent;
background-image: url('ltbg.jpg');
background-repeat:no-repeat;
background-position: left top;
margin: 0;   
padding: 0; 
height: 50px;
text-align: left;}

Y la tercer etapa, configurar el texto :

h3.ms-standardheader nobr span {
font: normal 24px calibri, verdana;
color: #A8A792;
padding: 0px 0 0 15px;
vertical-align: bottom;
line-height: 50px; }

Y eso es todo, el articulo original lo pueden encontrar aqui, les recomiendo el Blog, tiene tips muy interesantes.