{"id":17,"date":"2015-07-24T03:53:14","date_gmt":"2015-07-24T03:53:14","guid":{"rendered":"https:\/\/bangimportant.itgroove.net\/?p=17"},"modified":"2023-02-24T21:39:42","modified_gmt":"2023-02-24T21:39:42","slug":"3-ways-to-improve-sharepoint-quick-launch-style","status":"publish","type":"post","link":"https:\/\/regroove.ca\/archive\/2015\/07\/24\/3-ways-to-improve-sharepoint-quick-launch-style\/","title":{"rendered":"3 Ways to Improve SharePoint Quick Launch Style"},"content":{"rendered":"

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.<\/p>\n

First, we wanted each site’s OneNote Notebook<\/strong> to pop, as it’s different from a list, library or site page.<\/p>\n

Second, we wanted to differentiate the Recycle Bin<\/strong> from the rest of the navigation as well.<\/p>\n

Lastly, we wanted a way to signify secured libraries<\/strong> 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.<\/p>\n

Here’s an example of what the final result looked like:<\/p>\n

\"sharepoint<\/a><\/p>\n

Let’s get started. We’ll need jQuery loaded in the master page and a custom CSS file ready to go.<\/p>\n

    \n
  1. \n

    Add OneNote Icon to the site notebook<\/h3>\n

    jQuery:<\/h4>\n

    [code lang=”js”]<\/p>\n

    \/* Add the OneNote icon next to Notebooks in Quick Launch *\/
    \nfunction addNotebookIcon(){
    \n$(‘#sideNavBox .menu-item-text:contains("Notebook")’).not(‘:contains("Notebooks")’).each(function() {<\/p>\n

    $(this).addClass(‘itgNotebook’);<\/p>\n

    });<\/p>\n

    }
    \n_spBodyOnLoadFunctionNames.push("addNotebookIcon");
    \n[\/code]<\/p>\n

    CSS:<\/h4>\n

    [code lang=”css”]
    \n.itgNotebook {
    \nbackground: transparent url("\/_catalogs\/masterpage\/YourBrandingFiles\/onenote-icon.svg") no-repeat scroll 0px 0px \/ 20px 20px;
    \ndisplay: inline-block;
    \n}<\/p>\n

    #sideNavBox ul.static .itgNotebook {
    \npadding: 3px 0 3px 27px;
    \n}<\/p>\n

    #sideNavBox ul.ms-core-listMenu-root > li.static > a.menu-item > span > span.itgNotebook {
    \npadding: 1px 0 3px 27px;
    \n}<\/p>\n

    [\/code]<\/p>\n<\/li>\n

  2. \n

    Add lock icon to secured libraries<\/h3>\n

    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<\/a>.<\/p>\n

    jQuery:<\/h4>\n

    [code lang=”js”]<\/p>\n

    \/* Add the secured lock next to (Secured) libraries *\/ <\/p>\n

    function addSecuredLock(){ <\/p>\n

    $(‘#sideNavBox .menu-item-text:contains("(Secured)")’).each(function() { <\/p>\n

    $(this).text($(this).text().replace("(Secured)", "")); <\/p>\n

    $(this).addClass(‘itgSecuredLibrary’); <\/p>\n

    });<\/p>\n

    _spBodyOnLoadFunctionNames.push("addSecuredLock");<\/p>\n

    [\/code]<\/p>\n

    CSS:<\/h4>\n

    [code lang=”css”]<\/p>\n

    \/*** Secured Libraries ***\/<\/p>\n

    .itgSecuredLibrary:before {
    \nfont-family: FontAwesome;
    \ncontent: "\\f023";
    \nmargin-right:0.5em;
    \ncolor:#ff812b;
    \n}
    \n[\/code]<\/p>\n<\/li>\n

  3. \n

    Add Recycle Bin icon<\/h3>\n

    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.<\/p>\n

    CSS:<\/h4>\n

    [code lang=”css”]
    \n\/*** Recycle Bin ***\/<\/p>\n

    @font-face
    \n{
    \nfont-family:"SPO365Icons";
    \nsrc:url("\/_layouts\/15\/fonts\/Office365Icons.eot");
    \nsrc:url("\/_layouts\/15\/fonts\/Office365Icons.eot?#iefix") format("embedded-opentype"),
    \nurl("\/_layouts\/15\/fonts\/Office365Icons.woff") format("woff"),
    \nurl("\/_layouts\/15\/fonts\/Office365Icons.ttf") format("truetype"),
    \nurl("\/_layouts\/15\/fonts\/Office365Icons.svg#web") format("svg");
    \nfont-style:normal;
    \nfont-weight:normal;
    \n}<\/p>\n

    #sideNavBox ul.ms-core-listMenu-root li.static > a.menu-item[title="Recycle Bin"]:before {
    \nfont-family: "SPO365Icons";
    \ncontent:"\ue026";
    \nfont-size:21px;
    \nmargin-right: 5px;
    \nposition: relative;
    \ntop: 2px;
    \nfont-weight:100;
    \n}<\/p>\n

    #sideNavBox ul.ms-core-listMenu-root li.static > a.menu-item[title="Recycle Bin"]{
    \nfont-size:11px;
    \ncolor:#a5abb4;
    \nfont-weight:100;
    \n}<\/p>\n

    #sideNavBox ul.ms-core-listMenu-root li.static > a.menu-item:hover[title="Recycle Bin"]{
    \ncolor:#323A45;
    \n}
    \n[\/code]<\/p>\n<\/li>\n<\/ol>\n

    And that’s it!<\/p>\n

    SharePoint Quick Launch style<\/h2>\n","protected":false},"excerpt":{"rendered":"

    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 … <\/a><\/p>\n","protected":false},"author":4,"featured_media":49,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[2,3,5,7,8,9],"tags":[],"acf":[],"yoast_head":"\n3 Ways to Improve SharePoint Quick Launch Style - Archive<\/title>\n<meta name=\"description\" content=\"SharePoint quick launch style tips and tricks with CSS and jQuery.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/regroove.ca\/archive\/2015\/07\/24\/3-ways-to-improve-sharepoint-quick-launch-style\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"3 Ways to Improve SharePoint Quick Launch Style - Archive\" \/>\n<meta property=\"og:description\" content=\"SharePoint quick launch style tips and tricks with CSS and jQuery.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/regroove.ca\/archive\/2015\/07\/24\/3-ways-to-improve-sharepoint-quick-launch-style\/\" \/>\n<meta property=\"og:site_name\" content=\"Archive\" \/>\n<meta property=\"article:published_time\" content=\"2015-07-24T03:53:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-24T21:39:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/regroove.ca\/archive\/wp-content\/uploads\/sites\/6\/2015\/06\/quicklaunchth.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"200\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Matt Lonpre (Alumni)\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Matt Lonpre (Alumni)\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/regroove.ca\/archive\/2015\/07\/24\/3-ways-to-improve-sharepoint-quick-launch-style\/\",\"url\":\"https:\/\/regroove.ca\/archive\/2015\/07\/24\/3-ways-to-improve-sharepoint-quick-launch-style\/\",\"name\":\"3 Ways to Improve SharePoint Quick Launch Style - Archive\",\"isPartOf\":{\"@id\":\"https:\/\/regroove.ca\/archive\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/regroove.ca\/archive\/2015\/07\/24\/3-ways-to-improve-sharepoint-quick-launch-style\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/regroove.ca\/archive\/2015\/07\/24\/3-ways-to-improve-sharepoint-quick-launch-style\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/regroove.ca\/archive\/wp-content\/uploads\/sites\/6\/2015\/06\/quicklaunchth.jpg\",\"datePublished\":\"2015-07-24T03:53:14+00:00\",\"dateModified\":\"2023-02-24T21:39:42+00:00\",\"author\":{\"@id\":\"https:\/\/regroove.ca\/archive\/#\/schema\/person\/0deb86ff016aebc76f86a79a0e7236d0\"},\"description\":\"SharePoint quick launch style tips and tricks with CSS and jQuery.\",\"breadcrumb\":{\"@id\":\"https:\/\/regroove.ca\/archive\/2015\/07\/24\/3-ways-to-improve-sharepoint-quick-launch-style\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/regroove.ca\/archive\/2015\/07\/24\/3-ways-to-improve-sharepoint-quick-launch-style\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/regroove.ca\/archive\/2015\/07\/24\/3-ways-to-improve-sharepoint-quick-launch-style\/#primaryimage\",\"url\":\"https:\/\/regroove.ca\/archive\/wp-content\/uploads\/sites\/6\/2015\/06\/quicklaunchth.jpg\",\"contentUrl\":\"https:\/\/regroove.ca\/archive\/wp-content\/uploads\/sites\/6\/2015\/06\/quicklaunchth.jpg\",\"width\":200,\"height\":200},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/regroove.ca\/archive\/2015\/07\/24\/3-ways-to-improve-sharepoint-quick-launch-style\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog Archive\",\"item\":\"https:\/\/regroove.ca\/archive\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"3 Ways to Improve SharePoint Quick Launch Style\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/regroove.ca\/archive\/#website\",\"url\":\"https:\/\/regroove.ca\/archive\/\",\"name\":\"Archive\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/regroove.ca\/archive\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/regroove.ca\/archive\/#\/schema\/person\/0deb86ff016aebc76f86a79a0e7236d0\",\"name\":\"Matt Lonpre (Alumni)\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/regroove.ca\/archive\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f084e0ef8fd6992834b5b085b737a7a2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f084e0ef8fd6992834b5b085b737a7a2?s=96&d=mm&r=g\",\"caption\":\"Matt Lonpre (Alumni)\"},\"url\":\"https:\/\/regroove.ca\/archive\/author\/mlongpre\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"3 Ways to Improve SharePoint Quick Launch Style - Archive","description":"SharePoint quick launch style tips and tricks with CSS and jQuery.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/regroove.ca\/archive\/2015\/07\/24\/3-ways-to-improve-sharepoint-quick-launch-style\/","og_locale":"en_US","og_type":"article","og_title":"3 Ways to Improve SharePoint Quick Launch Style - Archive","og_description":"SharePoint quick launch style tips and tricks with CSS and jQuery.","og_url":"https:\/\/regroove.ca\/archive\/2015\/07\/24\/3-ways-to-improve-sharepoint-quick-launch-style\/","og_site_name":"Archive","article_published_time":"2015-07-24T03:53:14+00:00","article_modified_time":"2023-02-24T21:39:42+00:00","og_image":[{"width":200,"height":200,"url":"https:\/\/regroove.ca\/archive\/wp-content\/uploads\/sites\/6\/2015\/06\/quicklaunchth.jpg","type":"image\/jpeg"}],"author":"Matt Lonpre (Alumni)","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Matt Lonpre (Alumni)","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/regroove.ca\/archive\/2015\/07\/24\/3-ways-to-improve-sharepoint-quick-launch-style\/","url":"https:\/\/regroove.ca\/archive\/2015\/07\/24\/3-ways-to-improve-sharepoint-quick-launch-style\/","name":"3 Ways to Improve SharePoint Quick Launch Style - Archive","isPartOf":{"@id":"https:\/\/regroove.ca\/archive\/#website"},"primaryImageOfPage":{"@id":"https:\/\/regroove.ca\/archive\/2015\/07\/24\/3-ways-to-improve-sharepoint-quick-launch-style\/#primaryimage"},"image":{"@id":"https:\/\/regroove.ca\/archive\/2015\/07\/24\/3-ways-to-improve-sharepoint-quick-launch-style\/#primaryimage"},"thumbnailUrl":"https:\/\/regroove.ca\/archive\/wp-content\/uploads\/sites\/6\/2015\/06\/quicklaunchth.jpg","datePublished":"2015-07-24T03:53:14+00:00","dateModified":"2023-02-24T21:39:42+00:00","author":{"@id":"https:\/\/regroove.ca\/archive\/#\/schema\/person\/0deb86ff016aebc76f86a79a0e7236d0"},"description":"SharePoint quick launch style tips and tricks with CSS and jQuery.","breadcrumb":{"@id":"https:\/\/regroove.ca\/archive\/2015\/07\/24\/3-ways-to-improve-sharepoint-quick-launch-style\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/regroove.ca\/archive\/2015\/07\/24\/3-ways-to-improve-sharepoint-quick-launch-style\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/regroove.ca\/archive\/2015\/07\/24\/3-ways-to-improve-sharepoint-quick-launch-style\/#primaryimage","url":"https:\/\/regroove.ca\/archive\/wp-content\/uploads\/sites\/6\/2015\/06\/quicklaunchth.jpg","contentUrl":"https:\/\/regroove.ca\/archive\/wp-content\/uploads\/sites\/6\/2015\/06\/quicklaunchth.jpg","width":200,"height":200},{"@type":"BreadcrumbList","@id":"https:\/\/regroove.ca\/archive\/2015\/07\/24\/3-ways-to-improve-sharepoint-quick-launch-style\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Archive","item":"https:\/\/regroove.ca\/archive\/"},{"@type":"ListItem","position":2,"name":"3 Ways to Improve SharePoint Quick Launch Style"}]},{"@type":"WebSite","@id":"https:\/\/regroove.ca\/archive\/#website","url":"https:\/\/regroove.ca\/archive\/","name":"Archive","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/regroove.ca\/archive\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/regroove.ca\/archive\/#\/schema\/person\/0deb86ff016aebc76f86a79a0e7236d0","name":"Matt Lonpre (Alumni)","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/regroove.ca\/archive\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f084e0ef8fd6992834b5b085b737a7a2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f084e0ef8fd6992834b5b085b737a7a2?s=96&d=mm&r=g","caption":"Matt Lonpre (Alumni)"},"url":"https:\/\/regroove.ca\/archive\/author\/mlongpre\/"}]}},"_links":{"self":[{"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/posts\/17"}],"collection":[{"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/comments?post=17"}],"version-history":[{"count":1,"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/posts\/17\/revisions"}],"predecessor-version":[{"id":2793,"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/posts\/17\/revisions\/2793"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/media\/49"}],"wp:attachment":[{"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/media?parent=17"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/categories?post=17"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/tags?post=17"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}