All geek questions in one place

Override Sharepoint 2010 css with your own css

I have a Sharepoint 2010 intranet and am developing the current template with my own css file. I added my custom css file to the style library and added this code snippet on the main page at the end in my tag:

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

Now I always need to add an important tag in my CSS class, which is also used in the default sharepoint css file. I do not want to do this every time. Is there any solution where I can override my own CSS file compared to the default sharepoint css file?

+4
source share
2 answers

After your page is displayed by SharePoint in the browser, view the source. Your CSS page will most likely appear in front of style sheets such as corev4.css.

To reorder this order attempt:

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

For more information about After properties, see:

+4
source

This sounds like a CSS specificity issue. This article has many useful explanations for the subject.

If you wrote the same rule in your external style sheet twice, than the lower rule in your style sheet closer to the element to be styled is considered more specific and therefore will be applied. for example In the following case, padding will be set to 10px, not 5px.

 #content h1 { padding: 5px; } #content h1 { padding: 10px; }

To fix your current problem, either, as Dipaks suggested, add your css directly to the page (as this would be preferable to external css files), or even better, or simply put, just add a link to your css file after the Sharepoint css link, and in this case, if they have the same specificity, your css will be applied.

0
source

Source: https://habr.com/ru/post/1442699/

More articles:


All Articles