how to add a new css class name to a cqdialog component?

Forum|Forum|2 years ago
June 14, 2023
1 reply
1931 views
How can I add a new css class to a component in the cqdialog, I already have the css ready and I just want to add a new css class name to the component.
I already tried with several methods and properties, which are:
class=""
cls=""
className=""
granite:class=""
hiddenHeaderClassName=""
hiddenHeaderEditingCSS=""
wrapperClass=""
And it didn't work
This is the original version:
I want to create and add a new css class name to have a result like this:
This is the section of the code con cqdialog (.content.xml) i want to add a new css class name
<tileGroup1
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/well">
....
</tileGroup1>
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by DPrakashRaj
Use this one as well in your xml definition at the top xmlns:granite="http://www.adobe.com/jcr/granite/1.0"
DPrakashRaj
Community Advisor
Granite:class should work. Can you share your component dialog code?
Aaron_DempwolffAuthor
Level 4
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Mosaic Component"
    sling:resourceType="cq/gui/components/authoring/dialog"
    extraClientlibs="[tfs.components.author.editorDesign]">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <tabs
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/tabs"
                maximized="{Boolean}true">
                <items jcr:primaryType="nt:unstructured">
                    <type
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Type"
                        sling:resourceType="granite/ui/components/coral/foundation/container"
                        margin="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                            <content
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/container"
                                margin="{Boolean}false">
                                <items jcr:primaryType="nt:unstructured">

                                    <mosaicType
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                        fieldDescription="Select variation from the dropdown"
                                        fieldLabel="Please select Variation"
                                        name="./mosaicType">
                                        <items jcr:primaryType="nt:unstructured">
                                           <tfs-mosaic--large-left
                                                jcr:primaryType="nt:unstructured"
                                                text="4 tiles, large image on left"
                                                value="tfs-mosaic--large-left"/>
                                            <tfs-mosaic--large-right
                                                jcr:primaryType="nt:unstructured"
                                                text="4 tiles, large image on right"
                                                value="tfs-mosaic--large-right"/>
                                        </items>
                                    </mosaicType>
                                    
                                    <!-- TILE 1 -->

                                    <groupName1
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="cq/gui/components/authoring/dialog/note"
                                        note="Tile 1°"/>
                                    <tileGroup1
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/well"
                                        granite:class="editComponent">
                                        <items jcr:primaryType="nt:unstructured">
                                            <tileColor1
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                                fieldDescription="Please Choose a color for Tile 1°"
                                                fieldLabel="Tile 1° Color"
                                                name="./tileColor1">
                                                <items jcr:primaryType="nt:unstructured">
                                                    <select
                                                        jcr:primaryType="nt:unstructured"
                                                        text="--Select--"
                                                        value=""/>
                                                    <background--heritageblue
                                                        jcr:primaryType="nt:unstructured"
                                                        text="TFS Heritage Blue"
                                                        value="background--tfsheritageblue"/>
                                                    <background--tfslightblue
                                                        jcr:primaryType="nt:unstructured"
                                                        selected="{Boolean}true"
                                                        text="TFS Light Blue"
                                                        value="background--tfslightblue"/>
                                                    <background--tfsspanishviridian
                                                        jcr:primaryType="nt:unstructured"
                                                        text="TFS Spanish Viridian"
                                                        value="background--tfsspanishviridian"/>
                                                    <background--tfsapplegreen
                                                        jcr:primaryType="nt:unstructured"
                                                        text="TFS Apple Green"
                                                        value="background--tfsapplegreen"/>
                                                    <background--tfscadmiumgreen
                                                        jcr:primaryType="nt:unstructured"
                                                        text="TFS Cadmium Green"
                                                        value="background--tfscadmiumgreen"/>
                                                    <background--tfsmustardseed
                                                        jcr:primaryType="nt:unstructured"
                                                        text="TFS Mustard Seed"
                                                        value="background--tfsmustardseed"/>
                                                    <background--tfsdarkcayene
                                                        jcr:primaryType="nt:unstructured"
                                                        text="TFS Dark Cayene"
                                                        value="background--tfsdarkcayene"/>
                                                    <background--tfscayene
                                                        jcr:primaryType="nt:unstructured"
                                                        text="TFS Cayene"
                                                        value="background--tfscayene"/>
                                                    <background--tfsdarksage
                                                        jcr:primaryType="nt:unstructured"
                                                        text="TFS Dark Sage"
                                                        value="background--tfsdarksage"/>
                                                    <background--tfssage
                                                        jcr:primaryType="nt:unstructured"
                                                        text="TFS Sage"
                                                        value="background--tfssage"/>
                                                </items>
                                            </tileColor1>
                                            <title1
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                fieldDescription="A title to display as the title text for the Tile 1°"
                                                fieldLabel="Title Text 1°"
                                                name="./title1"
                                                value="${cqDesign._jcr_description}"/>
                                            <subTitle1
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="cq/gui/components/authoring/dialog/richtext"
                                                fieldDescription="A title to display as the sub copy for the Tile 1°"
                                                fieldLabel="Sub Copy 1°"
                                                name="./subTitle1"
                                                useFixedInlineToolbar="{Boolean}true">
                                                <rtePlugins jcr:primaryType="nt:unstructured">
                                                    <format
                                                        jcr:primaryType="nt:unstructured"
                                                        features="bold,italic"/>
                                                    <justify
                                                        jcr:primaryType="nt:unstructured"
                                                        features="-"/>
                                                    <links
                                                        jcr:primaryType="nt:unstructured"
                                                        features="modifylink,unlink"/>
                                                    <lists
                                                        jcr:primaryType="nt:unstructured"
                                                        features="*"/>
                                                    <misctools jcr:primaryType="nt:unstructured">
                                                        <specialCharsConfig jcr:primaryType="nt:unstructured">
                                                            <chars jcr:primaryType="nt:unstructured">
                                                                <default_copyright
                                                                    jcr:primaryType="nt:unstructured"
                                                                    entity="&amp;copy;"
                                                                    name="copyright"/>
                                                                <default_euro
                                                                    jcr:primaryType="nt:unstructured"
                                                                    entity="&amp;euro;"
                                                                    name="euro"/>
                                                                <default_registered
                                                                    jcr:primaryType="nt:unstructured"
                                                                    entity="&amp;reg;"
                                                                    name="registered"/>
                                                                <default_trademark
                                                                    jcr:primaryType="nt:unstructured"
                                                                    entity="&amp;trade;"
                                                                    name="trademark"/>
                                                            </chars>
                                                        </specialCharsConfig>
                                                    </misctools>
                                                    <table
                                                        jcr:primaryType="nt:unstructured"
                                                        features="-">
                                                        <hiddenHeaderConfig
                                                            jcr:primaryType="nt:unstructured"
                                                            hiddenHeaderClassName="cq-wcm-foundation-aria-visuallyhidden"
                                                            hiddenHeaderEditingCSS="cq-RichText-hiddenHeader--editing"/>
                                                    </table>
                                                    <tracklinks
                                                        jcr:primaryType="nt:unstructured"
                                                        features="*"/>
                                                </rtePlugins>
                                                <uiSettings jcr:primaryType="nt:unstructured">
                                                    <cui jcr:primaryType="nt:unstructured">
                                                        <inline
                                                            jcr:primaryType="nt:unstructured"
                                                            toolbar="[format#bold,format#italic,format#underline,#justify,#lists,links#modifylink,links#unlink,#paraformat]">
                                                            <popovers jcr:primaryType="nt:unstructured">
                                                                <justify
                                                                    jcr:primaryType="nt:unstructured"
                                                                    items="[justify#justifyleft,justify#justifycenter,justify#justifyright]"
                                                                    ref="justify"/>
                                                                <lists
                                                                    jcr:primaryType="nt:unstructured"
                                                                    items="[lists#unordered,lists#ordered,lists#outdent,lists#indent]"
                                                                    ref="lists"/>
                                                            </popovers>
                                                        </inline>
                                                        <dialogFullScreen
                                                            jcr:primaryType="nt:unstructured"
                                                            toolbar="[format#bold,format#italic,format#underline,justify#justifyleft,justify#justifycenter,justify#justifyright,lists#unordered,lists#ordered,lists#outdent,lists#indent,links#modifylink,links#unlink,table#createoredit,#paraformat,image#imageProps]">
                                                            <popovers jcr:primaryType="nt:unstructured">
                                                                <paraformat
                                                                    jcr:primaryType="nt:unstructured"
                                                                    items="paraformat:getFormats:paraformat-pulldown"
                                                                    ref="paraformat"/>
                                                            </popovers>
                                                        </dialogFullScreen>
                                                        <tableEditOptions
                                                            jcr:primaryType="nt:unstructured"
                                                            toolbar="[table#insertcolumn-before,table#insertcolumn-after,table#removecolumn,-,table#insertrow-before,table#insertrow-after,table#removerow,-,table#mergecells-right,table#mergecells-down,table#mergecells,table#splitcell-horizontal,table#splitcell-vertical,-,table#selectrow,table#selectcolumn,-,table#ensureparagraph,-,table#modifytableandcell,table#removetable,-,undo#undo,undo#redo,-,table#exitTableEditing,-]"/>
                                                    </cui>
                                                </uiSettings>
                                            </subTitle1>
                                            <lighterColor1
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                                                fieldDescription="Select if you want to light the text color"
                                                fieldLabel="Lighter text color"
                                                name="./lighterColor1"
                                                text="Add lighter color to the text"
                                                checked="{Boolean}false"
                                                uncheckedValue="{Boolean}false"
                                                value="{Boolean}true"/>
                                            <image1
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
                                                allowUpload="{Boolean}false"
                                                class="cq-droptarget"
                                                fieldDescription="Drag and Drop asset or Path Browser."
                                                fieldLabel="Image Asset (Recommended size: 1440 x 450)"
                                                fileNameParameter="./fileName"
                                                fileReferenceParameter="./fileReference1"
                                                mimeTypes="[image/gif,image/jpeg,image/png,image/tiff,image/svg+xml]"
                                                name="./image1"
                                                title="Upload Image Asset"/>
                                            <alt1
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                fieldDescription="A title for the Image 1°"
                                                fieldLabel="Image tag"
                                                name="./alt1"
                                                value="${cqDesign._jcr_description}"/>
                                            <linkURL1
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
                                                fieldDescription="Link applied to teaser elements. URL or path to a content page."
                                                fieldLabel="Link"
                                                name="./linkURL1"
                                                rootPath="/content"
                                                wrapperClass="foundation-toggleable cmp-teaser__editor-link-url"/>
                                        </items>
                                    </tileGroup1>

                                </items>
                            </content>
                        </items>
                    </type>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>
If I use granite I get this error:
DPrakashRaj
Accepted solution
Community Advisor
Use this one as well in your xml definition at the top xmlns:granite="http://www.adobe.com/jcr/granite/1.0"
Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded
