Add Custom CSS Classes to the TYPO3 RTE

by Michael Cannon in Featured, TYPO3 · 4 comments

The TYPO3 RTE is quite flexible. One easily proven aspect, is by the ability to select what CSS styling to apply by highlighting some text and choosing a custom CSS class from a drop-down. Furthermore, making this happen only takes a few minutes.

There’s 2 basic steps to making custom CSS classes available in the RTE.

  1. Create custom classes in your CSS stylesheet, with only one per line.
  2. Modify the RTE via Page TSConfig
    1. Link the RTE to the site CSS stylesheet
    2. Assign the custom classes to text types

content.css with custom classes

.coding { font-family: monospace; font-size: 1.1em;}
.note {background: #dfd; padding: 1em; border-top: 1px #bdb dotted; border-bottom: 1px #bdb dotted;}
.important {background: #ffd; padding: 1em; border-top: 1px #ddb dotted; border-bottom: 1px #ddb dotted;}
.warning {background: #fdd; padding: 1em; border-top: 1px #dbb dotted; border-bottom: 1px #dbb dotted;}
.float_left { float: left; display:inline; margin-right: 1em; margin-bottom: 0.15em;}
.float_right { float: right; display:inline; margin-left: 1em; margin-bottom: 0.15em;}
.center { text-align:center; margin: 0.5em auto}
/* these are for showing alignment in RTE on the backend */
.align-left { text-align: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }
.align-justify { text-align: justify; }

RTE Page TSConfig

RTE {
    default {
        # link to site css stylesheet
        contentCSS = fileadmin/templates/css/screen/content.css
        # clear typical styling
        classesAnchor >
        classesLinks =
        # set classes available to these properties. Paragraph is another name
        # for block
        classesCharacter := addToList(coding, note, important, warning)
        classesParagraph := addToList(coding, note, important, warning, float_left, center, float_right)
        classesTD := addToList(sub)
        classesTable := addToList(full, fixed)
        # list all available classes here, otherwise they're removed on RTE save
        proc.allowedClasses := addToList(coding, note, important, warning, float_left, center, float_right, sub, full, fixed)
    }
}

In the above Page TSConfig, we adjust the CSS stylesheet being referenced via contentCSS. A relative file path is from the website root with TYPO3 installed is sufficient.

Next, as we want to supplement, not replace the classes applicable, we use the addToList TypoScript function to add our custom CSS classes. These CSS classes are assigned to specific text types, like block text-strings, elements and tables as shown by the classesCharacter &classesParagraph samples.

Once you add your custom classes, you must make sure all of them are listed in the proc.allowedClasses property. Otherwise, your custom classes will not show up.

Reference

  • rtehtmlarea – FAQ: How do I configure the editor to use my CSS styles?
  • TYPO3 Best Practices

If you’ve got problems or questions, ask them in our comments section.

Be Sociable, Share!

Related Entries

Tagged as: CSS, RTE, Tips, tsconfig, Websites

About Michael Cannon

Hello, I'm Michael Cannon, Peichi's smiling man, an adventurous water-rat, chief technology officer, cyclist, poet, WWOOF'er and world traveler.

Previous post:

Next post: