4

I have a custom css class that has been patched which I have verified in showconfig.aspx

<?xml version="1.0" encoding="utf-8"?>
<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
  <sitecore>
    <settings>
      <setting name="WebStylesheet" value="/css/rte.css" />
    </settings>
  </sitecore>
</configuration>

I have verified the css via that url.

But in rich text editor I'm not seeing any classes under Apply Css Class. In both the content editor - rich text editor or the SXA rendering.

enter image description here

Is there a step I've missed doing? Using Sitecore 9.1 with SXA 1.8

My css is just:

.module-title {
  color: #373A40;
  text-align: center;
  margin-bottom: 1.5em;
  font-weight: 100;
}

Do I also have to update the ToolsFile.xml? I thought it would automatically pick up all the classes from the css file, and you only needed to use the xml to restrict what classes you wanted specifically to show.

  • 1
    Can you check the toolsfile.xml and see what is in the <classes> part? I think that should be empty if you want your styles to be picked from the css.. – Gatogordo Apr 9 '19 at 12:26
  • @Gatogordo yay! that was the issue. There were some items in there mysteriously. Can you post as an answer so I can accept. – Jen Apr 10 '19 at 0:46
2

We encountered the same issue and fixed it in the ToolsFile.xml. Our experience is that the classes section of that file should be empty to have the classes from your attached css file to be imported in the dropdown of the RT editor.

This way there should be no need to add all your classes in the xml file and you can just use the external css file. Remember to clear (browser) caches when you make changes to it (the css file gets cached).

  • It seems like if you want the rich text editor to show the text with the classes applied. Then those classes need to be in the rte.css file. In which case you'd need to have a subset of classes in the ToolsFile.xml. It doesn't seem like the editor is loading the site css. (in case you can confirm from your experience) – Jen Apr 11 '19 at 4:43
  • 1
    That's right. The site css is nit loaded, just the RTE one from the setting. – Gatogordo Apr 11 '19 at 5:27
1

It should pick up automatically, but you can try to add it to ToolsFile.xml

<classes>
<class name="Your Class 1" value="your-class-1" />
<class name="Your Class 2" value="your-class-2" />
<class name="Your Class 3" value="your-class-3" />
</classes>

toolsfile is located under \sitecore\shell\Controls\Rich Text Editor\ folder.

Personally, I prefer to creating snippets instead of adding custom css class to a richtext editor. It is a bit more user friendly solution. You can add custom html snippets in the richtext editor profile, in core database. e.g here /sitecore/system/Settings/Html Editor Profiles/Rich Text Full/Snippets

  • Thanks. We will be doing both, but some stuff makes sense to just be class driven. – Jen Apr 10 '19 at 0:40
1

A method I much prefer for user-friendliness is to create a new paragraph type in the RTE Profile:

custom paragraph type

It looks like this in the Rich Text Editor window:

rich text editor window

This way you can choose the type of DOM element you want and can specify multiple classes.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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