Den Inhalt gestalten mit CSS

Textgestaltung

Einmal richtig eingerichtet, bietet der Rich Text Editor von Typo3 viele Gestaltungsmöglichkeiten für Redakteure. 

Hilfreich dafür ist eine rte.css und ein Muss ist der zugehörige TSConfig Code, den man in das entprechende Feld in den Seiteneigenschaften schreibt, oder einer Nutzergruppe bzw einem Nutzer zuweist.

Download rte.css

Die Datei ins Frontend einbinden und in den Editor mittels der TS-Config Einstellung:

RTE.default.contentCSS = fileadmin/template/style/rte.css

Im Folgenden der komplette Code.

TS-Config

# Angepasste Standardeinstellungen des htmlarea:


#************************************************************
# "Typical" Page TSconfig for htmlArea RTE and Classic RTE
#
# Sets Page TSConfig with most commonly used features representing a good start for typical sites.
#
# @author Stanislas Rolland <stanislas.rolland(arobas)fructifor.ca>
#
# TYPO3 CVS ID: $Id: pageTSConfig.txt 1421 2006-04-10 09:27:15Z mundaun $
# #***************************************************************

  ## Define labels and styles to be applied to class selectors in the interface of the RTE
  ## The examples included here make partial re-use of color scheme and frame scheme from CSS Styled Content extension
RTE.classes {
    align-justify {
    name = LLL:EXT:rtehtmlarea/htmlarea/locallang_tooltips.xml:justifyFull
    value = text-align: justify;
  }
  align-left {
    name = LLL:EXT:rtehtmlarea/htmlarea/locallang_tooltips.xml:justifyleft
    value = text-align: left;
  }
  align-center {
    name = LLL:EXT:rtehtmlarea/htmlarea/locallang_tooltips.xml:justifycenter
    value = text-align: center;
  }
  align-right {
    name = LLL:EXT:rtehtmlarea/htmlarea/locallang_tooltips.xml:justifyright
    value = text-align: right;
  }
  csc-frame-frame1 {
    name = LLL:EXT:rtehtmlarea/htmlarea/plugins/DynamicCSS/locallang.xml:frame-frame1
    value = background-color: #EDEBF1; border: 1px solid #333333;
  }
  csc-frame-frame2 {
    name = LLL:EXT:rtehtmlarea/htmlarea/plugins/DynamicCSS/locallang.xml:frame-frame2
    value = background-color: #F5FFAA; border: 1px solid #333333;
  }
  csc-frame-frame3 {
    name = Blauer Hintergrund
    value = background-color: #9cbcda; border: 1px solid #333333;
  }
  blocksatz {
    name = Blocksatz
    value = text-align:justify;
  }
  important {
    name = LLL:EXT:rtehtmlarea/htmlarea/plugins/DynamicCSS/locallang.xml:important
    value = color: #8A0020;
  }
  name-of-person {
    name = LLL:EXT:rtehtmlarea/htmlarea/plugins/DynamicCSS/locallang.xml:name-of-person
    value = color: #10007B;
  }
  detail {
    name = LLL:EXT:rtehtmlarea/htmlarea/plugins/DynamicCSS/locallang.xml:detail
    value = color: #186900;
  }
  extra-big {
    name = extra-big
    value = color: #8A0020;
  }
  big {
    name =  big
    value = color: #8A0020;
  }
  bigger {
    name =  bigger
    value = color: #8A0020;
  }
  
 
 
  component-items {
    name = LLL:EXT:rtehtmlarea/htmlarea/plugins/DynamicCSS/locallang.xml:component-items
    value = color: #186900;
  }
  action-items {
    name = LLL:EXT:rtehtmlarea/htmlarea/plugins/DynamicCSS/locallang.xml:action-items
    value = color: #8A0020;
  }
  component-items-ordered {
    name = LLL:EXT:rtehtmlarea/htmlarea/plugins/DynamicCSS/locallang.xml:component-items
    value = color: #186900;
  }
  action-items-ordered {
    name = LLL:EXT:rtehtmlarea/htmlarea/plugins/DynamicCSS/locallang.xml:action-items
    value = color: #8A0020;
  }
  internal-link-underline{
    name = LLL:EXT:rtehtmlarea/htmlarea/plugins/DynamicCSS/locallang.xml:internal-link-underline
    value = color: #8A0020;
  }
 
}

  ## Anchor classes configuration for use by the anchor accesibility feature (htmlArea RTE only)
RTE.classesAnchor {
  externalLink {
    class = external-link
    type = url
 
 
    titleText = LLL:EXT:rtehtmlarea/htmlarea/plugins/TYPO3Link/locallang.xml:external_link_titleText
  }
  externalLinkInNewWindow {
    class = external-link-new-window
    type = url
 
 
    titleText = LLL:EXT:rtehtmlarea/htmlarea/plugins/TYPO3Link/locallang.xml:external_link_new_window_titleText
  }
  internalLink {
    class = internal-link
    type = page
 
 
    titleText = LLL:EXT:rtehtmlarea/htmlarea/plugins/TYPO3Link/locallang.xml:internal_link_titleText
  }
  internalLink2 {
    class = internal-link
    type = url
    titleText = LLL:EXT:rtehtmlarea/htmlarea/plugins/TYPO3Link/locallang.xml:internal_link_titleText
  }
  internalLinkInNewWindow {
    class = internal-link-new-window
    type = page
 
 
    titleText = LLL:EXT:rtehtmlarea/htmlarea/plugins/TYPO3Link/locallang.xml:internal_link_new_window_titleText
  }
  download {
    class = download
    type = file
 
 
    titleText = LLL:EXT:rtehtmlarea/htmlarea/plugins/TYPO3Link/locallang.xml:download_titleText
  }
  mail {
    class = mail
    type = mail
 
 
    titleText = LLL:EXT:rtehtmlarea/htmlarea/plugins/TYPO3Link/locallang.xml:mail_titleText
  }
}

  ## Default RTE configuration
RTE.default {
        contentCSS = fileadmin/template/style/rte.css
    ## Markup options (htmlArea RTE only)
  useCSS = 1
  showTagFreeClasses = 1
        enableWordClean = 1
  removeTrailingBR = 1
  removeComments = 1
  removeTags = center, font, o:p, sdfield, strike,u
  removeTagsAndContents = style,script
  proc.entryHTMLparser_db.tags.img >
 
    ## Toolbar options
    ## The TCA configuration may add buttons to the toolbar
    ## The following buttons are specific to Classic RTE: class
    ## The following buttons are specific to htmlArea RTE: blockstylelabel, blockstyle, textstylelabel, textstyle,
    ##    insertcharacter, findreplace, removeformat, toggleborders, tableproperties,
    ##    rowproperties, rowinsertabove, rowinsertunder, rowdelete, rowsplit,
    ##    columninsertbefore, columninsertafter, columndelete, columnsplit,
    ##    cellproperties, cellinsertbefore, cellinsertafter, celldelete, cellsplit, cellmerge
  showButtons (
    class, blockstylelabel, blockstyle, textstylelabel, textstyle,
    formatblock, bold, italic, subscript, superscript,
    orderedlist, unorderedlist, outdent, indent, textindicator,
    insertcharacter, link, table, findreplace, chMode, removeformat, undo, redo, about,
    toggleborders, tableproperties,
    rowproperties, rowinsertabove, rowinsertunder, rowdelete, rowsplit,
    columninsertbefore, columninsertafter, columndelete, columnsplit,
    cellproperties, cellinsertbefore, cellinsertafter, celldelete, cellsplit, cellmerge
  )
 
    ## More toolbar options (htmlArea RTE only)
  keepButtonGroupTogether = 1
 
    ## Enable status bar (htmlArea RTE only)
  showStatusBar =  1
 
    ## Hide infrequently used paragraph types in the paragraph type selector (formatblock button)
  hidePStyleItems = pre,address
 
    ## Add default example styles
    ## The example styles included here make partial re-use of color scheme and frame scheme from CSS Styled Content extension
    ## Left, center and right alignment of text in paragraphs and cells.
  inlineStyle.text-alignment (
        p.align-justify, h1.align-justify, h2.align-justify, h3.align-justify, h4.align-justify, h5.align-justify, h6.align-justify, td.align-justify { text-align: justify; }
    p.align-left, h1.align-left, h2.align-left, h3.align-left, h4.align-left, h5.align-left, h6.align-left, td.align-left { text-align: left; }
    p.align-center, h1.align-center, h2.align-center, h3.align-center, h4.align-center, h5.align-center, h6.align-center, td.align-center { text-align: center; }
    p.align-right, h1.align-right, h2.align-right, h3.align-right, h4.align-right, h5.align-right, h6.align-right, td.align-right { text-align: right; }
  )
    ## Two frame examples taken from the example CSS file of CSS Styled Content extension and applied to p and table block elements.
  inlineStyle.frames (
    #p.csc-frame-frame1, table.csc-frame-frame1 { background-color: #EDEBF1; padding: 2px 4px 2px 4px; border: 1px solid #333333; }
    #p.csc-frame-frame2, table.csc-frame-frame2 { background-color: #F5FFAA; padding: 2px 4px 2px 4px; border: 1px solid #333333; }
    p.csc-frame-frame3, table.csc-frame-frame3 { background-color: #9cbcda; padding: 2px 4px 2px 4px; border: 1px solid #333333; }
    p.blocksatz, table.blocksatz { text-align:justify; }

  )
    ## Bullet styles for unordered lists.
  inlineStyle.ul (
    ul.component-items { color: #186900; list-style-type: circle; }
    ul.action-items { color: #8A0020; list-style-image: url(img/red_arrow_bullet.gif); }
  )
    ## Numbering styles for ordered lists.
  inlineStyle.ol (
    ol.component-items-ordered { color: #10007B; list-style-type: lower-roman; }
    ol.action-items-ordered { color: #8A0020; list-style-type: lower-greek; }
  )
    ## Three inline text colors taken from the color scheme of CSS Styled Content extension.
  inlineStyle.inline-text (
    span.important { color: #000000; font-weight:bolder; font-size:13px; }
    span.extra-big { line-height: 21px; font-size: 18px; font-weight: bold;}
   span.bigger { line-height: 19px; font-size: 16px; font-weight: bold;}
    span.big {line-height: 17px; font-size: 14px; font-weight: bold;}  
   
    #span.name-of-person { color: #10007B; }
    #span.detail { color: #186900; }
    #span.internal-link-underline {color: #880000;}
  )
 
    ## Use stylesheet file rather than the above mainStyleOverride and inlineStyle properties to style the contents (htmlArea RTE only)
  ignoreMainStyleOverride = 1
 
    ## List all class selectors that are allowed on the way to the database
  proc.allowedClasses (
      htmlarea-content-body, component-items,

    external-link, external-link-new-window, internal-link, internal-link-new-window, download, mail,
    align-justify, align-left, align-center, align-right,
    csc-frame-frame1, csc-frame-frame2,
    csc-frame-frame3, blocksatz,
    component-items, action-items,
    component-items-ordered, action-items-ordered,
    important,  detail, extra-big, bigger, big, h1-big,xxxxxl-big,
    code,box,smalltext,boxinvert,caption
  )
 
    ## classesParagraph, classesTable, classesTD, classesLinks, classesCharacter
    ## Classic RTE: Specify the list of class selectors that should be presented in the RTE interface:
    ## htmlArea RTE: Restrict the list of class selectors presented by the RTE to the following:
  classesParagraph = align-justify, align-left, align-center, align-right, csc-frame-frame1, csc-frame-frame2, csc-frame-frame3, blocksatz, code,box,smalltext
  classesTable = csc-frame-frame1, csc-frame-frame2, csc-frame-frame3, blocksatz,
  classesTD = align-left, align-center, align-right, align-justify
  classesLinks = internal-link,  external-link, external-link-new-window, internal-link-new-window, download, mail
  classesCharacter = important,  detail, extra-big, bigger, big, h1-big,xxxxxl-big,boxinvert,caption
 
    ## Configuration of the anchor accessibility feature (htmlArea RTE only)
    ## These classes should also be in the list of allowedClasses.
  classesAnchor = internal-link,  internal-link-new-window, download, mail, external-link, external-link-new-window,
  classesAnchor.default {
    page = internal-link
    page = internal-link
    url = external-link-new-window
    file = download
    mail = mail
  }
 
    ## Configuration specific to the TableOperations feature (htmlArea RTE only)
    ## Remove the following fieldsets from the table operations dialogs
  disableAlignmentFieldsetInTableOperations = 1
  disableSpacingFieldsetInTableOperations = 1
  disableColorFieldsetInTableOperations = 1
  disableLayoutFieldsetInTableOperations = 1
  disableBordersFieldsetInTableOperations = 1
  enableAccessibilityIcons = true
}

  ## front end RTE configuration for the general public (htmlArea RTE only)
RTE.default.FE < RTE.default
RTE.default.FE.showStatusBar = 0
RTE.default.FE.hideButtons = chMode, blockstyle, textstyle, underline, strikethrough, subscript, superscript, lefttoright, righttoleft, left, center, right, justifyfull, table, inserttag, findreplace, removeformat, copy, cut, paste
RTE.default.FE.FE >
RTE.default.FE.userElements >
RTE.default.FE.userLinks >

  ## tt_content TCEFORM configuration
  ## Let use all the space available for more comfort.
TCEFORM.tt_content.bodytext.RTEfullScreenWidth= 100%