Change type of bullets in RTE

sagar_verliani

22-06-2020

Hi All,

 

We have a requirement to change the type of bullets in rte, do we have any plugin for this?

 

for example:

While authoring i can see in dialog preview different bullets indentation 

sagar_verliani_0-1592821431842.png

but after submitting bullets are changed.

 

sagar_verliani_1-1592821466165.png

 

 

Accepted Solutions (1)

Accepted Solutions (1)

Ravi_Pampana

MVP

22-06-2020

Hi,

 

You can add custom styles to override the OOB rte styles and add "cq.authoring.editor" category to the css file.  This will be universal change which will apply in all components.

 

If you want to apply for a single component try using "extraClientlibs" property and add the clientlibs to cq:dialog

 

Screen Shot 2020-06-22 at 9.10.58 AM.png

.cq-RichText-editable ul li:before {
    color: #0072ce;
}
Will display like below
Screen Shot 2020-06-22 at 9.08.24 AM.png

The above change will apply inside the dialog and if you need the same change to reflect on the page, the same styles can be added to your site css.

 

Hope this helps!

Answers (3)

Answers (3)

Veena_Vikram

MVP

22-06-2020

@sagar_verliani Sagar, the bullet styles displayed on your page should be controlled by UI. Please inspect the element by clicking F12 and check what style is appearing right now for your bullet and modify and check what you need . The content and styling on the webpage is completely handled by CSS on the HTML page.

 

Veena ✌

Arun_Patidar

MVP

22-06-2020

Please check if this helps :

http://experience-aem.blogspot.com/2017/05/aem-62-touch-ui-extend-rte-list-plugin-for-adding-selecte...

 

Using above plugin you can add a class and based on that you can apply styles to the child HTML elements.

If you have only one list style throughout the site the no need to add a plugin, just add CSS suggested in other responses.

 

The behavior is different because of dialog load a different CSS(OOTB) and site has different CSS.

Veena_Vikram

MVP

22-06-2020

Do you want to change the bullet type in the RTE or displayed on the page ?