1

is it possible for Redactor or any of the other editors to actually inherit the styles from the (front end) page it is editing? My client has bootstrap columns etc and the pages have some elements with backgrounds and i wanted to make the content look more like the actual website they are editing rather than one long block of text.

I hacked around in the Redactor CSS files and i can kind of get it working by importing my sites stylesheets into the Redactor one but then that affects the whole Entry page's styles and also hacking in Redactors styles doesn't seem the best.

I do realise probably the best way to do this properly would be to create blocks for each type of content with Matrix (2 col or 1 col etc) and recreate all page elements but the site is coming from another system with lots of static pages and i just wanted my client to have a simple way to edit the existing content.

Anyone any ideas if this is possible at all?

Malcolm

1

The best solution I know of is to install the Control Panel CSS plugin. When you add the css you'll want to target the elements inside Redactor so you don't change the whole Craft CP. For example, add ".redactor-box " before any elements you need to style.

.redactor-box p {
    margin-bottom: 50px;
}
| improve this answer | |
  • Thanks Simon - yeah i think your right for now - its a shame for just simple sites we couldn't just throw HTML content into Redactor and it use the CSS from the actual page to style it in the CP (or at least you could switch it on as an option maybe) – user2350248 Jun 5 '19 at 23:40
  • @user2350248 Using Gulp and SASS (or some other preprocessor) I wouldn’t be surprised if you could automate wrapping all your CSS in .redactor-box {} and outputting it to a separate CSS file. That file could then be given to Control Panel CSS for a automated and live updating solution. – Simon Kuran Jun 6 '19 at 2:11

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.