Friday, May 2, 2014

Top Navigation Styles in SharePoint 2013

    Modify the master page

    • Add a link to Custom Css in master page.
    • On the head tag of master page html add below highlight lines
    <!--SPM:<SharePoint:CssRegistration Name="Themable/corev15.css" runat="server"/>-->

    <!--SPM:<SharePoint:CssRegistration Name="https://portal.sharepoint.com/Style Library/Master.css" runat="server" After="corev15.css" />-->


    • In your Custom master.css file, add the below CSS classes

     .ms-breadcrumb-top {  
      background-color:#5482AB;  
     }  
     .ms-core-listMenu-horizontalBox {  
     background-color:#5482AB;  
       padding: 0px;  
       margin: 0px;  
       padding-left: 10px;  
       color: #ffffff;  
     }  
     .ms-core-listMenu-horizontalBox li.static {  
      color: #ffffff;  
     }  
     .ms-core-listMenu-horizontalBox li.static a:hover{  
      color: #ffffff !important;  
     }  
     .ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item {  
       color: #ffffff;  
        white-space: nowrap;  
        border: 1px solid transparent;  
        padding: 6px 10px;  
        line-height: 20px;  
        height: 20px;  
        font-size: 10pt;  
        font-weight:bold;  
        font-family:Arial, Helvetica, Sans-Serif;  
        margin-right:5px;  
     }  
     .ms-core-listMenu-horizontalBox li.static span.static {  
     }  
     .ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item:hover {  
       text-decoration: none;  
        background-color:#D95E00;  
        background-image:none;  
     }  
     .ms-core-listMenu-horizontalBox li.selected a.selected {  
       text-decoration: none;  
        background-color:#D95E00;  
        background-image:none;  
     }  
     ul.dynamic {  
      background-color:#f7f7f7;   
      border:1px solid #b8babd;  
      padding:0px;  
     }  
     ul.dynamic .ms-core-listMenu-item {  
      background-color:#f7f7f7;  
      line-height:20px;  
      font-size: 9pt;   
      font-weight:normal;   
      color:#333;  
      font-family:Arial, Helvetica, Sans-Serif !important;  
      padding:5px;  
     }  
     ul.dynamic .ms-core-listMenu-item:hover {  
        color:#ffffff;  
        background-color:#D95E00;  
     }  
     .ms-listMenu-editLink  
     {  
       display:none !important;  
     }  
    





    • ms-listMenu-editLink  class is for edit Links button.

    1 comment: