Q:

How to add CSS class to CQ dialog box

I want to add a CSS definition and a CSS Class to the field "myBookmark" (see below). Any suggestions?
(This tab will occur when opening the page properties.)
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:Panel"
    title="Interactions">
  <items jcr:primaryType="cq:WidgetCollection">
    <share 
     jcr:primaryType="cq:Widget"
     title="Share"
     xtype="dialogfieldset"
     collapsed="{Boolean}false"
     collapsible="{Boolean}true">
     <items jcr:primaryType="cq:WidgetCollection">
        <myBookmark jcr:primaryType="cq:Widget" type="select" xtype="selection"
            defaultValue=""
            fieldLabel="Share Button"
            name="./share" >
              <options jcr:primaryType="cq:WidgetCollection">
                <alignment1 jcr:primaryType="nt:unstructured" text="(inherit)" />
                <alignment2 jcr:primaryType="nt:unstructured" text="hide"   value="hide"/>
                <alignment3 jcr:primaryType="nt:unstructured" text="show"   value="show"/>
              </options>
          </myBookmark>
     </items>
    </share>
...

For now, I was working with cq:listeners inside the dialog to add CSS via JS (http://dev.day.com/docs/en/cq/current/developing/components.html) and added a css file using clientlibs (http://blogs.adobe.com/mtg/2011/11/building-components-in-adobe-cq-5-part-1-a-tutorial-on-clientlibs-using-jquery-ui.html)
Those alternatives did not fit my needs.
Benedikt

A:

The class for ExtJS widget can be addded through out of the box configuration property: cls. See the CQ5 Widgets API documentation.
 <items jcr:primaryType="cq:WidgetCollection">
    <myBookmark 
        jcr:primaryType="cq:Widget" 
        cls="myClassName"
        defaultValue=""
        fieldLabel="Share Button"
        name="./share"
        type="select"
        xtype="selection">
          <options jcr:primaryType="cq:WidgetCollection">

The actual CSS rule should be put just as you mentioned in the client library. You just need to make sure that the clientlib is being attached to the page where you open the dialog. You can either bind to wcm.edit (which is used by CQ to diplay dialogs) or you can create your own category (e.g. css.test) and then include the clientlib by your own: <cq:includeClientLib css="css.test" />

