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
Thanks a lot Christian! Ive been waiting for this article )))
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
Many many thanks Christian! Your articles are very simple to understand and effective to apply
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.
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
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
That’s great Marcin, best of luck to you.
/ C
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
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.
Hi Christian,
Great work u do!. Do you possibly have any masterpage themes/templates that I could use?
Regards
Troy
Hi Troy thanks, no I have’nt uploaded any (complete) master pages or themes yet, maybe I’ll to that in the future.
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
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!
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
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
The thing is that I add this two divs in the master page and using background img in CSS.
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
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!
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?
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
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
Hi Christian, I am having the same issue as roger Ostnes. Can you post the resolutions.
My links/headings arent listed, the plus signs are there. If I change the heading to a non link, I cannot collapse/toggle.