Sharepoint webpart and overiding the css style

Answer 1

Why don't you use firefox & the firebug addon to work out which classes to override?

Are you using !importance to override the css classes?

Answer 2

Chrome seems to suggest that it's the iframe (id Filterlframe1) that's the culprit:

border-bottom-style: inset;
border-bottom-width: 2px;

Clarification: the Sharepoint list view uses an iframe for the menu bar at the top - that's where the border is being rendered.

Answer 3

Well, after playing in the IE8 dev toolbar, I came up with:

<tr class="ms-WPHeader">

CSS props:

border-bottom:#4e7cb7 1px solid;
border-collapse:collapse;

Answer 4

Check out Heather Solomom's SharePoint CSS reference at http://www.heathersolomon.com/content/sp07cssreference.htm.

Browsing through the webpart specific section at http://www.heathersolomon.com/content/sp07cssreference.htm#WebParts, it looks like this might be ms-WPBorder perhaps?

Hope this helps.

Answer 5

Hi Rob, I work intensively on customising sharepoint UI. So i know for sure that the class you should be looking at is the following:

*.ms-vh,.ms-vh2,.ms-vh-icon,.ms-vh2-nofilter,.ms-vh2-nofilter-icon,.ms-viewheadertr .ms-vh-group,.ms-vh2-nograd,.ms-vh3-nograd,.ms-vh2-nograd-icon,.ms-ph,.ms-pickerresultheadertr{ background-image:url("/layouts/images/viewheadergrad.gif"); background-repeat:repeat-x; padding-top:1px; padding-bottom:0px; background-color:#f2f2f2; }

You should remove the image reference in the background-image property like so: background-image:url("");

That will remove the dark greyish line on top.

Happy Customising!!!

Answer 6

how can you customize a webpart css? can you please tell me the steps to do it

Answer 7

I reviewed each of the responses and none of them was successful. The key is the color of the line "#4E7CB7". I then searched the root CSS files on the server and at line 2683 of the CORE.css I changed the

.ms-WPHeader TD{ border-bottom:1px solid #4e7cb7; border-collapse:collapse; }

to

.ms-WPHeader TD{ border-bottom:0px solid #4e7cb7; border-collapse:collapse; }