Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED
how to add a new css class name to a cqdialog component?
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">
<items jcr:primaryType="nt:unstructured">
....
....
....
....
</tileGroup1>
Topics
Topics help categorize Community content and increase your ability to discover relevant content.
1 Accepted Solution
Correct answer by
Use this one as well in your xml definition at the top xmlns:granite="http://www.adobe.com/jcr/granite/1.0"
<?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="&copy;"
name="copyright"/>
<default_euro
jcr:primaryType="nt:unstructured"
entity="&euro;"
name="euro"/>
<default_registered
jcr:primaryType="nt:unstructured"
entity="&reg;"
name="registered"/>
<default_trademark
jcr:primaryType="nt:unstructured"
entity="&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:
Correct answer by
Use this one as well in your xml definition at the top xmlns:granite="http://www.adobe.com/jcr/granite/1.0"
Hello @Aaron_Dempwolff
you have to provide granite namespace (xmlns:granite="http://www.adobe.com/jcr/granite/1.0")
