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

Answers:

Answer

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" />

Answer

You can find according attributes here: http://docs.adobe.com/docs/en/cq/5-6/widgets-api/index.html?class=CQ.Ext.form.Label

One can define a DOM element ´id´ attribute via ´id´ and a ´class´ attribute via ´cls´.

Also, there is generally a ´style´ attribute that allows to set raw CSS definitions.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.