SharePoint Designers

All about Branding & Customizations in SharePoint

Webpart title bar with background images

Do you want to make some style to the webpartheaders, then i hope this post will give you some inspiration. Webparts often rendering throung HTML-tables, so because of that i had to use rows (TR) and (TD) in this CSS.

In this example every webparts in your SharePoint pages who make use of this CSS will be like the image below. You can if you want, have for example three different titlebar colors in the same page, if you instead use different partstyles for each webpartzone in your pagelayout.

Note that you can have rounded corners to the left and to the right, the you can use CSS technics like sliding doors or spirtes.

In this example i use two images, one stretching to the left (GL.png 800x32px) and one for the right (GR.png 25x32px).


Here goes the CSS:

/*----------WEBPART TITLE---------------*/
/* leftcorner */
.ms-standardheader.ms-WPTitle {
background-image: url('/_catalogs/masterpage/Images/GL.png');
height: 32px;
background-repeat: no-repeat;
padding-left: 12px;
color: #fff;
}
/* Rightcorner */
tr.ms-WPHeader TD {
background-image: url('/_catalogs/masterpage/Images/GR.png');
background-repeat: no-repeat;
vertical-align: top;
margin-top: -1px;
margin-right: 10px;
}
/* Text */
.ms-standardheader.ms-WPTitle A:link, .ms-standardheader.ms-WPTitle A:visited {
color: #fff;
margin-top: -10px;
}
/* Rightarrow */
.ms-WPHeader DIV {
text-align: left;
width: 14px;
vertical-align: bottom;
margin-right: 5px;
margin-top: 3px;
border: 0px;
}
/* Move the right arrow*/
.ms-WPEditText {
margin-left: -25px;
}
/* No line below the header*/
.ms-WPHeader TD {
border: 0px;
}
/*----------END WEBPART TITLE---------------*/

//Added//

You can download this images here: GL.png and GR.png

Views: 6884

Comment

You need to be a member of SharePoint Designers to add comments!

Comment by Christian Ståhl on December 2, 2011 at 8:38am

Hi Patrick, sure I have published an article at MSDN library about this subject. In 2010 there's a bit different compared to 2007.
http://msdn.microsoft.com/en-us/library/hh537935.aspx

 

Cheers

Comment by Patrick Ige on December 1, 2011 at 7:01am

Hi Christian,
               I'm trying to make this work in SP2010.Any toughts or ideas?
Any version for 2010?
Cheers

Comment by Ivan Horvat on March 23, 2010 at 11:19am
This is a great post, Christian. Could you explain how to apply different image backgrounds when using pages and PageLayouts? I'm using them on my site and would really like to make one webpart stand apart from the rest of them.
Comment by Christian Ståhl on February 28, 2010 at 3:07pm
Hi Veera, if you would like to have separate image backgrounds, and if you like to have this in example an OOTB teamsite you can override this wiht help of the ID for the zone. Find the ID with help from IE dev toolbar.
Something like this gives ut something like this:

/*Orange style for zone 2*/
#MSOZoneCell_WebPartWPQ2 table tbody tr td table tbody tr td .ms-standardheader.ms-WPTitle {
background-image: url('/_catalogs/masterpage/Images/GL2.png');
height: 32px;
background-repeat: no-repeat;
padding-left: 12px;
color: #fff;
}
#MSOZoneCell_WebPartWPQ2 table tbody tr td table tbody tr.ms-WPHeader TD {
background-image: url('/_catalogs/masterpage/Images/GR2.png');
background-repeat: no-repeat;
vertical-align: top;
margin-top: -1px;
margin-right: 10px;
}


And if your workning with pages and PageLayouts, you also have separated webpart headers per zone, i will explain that later if you need.
Comment by veera on February 25, 2010 at 1:43pm
thanks for the post..

its realy a good one.cud u explain me how to get different sytles of webpartzones in same page as u have stated above in ur post(You can if you want, have for example three different titlebar colors in the same page, if you instead use different partstyles for each webpartzone in your pagelayout.
)..

thanks in advance.
Comment by Courtenay on August 27, 2009 at 4:49am
thanks Christian!!
Comment by Christian Ståhl on August 24, 2009 at 9:04am
Sure Courtenay, just added links to the images in the post.
Comment by Courtenay on August 12, 2009 at 5:38am
Can you post the images?
Comment by James Curtis on July 7, 2009 at 2:09pm
Nice idea with the down-arrow. I didn't think of doing a design like that before with the WP Headers. Nice.
Comment by Dave Keyes on June 28, 2009 at 10:12am
Hey Christian
Just seen this example post of yours. Nice work. A simple little web 2.0 style visual tweak ... I like it!

Much appreciated.

DaveK

Events

Birthdays

© 2014   Created by Christian Ståhl.

Badges  |  Report an Issue  |  Terms of Service