Overriding SharePoint CSS Class Names in a Web Part

Question

I searched high and low for a satisfactory answer to this question and failed. Hope StackOverflow can deliver me!

I am using SharePoint Foundation 2010 (my first real attempt at deep diving into SharePoint), with (among other things) a custom web part; The website’s homepage uses the CSS file provided by the client and which I must adhere to. The problem I am facing is that SharePoint, adding several SharePoint-specific CSS classes to the HTML structure of the web part, contradicts the client style. After some digging, I found that the ms-WPBody and its various element selectors are the main culprits.

I could add !important to everything in the client stylesheet, but this is verboten. I could insert a very dirty style into the child content of the web part, trying to override the SharePoint style, which is the course I have been following recently, but it has become messy. Or I could try to remove the class from the web part, which brings me to my question:

How can I remove or otherwise override the CSS class names inserted into the HTML structuring for the SharePoint Web Part? I don’t know the internal SharePoint work enough to find out what needs to be done to make this change, and my google-fu is not working on this. CssClass on ASP.NET web control markup is obviously ignored, probably some retention inherited from WebControl .

Help me StackOverflow! You are my only hope!

Edit
I apologize for not clarifying this before, but I would like to state that I am getting CSS and not looking for help with styling. I'm really looking for how to remove the CSS class released by SharePoint. Can anyone help there? I'm going to remove the CSS tag as this seems to confuse people. This question is not entirely about CSS, about SharePoint.

Answer 1

CSS should match the html to which it is applied - with generated html similar to that created by SharePoint (or standard asp.net web formats, for that matter), it is usually much easier to modify css. If adding an important value is not an option, you can usually do something with more specific selectors, that is, a style defined as a "table td" will override one for "td", although they actually select all the same elements. You can use this approach to reverse any bits of the sharepoint style that are causing the problems.

If you really want to change the sharepoint classes hosted on the page, use jquery - trying to make this server side is really not what you want in your first sharepoint project.

Answer 2

I'm not sure what I'm following, but why not wrap your web part in a div container, and then create your hearty content:

 <style type="text/css"> .ms-WPBody { background-color:red; } #myCustomCss p { background-color:Blue; } </style> <div class=ms-WPBody> <div id=MyCustomCSS> <p>Hello world</p> </div> </div> 

In 2007, we had to worry about having your stylesheet named last in alphabetical order so that it is applied correctly. Prefix your css file with z to find out if it helps.

Here's a help article about the problem: http://singchan.com/2009/12/29/branding-sharepoint-2010-collaboration-sites-part-2-in-a-series/

Answer 3

Here is the typical HTML for the web part:

 <div style="" allowexport="false" allowdelete="false" class="ms-WPBody ms-wpContentDivSpace" width="100%" id="WebPartctl00_m_g_d0420a1c_44b7_4009_81c9_2bbcf9b325e9" haspers="false" webpartid="d0420a1c-44b7-4009-81c9-2bbcf9b325e9"> <div id="ctl00_m_g_d0420a1c_44b7_4009_81c9_2bbcf9b325e9"> Web Part Content goes here... </div> </div> 

The trick is that the web part itself is the internal DIV (and all of its children). The external DIV (the one that has the ms-WPBody class) is WebPartZone . This control is sealed, but you can write an adapter that will display WebPartZone as you want. Most examples are designed for rendering without a table, you can write one that supports the existing structure, but removes classes.

For me, coding all this and then registering it in the compat.browser App_Browsers file for the web application seems like it is too crowded, so I will probably go with jQuery (but if you make an Adapter, I would like to see it) .

Answer 4

Or just add the Content Editor web part and override the CSS style element in HTML:

 <style type="text/css"> .ms-stylebox { border:o important; } </style> 

- World!

Answer 5

How do you upload your CSS file? If you download it to the chapter section of your main page or just install custom.css, you can try downloading it outside the head. This should lead to loading after core.css and, therefore, allow you to override the standard classes as needed.