Company News

3 Ways to Improve SharePoint Quick Launch Style

July 24, 2015

In our last couple of SharePoint branding projects here at itgroove, we’ve added a little bit of sparkle to SharePoint’s left navigation, or “Quick Launch”. Here’s how we added some style with a bit of CSS and jQuery.

First, we wanted each site’s OneNote Notebook to pop, as it’s different from a list, library or site page.

Second, we wanted to differentiate the Recycle Bin from the rest of the navigation as well.

Lastly, we wanted a way to signify secured libraries to help site administrators rest assured that only those with appropriate permissions could see and access them (users without privileges for those libraries would not see them at all). To accomplish this, we added “(Secured)” in the actual title of each library, and then used a bit of jQuery to look for “(Secured)” in the menu items. When “(Secured)” is found, the word is removed and a CSS class is added, with styling to add a lock icon.

Here’s an example of what the final result looked like:

sharepoint quick launch style

Let’s get started. We’ll need jQuery loaded in the master page and a custom CSS file ready to go.

  1. Add OneNote Icon to the site notebook

    jQuery:

    
    /* Add the OneNote icon next to Notebooks in Quick Launch */
    function addNotebookIcon(){
    $('#sideNavBox .menu-item-text:contains("Notebook")').not(':contains("Notebooks")').each(function() {
    
    $(this).addClass('itgNotebook');
    
    });
    
    }
    _spBodyOnLoadFunctionNames.push("addNotebookIcon");
    

    CSS:

    .itgNotebook {
    background: transparent url("/_catalogs/masterpage/YourBrandingFiles/onenote-icon.svg") no-repeat scroll 0px 0px / 20px 20px;
    display: inline-block;
    }
    
    #sideNavBox ul.static .itgNotebook {
    padding: 3px 0 3px 27px;
    }
    
    #sideNavBox ul.ms-core-listMenu-root > li.static > a.menu-item > span > span.itgNotebook {
    padding: 1px 0 3px 27px;
    }
    
    
  2. Add lock icon to secured libraries

    Here’s the code we used to look for the word “(Secured)” and replace it with the lock icon. For this icon, we’re using Font Awesome by Dave Gandy.

    jQuery:

    
    /* Add the secured lock next to (Secured) libraries */ 
    
    function addSecuredLock(){ 
    
        $('#sideNavBox .menu-item-text:contains("(Secured)")').each(function() { 
    
        $(this).text($(this).text().replace("(Secured)", "")); 
    
        $(this).addClass('itgSecuredLibrary'); 
    
    });
    
    _spBodyOnLoadFunctionNames.push("addSecuredLock");
    
    

    CSS:

    
    /*** Secured Libraries ***/
    
    .itgSecuredLibrary:before {
    font-family: FontAwesome;
    content: "\f023";
    margin-right:0.5em;
    color:#ff812b;
    }
    
  3. Add Recycle Bin icon

    For this piece, we wanted to match the icon that Microsoft is using in some of the system pages. They’re using an icon font called “SPO365Icons”, and so we’re able to tap into that and grab the character code for the Recycle Bin icon. We don’t need any Javascript/jQuery here, we can target the Recycle Bin by using the “title” attribute on it’s <a> tag.

    CSS:

    /*** Recycle Bin ***/
    
    @font-face
    {
    font-family:"SPO365Icons";
    src:url("/_layouts/15/fonts/Office365Icons.eot");
    src:url("/_layouts/15/fonts/Office365Icons.eot?#iefix") format("embedded-opentype"),
    url("/_layouts/15/fonts/Office365Icons.woff") format("woff"),
    url("/_layouts/15/fonts/Office365Icons.ttf") format("truetype"),
    url("/_layouts/15/fonts/Office365Icons.svg#web") format("svg");
    font-style:normal;
    font-weight:normal;
    }
    
    #sideNavBox ul.ms-core-listMenu-root li.static > a.menu-item[title="Recycle Bin"]:before {
    font-family: "SPO365Icons";
    content:"";
    font-size:21px;
    margin-right: 5px;
    position: relative;
    top: 2px;
    font-weight:100;
    }
    
    #sideNavBox ul.ms-core-listMenu-root li.static > a.menu-item[title="Recycle Bin"]{
    font-size:11px;
    color:#a5abb4;
    font-weight:100;
    }
    
    #sideNavBox ul.ms-core-listMenu-root li.static > a.menu-item:hover[title="Recycle Bin"]{
    color:#323A45;
    }
    

And that’s it!

SharePoint Quick Launch style

2 Responses

  1. Mark says:

    Hi Matt,

    Great post! Are you able to share the CSS for this? Very similar to what I’m looking at doing.

    Cheers,

    Mark

Leave a Reply

Matt Longpre

Matt Longpre

Subscribe via Email

Categories

Powered by...

itgroove Corporate Profile
Connect With Us
%d bloggers like this: