Search This Blog

Tuesday, March 17, 2015

Adding Custom CSS in SharePoint 2010 Master Page


In this post we are going to see how to add custom css in SharePoint 2010 Master Page:

My CSS

body 
 
{
text-alignleft
 
 font-familyArial, san-serif;
 
 font-size11px
 
 line-height1.2em
 
 color#000
 


}

/* MASTER CSS corev4.css */ 
.s4-title{
 
padding:0px 0px 0px 0px;
 
margin:0px;
 
min-height:64px;
 
/* [ReplaceColor(themeColor:"Light2")] */ background-color:#67953F;
 
word-wrap:break-word;
 
-ms-word-wrap:break-word;
 
overflow-x:hidden;
 
}
.ms-cui-topBar2
{
padding:0px;
 
 margin:0px;
 
 background-color:#5b5c6a;
 
}
.s4-tn{
 
 padding:0px;
 
 margin:0px;
 
 background-color:#5b5c6a;
 
}
.s4-titletable
{
background-color:#67953F;
 
}
.ms-cui-tt-span
{
background-color:#67953F;
 
 color:white!important
 
}
.s4-toplinks
{
padding:0px;
 
 background-color:#67953F;
 
 color:white!important
 
}
.menu-horizontal
{
display:table;
 
}
.menu-horizontal .menu-item-text
 
{
padding-top : 0px;
 
 color : white
 
}
.s4-tn li.static > .menu-item{
 
/* [ReplaceColor(themeColor:"Dark2")] */ color:white;
 
white-space:nowrap;
 
border:1px solid transparent;
 
padding:4px 10px;
 
height:15px;
 
vertical-align:middle;
 
background-color:#67953F;
 
}
.s4-tn li.static > a:link
 
{
/* [ReplaceColor(themeColor:"Accent1")] */ color:white;
 
text-decoration:none;
 
}

 

.s4-tn li.static > a:hover
 
{
/* [ReplaceColor(themeColor:"Accent1")] */ color:white;
 
text-decoration:none;
 
}



saved this as CustomStyle.css in Style Library. Refer this in css from Master Page

Open your master page in SharePoint Desinger and have a look in the head tag. here we can register our custom css with SharePoint:CssRegistration control. Below i have posted code snippet from my master page.

 <SharePoint:CssLink runat="server" Version="4"/>
 <SharePoint:CssRegistration runat="server" After="Core4.css" Name="/Style Library/CustomStyle.css"></SharePoint:CssRegistration>

No comments:

Post a Comment