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

CC BY-SA 3.0
2015-08-03T20:03:19.497Z
Glad that worked for you! I actually deleted (then undeleted) my comment, because I was confident that Marion's answer was better. :)
Lindsey D
CC BY-SA 3.0
2015-08-03T20:39:25.720Z
Your answer passed the "all things being equal, what looks easier to do" test ;-).
Adam Snetman
CC BY-SA 4.0
2015-08-03T19:31:38.903Z
2022-11-15T02:35:56.543Z
2022-11-15T02:35:56.543Z
Adam Snetman
<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>

CC BY-SA 3.0
2015-08-03T18:22:59.873Z
2015-08-03T18:22:59.873Z
Marion Newlevant
<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>

CC BY-SA 4.0
2022-11-12T19:24:42.667Z
2022-11-12T19:24:42.667Z
7ochem
<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>

CC BY-SA 3.0
2015-08-03T18:18:40.513Z
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.)
Lindsey D
CC BY-SA 3.0
2015-08-03T18:54:26.693Z
@LindseyD Works perfectly. If you'd post this as an official answer, I will mark it as the solution.
Adam Snetman
<redactor>
Where do I add custom css for the Redactor editor in the Craft control panel?
# 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**: @LindseyD 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.
.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:
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 Marion'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.
if (\Craft::$app->getRequest()->getIsCpRequest()) {
    $view = Craft::$app->getView();
    $view->registerAssetBundle(MyCpAsset::class);
}

With your asset class:
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.


---

