10 May 2012

Styling Individual Link Headers in the SharePoint 2010 Quicklaunch

I had a client reach out to my the other day hoping to highlight a specific link header in their Quicklaunch navigation of their SharePoint 2010 Intranet homepage. Modifying all of the headers is fairly straight-forward, but I haven't seen any documentation that calls out how to change the look and feel of one specific header. For my client, he wanted to change an "Emergency Contact" link to red to make it a little more visible to his end users.

After some tinkering, I realized that you could a modification to the first-child selector to call out the specific link. In this code below, our "Emergency Contact" link was the second link header (the first "li" item after the first-child selector). If your link header is the third or fourth in the Quicklaunch, all you need to do is add a subsequent "+li" or "+li +li" to select the applicable link.

/***Single Link Header Customization***/
.menu-vertical > ul.root > li.static:first-child +li {
font-weight: bold;
padding:1px 1px 1px 0px!important;
color:red!important;
}
/***End Single Link Header Customization***/
Hope this helps someone out there. 

-Steve

No comments:

Post a Comment