Showing posts with label Left Navigation. Show all posts
Showing posts with label Left Navigation. Show all posts

Wednesday, August 27, 2014

Branding Left Navigation

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

/* To Set minum Height of the page */
 min-height:500px !important;

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

/* For Footer */
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;*/

/* 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: 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 {

 background-position: left center;
    padding: 3px 4px 4px 10px;

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

/* Top Navigation Color */
background:  url('/_layouts/images/DesignerListWebPart/topchannel.png') repeat-x;


/* Hide Recycle Bin & View All site contant */

/*Left Nav Selected Heading
.s4-ql a.selected {
 color: #fff !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.

SharePoint Framework client-side web part sample with Angular Elements

Greeting Web Part This web part is created with Angular Element. It has one element “ issharepoint ” which takes true if user is...