Heather Soloman’s SharePoint 2010 CSS Reference Chart

Heather has released her latest SharePoint 2010 CSS Reference chart. This web page is simply amazing and will take the pain out of finding the particular elements and style classes to override. Heather first released the reference chart with the SharePoint 2007 CSS Reference chart.

It has awesome screenshots of each page element with the CSS Class or ID assigned to each. It even has sample code from the CSS files out of the box that you can grab.


Mega Dropdown menu for SharePoint 2010 (Global Navigation)

Final look:

Check out this link for detailed http://www.sharepointchina.com/Forum1/Topic/187.aspx


The above post was created based on



Customize survey form in SharePoint 2010

Default look of a survey form:

Required survey form styles:
1.Zebra striping
2.The question column needs to be reasonably wide
3.Add some space between each questions

Final Look:

Followed these two articles:




In the Survey Settings, I only created one question that included all the questions.

The Survey Setting page:

Use jQuery to customize Quick Launch in SharePoint 2010

I needed to customize my quick launch so that

  1. The very top level has a different style from its children
  2. Only display one level down at once, other nodes are collapsed
  3. Add indent between levels.
  4. When a link is selected, it will lose the URL and toggled when clicked

Things I had to do to get this:

SharePoint Navigation Setting, CSS and jQuery

Final look:

SharePoint Navigation Setting:

Change the navigaion settings at Site Actions->Site Settings->Look and Feel->Navigation->Current Navigation

Top navigation setting: (E.g “Our Science” level)

Second level setting: (E.g “Animal performance, Plant & forage, Land & environment” level)

Third level setting: (E.g. “Reproduction”, “Genomics”, “Growth & development” level)
In this case, the next level below this are all pages, not subsites, so no need to change the settings for the next level down.

CSS used to style the quick launch:

/* |--------- 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; } 

/* Level 1 static item and hover state */ 
.menu-vertical > ul.root > li.static > .menu-item{padding-left:0px!important; padding:1px!important; color:#333!important; } 
.menu-vertical > ul.root > li.static > .menu-item:hover{  text-decoration:none;  color:#8cc63e!important; }

/* Level 2 static item and hover state */ 
.menu-vertical > ul.root > li.static > ul.static > li.static >.menu-item{ padding-left:0px!important; padding:1px!important; color:#333!important;  font-weight:bold; } 
.menu-vertical > ul.root > li.static > ul.static > li.static >.menu-item:hover{  text-decoration:none;  color:#8cc63e!important; }

/* Level 3 static item and hover state */ 
.menu-vertical > ul.root > li.static > ul.static > li.static > ul.static > li.static >.menu-item{ padding-left:0px!important; padding:1px!important; color:#333!important; } 
.menu-vertical > ul.root > li.static > ul.static > li.static > ul.static > li.static >.menu-item:hover{  text-decoration:none;  color:#8cc63e!important; }

/*Level 1 selected item - Level1 include Our Science, Animal performance, Plant & forage etc */ 
.menu-vertical > ul.root > li.selected > .menu-item{ background-color:transparent!important; border:0px; margin:0px; padding:0px;  color:#8cc63e!important; }

/*Level 2 selected item*/ 
.menu-vertical > ul.root > li.static > ul.static >li.selected > .menu-item{ background-image:none!important; background-color:transparent; border:0px; margin-top:1px;  color:#8cc63e!important; }

/*Level 3 selected item*/ 
.menu-vertical > ul.root > li.static > ul.static >li.static > ul.static >li.selected >.menu-item{ background-image:none!important; background-color:transparent!important; border:0px; margin:0px; padding:0px;  color:#8cc63e!important; }

/* Sublinks margins */ 
.menu-vertical > ul.root > li.static > ul.static  { margin-top:5px; margin-bottom:5px; }

/* 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; }

jQuery used:

function() {
/*Toggle quick launch*/
//Hide all children         
$('.s4-ql li ul').hide(); 
//Remove the url from the selected item 
$('.s4-ql .selected').removeAttr('href');

//Add class to selected item so it can be toggled when click
$('.s4-ql .selected a').addClass('min');

//Display the selected items parents nodes 
$('.s4-ql .selected').parent().parent().show();
$('.s4-ql .selected').parent().parent().parent().show();

//Display the selected item's immediate child
$('.s4-ql ul li.selected').find('ul:first').show();

//In the root level, the heading and it's children are considered to be the same level, 
//to distiguish them, the first child will have bold font and black bottom border
//and other children will have a left indent and a black arrow in front of them.
$('.s4-ql ul.root').find('li:first').css({'font-weight':'bold', 'border-bottom':'1px black solid'});
$('.s4-ql ul.root').find('li:first').siblings('li').css({'padding-left':'20px', 'background':'url(\'/Style Library/Ag_Custom/images/arrow.png\') no-repeat 5px 5px;'});

//Setup Click Hanlder for min class       
$('.min').click(function() { 
//Traverse the DOM to find the child UL node             
var subList = $(this).siblings('ul'); 

//Toggle the UL             
/*End toggle quick launch*/

Here is how I used the Developer’s Tool in IE9 to select the items: