Learn about the top 2016 CMS trends. Read on.


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

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

Still stuck? Write us.

  • Petro, the things you’re asking about are found starting with the rtehtmlarea manual at TYPO3.org.

    For frontend output handling, that’s TypoScript.

    For backend look of text, that’s TSConfig, like above’s contentCSS.

    Add styling options to RTE is covered in this post.

    Special elements could be handled through additional custom extensions or using content replacers. I’m not sure what exactly you’re asking for.

  • For external elements like tables, you’ll need some additional TypoScript like lib.parseFunc_RTE.externalBlocks.table.stdWrap.HTMLparser.tags.table.fixAttrib.class.list := addToList(responsive)

  • Tomas Norre

    Hi,

    Thanks for you guide, think the extension manual is a bit tricky about this part. =)

    When added your code as examle, my “block style” and “text style” gets inactive..

    I have copy pasted the code as written in your example..

    Hint on what could be wrong?

    The idea was to use your example first, and then correct it to fits my needs.

    • Tomas, Thank you for writing. Are you still using the original RTE TSConfig? If the block and text style seem inactive, it sounds like that you’re not highlighting text that you want to apply those changes too.

  • Priya

    I am using code then also i am not able to add class
    http://screencast.com/t/3drKLR1krx
    RTE.classes{
    highlight{
    name = highlight
    value = color:#636466; font-size:15px;
    }
    brown{
    name = brown
    value = color:#9A3811;
    }
    }

    RTE.default{
    ignoreMainStyleOverride = 1
    useCSS = 1
    showTagFreeClasses = 1
    contentCSS = fileadmin/templates/main/css/rte.css
    buttons {
    blockstyle.tags.div.allowedClasses := addToList(highlight, brown)
    blockstyle.tags.p.allowedClasses := addToList(highlight, brown)
    textstyle.tags.span.allowedClasses := addToList(highlight, brown)
    }
    proc.allowedClasses := addToList(highlight, brown)
    }