Skip to content

Branding the Quick launch in SharePoint 2010 – Part II

May 23, 2012

This post is the last one of two articles about some branding tips and tricks for the Quick launch in SharePoint 2010. In this article I’ll show you a simple way to add rounded corners with help of two background images at the top and bottom. Take a look at the first article here.

Let’s go – Example 1

Open your custom master page with SharePoint Designer and find the Sharepoint:SPNavigationManager control. Add the following DIV just above this control.

<div id="QLtopwrapper"></div>

When you complete this find the end tag of the </Sharepoint:SPNavigationManager> and add the following DIV just above this control.

<div id="QLbottomwrapper"></div>

Now you have everything in place in your custom master page as needed, so now it’s time to add some CSS. Copy the following CSS code and paste it into your external CSS file. As you can see I have used two background images. Make your own or download the Images I have used here. I have included my example master page in the download if you find it difficult to locate where you should place the top and bottom div.

/* |--------- Quicklaunch -----------| */
.ms-quickLaunch {padding-top:0px}
#s4-leftpanel-content{
background-color:transparent!important;
}
#s4-leftpanel-content {
border:0px!important;
background-color:transparent!important;
}
.s4-ql {
background-color:#fff;
margin-bottom:0px!important;
}
/* Inner nav element */
.menu-vertical {
padding:0px!important;
}
/* top rounded */
#QLtopwrapper {
background:url('/Style%20Library/Branding/Images/QLtop.png') repeat-x;
height:19px;
width:220px;
}
/* bottom rounded */
#QLbottomwrapper {
background:url('/Style%20Library/Branding/Images/QLbottom.png') repeat-x;
height:19px;
width:220px;
}
.menu-vertical > ul.root > li.static > .menu-item{
border-bottom:1px #929292 solid!important;
padding-left:0px;
color:#fff;
font-family:Arial;
font-size:11px;
font-weight:bold;
background-color:#8c8c8c!important;
background-color:#8C8C8C!important;
}
/* Selected */
.s4-ql a.selected {
background-color:transparent;
background-image:none;
border:1px transparent solid!important;
color:#fff!important;
}
/* no border in teamsites */
.s4-ql,.s4-specialNavLinkList{
border:0px!important;
}
.menu-vertical > ul.root > li.static {
padding:0px!important; margin:0px!important;
}
/* headers */
.menu-vertical > ul.root > li.static > a.menu-item {
padding:10px 4px 10px 5px;
border-bottom:1px #ccc solid;
}
/* headers selected for publishing sites */
.menu-vertical > ul.root > li.static > a.selected {
padding:10px 4px 10px 3px;!important;
padding-left:4px!important;
background-color:#777!important;
}
/* Subitem container */
.menu-vertical > ul.root > li.static > ul {
margin-bottom:0px;
padding-top:0px;
padding-bottom:0px;
}
/* SubItems wrap */
.menu-vertical > ul.root > li.static > ul.static > li.static > a  {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
padding:10px 4px 10px 8px;
color:#ccc!important;
}
/* SubItems  */
.menu-vertical > ul.root > li.static > ul.static > li.static > a > span > span {
color:#333;
text-decoration:none!important;
}
/* SubItems hover */
.menu-vertical > ul.root > li.static > ul.static > li.static a:hover {
text-decoration:none!important;
}
/* Selected SubItems  */
.menu-vertical > ul.root > li.static > ul.static > li.selected > a.selected {
background-color:#fff;
border:1px transparent solid!important;
padding-left:10px!important;
}
/* Selected SubItems  */
.menu-vertical > ul.root > li.static > ul.static > li.selected > a.selected > span > span {
color:#000;
}
.menu-vertical > ul.root > li.static > ul.static > li {
border-bottom:1px #8C8C8C solid!important;
}

Let’s go – Example 2

In this example I’ll use a jQuery script to get a simple and basic expand and collapse function in a specific scenario. Let’s say you have the setting “Display only the navigation items below the current site” for some site and have added headings and link manually. You can then use jQuery to toggle the headings. This behavior the jQuery script gives with the current navigation settings may not be suitable for all sites in the collection for you; this example is just build for this specific case and you can use it locally just on a single page if you prefer to.

Here’s the jQuery

$(".menu-vertical > ul.root > li.static > ul.static").css("display","none");
$(".menu-vertical > ul.root > li.static").css("background","url('/_layouts/images/plus.gif') no-repeat 3px 12px");
 
toggle();
function toggle() {
$(".menu-vertical > ul.root > li.static > a").toggle(
function () {
$("> ul", $(this).parent()).show("fast");
$($(this).parent()).css("background","url('/_layouts/images/minus.gif') no-repeat 3px 12px");
},
function () {
$("> ul", $(this).parent()).hide("fast");
$($(this).parent()).css("background","url('/_layouts/images/plus.gif') no-repeat 3px 12px");
});
}
$sel = $('.menu-vertical > ul.root > li.static > ul.static > li.selected');
if($sel.length) {
$sel.parent().css("display", "block");
$sel.parents().eq(1).css("background","url('/_layouts/images/minus.gif') no-repeat 3px 12px");	
}

Here’s the CSS

/* |--------- Quicklaunch -----------| */
.s4-ql A.selected {
background-color:transparent;
border:0px!important;
}
/* Inner nav element */
.menu-vertical {padding:10px; padding-left:0px}

/* Headers */
.menu-vertical > ul.root > li.static > a > span > span.menu-item-text {
border-bottom:1px #ccc solid;
padding-left:5px; color:#333;
padding-bottom:5px; padding-top:5px;
}
/* Sublinks */
.menu-vertical > ul.root ul > li > a {
padding-left:15px; color:#333; 
}
/* Sublinks hover */
.menu-vertical > ul.root ul > li > a:hover{
color:#009BA4; text-decoration: underline
}
/* Sublinks top and bottom */
.menu-vertical > ul.root ul {
margin-top:5px; margin-bottom:5px;
}
/* Sublinks selected */
.menu-vertical > ul.root > li.static > UL.static > li.selected > a.menu-item > span.additional-background{
margin-left:6px!important
}

Thanks & stay in tune!

/ Christian

About these ads
23 Comments
  1. Maxim Bondarenko permalink

    Thanks a lot Christian! Ive been waiting for this article )))

  2. Thabo permalink

    many thanks Christian, i’m a huge fan of yours: i am new to sharepoint look and feel and am learning alot from:
    Thank you sir

  3. Many many thanks Christian! Your articles are very simple to understand and effective to apply

  4. We’re a group of volunteers and starting a new scheme in our community. Your site provided us with useful information to work on. You have performed a formidable activity and our entire group will likely be thankful to you.

  5. Hi
    I.m try to run this code but is not working
    i added to my masterpage

    but this code not working. What im wrong?
    regrads
    marcin

  6. Hi there, try to put all the CSS included in an external file referenced from your custom master page, and the same for the jQuery, put this in an external JS file, and put the jQuery code into a doc ready function:

    $(document).ready(function() {
    .. code here ..
    });

    If you still have a trouble, I’ll set up an example you can download.

    / C

    • Hi !
      Thanks , I have problems with jquery. All works fine ;) I very happy
      Regards
      Marcin

  7. That’s great Marcin, best of luck to you.
    / C

  8. Hi Christian !
    I have next question ;) Is possible to for example dont collapse menu in speacial sytuation ?
    i added heading in current navigation and i added four link to the heading. And now when i click my heading all working fine the menu is expanded. but when i click to another link the menu is collapsed
    is possblible to show expaned heading ?
    regards

  9. Viresh permalink

    Hi Christian
    I wonder if you can assist me. I am trying to create a vertical ‘column’ based quick launch menu i.e.
    Once a certain amount of menu items have been shown vertically, it will then wrap over to the right and create a new column. Please tell me this is possible.

  10. Troy permalink

    Hi Christian,

    Great work u do!. Do you possibly have any masterpage themes/templates that I could use?

    Regards
    Troy

  11. Hi Troy thanks, no I have’nt uploaded any (complete) master pages or themes yet, maybe I’ll to that in the future.

  12. Thanks for this article! Your link to images in not working though….could you please tell me the dimensions of the top and bottom wrapper??
    Help appreciated!
    Thanks,
    Ann

  13. Hi AGDAnn, can you try this link? http://sdrv.ms/LghLRq
    About dimensions, I have specified this in the CSS above, the top & left is 220x19px. Good luck!

  14. Forget the QL…. how did you manage to get rounded corners on the top navigation bar, looks awesome! Big fan of your work and thanks- JT

  15. Hi Treehorn, thanks! Yeah, I showed a bit more than just the Quick launch at the image, There’s just an left rounded image left to the global navigation in a seaparte cell or div just like I add an ending image with another image in another div or cell. Are you following me? Something like

    Left image
    Global nav
    Right image

    The thing is that I add this two divs in the master page and using background img in CSS.

    • J. Treehorn permalink

      Before your reply, I actually got the nav bar rounded using the elusive css3pie….. yep even works in ie8. Thanks for the inspiration! So what do you have planned for us in 2013? Keep up the great work.

      -JT

  16. Hey Treehorn, thanks for the tip about css3pie, that’s an alternative worth consider! Btw, my plans for 2013 is to write more about SharePoint 2013 but I guess I’ll do a couple more blogs about 2010 and I’ll hope I’ll write more related to pure branding stuff. Thanks for reading my blog!

  17. Roger Östnes permalink

    Great post Christian, i really enjoy reading your tips!
    I followed your second scenario above but all I get are collapsed plus signs in the quicklaunch area.
    None of my links are visible any more.

    Needless to say, I´m all new to Branding but really fashinated by it.
    What have gone wrong for me?
    Can you help?

  18. Hey Roger and welcome to the SharePoint branding world! However, cannot say exactly why you having this issue, can you expand the + at all? Please verify that you followed every steps in the instructions, the scenarie is the same as described in the post and that the lastest jQuery is loaded onto the page including the script. If you still are stuck, I can try help you by the mail instead, use sharepointdesignerSNABELAhotmailPUNKTcom – best of luck!
    / C

  19. Roger Östnes permalink

    Hi and thanks for your reply.
    As I´m really new to this I can´t really say why I´m stuck. I guess I did exactly as you decribed but I seem to be left with plusses that can´t be expanded.

    I sent you an e-mail with info, I would appreciate if you could have a look at it.

    Regard
    Roger

Trackbacks & Pingbacks

  1. Branding the Quick Launch in SharePoint 2010 – Part I « Me & My SharePoint Designer
  2. Branding the Quick Launch in SharePoint 2010 – Part I | HueDesigner

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,226 other followers

%d bloggers like this: