Overriding Sharepoint CSS class names in a webpart

Question

I've been searching high and low for a satisfactory answer to this and failed. I hope StackOverflow can deliver for me!

I am using SharePoint Foundation 2010 (my first real attempt to deep dive into SharePoint), with (among other things) a custom web part; the master page for the site uses a CSS file supplied by the client and to which I must adhere. The issue I am having is that SharePoint, by adding several SharePoint specific CSS classes to the web part HTML structure, is conflicting with the client's styling. After some digging, I've found that the ms-WPBody class and its various element selectors are the chief culprits.

I could add !important to everything in the client style sheet, but that is verboten. I could insert some very messy styling into the child content of the web part in an attempt to override the SharePoint styling, which is the course I've been pursuing of late, but it's been getting 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 a SharePoint web part? I don't know enough of the inner workings of SharePoint to know what to hook to make this change, and my google-fu is fail on the subject. CssClass on the ASP.NET web control markup is obviously ignored, probably some holdover inherited from WebControl.

Help me StackOverflow! You're my only hope!

Edit
I apologize for not making it clear before, but I would like to state that I grok CSS and am not looking for help with styling. What I really am looking for is how to remove the CSS class emitted by SharePoint. Can anyone help there? I'm going to remove the CSS tag, since that appears to be confusing people. This question isn't really about CSS, it's about SharePoint.

Nexus

Answer 1

CSS has to match the html that it is applied to - with generated html like that produced by SharePoint (or standard asp.net webforms for that matter) it is usually far easier to modify the css. If adding important is not an option you can usually do something using more specific selectors - ie a style defined as "table td" will override one for "td" though they actually select all the same elements. You can use this approach to undo any bits of sharepoint styling that are causign issues.

If you really want to change the classes sharepoint puts on the page, use jquery - trying to do that server side is really not something you want to get into on your first sharepoint project.

Adept

Yes, overriding the selectors is what I referred to as my "very messy styling" in the "child content of the web part". Alas, I hope that's not my only option. That said... a little J-quizzle to delete the class client-side just might do the trick. Thanks for the idea! – Nexus

using jquery to change a class because you don't want to alter your css really is a bad idea. You have to remember that jquery will run after the dom is loaded, and therefore the page will render one way and then change to render another way, all to do something that the browser should render naturally. You should really look at either wrapping your web part or using more specific CSS. A pipe wrench can be used to put a nail in the wall but isn't it a lot more effecient to use a hammer? – Applecart

@brian brinley: as I mentioned before, more specific CSS is getting very messy because of my rather unique constraints. Although I agree with you in principle, what I really need to do is remove the class. I prefer to do that in SharePoint, but nobody seems to know how to do that. JQuery is an idea that is worth looking into, not something I may necessarily pursue. – Nexus

Are you looking to remove the ms-wpbody class just for just the singular web part or for your entire site? – Applecart

@brian brinley: primarily just for the web parts I'm working on, but I'm totally willing to look into a site-wide fix. – Nexus

a site wide fix is to load your CSS file after the core.css is loaded. The core.css is loaded last in the head file of your master page. In your css file you can simply override the ms-wpbody with whatever info you want to replace from core.css. or you could even just write the css definition after the head tag if you don't want the code in your custom css file. i.e.. .ms-wpbody { background-color: purple; } – Applecart

Answer 2

I'm not sure I follow, but why not wrap your webpart in a container div and then style to your heart's 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 making sure your stylesheet was named last alphabetically so that it was applied correctly. Prefix your css file with z to see if it helps.

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

Changteh

Overriding the default styles are also something I'm trying to avoid, but thank you for the reply. – Nexus

The point is if you use DIV id (or better class in case you can have multiple web parts on a page) MyCustomCSS then you can apply the style to just your own web part using "DIV.ms-WPBody DIV.myCustomCss P" - a P inside DIV with class myCustomCss inside DIV with classs ms-WPBody. – Samuella

@Ryan: I apologize, I thought I had explained that I understand that more specific CSS is an approach I can use; it's my current approach, but it's getting messy. My question isn't "how do I use CSS?", it's "how can I delete this CSS class from the HTML emitted by SharePoint?" – Nexus

OK Gotcha! have to say though that I think modifying the CSS emitted (either client side jquery foo or server side adapters) sounds like more work than overriding css. Good luck! – Samuella

Answer 3

Here's some typical Web Part HTML:

<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 inner DIV (and all its children). The outer DIV (the one with the ms-WPBody class) is the WebPartZone. This control is sealed, but you can write an Adapter that will render the WebPartZone however you want. Most of the examples are for table-less rendering, you could write one that maintains the existing structure, but removes the classes.

To me, coding all of that and then registering it in the compat.browser of App_Browsers for the Web Application seems like overkill, so I'd probably go with jQuery (but if you do the Adapter, I'd love see it).

Dm

This definitely gives me something to go on, thanks! I'll be back with results soon... – Nexus

Also, WRT overkill... Honestly, at this point, I feel like a new adapter might be less overkill than CSS hacking, which, I think I mentioned, is now very messy and still not right. – Nexus

Answer 4

Or just add a Content Editor Web Part and override the CSS style element in the HTML:

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

-- Peace!

Arteriole

Answer 5

how are you loading your CSS file? IF you are loading it in part of the head of your master page, or through just setting a custom.css, you can try loading it outside of the head. This should cause it to load after core.css and therefore allow you to override the standard classes as needed.

Applecart

Overriding the default styles are also something I'm trying to avoid, but thank you for the reply. – Nexus