Separated .css file for Sitecore Rich Text Editor

Question

I'm trying to use custom styles in Sitecore Rich Text Editor. I have found article, which describes how to do it, but I have to place my styles in default.css file. I would like to add my custom styles in separated .css file to avoid potential issues (for example, overwriting default .css file on upgrading version and so on). Is there way to use default.css and custom.css files at once?

Answer 1

You can update the value of WebStylesheet setting in config to the location of the css file you wish to use. The RTE will load this instead then.

<!--
  WEB SITE STYLESHEET
            CSS file for HTML content of Sitecore database.
            The file pointed to by WebStylesheet setting is automatically included in Html and Rich Text fields.
            By using it, you can make the content of HTML fields look the same as the actual Web Site

-->
<setting name="WebStylesheet">
  <patch:attribute name="value">/location/to/custom.css</patch:attribute>
</setting>

The above uses a patch config to update the value.

Answer 2

You can use @import rule: https://developer.mozilla.org/en/docs/Web/CSS/@import

The only thing you need to do is to add this line at the beginning of your default.css file:

@import 'customStyles.css';

It's still a change in default.css but only one and if you upgrade, you will notice that your custom styles are no longer there so you will remember to add this @import customStyle.css line to the new default.css file.