3

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?

  • Might be tricky, I'm not sure how Redactor would interact with your CSS formatting. You can try CP CSS. (Didn't post that as an official answer because I'm not sure if it'll work for you or not.) – Lindsey D Aug 3 '15 at 18:18
  • @LindseyD Works perfectly. If you'd post this as an official answer, I will mark it as the solution. – Adam Snetman Aug 3 '15 at 18:54
6

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.

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'
    }       
]
| improve this answer | |
  • Glad that worked for you! I actually deleted (then undeleted) my comment, because I was confident that Marion's answer was better. :) – Lindsey D Aug 3 '15 at 20:03
  • 1
    Your answer passed the "all things being equal, what looks easier to do" test ;-). – Adam Snetman Aug 3 '15 at 20:39
4

What you want is the Redactor Styles plugin

In the CSS field you set up any CSS you need to customize the redactor fields in the control panel.

| improve this answer | |

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.