Skip to content

Branding the Quick Launch in SharePoint 2010 – Part I

March 27, 2012

This post describes how to customize the standard Quick Launch in SharePoint by using SharePoint Designer 2010.

Branding the Quick Launch with only CSS could be a bit tricky and it takes a little while to become a friend with the markup of this navigation and have it to look the way you want. This first article in a series of two will show you how to create a simple custom look and feel with only CSS code. If you need to create a more advanced design for the Quick launch than you can do with just CSS, the alternatives is to manipulate the DOM with jQuery or using plain HTML with CSS and background images. Besides of this, CSS 3 comes with some exiting features like box shadow and border radius that lets you create stuff like boxes with curved corners but it’s not an option here because we need to render the master page in IE8 mode to get all functionalities intact in SharePoint 2010. I hope this post gives you some ideas and inspirations for branding the quick launch in the way you want.

Let’s go

Open SPD, create a custom master page and include a reference to an external CSS file. Paste the following CSS code in your custom CSS file. Save and publish the files and apply the master page to a site or your site collection. Use the browser and go to a site where you can see a Quick Launch to verify the changes. This first example uses a list style background image for the sub items. You can download the arrow icon here.

CSS

Add this CSS in your custom CSS file, don’t forget to change the path to the arrow icon to the folder where you put the image:

/* |--------- Quicklaunch -----------| */
.s4-ql ul.root ul {
margin-bottom:5px;
}
/* Outher nav element */
#s4-leftpanel-content{
background-color:#fff!important;
border:1px #d8d6d7 solid!important;
border:0px!important
}
/* Inner nav element */
.menu-vertical {
padding-right:10px!important;
padding-left:10px!important;
}
/* Inner Inner nav element */
.menu-vertical > ul.root {
padding-top:3px;
}
/* mainlinks */
.menu-vertical > ul.root > li.static > .menu-item{
border-bottom:1px #555 solid!important;
padding:1px 1px 1px 0px!important;
color:#333!important;
}
/* Sublinks */
.menu-vertical > ul.root > li.static > ul.static  {
margin-top:5px; margin-bottom:5px;
}
.menu-vertical > ul.root > li.static > ul.static > li.static > a > span > span {
margin-top:2px
}
/* Selected */
.menu-vertical > ul.root > li.selected > a {
background-color:transparent!important;
border:0px; margin:0px; padding:0px;
}
.menu-vertical > ul.root > li.static > ul.static > li > a.selected {
background-image:none!important;
background-color:transparent;
color:green!important;
border:0px; margin-top:1px;
}
/* no border for the QL when no links */
.s4-specialNavLinkList {
border:0px
}
/* Liststyle square */
.s4-ql ul.root ul > li  { 
padding-top:0px; 
background-image:url('/Style Library/WordPress/Images/Arrow-Right.png');
background-repeat:no-repeat;
background-position:0.0em;
}
/* Liststyle square links */
.s4-ql ul.root ul > li > a { 
display: inline-block!important; 
padding-top:0px;
padding-bottom:0px!important; 
padding-left:0px!important;
margin-left:16px;
vertical-align:top!important; 
}

Another example

If you want to display more levels in the Quick Launch you can set the display level to three, MaximumDynamicDisplayLevels=”3″ for the SharePoint Asp menu in the master page. Look for the menu control with the ID V4QuickLaunchMenu. In this example I have used list-style squares instead of the arrows.

Add this CSS in your custom CSS file:

/* |--------- Quicklaunch -----------| */
.s4-ql ul.root ul {
margin-bottom:5px;
}
/* Outher nav element */
#s4-leftpanel-content{
background-color:#fff!important;
border:1px #d8d6d7 solid!important;
border:0px!important
}
/* Inner nav element */
.menu-vertical {
padding-right:10px!important;
padding-left:10px!important;
}
/* Inner Inner nav element */
.menu-vertical > ul.root {
padding-top:3px;
}
/* mainlinks */
.menu-vertical > ul.root > li.static > .menu-item{
border-bottom:1px #555 solid!important;
padding-left:0px!important;
padding:1px!important;
color:#333!important;
}
/* Sublinks margins */
.menu-vertical > ul.root > li.static > ul.static  {
margin-top:5px;
margin-bottom:5px;
}
/* Selected */
.menu-vertical > ul.root > li.selected > a {
background-color:transparent!important;
border:0px; margin:0px; padding:0px
}
.menu-vertical > ul.root > li.static > ul.static > li > a.selected {
background-image:none!important;
background-color:transparent;
color:green!important;
border:0px; margin-top:1px;
}
/* no border for the QL when no links */
.s4-specialNavLinkList {
border:0px
}
/* Liststyle square */
.s4-ql ul.root ul > li  { 
list-style:square inside !important; 
list-style-position:outside !important; 
margin-left: 23px !important; 
padding-top:0px; 
}
/* Liststyle square links */
.s4-ql ul.root ul > li > a { 
display: inline-block!important; 
padding-top:0px; 
padding-bottom:5px!important; 
padding-left:0px!important; 
vertical-align:top!important; 
}
/* If 3 lvl in QL */
/* Wrapper for all Items in lvl 3 */
.menu-vertical > ul.root > li.static > ul.static > li.static > ul.dynamic {
position:relative;
left:-8px!important; 
top:1px!important;
padding-left:0px
}
/* Wrapp each Item in lvl 3 */
.menu-vertical > ul.root > li.static > ul.static > li.static > ul.dynamic > li.dynamic {}
.menu-vertical > ul.root > li.static > ul.static > li.static > ul.dynamic a:hover {}
.menu-vertical > ul.root > li.static > ul.static > li.dynamic-children > a.dynamic-children > span.additional-background {
background-image:none
}
/* Items in level 3*/
.menu-vertical > ul.root > li > ul > li > ul > li > a.selected > span > span  {
padding-left:5px!important
}
/* Item lvl 3 - get all subItems from the last available DOM defined selected Item */
.menu-vertical > ul.root > li > ul > li.selected > ul > li > a > span > span {}

Read more about customizing the Quick Launch at MSDN library How to: Customize the Display of Quick Launch

In the next blog post I’ll show you some more examples how to customize the quick launch with stuff like rounded corner & borders and how to expand / collapse the Quick Launch with help of jQuery. Stay in tune!

/ Christian

About these ads
7 Comments
  1. Excellent article. Thanks for sharing the code

  2. Thabo permalink

    Wonderful Article, Thanks

  3. frank permalink

    I’am a new developer in Sharepoint 2010. Can you show me in more details.
    your statements like this:

    Open SPD, create a custom master page and include a reference to an external CSS file. Paste the following CSS code in your custom CSS file. Save and publish the files and apply the master page to a site or your site collection. Use the browser and go to a site where you can see a Quick Launch to verify the changes.

    I don’t know how to do it.

    Thank you very much.

  4. Hi Frank, and welcome to the world of SharePoint! There’s a lot of articles, books and blogs that cover this. A good place to start is at SharePoint Designer developer center. You can also take a look at this article I wrote for MSDN, look for the section called Creating a New Master Page and a New CSS File for Branding’
    / C

  5. Was hung up on the selected nav item and a few snippets of your CSS saved me from banging my head on the keyboard some more. Thank you!

Trackbacks & Pingbacks

  1. Branding the Quick Launch in SharePoint 2010 | Virtualize SharePoint and SharePoint Virtualization
  2. Branding the Quick launch in SharePoint 2010 – Part II « Me & My SharePoint Designer

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 1,207 other followers

%d bloggers like this: