Playing with CSS and ListView Toolbar

(This articles has already been posted in Now I post it again in my own blog.)

Ever trying to explore %root\Program Files\Common Files\Microsoft Shared\web server extensions\60\Template\1033 (figure-1)? You will found where the magic of SharePoint template's coming from. Every time you create new site in SharePoint, you must define which site style you're going to make, and every site style has predefined template in these directories. For example, if you make News site, then the corresponding template directory will be SPSNEWS etc. And you guess what? If you want to play with ListView toolbar in all hosted sites, then you must search and edit all .XML schema which holds the definition of the listview.


Lets take situation where you don't want to make “Edit in Datasheet” appear in any of the lists view in your site. Doing new list definition in Schema.XML will force you to go through all available template sites and all available list definition in every template sites, a lot of work and time spent. (At least for now, I haven't found any other way when doing Schema.XML redefinition)
Fortunately, the stylesheet can come to help and will resolve your situation in less than a minute.

**What a joke?
**From my own perspectives SharePoint has come with lot of magic and plenty of hidden tricks; JavaScript (refer to my other tips) and also the style-sheet (.css) which will be our topic today. We will gain the advantage of those magic, if we tricky enough with them. Ok, stop talking and let's do the job!
SCHEMA.XML, which is defined in any list template definition (figure-2), is responsible for list behaviors. This is the file where SDK suggest to modify when you don't want “Edit in Datasheet” appear in list view.


In SCHEMA.XML you can found the definition that will solve your problem (figure-3). Of course if you delete this part, then your problem is gone, but only for a list in a site style. If your situation persists and you must remove “Edit in Datasheet” from all list view in your site, then the problem begins.


Here comes CSS
Examine again the SCHEMA.XML part (figure-3). The suggested part is implementing “ms-toolbar” class with “diidEditInGridButton” id. Creating new CSS class for this part won't resolve the problem, because you still have to replace all occurrences of “ms-toolbar” in “diidEditInGridButton” part. Then, we must have other approach the “CSS index selector”.
Index selector in CSS works by matching HTML component ID with style name definition. In order to make CSS works in such way, the style name must be same with desired ID name and prefixed with “#".

background: Yellow;

Background for this text will be yellow

Listing-1 is style-sheet definition which will apply automatically to any object with “selectedText” as its id. Looking back into SCHEMA.XML then our job is to define new style for “diidEditInGridButton” id, that is (listing-2)(Listing-2)

display: none;

But wait, since the “diidEditInGridButton” is implementing “ms-toolbar” class then we must inherit from the class to make the style works (listing-3)

ms-toolbar #diidEditInGridButton
display: none;

Put listing-3 in %root\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\LAYOUTS\1033\STYLES\Ows.css to make it available throughout your site's list view or include it into any of your custom list view to make it available only for single list view.

Last word
Even a CSS can make our job easier than editing whole .XML. And the same concept can be done for any other component in SharePoint.

Riwut Libinuko
Sr. Cloud Solution Architect

My research interests include distributed robotics, mobile computing and programmable matter.

comments powered by Disqus