Best way to override OOTB CSS styles

Question

I have a feature that provisions a custom CSS file and applies it to the current web as an alternate stylesheet using it's AlternateCSSUrl property. It works fine but my problem is I want my custom CSS file to completely override the default OOTB stylesheet which I don't know how to accomplish.

If I go and see "view source", i am still seeing OOTB stylesheet links as follows:

<link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/corev4.css?rev=uNraFTixVUhHdjdj4v02Lw%3D%3D"/>

 

how can I completely replace this css reference with my custom reference?

I do not want to override other styles that are included for example, search.css, blog.css etc which are rendered by the following tag:

<SharePoint:CssLink runat="server" Version="4"/>

Thanks for any pointers!

 

Answer 1

Hi,

if you have publishing feature turned on you can specifiey custom css using masterpage css. If you want to completely override the default css you need to merger all the changes in a single file. The css files you referenced in your post will be linked on demand but you can override the classes in your css file. If you have a custom masterpage you can although reference your stylesheet directly with a normal stylesheet link.

Hope this helps
Kind regards Stefan.

---

http://www.n8d.at/blog
twitter: n8design
MCTS - SharePoint / WSS Configuration and Development

Answer 2

Thanks for your reply.

I am also provisioning custom master page. So, you mean to say that I can completely get rid of the below tag and use a link element that points to my custom stylesheet which has all the styles?

<SharePoint:CssLink runat="server" Version="4"/>

Answer 3

Hi,

no let those in but place your stylesheet below this tag because otherwise you won't get any style per default. If you set this link on the master page config this tag will render your style on this place too at last position.

What i ment you can create a new empty style sheet and override the classes provided by the other stylesheets. It's always better to keep the original stylesheets in and because you won't have to write all the required tags just those you want to style.

kind regards Stefan

---

http://www.n8d.at/blog
twitter: n8design
MCTS - SharePoint / WSS Configuration and Development

Answer 4

What Stefan's talking about is CSS specificity - it's worth reading this page to find out how the calculations are done:

http://www.w3.org/TR/CSS2/cascade.html#specificity

I agree with Stefan, just make sure the selectors in your own style sheet have a higher specificity than those in corev4.css. There's a reason for the C in CSS!

Answer 5

Hi samdv1982,

not only CSS Specific. the SharPoint:CSS Link control have a order of the style sheets too. So corev3.css is the first css that will be embedded into master page using html <link> tag, and then followed by the other required style sheets.

Setting an alternate CSS Url will then always be loaded on last position of all style sheets.

I agree to your CSS rules you are talking about. Good Post.

Kind regards Stefan

---

http://www.n8d.at/blog
twitter: n8design
MCTS - SharePoint / WSS Configuration and Development

Answer 6

Stefan - How can I programmatically do that? that is how can I programmatically make it to render after the OOTB CSS tag?

As I mentioned earlier, I am trying to apply the stylesheet using AlternateCSSUrl property in a feature receiver.

Answer 7

Hi,

as i said before you cannot get rid of the default css because the are loaded on demand and are not always avaliable on every Page.

For registering CSS dynamically you can use http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.webcontrols.cssregistration.aspx. With this control you can specify that your css will be loaded after core.css by usign the AFTER property. You can use css registration to load dynamically style sheet to the header from a web part too or as a control on a master page.

You can also place a css tag on the master page like <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/yourstyle.css"/>below the <SharePoint:CssLink runat="server" Version="4"/> tag.

The AlternateCSSUrl will register your style sheet to the css link.

Thats the most common practices using additional css files, but it's all based on overwriting the defaul style sheets. It's faster to overwrite css classen than rewrite 3000 lines of CSS ;)

Kind regards Stefan

 

---

http://www.n8d.at/blog
twitter: n8design
MCTS - SharePoint / WSS Configuration and Development

Answer 8

Thanks for your reply Stefan.

I just noticed that using AlternateCSSUrl property, my custom stylesheet was being rendered "after" OOTB stylesheet which is working fine.

My problem now is the styles are somehow are not being applied properly. For example, I am noticing extra white-space in places where there should be only minmum white-space. My custom stylesheet is a v3 stylesheet that I have not modified. Do you think MSFT has modified existing classes? Do I have to go through each of those classes and make them compatible with v4?

Hope I am clear enough in stating my problem.

Answer 9

A lot has changed since V3 in terms of the HTML that's rendered - all divs and CSS now, rather than tables in messy, non-standards compliant markup. The markup's still very bulky, but using IE's developer tools (hit F12) you can dissect it pretty quickly. I'd suggest the best route would be to add another stylesheet with your updated 'tweaks' for V4 compatibility. Use the specificity trick...

Instead of:

.ms-bodyareacell {}

Write:

html body .ms-bodyareacell {}

...to overwrite your old styles. That way, just on the offchance that it matters, you have backwards compatible style sheets.

Answer 10

Also note that (AFAIK) the order in which the style sheets load is only important when the specificity for a given element style is the same - if two stylesheets had .ms-bodyareacell as the selector, then the second one would override the first. However in my example above (with 'html body' in the selector) the latter example will always override the former, regardless of the order in which they appear on the page.

Note: inline styles (styles in style="" attributes in the markup) always override external style sheet styles.