Answers.Body: <p>I ended up using the Control Panel CSS plugin by Lindsey D to do this. Installed the plugin and then pointed it to an external style sheet with my redactor styles.</p>
  <p>Here's the plugin:
  <a href="https://github.com/lindseydiloreto/craft-cpcss" rel="nofollow noreferrer">https://github.com/lindseydiloreto/craft-cpcss</a></p>
  <p>And in my stylesheet, the styles look like the below. These examples are for a custom item I added to the redactor formatting menu with a class <code>pullquote__quote</code>. The first style the menu item in the formatting dropdown menu. The second style the text in the editor.</p>
  <pre class="lang-css prettyprint-override"><code>.redactor-dropdown .redactor-formatting-p-pullquote__quote {
    font-size: 20px;
    font-weight: bold;
    color: #ffcb00;
  }
  
  .redactor-editor .pullquote__quote {
    font-size: 20px;
    font-weight: bold;
    color: #ffcb00;
  }
  </code></pre>
  <p>And my redactor config file for this rich text field has this corresponding addition:</p>
  <pre class="lang-javascript prettyprint-override"><code>formattingAdd: [
      {
          tag: 'p',
          title: 'Big quote',
          class: 'pullquote__quote'
      }       
  ]
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-08-03T20:03:19.497Z
Answers.Text: Glad that worked for you! I actually deleted (then undeleted) my comment, because I was confident that Marion's answer was better. :)
Answers.UserDisplayName: Lindsey D
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-08-03T20:39:25.720Z
Answers.Text: Your answer passed the "all things being equal, what looks easier to do" test ;-).
Answers.UserDisplayName: Adam Snetman
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2015-08-03T19:31:38.903Z
Answers.LastActivityDate: 2022-11-15T02:35:56.543Z
Answers.LastEditDate: 2022-11-15T02:35:56.543Z
Answers.UserDisplayName: Adam Snetman
Answers.Body: <p>What you want is the <a href="https://github.com/aelvan/RedactorStyles-Craft/" rel="nofollow">Redactor Styles</a> plugin</p>
  
  <blockquote>
    <p>In the CSS field you set up any CSS you need to customize the redactor fields in the control panel.</p>
  </blockquote>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-08-03T18:22:59.873Z
Answers.LastActivityDate: 2015-08-03T18:22:59.873Z
Answers.UserDisplayName: Marion Newlevant
Answers.Body: <p>If you want to do this locally without any external plugin, you can hook onto the request and add CSS stylesheets through a control panel asset.</p>
  <pre class="lang-php prettyprint-override"><code>if (\Craft::$app-&gt;getRequest()-&gt;getIsCpRequest()) {
      $view = Craft::$app-&gt;getView();
      $view-&gt;registerAssetBundle(MyCpAsset::class);
  }
  </code></pre>
  <p>With your asset class:</p>
  <pre class="lang-php prettyprint-override"><code>use craft\helpers\FileHelper;
  use craft\web\AssetBundle;
  use craft\web\assets\cp\CpAsset;
  
  class MyCpAsset extends AssetBundle
  {
      public function init(): void
      {
          $sourcePath = \Craft::getAlias('@config/redactor/styles');
          $this-&gt;sourcePath = $sourcePath;
          $this-&gt;depends = [CpAsset::class];
  
          foreach (FileHelper::findFiles($this-&gt;sourcePath, ['only' =&gt; ['*.css']]) as $file) {
              $this-&gt;css[] = substr($file, strlen($this-&gt;sourcePath) + 1);
          }
  
          parent::init();
      }
  }
  </code></pre>
  <p>Now place any <code>.css</code> file in <code>config/redactor/styles/</code> and it will get loaded into the Control Panel.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2022-11-12T19:24:42.667Z
Answers.LastActivityDate: 2022-11-12T19:24:42.667Z
Answers.UserDisplayName: 7ochem
Body: <p>Redactor provides a way to specify custom styles for content in the editor. It's documented here: <a href="http://imperavi.com/redactor/examples/typography/" rel="nofollow">http://imperavi.com/redactor/examples/typography/</a></p>
  
  <p>How can I use this approach with Craft?</p>
  
  <p>I've already added custom formatting options to the menu via formattingAdd. That works great and the corresponding custom CSS classes are being applied in the formatting menu, the editor text, and on the site front-end.</p>
  
  <p>But the items in the formatting menu and the editor just look like standard paragraph elements and don't reflect any of the styles that they will have on the site.</p>
  
  <p>Where do I put the CSS so that when my clients are working in the control panel, the styles are visible in the formatting menu and the editor when they are applied?</p>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2015-08-03T18:18:40.513Z
Comments.Text: Might be tricky, I'm not sure how Redactor would interact with your CSS formatting. You can try [CP CSS](https://github.com/lindseydiloreto/craft-cpcss). (Didn't post that as an official answer because I'm not sure if it'll work for you or not.)
Comments.UserDisplayName: Lindsey D
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2015-08-03T18:54:26.693Z
Comments.Text: @LindseyD Works perfectly. If you'd post this as an official answer, I will mark it as the solution.
Comments.UserDisplayName: Adam Snetman
Tags: <redactor>
Title: Where do I add custom css for the Redactor editor in the Craft control panel?
ThreadText: # Where do I add custom css for the Redactor editor in the Craft control panel?
  
  (Asked by: username_0 on 2015-08-03)
  
  Redactor provides a way to specify custom styles for content in the editor. It's documented here: <http://imperavi.com/redactor/examples/typography/>
  
  How can I use this approach with Craft?
  
  I've already added custom formatting options to the menu via formattingAdd. That works great and the corresponding custom CSS classes are being applied in the formatting menu, the editor text, and on the site front-end.
  
  But the items in the formatting menu and the editor just look like standard paragraph elements and don't reflect any of the styles that they will have on the site.
  
  Where do I put the CSS so that when my clients are working in the control panel, the styles are visible in the formatting menu and the editor when they are applied?
  
  **Tags:** redactor
  
  > **Comments:**
  > **username_1**: Might be tricky, I'm not sure how Redactor would interact with your CSS formatting. You can try [CP CSS](https://github.com/lindseydiloreto/craft-cpcss). (Didn't post that as an official answer because I'm not sure if it'll work for you or not.)  
  > **username_0**: @username_1 Works perfectly. If you'd post this as an official answer, I will mark it as the solution.  
  
  ---
  
  ## 3 answers
  
  ### Answer by username_0 on 2015-08-03. Score: 9
  
  I ended up using the Control Panel CSS plugin by username_1 to do this. Installed the plugin and then pointed it to an external style sheet with my redactor styles.
  
  Here's the plugin:
  <https://github.com/lindseydiloreto/craft-cpcss>
  
  And in my stylesheet, the styles look like the below. These examples are for a custom item I added to the redactor formatting menu with a class `pullquote__quote`. The first style the menu item in the formatting dropdown menu. The second style the text in the editor.
  
  ```css
  .redactor-dropdown .redactor-formatting-p-pullquote__quote {
    font-size: 20px;
    font-weight: bold;
    color: #ffcb00;
  }
  
  .redactor-editor .pullquote__quote {
    font-size: 20px;
    font-weight: bold;
    color: #ffcb00;
  }
  
  ```
  
  And my redactor config file for this rich text field has this corresponding addition:
  
  ```javascript
  formattingAdd: [
      {
          tag: 'p',
          title: 'Big quote',
          class: 'pullquote__quote'
      }       
  ]
  
  ```
  
  > **Comments:**
  > **username_1**: Glad that worked for you! I actually deleted (then undeleted) my comment, because I was confident that username_2's answer was better. :)  
  > **username_0**: Your answer passed the "all things being equal, what looks easier to do" test ;-).  
  
  ---
  
  ### Answer by username_2 on 2015-08-03. Score: 4
  
  What you want is the [Redactor Styles](https://github.com/aelvan/RedactorStyles-Craft/) plugin
  
  > In the CSS field you set up any CSS you need to customize the redactor fields in the control panel.
  
  
  ---
  
  ### Answer by username_3 on 2022-11-12. Score: 2
  
  If you want to do this locally without any external plugin, you can hook onto the request and add CSS stylesheets through a control panel asset.
  
  ```php
  if (\Craft::$app->getRequest()->getIsCpRequest()) {
      $view = Craft::$app->getView();
      $view->registerAssetBundle(MyCpAsset::class);
  }
  
  ```
  
  With your asset class:
  
  ```php
  use craft\helpers\FileHelper;
  use craft\web\AssetBundle;
  use craft\web\assets\cp\CpAsset;
  
  class MyCpAsset extends AssetBundle
  {
      public function init(): void
      {
          $sourcePath = \Craft::getAlias('@config/redactor/styles');
          $this->sourcePath = $sourcePath;
          $this->depends = [CpAsset::class];
  
          foreach (FileHelper::findFiles($this->sourcePath, ['only' => ['*.css']]) as $file) {
              $this->css[] = substr($file, strlen($this->sourcePath) + 1);
          }
  
          parent::init();
      }
  }
  
  ```
  
  Now place any `.css` file in `config/redactor/styles/` and it will get loaded into the Control Panel.
  
  
  ---
  
  