[TASK] Create CSS Styled Content TypoScript configuration for 6.3 57/30957/4
authorWouter Wolters <typo3@wouterwolters.nl>
Fri, 20 Jun 2014 17:55:53 +0000 (19:55 +0200)
committerAnja Leichsenring <aleichsenring@ab-softlab.de>
Sat, 21 Jun 2014 14:11:25 +0000 (16:11 +0200)
For backwards compatibility we keep versions of the CSS Styled
Content TypoScript configuration files selectable as rendering
template.

The current setup.txt and constants.txt are just copied into
the 6.2 folder. After this change the branches may diverge.

Resolves: #59736
Releases: 6.3
Change-Id: Ic8ec99917917678c6d0e38ca7b4402166ffac115
Reviewed-on: https://review.typo3.org/30957
Reviewed-by: Christian Kuhn
Tested-by: Christian Kuhn
Reviewed-by: Anja Leichsenring
Tested-by: Anja Leichsenring
typo3/sysext/css_styled_content/ext_localconf.php
typo3/sysext/css_styled_content/ext_tables.php
typo3/sysext/css_styled_content/static/v6.2/constants.txt [new file with mode: 0644]
typo3/sysext/css_styled_content/static/v6.2/setup.txt [new file with mode: 0644]

index a7fab85..9a3b75c 100644 (file)
@@ -21,6 +21,7 @@ $GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['ext/install']['compat_version']['tx_c
 
 // Mark the delivered TypoScript templates as "content rendering template" (providing the hooks of "static template 43" = content (default))
 $GLOBALS['TYPO3_CONF_VARS']['FE']['contentRenderingTemplates'][] = 'cssstyledcontent/static/';
+$GLOBALS['TYPO3_CONF_VARS']['FE']['contentRenderingTemplates'][] = 'cssstyledcontent/static/v6.2/';
 $GLOBALS['TYPO3_CONF_VARS']['FE']['contentRenderingTemplates'][] = 'cssstyledcontent/static/v6.1/';
 $GLOBALS['TYPO3_CONF_VARS']['FE']['contentRenderingTemplates'][] = 'cssstyledcontent/static/v6.0/';
 $GLOBALS['TYPO3_CONF_VARS']['FE']['contentRenderingTemplates'][] = 'cssstyledcontent/static/v4.7/';
index e8b5af6..e8b83f1 100644 (file)
@@ -15,6 +15,7 @@ $GLOBALS['TCA']['tt_content']['types']['table']['showitem'] = 'CType;;4;;1-1-1,
 \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addStaticFile($_EXTKEY, 'static/v4.7/', 'CSS Styled Content TYPO3 v4.7');
 \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addStaticFile($_EXTKEY, 'static/v6.0/', 'CSS Styled Content TYPO3 v6.0');
 \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addStaticFile($_EXTKEY, 'static/v6.1/', 'CSS Styled Content TYPO3 v6.1');
+\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addStaticFile($_EXTKEY, 'static/v6.2/', 'CSS Styled Content TYPO3 v6.2');
 $GLOBALS['TCA']['tt_content']['columns']['section_frame']['config']['items'][0] = array(
        'LLL:EXT:css_styled_content/locallang_db.xlf:tt_content.tx_cssstyledcontent_section_frame.I.0', '0'
 );
diff --git a/typo3/sysext/css_styled_content/static/v6.2/constants.txt b/typo3/sysext/css_styled_content/static/v6.2/constants.txt
new file mode 100644 (file)
index 0000000..b8a008c
--- /dev/null
@@ -0,0 +1,157 @@
+  # Clear out any constants in this reserved room!
+styles.content >
+
+content {
+    # cat=content/cHeader/h0; type=int[1-5]; label=Default Header type: Enter the number of the header layout to be used by default.
+  defaultHeaderType = 1
+    # cat=advanced/links; type=small; label=Pageframe object: The name of the "contentframe". Normally set to "page" if the site has a frameset. Otherwise it should be an empty value. This is important, as it determines the target of internal links!
+  pageFrameObj =
+
+  shortcut.tables = tt_content,tt_address,tt_links,tt_guest,tt_board,tt_calender,tt_products,tt_news,tt_rating,tt_poll
+
+    # cat=content/other/a; type=small; label= Content Element margins (before): Space before each content element.
+  spaceBefore = 0
+    # cat=content/other/b; type=small; label= Content Element margins (after): Space after each content element.
+  spaceAfter = 0
+}
+
+
+    # cat=advanced; type=int+; label= News Content PID: If your template has a column with "news"-content fetched from another page-id, this is where you enter the id-number of that page!
+styles.content.getNews.newsPid = 0
+
+styles.content.links {
+  keep = path
+    # cat=content/links; type=small; label= Target for external links
+  extTarget = _blank
+  target = {$PAGE_TARGET}
+  allowTags = a, abbr, acronym, address, article, aside, b, bdo, big, blockquote, br, caption, center, cite, code, col, colgroup, dd, del, dfn, dl, div, dt, em, font, footer, header, h1, h2, h3, h4, h5, h6, hr, i, img, ins, kbd, label, li, link, meta, nav, ol, p, pre, q, samp, sdfield, section, small, span, strike, strong, style, sub, sup, table, thead, tbody, tfoot, td, th, tr, title, tt, u, ul, var
+}
+
+styles.content.imgtext {
+    # TIP! if register[maxImageWidth] is set, this will override maxW
+    # cat=content/cImage/b1; type=int+; label= Max Image Width: This indicates that maximum number of pixels (width) a block of images inserted as content is allowed to consume.
+  maxW = 600
+    # cat=content/cImage/b2; type=int+; label= Max Image Width (Text): Same as above, but this is the maximum width when text is wrapped around an imageblock. Default is 50% of the normal Max Image Width.
+  maxWInText =
+    # cat=content/cImage/b4; type=options[Default img-tag=default, img-tag with alternate sources as srcset-attribute=srcset, picture-tag with source-child-tags=picture, img-tag with alternate sources as data-attributes=data]; label= Rendering-type for responsive images.
+  layoutKey = default
+
+
+    # cat=content/cImage/c1; type=int+; label= Click-enlarge Image Width: This specifies the width of the enlarged image when click-enlarge is enabled.
+  linkWrap.width = 800m
+  linkWrap.height = 600m
+  linkWrap.effects =
+    # cat=content/cImage/c2; type=boolean; label= Advanced, New window: If set, every click-enlarged image will open in it's own popup window and not the current popup window (which may have a wrong size for the image to fit in)
+  linkWrap.newWindow = 0
+    # cat=content/cImage/c3; type=boolean; label= Lightbox click-enlarge rendering: Whether images with click-enlarge checked should be rendered lightbox-compliant
+  linkWrap.lightboxEnabled = 0
+    # cat=content/cImage/c4; type=string; label= Lightbox CSS class: Which CSS class to use for lightbox links (only applicable if lightbox rendering is enabled)
+  linkWrap.lightboxCssClass = lightbox
+    # cat=content/cImage/c5; type=string; label= Lightbox rel="" attribute: Which rel="" attribute to use for lightbox links (only applicable if lightbox rendering is enabled)
+  linkWrap.lightboxRelAttribute = lightbox[{field:uid}]
+
+    # cat=content/cImage/e2; type=string; label= Images, empty title handling: How will the 'title' attribute be handled if no title is given for an image. Possible choices: "keepEmpty", "useAlt" or "removeAttr". Recommended for accessibility is "removeAttr". For correct tooltips on IE, use "keepEmpty". For previous TYPO3 behaviour, use "useAlt".
+  emptyTitleHandling = removeAttr
+    # cat=content/cImage/e3; type=boolean; label= Images, title in link: Do you want the 'title' attribute to be added to the surrounding <a> tag, if present? Recommended for accessibility is "true".
+  titleInLink = 1
+    # cat=content/cImage/e4; type=boolean; label= Images, title in link and IMG: If you have the title in the <a>-tag (titleInLink=true), you don't get the 'title' in the <img>-tag. IE will not show the tooltip anymore. So to get the 'title' in <img> too (to keep IE happy), set this too. Recommended for accessibility is "false". For correct tooltips on IE, set this to "true".
+  titleInLinkAndImg = 0
+
+    # cat=content/cImage/g1; type=int[0-100]; label= Advanced, Column space: Horizontal distance between images in a block in content elements of type "Images" or "Text & Images". If you change this manually in your CSS, you need to adjust this setting accordingly.
+  colSpace = 10
+    # cat=content/cImage/g2; type=int[0-100]; label= Advanced, Row space: Vertical distance after each image row in content elements of type "Images" or "Text & Images". If you change this manually in your CSS, you need to adjust this setting accordingly.
+  rowSpace = 10
+    # cat=content/cImage/g3; type=int[0-100]; label= Advanced, Margin to text: Horizontal distance between an imageblock and text in content elements of type "Text & Images".
+  textMargin = 10
+
+    # cat=content/cImage/i1; type=color; label= Image border, color: Bordercolor of images in content elements when "Border"-option for element is set.
+  borderColor = black
+    # cat=content/cImage/i2; type=int[0-100]; label= Image border, thickness: Thickness of border around images in content elements when "Border"-option for element is set.
+  borderThick = 2
+    # cat=content/cImage/i3; type=int+; label= Image border, padding: Padding left and right to the image, around the border.
+  borderSpace = 0
+    # cat=content/cImage/i4; type=string; label= Image border CSS-selector: If you want your border to apply elsewhere, change this setting. E.g. to apply to the whole image+caption, use 'div.csc-textpic-border div.csc-textpic-imagewrap .csc-textpic-image'.
+  borderSelector = div.{$styles.content.imgtext.borderClass} div.csc-textpic-imagewrap img
+    # cat=content/cImage/i5; type=string; label= Image border class: The name of the CSS class for creating image borders
+  borderClass = csc-textpic-border
+    # cat=content/cImage/i5; type=boolean; label= Image row separation: Whether images should be rendered/wrapped in separated rows, e.g. inside a div.csc-textpic-imagerow element
+  separateRows = 1
+    # cat=content/cImage/i6; type=boolean; label= Add clearer after intext images: Whether a clearer should be added after textpic elements of type intext-left or intext-right
+  addIntextClearer = 1
+}
+
+styles.content.uploads {
+  target = _blank
+  jumpurl_secure =
+  jumpurl_secure_mimeTypes = pdf=application/pdf, doc=application/msword
+  jumpurl =
+    # cat=content/cUploads; type=string; label=Labels of file sizes: The labels for bytes, kilobytes, megabytes and gigabytes
+  filesizeBytesLabels = " | K| M| G"
+}
+
+styles.content.mailform {
+  target = {$PAGE_TARGET}
+    # cat=content/cMailform; type=; label= Message, Formmail OK: This is the message (if any) that is popped-up (JavaScript) when a user clicks "send" with an email-form
+  goodMess =
+    # cat=content/cMailform; type=; label= Message, Formmail Missing: This is the message that is popped-up when a user has NOT filled required fields in an email-form
+  badMess =
+}
+
+styles.content.loginform {
+  target = _top
+    # cat=content/cLogin; type=int+; label= PID of user archive: Enter the page-uid number (PID) of the folder where you keep your fe_users that are supposed to login on this site. This setting is necessary, if login is going to work!
+  pid =
+    # cat=content/cLogin; type=; label= Message, Login: This is the message (if any) that is popped-up when a user logs in as a front-end user
+  goodMess =
+    # cat=content/cLogin; type=; label= Login template: Enter the path for the HTML template to be used
+  templateFile = EXT:felogin/template.html
+}
+
+styles.content.searchform {
+    # cat=content/cSearch; type=; label= Message, Searchform: This is the message (if any) that is popped-up when a user performs a search
+  goodMess =
+}
+
+styles.content.searchresult {
+  resultTarget = {$PAGE_TARGET}
+  target = {$PAGE_TARGET}
+}
+
+styles.content.media {
+    # cat=content/cMedia/j1; type=; label= Video Player: configure the path to the video player
+  videoPlayer = typo3/contrib/flashmedia/flvplayer.swf
+    # cat=content/cMedia/j2; type=int+; label= Media Video Width: define the default width for the media video
+  defaultVideoWidth = 600
+       # cat=content/cMedia/j3; type=int+; label= Media Video Height: define the default height for the media video
+  defaultVideoHeight = 400
+    # cat=content/cMedia/j4; type=; label= Audio Player: configure the path to the video player
+  audioPlayer = typo3/contrib/flashmedia/player.swf
+       # cat=content/cMedia/j5; type=int+; label= Media Audio Width: define the default width for the media audio
+  defaultAudioWidth = 300
+    # cat=content/cMedia/j6; type=int+; label= Media Audio Height: define the default height for the media audio
+  defaultAudioHeight = 30
+       # cat=content/cMedia/j7; type=; label= Flow Player: configure the path to the flow-player
+  flowPlayer = typo3/contrib/flowplayer/flowplayer-3.2.16.swf
+}
+
+styles.content.table {
+    # cat=content/cTable/k2; type=color; label= Table background color, Color 1: Background color for table when "Backgr. Color" has been set to "Color 1"
+  backgroundColor.1 = #EDEBF1
+    # cat=content/cTable/k3; type=color; label= Table background color, Color 2: Background color for table when "Backgr. Color" has been set to "Color 2"
+  backgroundColor.2 = #F5FFAA
+    # cat=content/cTable/k5; type=color; label= Table background color, Black: Background color for table when "Backgr. Color" has been set to "Black"
+  backgroundColor.240 = black
+    # cat=content/cTable/k6; type=color; label= Table background color, White: Background color for table when "Backgr. Color" has been set to "White"
+  backgroundColor.241 = white
+    # cat=content/cTable/k7; type=color; label= Table background color, Dark Gray: Background color for table when "Backgr. Color" has been set to "Dark Gray"
+  backgroundColor.242 = #333333
+    # cat=content/cTable/k8; type=color; label= Table background color, Gray: Background color for table when "Backgr. Color" has been set to "Gray"
+  backgroundColor.243 = gray
+    # cat=content/cTable/k9; type=color; label= Table background color, Silver: Background color for table when "Backgr. Color" has been set to "Silver"
+  backgroundColor.244 = silver
+}
+
+ # cat=advanced/links; type=small; label= Target for internal links: Should match the name of the content PAGE-object in TypoScript when used with frames. Most cases: set to "" (empty). If you have frames in the template set to "page"
+PAGE_TARGET =
+
+
diff --git a/typo3/sysext/css_styled_content/static/v6.2/setup.txt b/typo3/sysext/css_styled_content/static/v6.2/setup.txt
new file mode 100644 (file)
index 0000000..ec5db76
--- /dev/null
@@ -0,0 +1,2249 @@
+# ***************************************************************************
+# Notice: "styles." (and "temp.") objects are UNSET after template parsing!
+# Use "lib." for persisting storage of objects.
+# ***************************************************************************
+
+# Clear out any constants in this reserved room!
+styles.content >
+
+# get content
+styles.content.get = CONTENT
+styles.content.get {
+       table = tt_content
+       select.orderBy = sorting
+       select.where = colPos=0
+       select.languageField = sys_language_uid
+}
+
+# get content, left
+styles.content.getLeft < styles.content.get
+styles.content.getLeft.select.where = colPos=1
+
+# get content, right
+styles.content.getRight < styles.content.get
+styles.content.getRight.select.where = colPos=2
+
+# get content, margin
+styles.content.getBorder < styles.content.get
+styles.content.getBorder.select.where = colPos=3
+
+# get news
+styles.content.getNews < styles.content.get
+styles.content.getNews.select.pidInList = {$styles.content.getNews.newsPid}
+
+# Edit page object:
+styles.content.editPanelPage = COA
+styles.content.editPanelPage {
+       10 = EDITPANEL
+       10 {
+               allow = toolbar,move,hide
+               label.data = LLL:EXT:css_styled_content/pi1/locallang.xml:eIcon.page
+               label.wrap = |&nbsp;<b>%s</b>
+       }
+}
+
+
+
+
+
+
+
+
+
+
+
+# *********************************************************************
+# "lib." objects are preserved from unsetting after template parsing
+# *********************************************************************
+
+# Creates a condition for targets. Not allowed in XHTML except for xhtml frames DTD
+lib.parseTarget {
+       override =
+       override.if {
+               isTrue.data = TSFE:dtdAllowsFrames
+       }
+}
+
+# Creates persistent ParseFunc setup for non-HTML content. This is recommended to use (as a reference!)
+lib.parseFunc {
+       makelinks = 1
+       makelinks.http.keep = {$styles.content.links.keep}
+       makelinks.http.extTarget < lib.parseTarget
+       makelinks.http.extTarget =
+       makelinks.http.extTarget.override = {$styles.content.links.extTarget}
+       makelinks.mailto.keep = path
+       tags {
+               link = TEXT
+               link {
+                       current = 1
+                       typolink.parameter.data = parameters : allParams
+                       typolink.extTarget < lib.parseTarget
+                       typolink.extTarget =
+                       typolink.extTarget.override = {$styles.content.links.extTarget}
+                       typolink.target < lib.parseTarget
+                       typolink.target =
+                       typolink.target.override = {$styles.content.links.target}
+                       parseFunc.constants =1
+               }
+       }
+       allowTags = {$styles.content.links.allowTags}
+       denyTags = *
+       sword = <span class="csc-sword">|</span>
+       constants = 1
+
+       nonTypoTagStdWrap.HTMLparser = 1
+       nonTypoTagStdWrap.HTMLparser {
+               keepNonMatchedTags = 1
+               htmlSpecialChars = 2
+       }
+}
+
+# good old parsefunc in "styles.content.parseFunc" is created for backwards compatibility. Don't use it, just ignore.
+styles.content.parseFunc < lib.parseFunc
+
+# Creates persistent ParseFunc setup for RTE content (which is mainly HTML) based on the "ts_css" transformation.
+lib.parseFunc_RTE < lib.parseFunc
+lib.parseFunc_RTE {
+       //  makelinks >
+       # Processing <table> and <blockquote> blocks separately
+       externalBlocks = article, aside, blockquote, div, dd, dl, footer, header, nav, ol, section, table, ul
+       externalBlocks {
+               # The blockquote content is passed into parseFunc again...
+               blockquote.stripNL=1
+               blockquote.callRecursive=1
+               blockquote.callRecursive.tagStdWrap.HTMLparser = 1
+               blockquote.callRecursive.tagStdWrap.HTMLparser.tags.blockquote.overrideAttribs = style="margin-bottom:0;margin-top:0;"
+
+               ol.stripNL=1
+               ol.stdWrap.parseFunc = < lib.parseFunc
+
+               ul.stripNL=1
+               ul.stdWrap.parseFunc = < lib.parseFunc
+
+               table.stripNL=1
+               table.stdWrap.HTMLparser = 1
+               table.stdWrap.HTMLparser.tags.table.fixAttrib.class {
+                       default = contenttable
+                       always = 1
+                       list = contenttable
+               }
+               table.stdWrap.HTMLparser.keepNonMatchedTags = 1
+               table.HTMLtableCells=1
+               table.HTMLtableCells {
+                       # Recursive call to self but without wrapping non-wrapped cell content
+                       default.stdWrap {
+                               parseFunc =< lib.parseFunc_RTE
+                               parseFunc.nonTypoTagStdWrap.encapsLines.nonWrappedTag =
+                       }
+                       addChr10BetweenParagraphs=1
+               }
+               div.stripNL = 1
+               div.callRecursive = 1
+
+               article < .div
+               aside < .div
+               footer < .div
+               header < .div
+               nav < .div
+               section < .div
+
+               # Definition list processing
+               dl < .div
+               dd < .div
+       }
+       nonTypoTagStdWrap.encapsLines {
+               encapsTagList = p,pre,h1,h2,h3,h4,h5,h6,hr,dt
+               remapTag.DIV = P
+               nonWrappedTag = P
+               innerStdWrap_all.ifBlank = &nbsp;
+               addAttributes.P.class = bodytext
+               addAttributes.P.class.setOnly=blank
+       }
+       nonTypoTagStdWrap.HTMLparser = 1
+       nonTypoTagStdWrap.HTMLparser {
+               keepNonMatchedTags = 1
+               htmlSpecialChars = 2
+       }
+}
+
+
+# Content header:
+lib.stdheader = COA
+lib.stdheader {
+
+       # Create class attribute for <Hx> tags
+       3 = LOAD_REGISTER
+       3 {
+               headerClass {
+                       cObject = COA
+                       cObject {
+                               # Create alignment class for <Hx> tags
+                               10 = TEXT
+                               10 {
+                                       field = header_position
+                                       required = 1
+                                       noTrimWrap = |csc-header-alignment-| |
+                               }
+                               # Create "csc-firstHeader" class for <Hx> tags
+                               20 = TEXT
+                               20 {
+                                       value = csc-firstHeader
+                                       if {
+                                               value = 1
+                                               equals.data = cObj:parentRecordNumber
+                                       }
+                               }
+                               stdWrap {
+                                       trim = 1
+                                       noTrimWrap = | class="|"|
+                                       required = 1
+                               }
+                       }
+               }
+       }
+
+       # Date format (not HTML5)
+       5 = TEXT
+       5 {
+               field = date
+               if {
+                       isTrue {
+                               field = date
+                       }
+                       isFalse = 1
+                       isFalse {
+                               if {
+                                       value = html5
+                                       equals.data = TSFE:config|config|doctype
+                               }
+                       }
+               }
+               strftime = %x
+               wrap = <p class="csc-header-date">|</p>
+               prefixComment = 2 | Header date:
+       }
+
+       # This CASE cObject renders the header content:
+       # currentValue is set to the header data, possibly wrapped in link-tags.
+       10 = CASE
+       10.setCurrent {
+               field = header
+               htmlSpecialChars = 1
+               typolink.parameter.field = header_link
+       }
+       10.key.field = header_layout
+       10.key.ifEmpty = {$content.defaultHeaderType}
+       10.key.ifEmpty.override.data = register: defaultHeaderType
+
+       10.1 = TEXT
+       10.1.current = 1
+       10.1.dataWrap = <h1{register:headerClass}>|</h1>
+
+       10.2 < .10.1
+       10.2.dataWrap = <h2{register:headerClass}>|</h2>
+
+       10.3 < .10.1
+       10.3.dataWrap = <h3{register:headerClass}>|</h3>
+
+       10.4 < .10.1
+       10.4.dataWrap = <h4{register:headerClass}>|</h4>
+
+       10.5 < .10.1
+       10.5.dataWrap = <h5{register:headerClass}>|</h5>
+
+       # HTML5 subheader
+       20 = CASE
+       20 {
+               key {
+                       field = header_layout
+               }
+
+               default = TEXT
+               default {
+                       wrap = <h2>|</h2>
+                       htmlSpecialChars = 1
+                       field = subheader
+               }
+
+               1 < .default
+
+               2 < .default
+               2.wrap = <h3>|</h3>
+
+               3 < .default
+               3.wrap = <h4>|</h4>
+
+               4 < .default
+               4.wrap = <h5>|</h5>
+
+               5 < .default
+               5.wrap = <h6>|</h6>
+
+               if {
+                       isTrue {
+                               field = subheader
+                       }
+                       value = html5
+                       equals.data = TSFE:config|config|doctype
+                       # Hide subheader for old style form element (it is used for recipient mail)
+                       isFalse = 0
+                       isFalse.override = 1
+                       isFalse.override {
+                               if.equals.field = CType
+                               if.value = mailform
+                       }
+               }
+       }
+
+       # HTML5 Date
+       40 = COA
+       40 {
+
+               stdWrap {
+                       wrap = <p class="csc-header-date">|</p>
+                       innerWrap {
+                               cObject = COA
+                               cObject {
+                                       10 = TEXT
+                                       10 {
+                                               value = <time
+                                       }
+                                       20 = TEXT
+                                       20 {
+                                               noTrimWrap = | datetime="|"|
+                                               field = date
+                                               strftime = %Y-%m-%d
+                                       }
+                                       30 = TEXT
+                                       30 {
+                                               value = >|</time>
+                                       }
+                               }
+                       }
+                       required = 1
+               }
+               10 = TEXT
+               10 {
+                       field = date
+                       strftime = %B %e, %Y
+               }
+               if {
+                       isTrue {
+                               field = date
+                       }
+                       value = html5
+                       equals.data = TSFE:config|config|doctype
+               }
+       }
+
+       # Pops the used registers off the stack:
+       98 = RESTORE_REGISTER
+
+       # Post-processing:
+       stdWrap.fieldRequired = header
+       stdWrap.if {
+               equals.field = header_layout
+               value = 100
+               negate = 1
+       }
+
+       stdWrap.editIcons = tt_content : header, [header_layout | header_position], [header_link|date]
+       stdWrap.editIcons.beforeLastTag = 1
+       stdWrap.editIcons.iconTitle.data = LLL:EXT:css_styled_content/pi1/locallang.xml:eIcon.header
+
+       stdWrap {
+               dataWrap = <div class="csc-header csc-header-n{cObj:parentRecordNumber}">|</div>
+               dataWrap {
+                       override = <header class="csc-header csc-header-n{cObj:parentRecordNumber}">|</header>
+                       override {
+                               if {
+                                       isTrue {
+                                               field = date
+                                       }
+                                       value = html5
+                                       equals.data = TSFE:config|config|doctype
+                               }
+                       }
+               }
+       }
+       stdWrap.prefixComment = 2 | Header:
+}
+
+
+
+
+
+#**********************************
+# tt_content is started
+#**********************************
+tt_content >
+tt_content = CASE
+tt_content.key.field = CType
+tt_content.stdWrap {
+       innerWrap.cObject = CASE
+       innerWrap.cObject {
+               key.field = section_frame
+
+               default = COA
+               default {
+                       10 = TEXT
+                       10 {
+                               cObject = CASE
+                               cObject {
+                                       key.field = CType
+
+                                       default = TEXT
+                                       default {
+                                               value = <div id="c{field:uid}"
+                                       }
+
+                                       div = TEXT
+                                       div {
+                                               value = <div
+                                       }
+
+                                       menu < .default
+                                       menu {
+                                               override = <nav id="c{field:uid}"
+                                               override {
+                                                       if {
+                                                               value = html5
+                                                               equals.data = TSFE:config|config|doctype
+                                                       }
+                                               }
+                                       }
+                               }
+                               insertData = 1
+                       }
+
+                       20 = COA
+                       20 {
+                               # Create default class for content
+                               10 = TEXT
+                               10 {
+                                       value = csc-default
+                                       required = 1
+                                       noTrimWrap = || |
+                               }
+                               # Create class for space before content
+                               20 = USER
+                               20 {
+                                       userFunc = TYPO3\CMS\CssStyledContent\Controller\CssStyledContentController->renderSpace
+                                       space = before
+                                       constant = {$content.spaceBefore}
+                                       classStdWrap {
+                                               noTrimWrap = |csc-space-before-| |
+                                       }
+                               }
+                               # Create class for space after content
+                               30 = USER
+                               30 {
+                                       userFunc = TYPO3\CMS\CssStyledContent\Controller\CssStyledContentController->renderSpace
+                                       space = after
+                                       constant = {$content.spaceAfter}
+                                       classStdWrap {
+                                               noTrimWrap = |csc-space-after-| |
+                                       }
+                               }
+                               stdWrap {
+                                       trim = 1
+                                       noTrimWrap = | class="|"|
+                                       required = 1
+                               }
+                       }
+
+                       30 = TEXT
+                       30 {
+                               cObject = CASE
+                               cObject {
+                                       key.field = CType
+
+                                       default = TEXT
+                                       default {
+                                               value = >|</div>
+                                       }
+
+                                       menu < .default
+                                       menu {
+                                               override = >|</nav>
+                                               override {
+                                                       if {
+                                                               value = html5
+                                                               equals.data = TSFE:config|config|doctype
+                                                       }
+                                               }
+                                       }
+                               }
+                       }
+               }
+
+               1 =< tt_content.stdWrap.innerWrap.cObject.default
+               1.20.10.value = csc-frame csc-frame-invisible
+
+               5 =< tt_content.stdWrap.innerWrap.cObject.default
+               5.20.10.value = csc-frame csc-frame-rulerBefore
+
+               6 =< tt_content.stdWrap.innerWrap.cObject.default
+               6.20.10.value = csc-frame csc-frame-rulerAfter
+
+               10 =< tt_content.stdWrap.innerWrap.cObject.default
+               10.20.10.value = csc-frame csc-frame-indent
+
+               11 =< tt_content.stdWrap.innerWrap.cObject.default
+               11.20.10.value = csc-frame csc-frame-indent3366
+
+               12 =< tt_content.stdWrap.innerWrap.cObject.default
+               12.20.10.value = csc-frame csc-frame-indent6633
+
+               20 =< tt_content.stdWrap.innerWrap.cObject.default
+               20.20.10.value = csc-frame csc-frame-frame1
+
+               21 =< tt_content.stdWrap.innerWrap.cObject.default
+               21.20.10.value = csc-frame csc-frame-frame2
+
+               66 = COA
+               66 {
+                       10 = TEXT
+                       10 {
+                               value = <a id="c{field:uid}"></a>
+                               insertData = 1
+                       }
+                       # Create div with class for space before content
+                       20 = COA
+                       20 {
+                               10 = USER
+                               10 {
+                                       userFunc = TYPO3\CMS\CssStyledContent\Controller\CssStyledContentController->renderSpace
+                                       space = before
+                                       constant = {$content.spaceBefore}
+                                       classStdWrap {
+                                               wrap = csc-space-before-|
+                                       }
+                               }
+                               stdWrap {
+                                       wrap = <div class="|"></div>
+                                       required = 1
+                               }
+                       }
+
+                       30 = TEXT
+                       30 {
+                               value = |
+                       }
+
+                       # Create div with class for space after content
+                       40 < .20
+                       40 {
+                               10 {
+                                       space = after
+                                       constant = {$content.spaceAfter}
+                                       classStdWrap {
+                                               wrap = csc-space-after-|
+                                       }
+                               }
+                       }
+               }
+       }
+
+       innerWrap2 = | <p class="csc-linkToTop"><a href="#">{LLL:EXT:css_styled_content/pi1/locallang.xml:label.toTop}</a></p>
+       innerWrap2.insertData = 1
+       innerWrap2.fieldRequired = linkToTop
+
+       prepend = TEXT
+       prepend.dataWrap = <a id="c{field:_LOCALIZED_UID}"></a>
+       prepend.if.isTrue.field = _LOCALIZED_UID
+
+       editPanel = 1
+       editPanel {
+               allow = move,new,edit,hide,delete
+               line = 5
+               label = %s
+               onlyCurrentPid = 1
+               previewBorder = 4
+               edit.displayRecord = 1
+       }
+
+       prefixComment = 1 | CONTENT ELEMENT, uid:{field:uid}/{field:CType}
+}
+
+
+
+# *****************
+# CType: header
+# *****************
+# See Object path "lib.stdheader"
+tt_content.header = COA
+tt_content.header {
+       10 = < lib.stdheader
+
+       20 = TEXT
+       20 {
+               field = subheader
+               required = 1
+
+               dataWrap = <p class="csc-subheader csc-subheader-{field:layout}">|</p>
+               htmlSpecialChars = 1
+
+               if {
+                       value = html5
+                       equals.data = TSFE:config|config|doctype
+                       negate = 1
+               }
+
+               editIcons = tt_content:subheader,layout
+               editIcons.beforeLastTag = 1
+               editIcons.iconTitle.data = LLL:EXT:css_styled_content/pi1/locallang.xml:eIcon.subheader
+
+               prefixComment = 2 | Subheader:
+       }
+}
+
+
+
+# *****************
+# CType: text
+# *****************
+tt_content.text = COA
+tt_content.text {
+       10 = < lib.stdheader
+
+       20 = TEXT
+       20 {
+               field = bodytext
+               required = 1
+
+               parseFunc = < lib.parseFunc_RTE
+
+               editIcons = tt_content:bodytext, rte_enabled
+               editIcons.beforeLastTag = 1
+               editIcons.iconTitle.data = LLL:EXT:css_styled_content/pi1/locallang.xml:eIcon.bodytext
+
+               prefixComment = 2 | Text:
+       }
+}
+
+
+
+# *****************
+# CType: image
+# *****************
+# (also used for rendering 'textpic' type):
+tt_content.image = COA
+tt_content.image.10 = < lib.stdheader
+tt_content.image.20 = USER
+tt_content.image.20 {
+       userFunc = TYPO3\CMS\CssStyledContent\Controller\CssStyledContentController->render_textpic
+
+       preRenderRegisters {
+               // To optimize performance we load all image captions into a register
+               // because we need to know if at least one image has a caption at
+               // multiple places to determine the render method.
+               allImageCaptions.cObject = FILES
+               allImageCaptions.cObject {
+                       references {
+                               table = tt_content
+                               fieldName = image
+                       }
+                       renderObj = TEXT
+                       renderObj.data = file:current:description
+               }
+       }
+
+       # Image source
+       imgList.cObject = FILES
+       imgList.cObject {
+               references < tt_content.image.20.preRenderRegisters.allImageCaptions.cObject.references
+               renderObj = TEXT
+               renderObj.data = file:current:uid
+               renderObj.wrap = |,
+       }
+       imgPath = uploads/pics/
+
+       // This needs to be set because the UID list generated in the imgList
+       // setting contains UIDs of file references (not files).
+       imgListContainsReferenceUids = 1
+
+       # Single image rendering
+       imgObjNum = 1
+       1 {
+               file.import.data = file:current:uid
+               file.treatIdAsReference = 1
+               file.width.field = imagewidth
+
+               layoutKey = {$styles.content.imgtext.layoutKey}
+               layout {
+                       default {
+                               element = <img src="###SRC###" width="###WIDTH###" height="###HEIGHT###"###PARAMS######ALTPARAMS######BORDER######SELFCLOSINGTAGSLASH###>
+                       }
+                       srcset {
+                               element = <img src="###SRC###" srcset="###SOURCECOLLECTION###"###PARAMS######ALTPARAMS######SELFCLOSINGTAGSLASH###>
+                               source = |*|###SRC### ###SRCSETCANDIDATE###,|*|###SRC### ###SRCSETCANDIDATE###
+                       }
+                       picture {
+                               element = <picture>###SOURCECOLLECTION###<img src="###SRC###"###PARAMS######ALTPARAMS######SELFCLOSINGTAGSLASH###></picture>
+                               source = <source src="###SRC###" media="###MEDIAQUERY###"###SELFCLOSINGTAGSLASH###>
+                       }
+                       data {
+                               element = <img src="###SRC###"###SOURCECOLLECTION######PARAMS######ALTPARAMS######SELFCLOSINGTAGSLASH###>
+                               source = data-###DATAKEY###="###SRC###"
+                               source.noTrimWrap = ; ;;
+                               source.noTrimWrap.splitChar = ;
+                       }
+               }
+               # Default sourceCollection as an example
+               # Please write your own sourceCollection (highly recommended)
+               sourceCollection {
+                       small {
+                               width = 200
+
+                               srcsetCandidate = 600w
+                               mediaQuery = (max-device-width: 600px)
+                               dataKey = small
+                       }
+                       smallRetina {
+                               if {
+                                       value = {$styles.content.imgtext.layoutKey}
+                                       equals = default
+                                       negate = 1
+                               }
+
+                               width = 200
+                               pixelDensity = 2
+
+                               srcsetCandidate = 600w 2x
+                               mediaQuery = (max-device-width: 600px) AND (min-resolution: 192dpi)
+                               dataKey = smallRetina
+                       }
+               }
+
+               imageLinkWrap = 1
+               imageLinkWrap {
+                       bodyTag = <body style="margin:0; background:#fff;">
+                       wrap = <a href="javascript:close();"> | </a>
+                       width = {$styles.content.imgtext.linkWrap.width}
+                       height = {$styles.content.imgtext.linkWrap.height}
+                       effects = {$styles.content.imgtext.linkWrap.effects}
+
+                       JSwindow = 1
+                       JSwindow.newWindow = {$styles.content.imgtext.linkWrap.newWindow}
+                       JSwindow.if.isFalse = {$styles.content.imgtext.linkWrap.lightboxEnabled}
+
+                       directImageLink = {$styles.content.imgtext.linkWrap.lightboxEnabled}
+
+                       enable.field = image_zoom
+                       enable.ifEmpty.typolink.parameter.data = file:current:link
+                       enable.ifEmpty.typolink.returnLast = url
+
+                       typolink.parameter.data = file:current:link
+
+                       typolink.target < lib.parseTarget
+                       typolink.target =
+                       typolink.target.override = {$styles.content.links.target}
+
+                       typolink.extTarget < lib.parseTarget
+                       typolink.extTarget =
+                       typolink.extTarget.override = {$styles.content.links.extTarget}
+
+                       linkParams.ATagParams.dataWrap =  class="{$styles.content.imgtext.linkWrap.lightboxCssClass}" rel="{$styles.content.imgtext.linkWrap.lightboxRelAttribute}"
+               }
+
+               altText = TEXT
+               altText {
+                       data = file:current:alternative
+                       stripHtml = 1
+               }
+
+               titleText < .altText
+               titleText.data = file:current:title
+
+               longdescURL {
+                       parameter {
+                               field = longdescURL
+                               split {
+                                       token {
+                                               char = 10
+                                       }
+                                       returnKey.data = register : IMAGE_NUM_CURRENT
+                               }
+                       }
+               }
+
+               emptyTitleHandling = {$styles.content.imgtext.emptyTitleHandling}
+               titleInLink = {$styles.content.imgtext.titleInLink}
+               titleInLinkAndImg = {$styles.content.imgtext.titleInLinkAndImg}
+       }
+
+       textPos.field = imageorient
+       maxW = {$styles.content.imgtext.maxW}
+       maxW.override.data = register:maxImageWidth
+       maxWInText = {$styles.content.imgtext.maxWInText}
+       maxWInText.override.data = register:maxImageWidthInText
+
+       equalH.field = imageheight
+
+       image_compression.field = image_compression
+       image_effects.field = image_effects
+
+       noRows.field = image_noRows
+
+       cols.field = imagecols
+       border.field = imageborder
+
+       caption {
+               1 = COA
+               1 {
+                       1 = TEXT
+                       1 {
+                               data = file:current:description
+                               required = 1
+                               parseFunc =< lib.parseFunc
+                               br = 1
+                       }
+               }
+       }
+
+       captionAlign.field = imagecaption_position
+
+       // This needs to be set to TRUE because otherwise render_textpic will
+       // render a global caption which we do not have.
+       imageTextSplit = 1
+
+       borderThick = {$styles.content.imgtext.borderThick}
+       borderClass = {$styles.content.imgtext.borderClass}
+       colSpace = {$styles.content.imgtext.colSpace}
+       textMargin = {$styles.content.imgtext.textMargin}
+
+       borderSpace = {$styles.content.imgtext.borderSpace}
+       separateRows = {$styles.content.imgtext.separateRows}
+       addClasses =
+       addClassesCol =
+       addClassesCol.ifEmpty = csc-textpic-firstcol csc-textpic-lastcol
+       addClassesCol.override = csc-textpic-firstcol |*| |*| csc-textpic-lastcol
+       addClassesCol.override.if {
+               isGreaterThan.field = imagecols
+               value = 1
+       }
+
+       addClassesImage = csc-textpic-first |*| |*| csc-textpic-last
+
+       #
+       imageStdWrap.dataWrap = <div class="csc-textpic-imagewrap" style="width:{register:totalwidth}px;"> | </div>
+       imageStdWrapNoWidth.wrap = <div class="csc-textpic-imagewrap"> | </div>
+
+       # if noRows is set, wrap around each column:
+       imageColumnStdWrap.dataWrap = <div class="csc-textpic-imagecolumn" style="width:{register:columnwidth}px;"> | </div>
+
+       layout = CASE
+       layout {
+               key.field = imageorient
+               # above-center
+               default = TEXT
+               default {
+                       value = <div class="csc-textpic csc-textpic-center csc-textpic-above###CLASSES###">###IMAGES######TEXT###</div>
+                       override = <div class="csc-textpic csc-textpic-responsive csc-textpic-center csc-textpic-above###CLASSES###">###IMAGES######TEXT###</div>
+                       override {
+                               if {
+                                       value = default
+                                       equals = {$styles.content.imgtext.layoutKey}
+                                       negate = 1
+                               }
+                       }
+               }
+               # above-right
+               1 = TEXT
+               1 {
+                       value = <div class="csc-textpic csc-textpic-right csc-textpic-above###CLASSES###">###IMAGES######TEXT###</div>
+                       override = <div class="csc-textpic csc-textpic-responsive csc-textpic-right csc-textpic-above###CLASSES###">###IMAGES######TEXT###</div>
+                       override {
+                               if {
+                                       value = default
+                                       equals = {$styles.content.imgtext.layoutKey}
+                                       negate = 1
+                               }
+                       }
+               }
+               # above-left
+               2 = TEXT
+               2 {
+                       value = <div class="csc-textpic csc-textpic-left csc-textpic-above###CLASSES###">###IMAGES######TEXT###</div>
+                       override = <div class="csc-textpic csc-textpic-responsive csc-textpic-left csc-textpic-above###CLASSES###">###IMAGES######TEXT###</div>
+                       override {
+                               if {
+                                       value = default
+                                       equals = {$styles.content.imgtext.layoutKey}
+                                       negate = 1
+                               }
+                       }
+               }
+               # below-center
+               8 = TEXT
+               8 {
+                       value = <div class="csc-textpic csc-textpic-center csc-textpic-below###CLASSES###">###TEXT######IMAGES###</div>
+                       override = <div class="csc-textpic csc-textpic-responsive csc-textpic-center csc-textpic-below###CLASSES###">###TEXT######IMAGES###</div>
+                       override {
+                               if {
+                                       value = default
+                                       equals = {$styles.content.imgtext.layoutKey}
+                                       negate = 1
+                               }
+                       }
+               }
+               # below-right
+               9 = TEXT
+               9 {
+                       value = <div class="csc-textpic csc-textpic-right csc-textpic-below###CLASSES###">###TEXT######IMAGES###</div>
+                       override = <div class="csc-textpic csc-textpic-responsive csc-textpic-right csc-textpic-below###CLASSES###">###TEXT######IMAGES###</div>
+                       override {
+                               if {
+                                       value = default
+                                       equals = {$styles.content.imgtext.layoutKey}
+                                       negate = 1
+                               }
+                       }
+               }
+               # below-left
+               10 = TEXT
+               10 {
+                       value = <div class="csc-textpic csc-textpic-left csc-textpic-below###CLASSES###">###TEXT######IMAGES###</div>
+                       override = <div class="csc-textpic csc-textpic-responsive csc-textpic-left csc-textpic-below###CLASSES###">###TEXT######IMAGES###</div>
+                       override {
+                               if {
+                                       value = default
+                                       equals = {$styles.content.imgtext.layoutKey}
+                                       negate = 1
+                               }
+                       }
+               }
+               # intext-right
+               17 = TEXT
+               17 {
+                       value = <div class="csc-textpic csc-textpic-intext-right###CLASSES###">###IMAGES######TEXT###</div>
+                       override = <div class="csc-textpic csc-textpic-responsive csc-textpic-intext-right###CLASSES###">###IMAGES######TEXT###</div>
+                       override {
+                               if {
+                                       value = default
+                                       equals = {$styles.content.imgtext.layoutKey}
+                                       negate = 1
+                               }
+                       }
+               }
+               # intext-left
+               18 = TEXT
+               18 {
+                       value = <div class="csc-textpic csc-textpic-intext-left###CLASSES###">###IMAGES######TEXT###</div>
+                       override = <div class="csc-textpic csc-textpic-responsive csc-textpic-intext-left###CLASSES###">###IMAGES######TEXT###</div>
+                       override {
+                               if {
+                                       value = default
+                                       equals = {$styles.content.imgtext.layoutKey}
+                                       negate = 1
+                               }
+                       }
+               }
+               # intext-right-nowrap
+               25 = TEXT
+               25 {
+                       value = <div class="csc-textpic csc-textpic-intext-right-nowrap###CLASSES###">###IMAGES######TEXT###</div>
+                       override = <div class="csc-textpic csc-textpic-responsive csc-textpic-intext-right-nowrap###CLASSES###">###IMAGES######TEXT###</div>
+                       override {
+                               if {
+                                       value = default
+                                       equals = {$styles.content.imgtext.layoutKey}
+                                       negate = 1
+                               }
+                       }
+               }
+               # intext-left-nowrap
+               26 = TEXT
+               26 {
+                       value = <div class="csc-textpic csc-textpic-intext-left-nowrap###CLASSES###">###IMAGES######TEXT###</div>
+                       override = <div class="csc-textpic csc-textpic-responsive csc-textpic-intext-left-nowrap###CLASSES###">###IMAGES######TEXT###</div>
+                       override {
+                               if {
+                                       value = default
+                                       equals = {$styles.content.imgtext.layoutKey}
+                                       negate = 1
+                               }
+                       }
+               }
+       }
+
+       rendering {
+               # Single image - No caption
+               singleNoCaption {
+                       # Choose another rendering for special edge cases
+                       fallbackRendering = COA
+                       fallbackRendering {
+                               # Single image - Caption
+                               10 = TEXT
+                               10 {
+                                       if {
+                                               isTrue.data = file:current:description
+                                               value = 1
+                                               equals.data = register:imageCount
+                                       }
+                                       value = singleCaption
+                               }
+
+                               # Multiple images and split caption
+                               20 = TEXT
+                               20 {
+                                       if {
+                                               value = 1
+                                               isGreaterThan.data = register:imageCount
+                                               isTrue.if.isFalse.data = register:renderGlobalCaption
+                                               isTrue.data = register:allImageCaptions
+                                       }
+                                       value = splitCaption
+                               }
+
+                               # Multiple images and no caption at all
+                               40 = TEXT
+                               40 {
+                                       if {
+                                               value = 1
+                                               isGreaterThan.data = register:imageCount
+                                               isFalse.data = register:allImageCaptions
+                                       }
+                                       value = noCaption
+                               }
+                       }
+                       allStdWrap {
+                               dataWrap = <div class="csc-textpic-imagewrap"> | </div>
+                               dataWrap {
+                                       override = <div class="csc-textpic-imagewrap" data-csc-images="{register:imageCount}" data-csc-cols="{field:imagecols}"> | </div>
+                                       override {
+                                               if {
+                                                       value = html5
+                                                       equals.data = TSFE:config|config|doctype
+                                               }
+                                       }
+                               }
+                               innerWrap.cObject = CASE
+                               innerWrap.cObject {
+                                       key.field = imageorient
+                                       # above-center
+                                       0 = TEXT
+                                       0.value = <div class="csc-textpic-center-outer"><div class="csc-textpic-center-inner"> | </div></div>
+                                       # below-center
+                                       8 < .0
+                               }
+                       }
+                       singleStdWrap {
+                               wrap = <div class="csc-textpic-image###CLASSES###"> | </div>
+                               wrap {
+                                       override = <figure class="csc-textpic-image###CLASSES###"> | </figure>
+                                       override {
+                                               if {
+                                                       value = html5
+                                                       equals.data = TSFE:config|config|doctype
+                                               }
+                                       }
+                               }
+                       }
+                       rowStdWrap.wrap = |
+                       noRowsStdWrap.wrap = |
+                       lastRowStdWrap.wrap = |
+                       columnStdWrap.wrap = |
+                       imgTagStdWrap.wrap = |
+                       editIconsStdWrap.wrap = <div> | </div>
+                       caption.wrap = |
+               }
+               noCaption {
+                       # Multiple images and no caption at all
+                       fallbackRendering < tt_content.image.20.rendering.singleNoCaption.fallbackRendering.10
+                       allStdWrap {
+                               dataWrap = <div class="csc-textpic-imagewrap"> | </div>
+                               dataWrap {
+                                       override = <div class="csc-textpic-imagewrap" data-csc-images="{register:imageCount}" data-csc-cols="{field:imagecols}"> | </div>
+                                       override {
+                                               if {
+                                                       value = html5
+                                                       equals.data = TSFE:config|config|doctype
+                                               }
+                                       }
+                               }
+                       }
+                       singleStdWrap {
+                               wrap = <div class="csc-textpic-image###CLASSES###"> | </div>
+                               wrap {
+                                       override = <figure class="csc-textpic-image###CLASSES###"> | </figure>
+                               }
+                       }
+                       rowStdWrap.wrap = <div class="csc-textpic-imagerow"> | </div>
+                       noRowsStdWrap.wrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-none"> | </div>
+                       lastRowStdWrap.wrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-last"> | </div>
+                       columnStdWrap.wrap = <div class="csc-textpic-imagecolumn###CLASSES###"> | </div>
+               }
+               singleCaption {
+                       # Just one image with a caption
+                       fallbackRendering < tt_content.image.20.rendering.singleNoCaption.fallbackRendering.10
+                       singleStdWrap {
+                               wrap = <div class="csc-textpic-image###CLASSES###"><table>###CAPTION###<tbody><tr><td> | </td></tr></tbody></table></div>
+                               wrap {
+                                       override = <figure class="csc-textpic-image###CLASSES###">|###CAPTION###</figure>
+                                       override {
+                                               if {
+                                                       value = html5
+                                                       equals.data = TSFE:config|config|doctype
+                                               }
+                                       }
+                               }
+                       }
+                       caption {
+                               required = 1
+                               wrap = <caption class="csc-textpic-caption###CLASSES###"> | </caption>
+                               wrap {
+                                       override = <figcaption class="csc-textpic-caption###CLASSES###"> | </figcaption>
+                                       override {
+                                               if {
+                                                       value = html5
+                                                       equals.data = TSFE:config|config|doctype
+                                               }
+                                       }
+                               }
+                       }
+               }
+               splitCaption {
+                       fallbackRendering < tt_content.image.20.rendering.singleNoCaption.fallbackRendering.10
+                       singleStdWrap {
+                               wrap = <div class="csc-textpic-image###CLASSES###"><table>###CAPTION###<tbody><tr><td> | </td></tr></tbody></table></div>
+                               wrap {
+                                       override = <figure class="csc-textpic-image###CLASSES###">|###CAPTION###</figure>
+                                       override {
+                                               if {
+                                                       value = html5
+                                                       equals.data = TSFE:config|config|doctype
+                                               }
+                                       }
+                               }
+                       }
+                       rowStdWrap.wrap = <div class="csc-textpic-imagerow"> | </div>
+                       noRowsStdWrap.wrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-none"> | </div>
+                       lastRowStdWrap.wrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-last"> | </div>
+                       columnStdWrap.wrap = <div class="csc-textpic-imagecolumn###CLASSES###"> | </div>
+                       caption {
+                               required = 1
+                               wrap = <caption class="csc-textpic-caption###CLASSES###"> | </caption>
+                               wrap {
+                                       override = <figcaption class="csc-textpic-caption###CLASSES###"> | </figcaption>
+                                       override {
+                                               if {
+                                                       value = html5
+                                                       equals.data = TSFE:config|config|doctype
+                                               }
+                                       }
+                               }
+                       }
+               }
+       }
+       renderMethod = singleNoCaption
+
+       editIcons = tt_content : image [imageorient|imagewidth|imageheight],[imagecols|image_noRows|imageborder],[image_zoom],[image_compression|image_effects|image_frames],[imagecaption_position]
+       editIcons.iconTitle.data = LLL:EXT:css_styled_content/pi1/locallang.xml:eIcon.images
+
+       caption.editIcons = tt_content : imagecaption_position
+       caption.editIcons.beforeLastTag=1
+       caption.editIcons.iconTitle.data = LLL:EXT:css_styled_content/pi1/locallang.xml:eIcon.caption_position
+
+       stdWrap.prefixComment = 2 | Image block:
+}
+
+# *****************
+# CType: textpic
+# *****************
+tt_content.textpic = COA
+tt_content.textpic {
+       10 = COA
+       10.if.value = 25
+       10.if.isLessThan.field = imageorient
+       10.10 = < lib.stdheader
+
+       20  = < tt_content.image.20
+       20 {
+               text.10 = COA
+               text.10 {
+                       if.value = 24
+                       if.isGreaterThan.field = imageorient
+                       10 = < lib.stdheader
+                       10.stdWrap.dataWrap = <div class="csc-textpicHeader csc-textpicHeader-{field:imageorient}">|</div>
+               }
+               text.20 = < tt_content.text.20
+               text.wrap = <div class="csc-textpic-text"> | </div>
+       }
+}
+
+
+
+# *****************
+# CType: bullet
+# *****************
+tt_content.bullets = COA
+tt_content.bullets {
+       10 = < lib.stdheader
+
+       20 = TEXT
+       20 {
+               field = bodytext
+               trim = 1
+               split{
+                       token.char = 10
+                       cObjNum = |*|1|| 2|*|
+                       1.current = 1
+                       1.parseFunc =< lib.parseFunc
+                       1.wrap = <li class="odd">|</li>
+
+                       2.current = 1
+                       2.parseFunc =< lib.parseFunc
+                       2.wrap = <li class="even">|</li>
+               }
+               dataWrap = <ul class="csc-bulletlist csc-bulletlist-{field:layout}">|</ul>
+               editIcons = tt_content: bodytext, [layout]
+               editIcons.beforeLastTag = 1
+               editIcons.iconTitle.data = LLL:EXT:css_styled_content/pi1/locallang.xlf:eIcon.bullets
+
+               prefixComment = 2 | Bullet list:
+       }
+}
+
+
+# *****************
+# CType: uploads
+# *****************
+tt_content.uploads = COA
+tt_content.uploads {
+       10 = < lib.stdheader
+
+       20 = FILES
+       20 {
+               # get from file references:
+               references {
+                       table = tt_content
+                       fieldName = media
+               }
+
+               collections.field = file_collections
+
+               # get from path (backwards compatibility, contains strings like "fileadmin/user_uploads/")
+               folders.field = select_key
+
+               sorting.field = filelink_sorting
+
+               # render the files
+               renderObj = COA
+               renderObj {
+                       10 = IMAGE
+                       10 {
+                               file.import.data = file:current:originalUid // file:current:uid
+                               file.width = 150
+                               stdWrap {
+                                       if.value = 1
+                                       if.isGreaterThan.field = layout
+
+                                       typolink {
+                                               parameter.data = file:current:originalUid // file:current:uid
+                                               parameter.wrap = file:|
+                                               fileTarget < lib.parseTarget
+                                               fileTarget =
+                                               fileTarget.override = {$styles.content.uploads.target}
+                                               fileTarget.override.override.field = target
+                                               removePrependedNumbers = 1
+
+                                               /*
+                                               jumpurl = {$styles.content.uploads.jumpurl}
+                                               jumpurl {
+                                                       secure = {$styles.content.uploads.jumpurl_secure}
+                                                       secure.mimeTypes = {$styles.content.uploads.jumpurl_secure_mimeTypes}
+                                               }
+                                               */
+                                       }
+                               }
+                       }
+
+                       # icon
+                       15 = IMAGE
+                       15 {
+                               file.import = typo3/gfx/fileicons/
+                               file.import.data = file:current:extension
+                               file.import.case = lower
+                               file.import.wrap = |.gif
+                               stdWrap {
+                                       if {
+                                               value = 0
+                                               isGreaterThan.field = layout
+
+                                               # only show the icon if we don't have a thumbnail:
+                                               isFalse.cObject = IMG_RESOURCE
+                                               isFalse.cObject.file < tt_content.uploads.20.renderObj.10.file
+                                               isFalse.cObject.stdWrap.if < tt_content.uploads.20.renderObj.10.stdWrap.if
+                                       }
+
+                                       typolink < tt_content.uploads.20.renderObj.10.stdWrap.typolink
+                               }
+                       }
+
+                       # filename
+                       20 = TEXT
+                       20 {
+                               data = file:current:name
+                               htmlSpecialChars = 1
+                               required = 1
+
+                               replacement {
+                                       # equivalent to former useSpacesInLinkText = 0; remove using > to disable it
+                                       10 {
+                                               search = _
+                                               replace.char = 32
+                                       }
+
+                                       # equivalent to former stripFileExtensionFromLinkText = 0; move "_20" to "20" to enable it. Disabled by default.
+                                       _20 {
+                                               search = /(.*)(\..*)/
+                                               replace = \1
+                                               useRegExp = 1
+                                       }
+                               }
+
+                               typolink < tt_content.uploads.20.renderObj.10.stdWrap.typolink
+
+                               wrap = <span class="csc-uploads-fileName">|</span>
+                       }
+
+                       # description
+                       30 = TEXT
+                       30 {
+                               data = file:current:description
+                               htmlSpecialChars = 1
+                               wrap = <span class="csc-uploads-description">|</span>
+
+                               required = 1
+                       }
+
+                       # file size
+                       40 = TEXT
+                       40 {
+                               if.isTrue.field = filelink_size
+                               data = file:current:size
+                               wrap = <span class="csc-uploads-fileSize">|</span>
+                               bytes = 1
+                               bytes.labels = {$styles.content.uploads.filesizeBytesLabels}
+                       }
+
+                       # wrap of each listed file with odd/even class
+                       wrap.cObject = COA
+                       wrap.cObject {
+                               10 = LOAD_REGISTER
+                               10 {
+                                       oddEvenClass = li-odd li-first |*| li-even || li-odd
+                                       elementClass = csc-uploads-element csc-uploads-element-{file:current:extension}
+                                       elementClass.insertData = 1
+                               }
+
+                               20 = TEXT
+                               20 {
+                                       value = <li class="{register:oddEvenClass} {register:elementClass}">|</li>
+                                       insertData = 1
+                               }
+                               30 = RESTORE_REGISTER
+                       }
+               }
+
+               # wrap around whole content element with <ul> and editIcons
+               stdWrap {
+                       editIcons = tt_content: media, layout [table_bgColor|table_border|table_cellspacing|table_cellpadding], filelink_size
+                       editIcons.iconTitle.data = LLL:EXT:css_styled_content/pi1/locallang.xml:eIcon.filelist
+                       prefixComment = 2 | File list:
+                       dataWrap = <ul class="csc-uploads csc-uploads-{field:layout}">|</ul>
+               }
+       }
+}
+
+
+
+# *****************
+# CType: table
+# *****************
+# Rendered by a PHP function specifically written to handle CE tables. See EXT:css_styled_content/Classes/Controller/CssStyledContentController.php
+tt_content.table = COA
+tt_content.table {
+       10 = < lib.stdheader
+
+       20 = USER
+       20.userFunc = TYPO3\CMS\CssStyledContent\Controller\CssStyledContentController->render_table
+       20.field = bodytext
+
+       20.color {
+               default =
+               1 = {$styles.content.table.backgroundColor.1}
+               2 = {$styles.content.table.backgroundColor.2}
+               200 =
+               240 = {$styles.content.table.backgroundColor.240}
+               241 = {$styles.content.table.backgroundColor.241}
+               242 = {$styles.content.table.backgroundColor.242}
+               243 = {$styles.content.table.backgroundColor.243}
+               244 = {$styles.content.table.backgroundColor.244}
+       }
+       20.tableParams_0 {
+               border =
+               cellpadding =
+               cellspacing =
+       }
+       20.tableParams_1 {
+               border =
+               cellpadding =
+               cellspacing =
+       }
+       20.tableParams_2 {
+               border =
+               cellpadding =
+               cellspacing =
+       }
+       20.tableParams_3 {
+               border =
+               cellpadding =
+               cellspacing =
+       }
+       20.innerStdWrap.wrap = |
+       20.innerStdWrap.parseFunc = < lib.parseFunc
+
+       20.stdWrap {
+               editIcons = tt_content: cols, bodytext, [layout], [table_bgColor|table_border|table_cellspacing|table_cellpadding]
+               editIcons.beforeLastTag = 1
+               editIcons.iconTitle.data = LLL:EXT:css_styled_content/pi1/locallang.xml:eIcon.table
+
+               prefixComment = 2 | Table:
+       }
+}
+
+# ******************
+# CType: multimedia
+# ******************
+tt_content.multimedia = COA
+tt_content.multimedia {
+       10 = < lib.stdheader
+
+       20 = MULTIMEDIA
+       20.file.field = multimedia
+       20.file.wrap = uploads/media/
+       20.file.listNum = 0
+       20.params.field = bodytext
+
+       20.stdWrap {
+               editIcons = tt_content: multimedia, bodytext
+               editIcons.iconTitle.data = LLL:EXT:css_styled_content/pi1/locallang.xml:eIcon.multimedia
+
+               prefixComment = 2 | Multimedia element:
+       }
+}
+
+# *****************
+# CType: swfobject
+# *****************
+tt_content.swfobject = COA
+tt_content.swfobject {
+       10 = < lib.stdheader
+
+       20 = SWFOBJECT
+       20 {
+               file =
+               width =
+               height =
+
+               flexParams.field = pi_flexform
+
+               alternativeContent.field = bodytext
+
+               layout = ###SWFOBJECT###
+
+               video {
+                       player = {$styles.content.media.videoPlayer}
+
+                       defaultWidth  = {$styles.content.media.defaultVideoWidth}
+                       defaultHeight  = {$styles.content.media.defaultVideoHeight}
+
+                       default {
+                               params.quality = high
+                               params.menu = false
+                               params.allowScriptAccess = sameDomain
+                               params.allowFullScreen = true
+                       }
+                       mapping {
+
+                       }
+               }
+
+               audio {
+                       player = {$styles.content.media.audioPlayer}
+
+                       defaultWidth = {$styles.content.media.defaultAudioWidth}
+                       defaultHeight = {$styles.content.media.defaultAudioHeight}
+
+                       default {
+                               params.quality = high
+                               params.allowScriptAccess = sameDomain
+                               params.menu = false
+                       }
+                       mapping {
+                               flashvars.file = soundFile
+                       }
+               }
+
+       }
+       20.stdWrap {
+               editIcons = tt_content: multimedia, imagewidth, imageheight, pi_flexform, bodytext
+               editIcons.iconTitle.data = LLL:EXT:css_styled_content/pi1/locallang.xml:eIcon.multimedia
+
+               prefixComment = 2 | SWFobject element:
+       }
+}
+
+# *****************
+# CType: qtobject
+# *****************
+tt_content.qtobject = COA
+tt_content.qtobject {
+       10 = < lib.stdheader
+
+       20 = QTOBJECT
+       20 {
+               file =
+               width =
+               height =
+
+               flexParams.field = pi_flexform
+
+               alternativeContent.field = bodytext
+
+               layout = ###QTOBJECT###
+
+               video {
+                       player = {$styles.content.media.videoPlayer}
+
+                       defaultWidth  = {$styles.content.media.defaultVideoWidth}
+                       defaultHeight  = {$styles.content.media.defaultVideoHeight}
+
+                       default {
+                               params.quality = high
+                               params.menu = false
+                               params.allowScriptAccess = sameDomain
+                               params.allowFullScreen = true
+                       }
+                       mapping {
+
+                       }
+               }
+
+               audio {
+                       player = {$styles.content.media.audioPlayer}
+
+                       defaultWidth = {$styles.content.media.defaultAudioWidth}
+                       defaultHeight = {$styles.content.media.defaultAudioHeight}
+
+                       default {
+                               params.quality = high
+                               params.allowScriptAccess = sameDomain
+                               params.menu = false
+                       }
+                       mapping {
+                               flashvars.file = soundFile
+                       }
+               }
+       }
+       20.stdWrap {
+               editIcons = tt_content: multimedia, imagewidth, imageheight, pi_flexform, bodytext
+               editIcons.iconTitle.data = LLL:EXT:css_styled_content/pi1/locallang.xml:eIcon.multimedia
+
+               prefixComment = 2 | QTobject element:
+       }
+}
+
+# *****************
+# CType: media
+# *****************
+tt_content.media = COA
+tt_content.media {
+       10 = < lib.stdheader
+
+       20 = MEDIA
+       20 {
+
+               flexParams.field = pi_flexform
+               alternativeContent < tt_content.text.20
+               alternativeContent.field = bodytext
+
+               type = video
+               renderType = auto
+               allowEmptyUrl = 0
+               forcePlayer = 1
+
+               fileExtHandler {
+                       default = MEDIA
+                       avi = MEDIA
+                       asf = MEDIA
+                       class = MEDIA
+                       wmv = MEDIA
+                       mp3 = SWF
+                       mp4 = SWF
+                       m4v = SWF
+                       swa = SWF
+                       flv = SWF
+                       swf = SWF
+                       mov = QT
+                       m4v = QT
+                       m4a = QT
+               }
+
+               mimeConf.swfobject < tt_content.swfobject.20
+               mimeConf.qtobject < tt_content.qtobject.20
+               mimeConf.flowplayer < tt_content.swfobject.20
+               mimeConf.flowplayer.audio.player = {$styles.content.media.flowPlayer}
+               mimeConf.flowplayer.video.player = {$styles.content.media.flowPlayer}
+
+       }
+       20.stdWrap {
+               editIcons = tt_content: pi_flexform, bodytext
+               editIcons.iconTitle.data = LLL:EXT:css_styled_content/pi1/locallang.xml:eIcon.multimedia
+
+               prefixComment = 2 | Media element:
+       }
+}
+
+# ******************
+# CType: mailform
+# ******************
+tt_content.mailform = COA
+tt_content.mailform.10 = < lib.stdheader
+tt_content.mailform.20 = FORM
+tt_content.mailform.20 {
+       useDefaultContentObject = 1
+       accessibility = 1
+       noWrapAttr=1
+       formName = mailform
+       dontMd5FieldNames = 1
+       layout = <div class="csc-mailform-field">###LABEL### ###FIELD###</div>
+       labelWrap.wrap = |
+       commentWrap.wrap = |
+       radioWrap.wrap = |<br />
+       radioWrap.accessibilityWrap = <fieldset###RADIO_FIELD_ID###><legend>###RADIO_GROUP_LABEL###</legend>|</fieldset>
+       REQ = 1
+       REQ.labelWrap.wrap = |
+       COMMENT.layout = <div class="csc-mailform-label">###LABEL###</div>
+       RADIO.layout = <div class="csc-mailform-field">###LABEL### <span class="csc-mailform-radio">###FIELD###</span></div>
+       LABEL.layout = <div class="csc-mailform-field">###LABEL### <span class="csc-mailform-label">###FIELD###</span></div>
+       target < lib.parseTarget
+       target =
+       target.override = {$styles.content.mailform.target}
+       goodMess = {$styles.content.mailform.goodMess}
+       badMess = {$styles.content.mailform.badMess}
+       redirect.field = pages
+       redirect.listNum = 0
+       recipient.field = subheader
+       data.field = bodytext
+       locationData = 1
+       hiddenFields.stdWrap.wrap = <div style="display:none;">|</div>
+
+       params.radio = class="csc-mailform-radio"
+       params.check = class="csc-mailform-check"
+       params.submit = class="csc-mailform-submit"
+
+       stdWrap.wrap = <fieldset class="csc-mailform"> | </fieldset>
+       stdWrap {
+               editIcons = tt_content: bodytext, pages, subheader
+               editIcons.iconTitle.data = LLL:EXT:css_styled_content/pi1/locallang.xml:eIcon.form
+
+               prefixComment = 2 | Mail form inserted:
+       }
+}
+
+
+# ******************
+# CType: search
+# ******************
+tt_content.search = COA
+tt_content.search.10 = < lib.stdheader
+# Result:
+tt_content.search.20 = SEARCHRESULT
+tt_content.search.20 {
+       allowedCols = pages.title-subtitle-keywords-description : tt_content.header-bodytext-imagecaption : tt_address.name-title-address-email-company-city-country : tt_links.title-note-note2-url : tt_board.subject-message-author-email : tt_calender.title-note : tt_products.title-note-itemnumber
+       languageField.tt_content = sys_language_uid
+       renderObj = COA
+       renderObj {
+
+               10 = TEXT
+               10.field = pages_title
+               10.htmlSpecialChars = 1
+               10.typolink {
+                       parameter.field = uid
+                       target < lib.parseTarget
+                       target =
+                       target.override = {$styles.content.searchresult.resultTarget}
+                       additionalParams.data = register:SWORD_PARAMS
+                       additionalParams.required = 1
+                       additionalParams.wrap = &no_cache=1
+               }
+               10.htmlSpecialChars = 1
+               10.wrap = <h3 class="csc-searchResultHeader">|</h3>
+
+               20 = COA
+               20 {
+                       10 = TEXT
+                       10.field = tt_content_bodytext
+                       10.stripHtml = 1
+                       10.htmlSpecialChars = 1
+               }
+               20.stdWrap.crop = 200 | ...
+               20.stdWrap.wrap = <p class="csc-searchResult">|</p>
+       }
+
+       layout = COA
+       layout {
+               wrap = <table border="0" cellspacing="0" cellpadding="2" class="csc-searchResultInfo"><tr> | </tr></table> ###RESULT###
+
+               10 = TEXT
+               10.data = LLL:EXT:css_styled_content/pi1/locallang.xml:search.resultRange
+               10.wrap = <td class="csc-searchResultRange"><p>|</p></td>
+
+               20 = TEXT
+               20.value = ###PREV###&nbsp;&nbsp;&nbsp;###NEXT###
+               20.wrap = <td class="csc-searchResultPrevNext"><p>|</p></td>
+       }
+
+       noResultObj = COA
+       noResultObj {
+               10 = TEXT
+               10.data = LLL:EXT:css_styled_content/pi1/locallang.xml:search.emptySearch
+               10.wrap = <h3 class="csc-noSearchResultMsg">|</h3>
+       }
+
+       next = TEXT
+       next.data = LLL:EXT:css_styled_content/pi1/locallang.xml:search.searchResultNext
+
+       prev = TEXT
+       prev.data = LLL:EXT:css_styled_content/pi1/locallang.xml:search.searchResultPrev
+
+       target < lib.parseTarget
+       target =
+       target.override = {$styles.content.searchresult.target}
+
+       range = 20
+
+       stdWrap.prefixComment = 2 | Search result:
+}
+
+# Form:
+tt_content.search.30 < tt_content.mailform.20
+tt_content.search.30 {
+       goodMess = {$styles.content.searchform.goodMess}
+       redirect >
+       recipient >
+       data >
+       dataArray {
+               10.label.data = LLL:EXT:css_styled_content/pi1/locallang.xml:search.searchWord
+               10.type = sword=input
+               20.label.data = LLL:EXT:css_styled_content/pi1/locallang.xml:search.searchIn
+               20.type = scols=select
+               20.valueArray {
+                       10.label.data = LLL:EXT:css_styled_content/pi1/locallang.xml:search.headersKeywords
+                       10.value = pages.title-subtitle-keywords-description:tt_content.header
+                       20.label.data = LLL:EXT:css_styled_content/pi1/locallang.xml:search.pageContent
+                       20.value = tt_content.header-bodytext-imagecaption
+               }
+               30.type = stype=hidden
+               30.value = L0
+               40.type = submit=submit
+               40.value.data = LLL:EXT:css_styled_content/pi1/locallang.xml:search.searchButton
+       }
+       type.field = pages
+       type.listNum = 0
+       locationData = HTTP_POST_VARS
+       no_cache = 1
+
+       stdWrap.wrap = <table border="0" cellspacing="1" cellpadding="1" class="csc-searchform">  | </table>
+       stdWrap {
+               editIcons.iconTitle.data = LLL:EXT:css_styled_content/pi1/locallang.xml:eIcon.search
+
+               prefixComment = 2 | Search form inserted:
+       }
+}
+
+
+# ****************
+# CType: menu
+# ****************
+tt_content.menu = COA
+tt_content.menu {
+       10 = < lib.stdheader
+
+       20 = CASE
+       20 {
+               key.field = menu_type
+
+               # "Menu of these pages"
+               default = HMENU
+               default {
+                       special = list
+                       special.value.field = pages
+                       stdWrap {
+                               prepend = COA
+                               prepend {
+                                       stdWrap {
+                                               if.isTrue.field = accessibility_bypass
+                                       }
+                                       10 = LOAD_REGISTER
+                                       10 {
+                                               accessibility_bypass_text = TEXT
+                                               accessibility_bypass_text {
+                                                       field = accessibility_bypass_text
+                                               }
+                                       }
+                                       20 = CONTENT
+                                       20 {
+                                               table = tt_content
+                                               select {
+                                                       pidInList = this
+                                                       orderBy = sorting
+                                                       andWhere {
+                                                               dataWrap = sorting>{field:sorting}
+                                                       }
+                                                       languageField = sys_language_uid
+                                                       max = 1
+                                               }
+                                               renderObj = TEXT
+                                               renderObj {
+                                                       required = 1
+                                                       data = LLL:EXT:css_styled_content/pi1/locallang.xml:menu.bypassNavigation
+                                                       override.data = register:accessibility_bypass_text
+                                                       trim = 1
+                                                       htmlSpecialChars = 1
+                                                       typolink {
+                                                               parameter {
+                                                                       field = pid
+                                                               }
+                                                               section {
+                                                                       field = uid
+                                                               }
+                                                       }
+                                                       wrap = <li class="csc-nav-bypass">|</li>
+                                               }
+                                       }
+                                       30 = RESTORE_REGISTER
+                               }
+                               outerWrap = <ul class="csc-menu csc-menu-def">|</ul>
+                               required = 1
+                       }
+                       1 = TMENU
+                       1 {
+                               target < lib.parseTarget
+                               target =
+                               target.override = {$PAGE_TARGET}
+                               NO {
+                                       stdWrap.htmlSpecialChars = 1
+                                       wrapItemAndSub = <li>|</li>
+                                       ATagTitle.field = description // title
+                               }
+                       }
+               }
+
+               # "Menu of subpages to these pages"
+               1 < .default
+               1 {
+                       special = directory
+                       stdWrap {
+                               outerWrap = <ul class="csc-menu csc-menu-1">|</ul>
+                       }
+               }
+
+               # "Sitemap - liststyle"
+               2 = HMENU
+               2 {
+                       stdWrap < tt_content.menu.20.default.stdWrap
+                       stdWrap {
+                               outerWrap = <div class="csc-sitemap">|</div>
+                       }
+                       1 = TMENU
+                       1 {
+                               target < lib.parseTarget
+                               target =
+                               target.override = {$PAGE_TARGET}
+                               expAll = 1
+                               wrap = <ul>|</ul>
+                               NO {
+                                       stdWrap.htmlSpecialChars = 1
+                                       wrapItemAndSub = <li>|</li>
+                                       ATagTitle.field = description // title
+                               }
+                       }
+                       2 < .1
+                       3 < .1
+                       4 < .1
+                       5 < .1
+                       6 < .1
+                       7 < .1
+               }
+
+               # "Section index (pagecontent w/Index checked - liststyle)"
+               3 < .default
+               3 {
+                       special {
+                               value {
+                                       override {
+                                               data = page:uid
+                                               if {
+                                                       isFalse.field = pages
+                                               }
+                                       }
+                               }
+                       }
+                       stdWrap {
+                               outerWrap = <ul class="csc-menu csc-menu-3">|</ul>
+                       }
+                       1 = TMENU
+                       1 {
+                               sectionIndex = 1
+                               sectionIndex.type = header
+                               NO.wrapItemAndSub = <li class="csc-section">|</li>
+                       }
+               }
+
+               # "Menu of subpages to these pages (with abstract)"
+               4 < .1
+               4 {
+                       stdWrap {
+                               prepend.renderObj.wrap = <dt class="csc-nav-bypass">|</dt><dd>&nbsp;</dd>
+                               outerWrap = <dl class="csc-menu csc-menu-4">|</dl>
+                       }
+                       1.NO {
+                               wrapItemAndSub >
+                               linkWrap = <dt>|</dt>
+                               after {
+                                       cObject = TEXT
+                                       cObject {
+                                               data = field : abstract // field : description // field : subtitle
+                                               htmlSpecialChars = 1
+                                               required = 1
+                                       }
+                                       ifBlank = &nbsp;
+                                       wrap = <dd>|</dd>
+                               }
+                               ATagTitle.field = description // title
+                       }
+               }
+
+               # "Recently updated pages"
+               5 < .default
+               5 {
+                       stdWrap {
+                               outerWrap = <ul class="csc-menu csc-menu-5">|</ul>
+                       }
+                       special = updated
+                       special {
+                               maxAge = 3600*24*7
+                               excludeNoSearchPages = 1
+                       }
+               }
+
+               # "Related pages (based on keywords)"
+               6 < .default
+               6 {
+                       stdWrap {
+                               outerWrap = <ul class="csc-menu csc-menu-6">|</ul>
+                       }
+                       special = keywords
+                       special {
+                               excludeNoSearchPages = 1
+                       }
+               }
+
+               # "Menu of subpages to these pages + sections - liststyle"
+               7 < .1
+               7 {
+                       stdWrap {
+                               outerWrap = <ul class="csc-menu csc-menu-7">|</ul>
+                       }
+                       1.expAll = 1
+                       2 < .1
+                       2 {
+                               sectionIndex = 1
+                               sectionIndex.type = header
+                               wrap = <ul>|</ul>
+                               NO.wrapItemAndSub = <li class="csc-section">|</li>
+                       }
+               }
+
+               # "Sitemaps of selected pages - liststyle"
+               8 < .2
+               8 {
+                       special = directory
+                       special.value.field = pages
+               }
+
+               # Menu of categorized pages
+               categorized_pages < .default
+               categorized_pages {
+                       special = categories
+                       special.value.field = selected_categories
+                       special.relation.field = category_field
+                       special.sorting = title
+                       special.order = asc
+                       stdWrap {
+                               outerWrap = <ul class="csc-menu csc-menu-categorized-pages">|</ul>
+                       }
+               }
+
+               # Menu of categorized content elements
+               categorized_content = RECORDS
+               categorized_content {
+                       categories.field = selected_categories
+                       categories.relation.field = category_field
+                       tables = tt_content
+                       conf.tt_content = TEXT
+                       conf.tt_content {
+                               field = header
+                               typolink.parameter = {field:pid}#{field:uid}
+                               typolink.parameter.insertData = 1
+                               wrap = <li>|</li>
+                       }
+                       wrap = <ul>|</ul>
+               }
+       }
+
+       20.stdWrap {
+               wrap {
+                       cObject = COA
+                       cObject {
+                               10 = TEXT
+                               10 {
+                                       field = accessibility_title
+                                       htmlSpecialChars = 1
+                                       dataWrap = <map id="map{field:uid}" title="|">
+                                       dataWrap {
+                                               override = <map name="map{field:uid}" title="|">
+                                               override {
+                                                       if {
+                                                               isFalse.data = TSFE:xhtmlDoctype
+                                                       }
+                                               }
+                                       }
+                               }
+
+                               20 = TEXT
+                               20 {
+                                       value = |</map>
+                               }
+                       }
+                       if {
+                               isTrue {
+                                       field = accessibility_title
+                               }
+                       }
+               }
+               editIcons = tt_content: menu_type, pages
+               editIcons.iconTitle.data = LLL:EXT:css_styled_content/pi1/locallang.xml:eIcon.menuSitemap
+
+               prefixComment = 2 | Menu/Sitemap element:
+       }
+}
+
+
+
+# ****************
+# CType: shortcut
+# ****************
+# Should be a complete copy from the old static template "content (default)"
+tt_content.shortcut = COA
+tt_content.shortcut {
+
+       20 = RECORDS
+       20 {
+               source.field = records
+               tables = {$content.shortcut.tables}
+       }
+
+       20.stdWrap {
+               editIcons = tt_content: records
+               editIcons.iconTitle.data = LLL:EXT:css_styled_content/pi1/locallang.xml:eIcon.recordList
+
+               prefixComment = 2 | Inclusion of other records (by reference):
+       }
+}
+
+
+# ****************
+# CType: list
+# ****************
+# Should be a complete copy from the old static template "content (default)" (except "lib.stdheader")
+tt_content.list = COA
+tt_content.list {
+       10 = < lib.stdheader
+
+       20 = CASE
+       20.key.field = list_type
+
+       20.stdWrap {
+               editIcons = tt_content: list_type, layout, select_key, pages [recursive]
+               editIcons.iconTitle.data = LLL:EXT:css_styled_content/pi1/locallang.xml:eIcon.plugin
+
+               prefixComment = 2 | Plugin inserted:
+       }
+}
+
+
+# ****************
+# CType: div
+# ****************
+tt_content.div = TEXT
+tt_content.div {
+       value = <hr>
+       override = <hr />
+       override.if {
+               isTrue.data = TSFE:xhtmlDoctype
+       }
+       wrap = <div class="divider">|</div>
+       prefixComment = 2 | Div element
+}
+
+
+# ****************
+# CType: html
+# ****************
+# This truely IS a content object, launched from inside the PHP class of course.
+# Should be a complete copy from the old static template "content (default)"
+tt_content.html = TEXT
+tt_content.html {
+       field = bodytext
+
+       editIcons = tt_content:bodytext
+       editIcons.beforeLastTag = 1
+       editIcons.iconTitle.data = LLL:EXT:css_styled_content/pi1/locallang.xml:eIcon.html
+
+       prefixComment = 2 | Raw HTML content:
+}
+
+
+# ****************
+# Default error msg:
+# ****************
+tt_content.default = TEXT
+tt_content.default {
+       field = CType
+       wrap = <p style="background-color: yellow;"><b>ERROR:</b> Content Element type "|" has no rendering definition!</p>
+
+       prefixComment = 2 | Unknown element message:
+}
+
+# *********************************************************************
+# ACCESSIBILTY MODE
+# *********************************************************************
+
+
+
+
+
+
+
+plugin.tx_cssstyledcontent._CSS_DEFAULT_STYLE (
+       /* Headers */
+       .csc-header-alignment-center { text-align: center; }
+       .csc-header-alignment-right { text-align: right; }
+       .csc-header-alignment-left { text-align: left; }
+
+       div.csc-textpic-responsive, div.csc-textpic-responsive * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;  }
+
+       /* Clear floats after csc-textpic and after csc-textpic-imagerow */
+       div.csc-textpic, div.csc-textpic div.csc-textpic-imagerow, ul.csc-uploads li { overflow: hidden; }
+
+       /* Set padding for tables */
+       div.csc-textpic .csc-textpic-imagewrap table { border-collapse: collapse; border-spacing: 0; }
+       div.csc-textpic .csc-textpic-imagewrap table tr td { padding: 0; vertical-align: top; }
+
+       /* Settings for figure and figcaption (HTML5) */
+       div.csc-textpic .csc-textpic-imagewrap figure, div.csc-textpic figure.csc-textpic-imagewrap { margin: 0; display: table; }
+
+       /* Captions */
+       figcaption.csc-textpic-caption { display: table-caption; }
+       .csc-textpic-caption { text-align: left; caption-side: bottom; }
+       div.csc-textpic-caption-c .csc-textpic-caption, .csc-textpic-imagewrap .csc-textpic-caption-c { text-align: center; }
+       div.csc-textpic-caption-r .csc-textpic-caption, .csc-textpic-imagewrap .csc-textpic-caption-r { text-align: right; }
+       div.csc-textpic-caption-l .csc-textpic-caption, .csc-textpic-imagewrap .csc-textpic-caption-l { text-align: left; }
+
+       /* Float the columns */
+       div.csc-textpic div.csc-textpic-imagecolumn { float: left; }
+
+       /* Border just around the image */
+       {$styles.content.imgtext.borderSelector} {
+               border: {$styles.content.imgtext.borderThick}px solid {$styles.content.imgtext.borderColor};
+               padding: {$styles.content.imgtext.borderSpace}px {$styles.content.imgtext.borderSpace}px;
+       }
+
+       div.csc-textpic .csc-textpic-imagewrap img { border: none; display: block; }
+
+       /* Space below each image (also in-between rows) */
+       div.csc-textpic .csc-textpic-imagewrap .csc-textpic-image { margin-bottom: {$styles.content.imgtext.rowSpace}px; }
+       div.csc-textpic .csc-textpic-imagewrap .csc-textpic-imagerow-last .csc-textpic-image { margin-bottom: 0; }
+
+       /* colSpace around image columns, except for last column */
+       div.csc-textpic-imagecolumn, td.csc-textpic-imagecolumn .csc-textpic-image { margin-right: {$styles.content.imgtext.colSpace}px; }
+       div.csc-textpic-imagecolumn.csc-textpic-lastcol, td.csc-textpic-imagecolumn.csc-textpic-lastcol .csc-textpic-image { margin-right: 0; }
+
+       /* Add margin from image-block to text (in case of "Text & Images") */
+       div.csc-textpic-intext-left .csc-textpic-imagewrap,
+       div.csc-textpic-intext-left-nowrap .csc-textpic-imagewrap {
+               margin-right: {$styles.content.imgtext.textMargin}px;
+       }
+       div.csc-textpic-intext-right .csc-textpic-imagewrap,
+       div.csc-textpic-intext-right-nowrap .csc-textpic-imagewrap {
+               margin-left: {$styles.content.imgtext.textMargin}px;
+       }
+
+       /* Positioning of images: */
+
+       /* Center (above or below) */
+       div.csc-textpic-center .csc-textpic-imagewrap, div.csc-textpic-center figure.csc-textpic-imagewrap { overflow: hidden; }
+       div.csc-textpic-center .csc-textpic-center-outer { position: relative; float: right; right: 50%; }
+       div.csc-textpic-center .csc-textpic-center-inner { position: relative; float: right; right: -50%; }
+
+       /* Right (above or below) */
+       div.csc-textpic-right .csc-textpic-imagewrap { float: right; }
+       div.csc-textpic-right div.csc-textpic-text { clear: right; }
+
+       /* Left (above or below) */
+       div.csc-textpic-left .csc-textpic-imagewrap { float: left; }
+       div.csc-textpic-left div.csc-textpic-text { clear: left; }
+
+       /* Left (in text) */
+       div.csc-textpic-intext-left .csc-textpic-imagewrap { float: left; }
+
+       /* Right (in text) */
+       div.csc-textpic-intext-right .csc-textpic-imagewrap { float: right; }
+
+       /* Right (in text, no wrap around) */
+       div.csc-textpic-intext-right-nowrap .csc-textpic-imagewrap { float: right; }
+
+       /* Left (in text, no wrap around) */
+       div.csc-textpic-intext-left-nowrap .csc-textpic-imagewrap { float: left; }
+
+       div.csc-textpic div.csc-textpic-imagerow-last, div.csc-textpic div.csc-textpic-imagerow-none div.csc-textpic-last { margin-bottom: 0; }
+
+       /* Browser fixes: */
+
+       /* Fix for unordered and ordered list with image "In text, left" */
+       .csc-textpic-intext-left ol, .csc-textpic-intext-left ul { padding-left: 40px; overflow: auto; }
+
+       /* File Links */
+       ul.csc-uploads { padding: 0; }
+       ul.csc-uploads li { list-style: none outside none; margin: 1em 0; }
+       ul.csc-uploads img { float: left; padding-right: 1em; vertical-align: top; }
+       ul.csc-uploads span { display: block; }
+       ul.csc-uploads span.csc-uploads-fileName { text-decoration: underline; }
+
+       /* Table background colors: */
+
+       table.contenttable-color-1 { background-color: {$styles.content.table.backgroundColor.1}; }
+       table.contenttable-color-2 { background-color: {$styles.content.table.backgroundColor.2}; }
+       table.contenttable-color-240 { background-color: {$styles.content.table.backgroundColor.240}; }
+       table.contenttable-color-241 { background-color: {$styles.content.table.backgroundColor.241}; }
+       table.contenttable-color-242 { background-color: {$styles.content.table.backgroundColor.242}; }
+       table.contenttable-color-243 { background-color: {$styles.content.table.backgroundColor.243}; }
+       table.contenttable-color-244 { background-color: {$styles.content.table.backgroundColor.244}; }
+)
+