4

Redactor II uses Trebuchet as font, has ugly paddings, giant font sizes and other things.

This must be fixed...

4

Here is my eye-friendly code:

/* Redactor|Fonts */
[class^="redactor-"], [id^="redactor-"] {
    font-family: inherit !important;
}

/* Redactor|Toolbar */
ul.redactor-toolbar a {
    padding: 12px 13px !important;
    height: auto !important;
}
div.redactor-dropdown, ul.redactor-dropdown {
    font-size: 13px !important;
}
a.redactor-dropdown-h3 {
    font-size: 18px !important;
}

/* Redactor|Tooltip */
span.re-button-tooltip {
    z-index: 1 !important;
    bottom: -18px !important;
    background: none !important;
    color: #333f4d !important;
    font-size: 10px !important;
}

/* Redactor|WYSIWYG-Editor */
div.redactor-layer {
    padding: 20px !important;
    font-size: 15px !important;
    line-height: 22px !important;
}
div.redactor-layer h3 {
    font-size: 20px !important;
}

/* Redactor|HTML-Editor */
div.redactor-box textarea.open {
    padding: 20px !important;
    border-top: 1px solid #e3e5e8 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    background-color: #333f4d !important;
    color: #fff !important;
    font-size: 12px !important;
    line-height: 18px !important;
}

Just paste it into the Control Panel CSS plugin.

0

As already mentioned in this post Redactor doesn't set Trebuchet as the font, your OS does.

If you want Redactor to inherit all the styles from the control panel in Craft, to blend in seamlessly, you can do that with just:

.redactor-layer,
.redactor-layer > * {
  font: inherit !important;
}
1
  • 1
    In fact, Redactor sets Trebuchet as the font in redactor.min.css May 4 '17 at 18:08
0

I was commiserating with some colleagues about this the other day, so I bundled up a stylesheet into its own angsty little plugin:

https://github.com/AugustMiller/craft-redactor-helvetica

Effectively similar to the Control Panel CSS plugin, except that self-container and not extensible.

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.