Branding Left Navigation











Create css file "LeftNavStyle.css" & upload in Style Library with below mentioned contents :

/* To Set minum Height of the page */
.s4-ca{
 min-height:500px !important;
}

/* Remove Top Space From Left Navigation */
.ms-quickLaunch  {
padding-top:5px !important;
}

/* For Footer */
.custom-footer
{
clear:both;
text-align: center;
padding: 10px;
background-color: #FCFCFC;
border: 1px solid #DBDDDE;
}
/* Left Navigation Heading */
.s4-ql ul.root > li > .menu-item, .s4-qlheader, .s4-qlheader:visited {
   
    border-bottom:1px solid #B8BABD !important;
    border-top: 1px solid #E0E0E0 !important;
    font-size: 1.2em;
    margin: 0;
    overflow-x: hidden;
    padding: 3px 4px 3px 10px;
    word-wrap: break-word;
 background:  url('../SiteAssets/01-03.png') repeat-x;
 /*background-color:#005B96 !important;*/
 color:#fff;

}
/* Left Navigation item Hover */
.s4-ql ul.root ul > li > a:hover{
 color: #005B96 !important;
 background-color: #CCE3F2 !important;
 background: url('../SiteAssets/01-hover.png') repeat-x !important;
}

/* Left Navigation item Selected */
.s4-ql ul.root ul > li > a.selected{
color: #fff !important;
    background-color:#0072BC!important;
  background: url('../SiteAssets/01-SElect.png') repeat-x !important;
    height:15px !important;
    padding: 3px 4px 0px 10px !important;

}

/* Space from left side */
.s4-ql ul.root ul > li > a {

 margin-left:10px;
 background-position: left center;
 background-image:url('/_layouts/images/scrollbar-mousein-rightarrow.png');
 background-repeat:no-repeat;
    padding: 3px 4px 4px 10px;
}

/*Left Nav Color */
body #s4-leftpanel-content {
    border-style: solid;  
    background-color:#fff;
}


/* Top Navigation Color */
.s4-tn{
margin:0;
padding:0;
/*background-color:#0072BC!important;*/
background:  url('/_layouts/images/DesignerListWebPart/topchannel.png') repeat-x;

}

/* Hide Recycle Bin & View All site contant */
.s4-specialNavLinkList{
 display:none;
}


/*Left Nav Selected Heading
.s4-ql a.selected {
 color: #fff !important;
    background-color:#0072BC!important;
  background: url('/_layouts/images/DesignerListWebPart/jewel_select_middle.png') repeat-x !important;
    height:15px !important;
    padding: 3px 4px 0px 10px !important;

}
.s4-ql a:hover{
 color: #005B96 !important;
 background-color: #CCE3F2 !important;
 background: url('/_layouts/images/DesignerListWebPart/jewel_hover_middle.png') repeat-x !important;
}

*/
Now edit the v4.Master page & place below given line just above this tag :  <asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server"/>


 <link rel="stylesheet" type="text/css" href="../../Style Library/LeftNavStyle.css" /> "
  <asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server"/>

You can find images on One Drive.

Comments

Popular Posts

SharePoint Interview Questions and Answers

Download Infopath Form Templates

How to get current logged user information using JavaScript ?

Steps to set Form based authentication (FBA) for SharePoint 2010

SharePoint Interview Questions and Answers II

Get List Items - JavaScript

Cross Site List Rollup Web Part for SharePoint 2010

Hide Recently Modified Items

Change Language for current user with JSOM in SharePoint Online

SharePoint 2010 CSS Chart