How to show List Headers always, not just on hover?

Question

I want to show the list view headers of a SharePoint-List (these grey things with filter-dropdown, standard-view, standard masterpage) always, not just on hover. I tried to locate the correct css class via firebug (and googled for this question) but haven't found something yet, so I thought i'll ask here :)

Could anyone tell me which css I have to change to always show the Column Heades and the filter menu arrow, not just on hover?

Answer 1

I'd recommend using Chrome to try and find this kind of thing; it generally does the best job of handling 'hover' states.

So it turns out there's a couple things that happen when you mouse over a column header:

1. ':hover' CSS styles are applied to the TH (usually .ms-vh2) that houses the column header:

tr.ms-viewheadertr > th.ms-vh:hover, tr.ms-viewheadertr > th.ms-vh2:hover 
{
border-color: #e2e2e2;
background-color: #f6f6f6;
}

1. The DIV.s4-ctx within this TH has the class 's4-ctx-show' added to it. It looks like JavaScript normally removes this class afterwards.

tr.ms-viewheadertr > th:hover .s4-ctx-show {
background-color: #efefef;
background-image: none;
border: 1px solid #e0e0e0;
border-width: 0px 1px;
}

1. The IMG within that div has an inline 'visibility' attribute set to 'visible'.

So, my recommended approach would be to move those two style definitions above into the non-hover definitions ( so for the .s4-ctx-show, just put it under .s4-ctx ) and then use JQuery to force the IMG to be visible - or, just set the background image on the div to your own arrow via CSS.

Hope this helps!