0

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

enter image description here

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>
3
  • 1
    Hello, What about removing this CSS styles from Sitecore CSS class. But leave as it is on your website CSS class Apr 6, 2023 at 19:58
  • I really cant think of a way to make it work without actually having font-size: 92px. You could probably add another class that overrides the font-size only in RTE Apr 6, 2023 at 22:20
  • I reduced the size of the class in the webedit custom css file, and kept the true size in the main site css. the issue is that it doesn't display in the rich text editor the way it will actually look on the site which is not ideal for content authors Apr 12, 2023 at 17:01

1 Answer 1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.