Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-11-19T19:00:52.090Z
Answers.Text: 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....
Answers.UserDisplayName: monkeyArms
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-11-19T19:13:30.920Z
Answers.Text: 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.
Answers.UserDisplayName: monkeyArms
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-11-19T19:40:08.793Z
Answers.Text: You could even make it more specific by chaining the same class with itself: `.btn.btn {}`, @monkeyArms ;)
Answers.UserDisplayName: carlcs
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-11-19T20:06:59.267Z
Answers.Text: How did I not know you could do that!?  I learned some things today.
Answers.UserDisplayName: monkeyArms
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-11-19T18:15:36.903Z
Answers.LastActivityDate: 2014-11-19T18:15:36.903Z
Answers.UserDisplayName: carlcs
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-11-19T19:08:27.470Z
Answers.Text: 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.
Answers.UserDisplayName: monkeyArms
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-11-19T18:15:28.373Z
Answers.LastActivityDate: 2014-11-19T18:15:28.373Z
Answers.UserDisplayName: Marion Newlevant
Body: <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>
  
Tags: <richtext><redactor>
Title: Custom redactor.css file
ThreadText: # 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"](https://github.com/lindseydiloreto/craft-cpcss) by Lindsey DiLoreto or make your own little one.
  
  Make use of the [`includeCssResource()`](http://buildwithcraft.com/classreference/services/TemplatesService#includeCssResource-detail) 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 {}`, @username_0 ;)  
  > **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.  
  
  ---
  
  