Cannot choose text style in RTE

Question

In the Page TSConfig on the root page I have the following code:

/////////////////////////////////////////////////////////////
//    RTE
///////////////////////////////////////////////////////////// 
RTE.classes{
  highlight{
      name = highlight
      value = color:#636466; font-size:15px;
  } 
  brown{
      name = braun
      value = color:#9A3811;
  }
}

RTE.default{
  ignoreMainStyleOverride = 1 
  useCSS = 1
  contentCSS = fileadmin/templates/css/rte.css
  classesCharacter := addToList(highlight, brown)
  classesParagraph := addToList(highlight, brown)
  proc.allowedClasses := addToList(highlight, brown)
  showTagFreeClasses = 1
}

In my rte.css I have this:

/* content of rte.css */

.highlighthighlight {
    font-size: 15px;
    color: #636466;
}

.brown {
    color: #9A3811;
}

The same style is in style.css for the frontend. If I'm in the editor I cannot choose a text style. It is always disabled. I want to mark some words in a paragraph. I tried to use different browsers (IE, FF, Opera ...) but in all of them text style is disabled. What can I do?

I have Typo3 4.7.5

EDIT

The problem was due to deprecated properties (see here)). My current code looks like

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

RTE.classes{
  highlight{
      name = highlight
      value = color:#636466; font-size:15px;
  } 
  brown{
      name = braun
      value = color:#9A3811;
  }
}

Now I can choose a text style, but only one of them. Also the name of one block style is wrong ...

The styles defined in `RTE.classes` are not needed if you have them in the CSS (I don't know if they actually don't conflict). Also, is the CSS file really loaded? (try by setting some atributes to a HTML tag itself) — tmt, Oct 24 '12 at 13:27
I got one step further. See [this link about deprectated properties](http://jweiland.net/typo3/anleitung/rte/rte-fuer-zusaetzliche-klassen-anpassen.html). But it doesn't work as expected. — testing, Oct 24 '12 at 13:32

score 6 · Accepted Answer · answered Oct 24 '12 at 14:04

I had an error in my rte.css. This seems to work.

rte.css

div.highlight, span.highlight, p.highlight, .brown {
    font-size: 15px;
    color: #636466;
}

div.brown, span.brown, p.brown, .brown {
    color: #9A3811;
}

Page TSConfig

/////////////////////////////////////////////////////////////
//    RTE
///////////////////////////////////////////////////////////// 
RTE.classes{
  highlight{
      name = highlight
      value = color:#636466; font-size:15px;
  } 
  brown{
      name = braun
      value = color:#9A3811;
  }
}

RTE.default{
  ignoreMainStyleOverride = 1 
  useCSS = 1
  showTagFreeClasses = 1
  contentCSS = fileadmin/templates/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)
}

score 2 · Answer 2 · answered Jul 14 '16 at 09:24

Useful for TYPO3 Version 7.6.X

Put following TS Configuration in Page TSConfig (In root of your site), This will add class as a option in block style as well as text style.

RTE {
    default {
        proc.allowedClasses >
        proc.allowedClasses = btn, btn-default, infoRow
        buttons {
            blockstyle.tags {
                div.allowedClasses = btn, btn-default, infoRow
            }
            textstyle.tags {
                span.allowedClasses = btn, btn-default
            }
        }
        contentCSS = fileadmin/templates/rte.css
        showTagFreeClasses = 0
        enableWordClean = 1
        useCSS = 0
    }
}

RTE.default.FE < RTE.default
RTE.default.FE.FE >
RTE.config.tt_content.bodytext
RTE.config.tt_content.bodytext.proc.allowedClasses = btn, btn-default, infoRow

Create CSS file at mentioned path i.e. fileadmin/templates/rte.css, and it will contain following code

p.btn-default, span.btn-default{
    color:green;
    background-color:yellow ;
}
p.btn, span.btn{

}
p.infoRow{
    color:grey;
}

Cannot choose text style in RTE

2 Answers2

Linked