Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

Add new style to list in rtePlugings

Avatar

Level 3

What is the best approach to add new style to list in text? Checkmark ones:

/libs/foundation/components/text/cq:dialog/content/items/tabs/items/text/items/column/items/text/rtePlugins/lists

I want to add check mark style next to bullet and numbered.

1 Accepted Solution

Avatar

Correct answer by
Level 3

Thanks I could do that way with adding new option style. I wish I could add checkmark list icon next to these icons (Bullets/Numbered/Checkmark).

For now, I will go with adding style with new css class. 

In fact I need to add new node to list here:

/apps/myapp/components/base/widgets/rteconfig/lists/lists

Not sure what is the node and properties I have to use for it.

Thanks

View solution in original post

3 Replies

Avatar

Level 9

Add the list of styles as given below and then in your css file add the check mark image in css rule corresponding to the class name e.g 

.className1{

background:url(check.png) 10px 0px 

}

      jcr:primaryType="cq:Widget"
                    fieldLabel="Text"
                    height="200"
                    name="./text"
                    xtype="richtext">
                    <rtePlugins jcr:primaryType="nt:unstructured">
                        <styles
                            jcr:primaryType="nt:unstructured"
                            features="*">
                            <styles jcr:primaryType="cq:WidgetCollection">
                                <className1
                                    jcr:primaryType="nt:unstructured"
                                    cssName="className1"
                                    text="className1"/>
                                <className2
                                    jcr:primaryType="nt:unstructured"
                                    cssName="className2"
                                    text="className2"/>
                            </styles>
                        </styles>
                    </rtePlugins>
                </text>

Avatar

Correct answer by
Level 3

Thanks I could do that way with adding new option style. I wish I could add checkmark list icon next to these icons (Bullets/Numbered/Checkmark).

For now, I will go with adding style with new css class. 

In fact I need to add new node to list here:

/apps/myapp/components/base/widgets/rteconfig/lists/lists

Not sure what is the node and properties I have to use for it.

Thanks