New look, same knowledge. It's all still here — just easier to find, with a cleaner layout and better navigation.

Clio Operate Knowledge Base

New look, same knowledge. It's all still here — just easier to find, with a cleaner layout and better navigation.

Search for answers or browse our knowledge base.
Have you tried asking our AI chatbot for help? It is down in the right-hand corner.

Clio Operate Knowledge Base

Search for answers or browse our knowledge base.
Have you tried asking our AI chatbot for help? It is down in the right-hand corner.

How to create CSS styles for use with the Rich Text Editor

Was this article helpful?

When working with widgets in your portal page, you might encounter formatting issues, such as inconsistent styling of static text and tags. This helps you create CSS formatting styles to ensure a uniform appearance. The styles are available wherever the Rich Text Editor is used, such as on widgets and email templates.

Reset Cache Headers when making UI changes.

Remember to use the Reset Cache Key option in the Cache Headers feature to have UI changes show in the UI.

 

The Issue

You may find that when you format text (in this example, some static text and a tag) in a widget, only the static text is correctly formatted when you look at it in the portal.

Solution: CSS Styling

You need to create or modify the CSS file associated with the widget to resolve this formatting inconsistency. Here are recommended steps:

  1. If it does not already exist, create a CSS file in the IDE. Open the IDE by navigating to Modeller > Developer > Developer IDE.
  2. Add your new style and click save.
    New style added
  3. Open the Rich Text Editor feature by navigating to Global Features and searching for rich.
    Global Features - Rich Text Editor Settings
  4.  Under the Custom Styles section, make sure the correct style sheet is selected and create a new style. Give it a name and enter the name of the style you created earlier.
    Rich Text Editor - Style sheet URL, Name and Class highlighted
  5. Save & Close, then recycle the cachecache icon
  6. The new style will now be available in the Rich Text Editor.
    Style list open in the rich text editor
  7. Text formatted with the new style will display correctly.
    New style used

 

Was this article helpful?

Related Articles

Related articles in the knowledge base