4

I would like to override or include a custom redactor.css file so that I can match the typography of the rich text editor contents with the site's stylesheet.

The path to redactor.css is hard-coded into the application (craft/app/fieldtypes/RichTextFieldType.php - line 281), and obviously I don't want to change this file or the redactor.css file.

Is there at least a way to inject a custom css file into the admin pages so that the core/base styles can be overridden?


UPDATE: Both plugin solutions below worked, but because craft includes redactor.css after the plugin's css include is inserted, the trick is to make your css selectors more specific, i.e.:

.redactor_.redactor_editor h1 { font-size: 48px !important; }
6

You can override the control panel's CSS with a plugin. Use the popular "Control Panel CSS plugin" by Lindsey DiLoreto or make your own little one.

Make use of the includeCssResource() function and include a CSS file with your custom redactor styles:

myRedactorCssPlugin.php:

public function init()
{
    if (craft()->request->isCpRequest())
    {
        craft()->templates->includeCssResource('myRedactorCss/redactor.css');
    }
}

resources/redactor.css:

.redactor_editor h1 {
  font-weight: normal !important;
}
.redactor_editor p {
  background-color: #eee;
}
| improve this answer | |
  • The plugin worked fairly well, except that it inlcudes the css file before the redactor.css file is included, and redactor.css contains a ton of !important declarations, so things like h1 font-size cannot be overridden. Frustrating.... – monkeyArms Nov 19 '14 at 19:00
  • I solved the !important issue by making a more specific css selector: instead of redactor_editor h1 {}, I used .redactor_.redactor_editor h1 {} along with lots of !important's. – monkeyArms Nov 19 '14 at 19:13
  • 1
    You could even make it more specific by chaining the same class with itself: .btn.btn {}, @monkeyArms ;) – carlcs Nov 19 '14 at 19:40
  • How did I not know you could do that!? I learned some things today. – monkeyArms Nov 19 '14 at 20:06
2

Use the RedactorStyles plugin, and set the Styles Css field (for inline CSS), or Styles Css File field (for CSS in a file). It's worked great for me.

| improve this answer | |
  • This worked as well, but suffers from the same issue as the "Control Panel CSS plugin": Craft includes the redactor.css file after the plugin's css include, so the !important attributes cannot be overridden. – monkeyArms Nov 19 '14 at 19:08

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.