Add CSS Registration to a Master Page
1. Open the site in SPD 2010
2. Select the master pages from site objects
3. Create the master page (copy and paste the existing master page) , Name it as style.master
4. Edit in advanced mode, add the following code at the end of <head> tag.
<SharePoint:CssRegistration name=”<% $SPUrl:~sitecollection/Style Library/MohanDemo/css/mynav.css %>” After=”corev4.css” runat=”server”/>
5. Open the top-level site in SPD 2010, in Site Objects , select All files, Click on Style Library.
6. Add New folder (MohanDemo), With in this, Create another folder(css), in this create a new mynav.css file and add the following code.
/*----Top Nav---------------- */
.s4-tn {min-height:34px;}
/*allow nav item to be taller than 15px*/
.s4-tn LI.static > .menu-item{height:auto;}
/*Transform top nav links to uppercase
and give top links bg color */
body #s4-topheader2{background:#fff repeat-x left 0px;
border-bottom:transparent;border-top:transparent;
}
/*bottom border of nav bar*/
.s4-tn {border-bottom: 5px solid #016c9b;}
.s4-tn > .horizontal {
/*move horizontal nav to the right by 20 px*/
margin-left:20px;
}
/*keep nav from wrapping */
.menu-horizontal{min-width:790px;}
/*If you define nav styles and don’t define them in dynamic children selectors,
dynamic will inherit the style */.s4-tn li.static > .menu-item{
border:0;
border:none;
color:#efefef;
display:inline-block;
min-width:70px;
height:36px;
padding:0px;
margin:0px;
vertical-align:middle;
white-space:nowrap;
text-align:center;
font-size:19px;
white-space:nowrap;
padding-top:12px;
}
.s4-toplinks .s4-tn > .menu-item.text {
padding:6px 24px 0 24px;}
/*nav link hover and nav header hover*/
.s4-tn li.static > a:hover,.s4-tn li.static > .dynamic-children:hover{
display:block;
background:transparent none;
color:#fff;
text-decoration:none;
}
/*rounded nav*/
.s4-toplinks .s4-tn .static > li {background:url(“../images/tl.png”)
no-repeat scroll 0 0 #79BBEC;
color:#efefef
}
.s4-toplinks .s4-tn .static > li > .menu-item{
background:url(“../images/tr.png”)
no-repeat scroll top right ;
}
/*Rounded nav selected (left) background color goes here*/
.s4-toplinks .s4-tn .static > li.selected {background:url(“../images/tl.png”)
no-repeat scroll 0 0 #efefef;
color:#5893CF
}
/*Rounded nav selected (right)*/
.s4-toplinks .s4-tn .static > li.selected > .menu-item{background:url(“../images/tr.png”)
no-repeat scroll top right ;
color:#5893CF
}
.s4-toplinks .s4-tn .static > li.selected > a:hover {
color:#fff;
}
.s4-toplinks .s4-tn ul.static >
li.dynamic-children .menu-item-text ,
.s4-toplinks .s4-tn ul.static >
li.static .menu-item-text{
padding: 0 33px;
}
/*arrows in tabs with dynamic children*/
.menu-horizontal span.dynamic-childrenSPAN.additional-background {
background-position:90% ;
}
.menu-horizontal a.dynamic-children
SPAN.additional-background {
background-position:90%;
}
/*flyout navigation */
.s4-tn ul.dynamic{background:#A2CFEC;
margin:5px 0 0 10px;
background-color:#A2CFEC;
border:1px solid #44A0E5;
}
.s4-tn li.dynamic a{padding:5px;color:#1987DC;}
.s4-toplinks .s4-tn ul.dynamic .menu-item .menu-item-text {
padding: 5px 8px!important;
}
.s4-tn li.dynamic > .menu-item{
padding:3px 12px;
font-size:12px;
white-space:nowrap;
border-bottom:none;
font-weight:normal;
color:#003B55;
font-family:Verdana;
min-width:150px;
}
.s4-tn li.dynamic {border-bottom:1px #88C7F0 solid;}
.s4-tn li.dynamic > a:hover{
font-weight:400;
display:block;
background-color:#C7E2F3;
color:#1E6592;
}
7. Save, Check in, Publish.
8. Set as default master page.
No comments:
Post a Comment