<p>You can override the control panel's CSS with a plugin. Use the popular <a href="https://github.com/lindseydiloreto/craft-cpcss" rel="noreferrer">"Control Panel CSS plugin"</a> by Lindsey DiLoreto or make your own little one.</p>

<p>Make use of the <a href="http://buildwithcraft.com/classreference/services/TemplatesService#includeCssResource-detail" rel="noreferrer"><code>includeCssResource()</code></a> function and include a CSS file with your custom redactor styles:</p>

<p>myRedactorCssPlugin.php:</p>

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

<p>resources/redactor.css:</p>

<pre><code>.redactor_editor h1 {
  font-weight: normal !important;
}
.redactor_editor p {
  background-color: #eee;
}
</code></pre>

CC BY-SA 3.0
2014-11-19T19:00:52.090Z
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
CC BY-SA 3.0
2014-11-19T19:13:30.920Z
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
CC BY-SA 3.0
2014-11-19T19:40:08.793Z
You could even make it more specific by chaining the same class with itself: `.btn.btn {}`, @monkeyArms ;)
carlcs
CC BY-SA 3.0
2014-11-19T20:06:59.267Z
How did I not know you could do that!?  I learned some things today.
monkeyArms
CC BY-SA 3.0
2014-11-19T18:15:36.903Z
2014-11-19T18:15:36.903Z
carlcs
<p>Use the <a href="https://github.com/aelvan/RedactorStyles-Craft/" rel="nofollow">RedactorStyles</a> plugin, and set the <code>Styles Css</code> field (for inline CSS), or <code>Styles Css File</code> field (for CSS in a file). It's worked great for me.</p>

CC BY-SA 3.0
2014-11-19T19:08:27.470Z
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
CC BY-SA 3.0
2014-11-19T18:15:28.373Z
2014-11-19T18:15:28.373Z
Marion Newlevant
<p>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.</p>

<p>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.</p>

<p>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?</p>

<hr>

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

<pre><code>.redactor_.redactor_editor h1 { font-size: 48px !important; }
</code></pre>

<richtext><redactor>
Custom redactor.css file
# Custom redactor.css file

(Asked by: username_0 on 2014-11-19)

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; }

**Tags:** richtext, redactor

---

## 2 answers

### Answer by username_1 on 2014-11-19. Score: 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;
}

> **Comments:**
> **username_0**: 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....  
> **username_0**: 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.  
> **username_1**: You could even make it more specific by chaining the same class with itself: `.btn.btn {}`, @monkeyArms ;)  
> **username_0**: How did I not know you could do that!?  I learned some things today.  

---

### Answer by username_2 on 2014-11-19. Score: 2

Use the [RedactorStyles](https://github.com/aelvan/RedactorStyles-Craft/) 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.

> **Comments:**
> **username_0**: 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.  

---

