Custom CSS Link for SharePoint 2010


How to add a custom CSS Link for SharePoint 2010 and replace corev4.css.  In this blog, I am going to replace COREV4.CSS to my CUSTOM_COREV4.CSS.

Step 1:  I duplicated corev4.css and renamed the file as corev4_custom.css

Custom CoreV4.CSS in SharePoint 2010 

Step 2:  I made some changes to corev4_custom.css so that I can see the changes. In Ribbon Row I changed the color to RED: f7420b;

body #s4-ribbonrow{
min-height:43px;
/* [ReplaceColor(themeColor:"Dark2",themeShade:"0.9")] */
background-color:#f7420b;overflow-y:hidden; }

Step 3:  In my master page, I added this line after

SharePoint:CssLink runat="server

<SharePoint:CssLink runat="server" Version="4"/>
<SharePoint:CssRegistration name="corev4_custom.css"  After="corev4.css" 
runat="server"/>

 

This will override your default CSS file to your CUSTOM CSS.  In my corev4_custom.css, I changed Ribbon Row color to RED and I can see that now.Custom_CSS_In_SharePoint_2010

This is how you can override your default corev4.css to your custom corev4.css file.

2 thoughts on “Custom CSS Link for SharePoint 2010

  1. In the screenshot on Step 1:
    How do you navigate to that tree view of the files on your Sharepoint site? Specifically, I need to be able to access the _styles folder. It looks like you’re in Sharepoint Designer, but that’s about all I can figure out.

    Thanks for any help.

    • Open your site in SharePoint Designer and Click on All Files Folder and you will see _styles folder.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s