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
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: 5599
Comment
-
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.aspxCheers
-
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
Welcome to
SharePoint Designers
Events
Birthdays
Birthdays Today
Birthdays Tomorrow
© 2013 Created by Christian Ståhl.
You need to be a member of SharePoint Designers to add comments!