Branding SharePoint – Part 3: Changing the look and feel of SharePoint components – Intro and Web Parts

This is part three in a multi-part series. The predecessor of this post is Part 2: Creating the Design in SharePoint.

Depending on the customization method you selected (CSS, Theme or Master Page), at this point you have probably managed to alter parts of your SharePoint site. This part of the article series will focus on how to change the look and feel of SharePoint components that you don’t necessarily have direct or ultimate control over.

A lot of SharePoint functionality is created using server and user controls. In the master page, the bit of SharePoint functionality is created with a single tag. This tag has a matching page directive, and that directive specifies which source file should be used to create the meat behind the control.   A lot of these source files are locked down, you can’t access them and modify their properties, functionality, and what we are concerned with, their user interface. Some examples of this is Search, Site Actions menu, Quick Launch and the Publishing Console.
So instead you are left with taking what has been created for you, and adding style changes to alter the final look and feel. In some instances, you can also control and add some properties to the control tag itself. This article walks through some common SharePoint items and how you can alter their appearance using what has been given to you by SharePoint.

Web Parts

Web Parts are actually relatively easy to change. There are a few styles that control the header, and a few that control the body. Note that the web parts are rendered into tables, and usually nested tables. So you will be working with table rows and table cell tags and styles primarily.
See a more complete list of Web Part styles in the CSS Reference Chart.

The Web Part Title Bar

Relatively speaking, there are not a lot of styles used in a web part title bar. There is one style for the container (ms-WPHeader), and one style for the text (ms-WPTitle). Here are the default styles from Core.CSS. You can copy these styles and then make changes to modify the Web Part title bar look and feel.
.ms-WPHeader TD {
border-bottom:1px solid #4e7cb7;
border-collapse:collapse;
}
.ms-WPTitle {
font-weight:bold;
color:#4c4c4c;
padding-left:3px;
padding-right:7px;
padding-top:2px;
padding-bottom:2px;
font-size:10pt;
}
.ms-WPTitle A:link,.ms-WPTitle A:visited {
color:#4c4c4c;
text-decoration:none;
cursor:pointer;
}
.ms-WPTitle A:hover {
color:#000000;
text-decoration:underline;
cursor:pointer;
}
If you want to use an image in your header bar, add a background property to ms-WPHeader, such as:
.ms-WPHeader TD {
Background: rgb(226,139,169) url(“/images/myimage.gif”) repeat-x;
}
If you want to alter the title text, be sure to update ms-WPTitle, and the following instance that includes hyperlinks. Not all web part titles are links (and vice versa) so you will need to edit both styles, or do it in a single style like this:
.ms-WPTitle, .ms-WPTitle A:link,.ms-WPTitle A:visited {
Color: black;
Font-size: 1.5em
}

Rounded Corners in the Web Part Title Bar

A common request is to create rounded corners for the web part title bar. You can do this using the CSS sliding doors technique. You will need to create 2-3 images, depending on what your design looks like. If you want a solid background, then you only need two images. If you have a gradated background or some other type of image, then you will need three images.
Different image requirements for web part backgrounds
The sliding doors technique applies one image of a rounded corner to the far right of the background of a parent container, then one image of a rounded corner to the far left of a child container within the parent.
When you look at the rendered code of a web part, the web part uses a table and several nested tags to create the title bar:
<td>
        <table border=”0″ cellpadding=”0″ cellspacing=”0″ width=”100%”>
<h3 class=”ms-standardheader ms-WPTitle”><nobr><
<td align=”right” style=”padding-right:2px”><div style=”cursor: pointer” class=”ms-HoverCellInActive” onmouseout=”this.className=’ms-HoverCellInActive'” onmouseover=”this.className=’ms-HoverCellActiveDark'”><nobr><a onclick=”MSOWebPartPage_OpenMenu(MSOMenu_WebPartMenu, this, WebPartWPQ3,’False’);return false;” id=”WebPartWPQ3_MenuLink” onkeydown=”MSOMenu_KeyboardClick(WebPartWPQ3_MenuLink, 13, 40)” href=”#”><img src=”/_layouts/images/Menu1.gif” border=”0″ align=”absmiddle” title=”I need to… Web Part Menu” alt=”I need to… Web Part Menu” style=”padding-left:2px;” /></a></nobr></div></td>
                </tr>
        </table>
</td>
For SharePoint, the table cell will be the parent, and the H3 tag inside the table cell will be the child. We will use the table row class as a selector to target these changes to web parts, and not all tables in the site. Here is the CSS for a solid bar. Notice the right image in the first style and the left image in the second style.
.ms-WPHeader td {
background: rgb(242,181,15) url(‘/images/right;
margin: 0;
padding: 0;
height: 31px
}
.ms-WPHeader TD h3 {
background: url(‘/images/left;
margin: 0;
padding: 7px 7px 0px 25px;
height: 24px;
font-size: 1.2em;
color: white
}
.ms-WPHeader TD h3 a:link, .ms-WPHeader TD h3 a:visited {
color: white
}
And here is the result:
Sample of CSS result in web browser
As you can see, there is still a problem with the edit menu to the far right. The CSS can be adjusted to specify that only the first table cell should have the background by adding a first-child pseudo-class:
.ms-WPHeader td

background: rgb(242,181,15) url(‘/images/wpright.gif’) no-repeat top right;
margin: 0;
padding: 0;
height: 31px
}
Note, the first-child pseudo-class will not work in IE unless a DOCTYPE tag has been included in the master page file, which does not come by default with default.master. Check out DOCTYPE info here. When everything is in place, the arrow menu will drop the background, and the web part title bar will look like this:
Sample of CSS after first child has been applied
Please remember that details such as padding and height will more than likely appear differently in IE than in Firefox, and you will have to make adjustments accordingly.
If you want to create a web part title bar with three images, some of the CSS will have to get flipped around, and a new style will be added. In the below example, the parent table cell container is set to have the repeating background that makes up the middle of the bar, the child H3 tag was switched to contain the far right image instead of the far left, and a new child using the span tag was added setting the image to the far left.
.ms-WPHeader td:first-child {
background: rgb(242,181,15) url(‘/images/repeat-x;
margin: 0;
padding: 0;
height: 31px
}
.ms-WPHeader TD h3 {
background: url(‘/images/right;
margin: 0;
padding: 7px 7px 0px 0px;
height: 24px;
font-size: 1.2em;
color: black
}
.ms-WPHeader TD h3 a:link, .ms-WPHeader TD h3 a:visited {
color: black
}
.ms-WPHeader TD span:first-child {
background: url(‘/images/left;
padding-top: 7px;
padding-left: 25px
}
And the result looks like this:
Sample with gradated images for the web part title bar

The Web Part Body

The body area can get a bit trickier. There are a lot of web parts that come with SharePoint, and within all of those web parts, a lot of different things that can be displayed. Plus there are custom web parts you or your team may be developing or using. When making modifications to the body area, you first need to identify what you want to change.

The Text

If you are just looking to alter the font used in web parts, check out the styles in the CSS Reference chart to find various styles used for the various areas of web parts. Copy the styles to your custom CSS file and make modifications from there.

The Background

This one is two fold. Do you want to modify the web part body background, or add a background that wraps the entire web part? Modifying the web part body background will only create changes for the web part under the title bar, and above any footer links. Wrapping the entire web part is actually not editing a web part, but instead that is editing the content page that contains the web part zone. The below diagram shows the difference.
Web part body vs. wrapping a web part with a background
There are several styles that affect areas inside the web part body, such as table rows and headers, and other styles that alter the text, footer, and the container table cell as a whole. Check out the styles in the CSS Reference chart to find various styles used for the body areas of web parts. To affect several of the web parts, use the ms-WPBody style. This style will alter non-table web parts, as shown below when I change the style background color to red:
Sample ms-wpbody change
To affect table based web parts, change the ms-WPBorder style, as shown below when I change the style background to lime:
Sample ms-wpborder
If you are looking to create a background color or image or style behind an entire web part, then you need to edit the content page (a.k.a. page layout for publishing sites) to include a container around the web part, or the web part zone. Note that this works really well to style web parts in an area of your page, but it will not style individual web parts, such as always make an event web part green no matter where it is on the page. Instead, any web part added inside the container will pick up the styles. You can lock down some of the properties of a web part zone or web part however, such as disallowing users from removing the web part.
In the content page, add a wrapping container around the web part zone or web part, such as a DIV tag:
<div class=”CustomZone”>
<WebPartPages:WebPartZone id=”g_BBA6F2B950A54C5CB97AF4243E7926BF” runat=”server” title=”Top Zone”><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>
</div>
Then in your style sheet, specify properties for the container:
.CustomZone {
padding: 10px;
background: aqua
}
The result will be an area of the page for web parts that looks different:
Sample wrap around a web part
This is a simple example, but this method can be used to create a variety of different web parts or web part zones in a single page. You can use contextual selectors to affect the web parts styles within as well, as shown in the below sample where I specify that the web part header for the web part in the container looks different than the other web parts:
.CustomZone .ms-WPTitle, .CustomZone .ms-WPTitle a:link, .CustomZone .ms-WPTitle a:visited {
font-weight:bold;
color:navy;
padding-left:10px;
padding-top:10px;
font-size:14pt;
}
.CustomZone .ms-WPHeader TD{
background: white
}
Sample wrap around a web part, version 2
The next installment of this series will cover how to customize the SharePoint navigation systems.  Coming soon….

51 thoughts on “Branding SharePoint – Part 3: Changing the look and feel of SharePoint components – Intro and Web Parts”

  1. Strange coincidence, I was just messing with changing the web part bodies today… frustrating how different types use different styles.

  2. One thing I miss here:How do I make a title bar in webparts with rounded corners and flexible width? The only way I found to do this nicely was to write a control adapter (I may write a blog post about that soon) – that was quite easy but I wonder why the default Microsoft HTML code for webparts is that bad…

  3. Sharepointer — you are right! I should have included that in the first go-round, so I have updated this article to include how to do rounded corners. Thanks!

  4. Heather, you are awesome!!! I just wish you were as self-righteous as Mike Walsh… -JW

  5. Hello Heather,Designing an image sprite for the rounded corners would be a better idea, I think. It would decrease the number of requests required to render the page. Furthermore, your technique doesn’t really support vertical resizing, eg. increasing the font size.Regards,Waldek

  6. Thanks Heather.Do you think it’s possible with the out of the box webpart HTML to make the right rounded corner be really there, where one would want it to be – behind the right TD?I have found an easy way to do this (without pseudo class use) with one very simple control adapter which “injects” a class=”…” into the right TD of each webpart. This makes designing webparts with CSS very much easier (for me).But maybe control adapters aren’t good for all of your readers because they require access to the server. Just for those readers fighting with missing “classes” in Microsofts HTML: have a look at control adapters – you will save a lot of time. They are easy – but you need server access.(I’m still planning to write something about them in my blog, just have to find time)

  7. Hi Heather,Great article. It helps me alot as I am following your article, am stucked in the first-child properties. I am wondering what is the doctype that was used to make .ms-WPHeader td :first-child { works? Maybe another question, I tried your code it works accordingly in IE 6 but I’ve tried firefox and opera and it kinda messed up…

  8. I am looking for some approach to make leftNavigation Quick launch bar with rounded corners.It would be really helpful if i get some light in this area.Indrajeet Kumpavat.

  9. For more information about DOCTYPEs, check out this post: http://www.heathersolomon.com/blog/archive/2008/01/25/DOCTYPES-and-SharePoint.aspx.Sharepointer – the thing to watch out for is the view of the web part for read only access users. If you inject a class in the last table cell and control the web part title bar that way, read only users (which in most cases are the majority of your users) will not get the ending right round corner. Weupzz – I have tested this in Firefox and it works fine. Many factors could be affecting your code, such as the DOCTYPE, version, and your other CSS and source code. With most sites you need to create styles for IE, and styles for Firefox. If things look a bit off you probably will have to make a copy and make adjustments for Firefox only.

  10. Heather, your sites have just been great. I have recently been assigned to a sharepoint team in Northern WI. This is my first stab at applying branding so you have been a great help. I do have a question however. Is it possible to apply .css to an individual web part on the same page? For example we have two web parts with rounded corners, and two more with blue backgrounds. And as you know applying .css styles to the classes already definied will effect all of them. I feel that I have crawled all over the net looking for an answer, and maybe the reason I haven’t found one is because it can’t be done. Who knows. Anyway if you have any ideas I would love to hear them.Thanks.

  11. Heather,Great advice! Have you found an easy way to have rounded corners at the bottom as well so that there is a solid border with rounded corners surrounding the entire web part?

  12. Heather,Thank you so much for this post. I had followed the instructions before on how to do the rounded corners and we always had issues with the right side of the web part when there was a “width” applied or when the edit menu was not there. This “firstChild” css change will do wonders for us!Thanks again for a great post (as usual),Mike

  13. Great post Heather but personally I’ve always found the SharePoint HTML to be way too restrictive when attempting to produce flowing page layouts due to the table structure of WebPartZones. It also raises an issue of page weight.I find it much easier to have a .NET ControlAdapter which handles the rewritting of the HTML framework for a WebPartZone, provided you don’t need access to the JavaScript object model.This is definately a great post on how to work within the limitations imposed by the SharePoint HTML

  14. Hi Heather,Are this styles global for the entire site? I was able to do the round corners but they are specific for the page.Do you have any solution for all the pages in the site? Is this possible?Thanks!

  15. Thanks Heather, you’ve made my day.I’ve been looking for changing the web part style and the document type.

  16. @Heather: thanks for that – it hadn’t yet crossed my mind that this wouldn’t work for read only users. But anyway, in my case the users should have the options to move around / modify their web [email protected]: if it isn’t doable with normal CSS then maybe you also need a control adapter… 😉

  17. Heather, firstly thanks for your feedback.I tested your code in firefox 3.01 it looks fine, but yet I tested on the IE after adding these doctype, it still does not work:<!DOCTYPE html PUBLIC “-//W3C//DTD html 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”><!DOCTYPE html PUBLIC “-//W3C//DTD html 4.01 Transitional//EN”>Actually, if you don’t mind asking, I am trying to have the rounded image at the dropdown point (covering the whole header) instead of the one you have (the rounded end just before the dropdown), how to achieve that? Thanks in advance

  18. background: rgb (242,181,15) lol you dare write in RGB color codes. You spells where your site with purple that looks like nothing. Go take a look at sites design clean and accessible. This is the Middle Ages here. Anyway Making Design Webpart merdique but it is not your fault. When these big con Microsoft will have finally understood that does not use table to make the layout and optimize the XHTML file and their Core.css with less unnecessary class could finally work in good conditions.

  19. Hi Heather,First of all, thanks for all your wise input on branding SP-sites. As a newbie on SP, I’ve allready had a lot of help from your blogs.I’ve been working on rounding my WP-headers, but I’m not getting it done right… somehow the first-child-part won’t work the way you described. I’m using theBlackBand-masterpage (with a little restyling) and have my own css-stylesheet which I’m trying to make use of.Result without first-child : http://www.lijnloos.be/WPheader.jpgResult with first-child : http://www.lijnloos.be/WPheader2.jpgDo you have any idea about how this can be fixed?Thanks anyway!

  20. Hi,I must be doing something very wrong, cause I can’t seem to get the pseudo class to work.My css :.ms-WPHeader td {background: rgb(242,181,15) url(‘/images/wpright.gif’) no-repeat top right;margin: 0;padding: 0;height: 31px;}.ms-WPHeader TD h3 {background: url(‘/images/wpleft.gif’) no-repeat top left;margin: 0;padding: 7px 7px 0px 25px;height: 24px;font-size: 1.2em;color: white;}.ms-WPHeader TD h3 a:link, .ms-WPHeader TD h3 a:visited {color: white;} .ms-WPHeader td :first-child {background: rgb(242,181,15) url(‘/images/wpright.gif’) no-repeat top right;margin: 0;padding: 0;height: 31px;}and my doctype:<!DOCTYPE html PUBLIC “-//W3C//DTD html 4.01 Transitional//EN”>But I still get the extra right corner image displayed.

  21. Maria- You have a space before “:first-child” (which is my fault as there was a typo in my code above… now fixed) and you need to use a different DOCTYPE. Try this one instead: !DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN””http://www.w3.org/TR/html4/loose.dtd”

  22. Marlijn – there isn’t much I can tell you without seeing your code, but I remember creating your issue while I was testing out this solution. I would suggest double checking over your CSS code very carefully to see if you can isolate the issue.

  23. Hi Heather,I’ve tried this but no luck I’m afraid.Changing the doctype messes up the page a bit too.I’m using the default.master and there’s no customization other then this in de master or css.

  24. I found out why it didnt work… I have IE6… and that doesnt support first-child. To bad… I’ll have to find another way around it.Thanks anyways!

  25. for some strange reason only the 3 image option seems to work fine.I would only like to have a solution for the image to cover the whole header.but for now I’m happy :o)Thanks!

  26. Hey Heather,1st of all, great article.You seem to me like a CSS SPS Guru :)I put this code in a Content Editor Web Part.It seems fine but like Maria, it seems like the first-child doesn’t work.I did put <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> in my MasterPage.Any ideas?.ms-WPHeader td {background: rgb(242,181,15) url(‘/_layouts/images/right.jpg’) no-repeat top right;margin: 0;padding: 0;height: 31px}.ms-WPHeader TD h3 {background: url(‘/_layouts/images/left.jpg’) no-repeat top left;margin: 0;padding: 7px 7px 0px 25px;height: 24px;font-size: 1.2em;color: white}.ms-WPHeader TD h3 a:link, .ms-WPHeader TD h3 a:visited {color: white}.ms-WPHeader td:first-child {background: rgb(242,181,15) url(‘/_layouts/images/right.jpg’) no-repeat top left;margin: 0;padding: 0;height: 31px}

  27. For IE 6 you can try the IE hacks for First:child. Try this:<!–-[if IE 6]>.ms-WPHeader td {background: expression(this.previousSibling==null?’rgb(242,181,15) url(/images/wpright.gif) no-repeat top right’:”);}<![endif]–>OR<!–-[if IE 6]>.ms-WPHeader td {behavior:expression(this.firstChild.style.background = &quot;rgb(242,181,15) url(/images/wpright.gif) no-repeat top right&quot;);}<![endif]–>

  28. Sorry to be stretching this point, but the code you put here is supposed to go in the masterpage, right? (please correct me if i’m wrong)… Because if I try to put this code in the stylesheet itself, it won’t work… But how can I put this in the masterpage if it’s rendered or made by SP?Trouble is that I really want to use the rounded corners but can’t get it to work properly in IE6 (which still has a reaonable usage-share in the world according to wikipedia).Anybody found a solution?

  29. Marlijn- You have some options on where this code is located. You can put it in your style sheet, you can put it in a IE Hack or IE Fix CSS file, or you can put it in STYLE tags in the master page. But this code is CSS and needs to be stored with your other styles. I haven’t tested this code because I don’t have IE6 locally. You may need to tweak and play with it some to get it to work just right.

  30. I have implemented the custom task edit form. but when I change my master page from default one to newly added Windows SharePoint Services 3.0 Sample: Example Master Pages(block_lay4_orange.master)from microsoft The UI becomes dirty and all controls are missplaced. Though I have published(Approved) All pages . (its urgent) Please help me

  31. I am being told that for Brandings sake, the Out Of the Box LIST chrome cannot be changed without voiding MS Support.Basically I would then be stuck with the Ugly Blue without a the ability to change without voiding support.Is this true? I see that it is in fact OK to change the chrome of an OOTB webpart or list.Please let me know.Chad [email protected]

  32. Hi Heather – my company has an employee lookup, keyword lookup, and Intranet lookup fields on all of their websites – I want to add those fields at the top of every one of our WSS 3.0 pages Additionally, whenever someone creates a new page, I want it to be in there as well – how can I do this? I figured out to do it in the default.master of one site, but that doesn’t make it appear for other sites – is there a way to put that code in some sort of global area so it will replicate across all sites? I’m looking in the /12/bin/global area, but not sure if that is the right place to be – doesn’t look like it, but then again, I’m new to all this. Thank you for your help!!

  33. Is it possibele to have todefine to background images under.ms-bodyareaframe in the css.core?fx:1background-repeat:repeat-x;background-image:url(“/Style%20Library/techsol/Images/content_bg.png”);2background-image:url(“/Style%20Library/techsol/Images/BestsellerSphere2_gray.jpg”);background-position: right bottom;

  34. Hi Heather,How would you go about changing the arrow image that pops the webpart menu? The menu1.gif image is defined inline and not in a CSS… an added bonus is all the JS attached to it…I don’t have the option of changing the image in the file system or using SharePoint designer. Everything needs to be deployed in a WSP.Regards,Luis

  35. Heather, your site is a boon! I’ve found it tremendously helpful, but I have one area I can not figure out; Google hasn’t been successful.I’ve customized the homepage default.aspx and edited the webparts to look the way I want. Problem is no one else using the site sees the homepage webparts the same way I do. How can I propagate my changes so everyone sees the site as I intended?

  36. Hi Heather,Thank you for a wonder article, can you also let us know how can we change the dropdown IMAGE of the webpart to something else (basically this is the image which you click to go to MODIFY SHARED WP, CLOSE, DELETE, etc).This is out of the box the dark black dropdown and we would like to replace it with our own image. We tried to play around with .ms-HoverCellInActive class but the image still appears on the webpart (behind our image that we added thru this css class). Any help on how to get rid of it.Thank you.

  37. Hi Heather,Thank you for this valuable website and mainly for this wonderful article. I looked everywhere to learn how to change the design and create one of my own but did not find any tutorial except yours.When do you think you will be able to continute “Coming soon…?”Thank you again for your remarkable efforts.

  38. Hi Heather!i’m a newbie on this and i don’t really understand how SharePoint Designer works, i’ve been trying to change the look and feel but i think i’m just making a mess… can you tell me where can i find like SPD for dummies? i’ve read some of your posts, but i think i have serious problems understanding how it works… 🙁 Hope you answer soon… and many thanks.

  39. Wow, your article is very lucid and hlepful.While trying to implement your code..ms-WPHeader td:first-child { background: rgb(242,181,15) url(‘/images/wpgradmiddle.gif’) repeat-x; margin: 0; padding: 0; height: 31px}.ms-WPHeader TD h3 { background: url(‘/images/wpgradright.gif’) no-repeat top right; margin: 0; padding: 7px 7px 0px 0px; height: 24px; font-size: 1.2em; color: black}.ms-WPHeader TD h3 a:link, .ms-WPHeader TD h3 a:visited { color: black}.ms-WPHeader TD span:first-child { background: url(‘/images/wpgradleft.gif’) no-repeat top left; padding-top: 7px; padding-left: 25px}I could not get the exact picture model which you have shown to us.Could please help me out?

  40. Hi Heather,Nice work. I have a question for you regarding webparts. Is it possible to have an image before documents in the title and a different one before Links in the title.Image DocumentsImage2 LinksMany Thanks,/Samir.

  41. For IE 6 you can try the IE hacks for First:child. Try this:<!–-[if IE 6]>.ms-WPHeader td {background: expression(this.previousSibling==null?’rgb(242,181,15) url(/images/wpright.gif) no-repeat top right’:”);}<![endif]–>OR<!–-[if IE 6]>.ms-WPHeader td {behavior:expression(this.firstChild.style.background = &quot;rgb(242,181,15) url(/images/wpright.gif) no-repeat top right&quot;);}<![endif]–>

  42. This is excellent post. Though I am still having the problem with curved headers in i.e. 6.0 did anyone find the workaround for that?Thanks,Ami

  43. I am on WSS 3.0 and using the Breeze template. I need to change the hyperlink color within a List. It is very dark and not obvious that it is a link. I have tried looking in the Breeze1001-6500.css and the core.css for the .link-item style (per a previous post I read of yours) and it is not there!What am I missing? Thanks in advance for your help!

  44. Hi Heather, we are currently using SP as our Intranet portal and I would like to display a bunch of announcements but am looking for a cool way to do this. Because I typically have a long list of announcements, the reader will have to keep scrolling to read them all. Also, is there a way to make the links for the announcements go directly to the attachment as opposed to going to the SP part that has “New Item, Edit Item, Manage Permissions, etc.? Thanks for any help. S.

  45. Hi Heather, thanks for all the information you make available.I was wondering if there is a way to remove the left scroll bar from a Page View Web Part. I can increase the size of the Web Part so that the bar itself doesn’t appear but the top and bottom arrows are still present. Additionally in using a Page View Web Part to view another page that has all the interface removed I end up with a ‘lump’ – best word I can think of to describe it – of ‘header’ area above the page I’m viewing in the Web Part which I’d like to get rid of, any ideas?Regards,David

  46. Hi everyone. First I want to say thank you to Heather for sharing her talents with us. I found a solution to the IE6 :firstchild issue using jQuery. This solution is easy. Get jQuery. Here are the easy steps to cross-browser rounded corner headers in Sharepoint WSS:<ol><li>Download jQuery and link it to your site.</li><li>Add this jQuery code to the head your page:<div>&lt;script type=”text/javascript”&gt;&nbsp;&nbsp;&nbsp;&nbsp;$(document).ready(function() {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(‘tr.ms-WPHeader TD span:first-child’)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.addClass(‘firstChild’);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(‘.ms-WPHeader &gt; TD ‘)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.addClass(‘headerBg’);&nbsp;&nbsp;&nbsp;&nbsp;})&lt;/script&gt; </div></li><li>Add these classes to your CSS:<div>.ms-WPHeader TD span.firstChild{&nbsp;&nbsp;&nbsp;&nbsp;background: url(‘/_layouts/images/left.gif’) no-repeat left top;&nbsp;&nbsp;&nbsp;&nbsp;padding: 6px 0 3px 25px;&nbsp;&nbsp;&nbsp;&nbsp;height: 14px;&nbsp;&nbsp;&nbsp;&nbsp;position: relative;&nbsp;&nbsp;&nbsp;&nbsp;z-index: 20;}.ms-WPHeader td.headerBg{&nbsp;&nbsp;&nbsp;&nbsp;background: url(‘/_layouts/images/bg.gif’) repeat-x;&nbsp;&nbsp;&nbsp;&nbsp;margin: 0;&nbsp;&nbsp;&nbsp;&nbsp;padding: 0;&nbsp;&nbsp;&nbsp;&nbsp;height: 14px;}</div></li> <ol>… and that is all you need to do! Likely you will have to tweak the CSS for your images to look correct, but that should be a breeze. It is also possible that you are creating a solid color header, wherein you would have no need to add the .ms-WPHeader td.headerBg code.

Comments are closed.