Rich Text Editor custom css - how to add classes to the dropdown that aren't displayable in the dropdown?

Question

On Sitecore 9.1. I've created some custom classes for content authors to use. The authors want these classes to be dropdown options in the rich text editor so they can apply them easily. I added them to the custom stylesheet, the problem is that they display in the dropdown list the same way they display in the rich text - and the font sizes are way too big for that

For example, this class is 92px, and that's not even the largest one they want added. It makes the dropdown list extremely hard to use.

.white-outline-xs {
    color: transparent !important;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: white;
    font-size: 92px;
}

Is there any way to add classes like this to the Apply CSS Class dropdown? Ideally, they would display "true" css in the rich text window, but just show the name of the class (or maybe the name and color) but not make the font ridiculously big.

Not sure if it matters, but I also tried using ToolsFile.xml - but everything I put in there failed to show up at all. I don't know if the same issue will happen with ToolsFile

e.g.:

<classes>
    <class name="White Header XS" value=".white-outline-xs"></class>
</classes>

Answer 1

It seems the css from the custom style is pulled from your custom class and inserted as an inline style on the td element.

I had a play around with this and the only way I could get it to work was as below:

Add custom class to default.css

.verylarge
{
    font-size:80px;
}

Add corresponding entry into ToolsFile.xml

<classes>
  <class name="verylarge" value=".verylarge" />
</classes>

Add a "counter" class entry to override the inline styles that have been added to the td element in the following file /sitecore/shell/themes/standard/default/default.css

[title=".verylarge"] div[style]
{
    font-size:12px !important;
}

Note: the RTE uses a series of embedded IFRAMEs, so the original default.css is not loaded and available to the dropdown.

Be sure to force refresh each of the css files in the browser to remove possibility of caching.