Override Sharepoint 2010 css with my own custom css

Question

I have a Sharepoint 2010 intranet and I am designing the current template with my own css file. I have added my custom css file to the style library and have added this piece of code in a masterpage at the end in my tag:

<SharePoint:CssRegistration name="<% $SPUrl:~SiteCollection/Style Library/custom/custom.css%>" runat="server"/>

Now I always need to add the !important tag in my css classess which are also used in the default sharepoint css file. I dont want to have to do that every time. Is there some solution where I can override my own custom css over the default sharepoint css file?

Rich Bennema · Accepted Answer · 2012-10-29 12:51:55Z

4

After your page is rendered by SharePoint in the browser, view the source. It is likely that your CSS page is listed before out of the box style sheets like corev4.css.

To rearrange this ordering try:

<SharePoint:CssRegistration 
    name="<% $SPUrl:~SiteCollection/Style Library/custom/custom.css%>" 
    after="corev4.css" 
    runat="server"/>

For more information on the After property, see:

answered Oct 29, 2012 at 12:51

Rich Bennema

10.3k4 gold badges40 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ted · Accepted Answer · 2012-10-29 09:29:20Z

This sounds like a CSS specificity problem. This article has lots of helpful explanations of the subject.

If you have written the same rule into your external style sheet twice, than the lower rule in your style sheet is closer to the element to be styled, it is deemed to be more specific and therefore will be applied. e.g. In the following case, the padding would be set as 10px, not 5px.

#content h1 {
padding: 5px;
}

#content h1 {
padding: 10px;
}

To fix your current problem, either as Dipaks suggested add your css directly in the page (as this would take preference over external css files), or even better, and more simply, just add the reference to your css file after the reference to the Sharepoint css, in which case, if they have equal specificity, your css would be applied.

Collectives™ on Stack Overflow

Override Sharepoint 2010 css with my own custom css

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related