EXT: CSS Styled Content

Extension Key: css_styled_content

Language: en

Keywords: forAdmins, forDevelopers, forIntermediates, forAdvanced

Copyright 2000-2010, Susanne Moog, <typo3@susannemoog.de>

This document is published under the Open Content License

available from http://www.opencontent.org/opl.shtml

The content of this document is related to TYPO3

- a GNU/GPL CMS/Framework available from www.typo3.org

Table of Contents

EXT: CSS Styled Content	1

Introduction	3

What does it do?	3

Modern content element rendering	3

The Content Rendering & CSS Styled Content	3

Installation	5

Extension Manager	5

Web > Template	5

Inserting content into your template	5

How to ...	7

… use the Constant Editor for configuration	7

… use the Object Browser to change a single value	7

Configuration	9

Reference	9

Constants	9

content	9

styles.content	9

styles.content.links	9

styles.content.imgtext	9

styles.content.imgtext.linkWrap	10

styles.content.uploads	10

styles.content.mailform	11

styles.content.loginform	11

styles.content.searchform	11

styles.content.searchresult	11

styles.content.media	11

Setup	11

styles.content	11

styles.content.get	12

styles.content.editPanelPage	12

lib.parsefunc_RTE	12

lib.stdheader	13

tt_content	14

stdWrap.innerWrap	15

stdWrap.innerWrap2	17

stdWrap.prepend	17

stdWrap.editPanel	17

Rendering the content elements	18

Header	18

Code	18

Text	18

Code	18

Image / Text with Image	19

Code	19

Reference	20

Bullet list	23

Code	23

Table	24

Code	24

Reference	24

Filelinks / Uploads	25

Code	25

Reference	25

Media	26

Reference	27

Mailform	29

Code	29

Search	30

Code	30

Login	31

Code	31

Menu / Sitemap	32

Code	32

Insert Records (shortcut)	34

Code	34

Insert Plugin (List)	35

Code	35

Divider	35

Code	36

HTML	36

Code	36

Default Message	36

Code	36

Out of the box CSS styling	37

Code	37

About this document	40

Introduction

What does it do?

The extension provides a static TypoScript template file and additional resources for CSS based, XHTML compliant rendering of content elements in TYPO3.

As this document covers only a general overview and does not explain every line of TypoScript please refer to the TSref for further explanations.

Modern content element rendering

From the birth of TYPO3 content elements have been rendered by the static template called “content (default)”. This was mainly based on font-tags for styling and tables for positioning which was needed to achieve the visual constructions of the old versions of web browsers. However, with the widespread acceptance of CSS “content (default)” is obsolete and deprecated. This extension aims to provide a complete substitution of “content (default)”'s content rendering.

The objectives have been to:

use standard XHTML compliant tags for rendering, styled by CSS, tagged by various classes

reduce the amount of TypoScript Setup code, in particular cut down redundancy; This will make adjustments easier and more clean.

reduce the amount of TypoScript constants to a necessary minimum; This makes configuration more “no-nonsense” since most layout related stuff is in the style sheets now.

use PHP for special rendering where a TypoScript implementation becomes too complex (this was the case for bullet lists, tables and file link elements)

use TypoScript for what it does absolutely best. This includes menus (HMENU etc) and image manipulation (IMAGE, IMGTEXT), simple wrapping operations, parsing of content and rendering of some standard elements like forms, file links etc. And of course the base-setup of page objects, frame sets etc. (which is not affected at all by this plugin). And being a generally brilliant way to pass parameters to PHP from TYPO3's backend.

use non-TYPO3 specific tags with the RTE: Only the link-tags are preserved as a concept. Bullet lists, tables and headers are now native HTML stored in the database. Still simple content lines are dissolved into lines with no <P> tags wrapped around.

achieve full XHTML-transitional compliance.

preserve backwards compatibility where it wouldn't compromise quality and modernity.

These are the more technical specs:

A new static template file is provided which works as a substitute for “content (default)”. A certain number of “styles.content.xxx” objects are preserved as well and it maintains some constants from those templates. No dependencies on any static template record at all. The new static template file contains a TLO “tt_content” which is a CASE cObject just like in “content (default)”.

All rendering of the content elements is done in TypoScript except for the Content Elements “Table”, “Bullet list” and “File links” which are rendered by a USER cObject calling methods from “tx_cssstyledcontent_pi1” for rendering.

TYPO3 specific tags: skipping typolist, typohead, typocode tags (using native HTML from RTE instead). Preserving the <LINK> tag.

The position of the parseFunc object has changed to “lib.parseFunc” and with TYPO3 versions > 3.6.0RC1 parseFunc can be referenced (which avoids redundancy!). Backwards compatibility with “added” custom tags should be available, but might fail depending on implementation.

The “lib.stdheader” is also largely preserved in structure, which means the “lib.stdheader.10 = CASE “ object is still there as a true content object, thus backwards compatible for any added header-types.

RTE based on <P>, <Hx>-tags, images, tables, bulletlists (<OL>/<UL>). Only <LINK>-tags are converted to/from <A>-tags.

The Content Rendering & CSS Styled Content

Content in TYPO3 is rendered by a so-called render object. CSS Styled Content mainly provides the render object for rendering content from the tt_content table. In TypoScript this means it defines the object tt_content.[renderingDefinitions]. You can always have a look at your configuration with the help of the TS Object Browser. With the rendering configuration you can decide, how your content elements are wrapped, for example if a headline should be wrapped in a <h1> or in<div><h1> or if all of your content elements should be wrapped by a default <div> for styling. CSS Styled Content tries to make it easier for you by providing sensible defaults for wraps, link targets, image rendering and more.

Installation

Extension Manager

The extension is normally installed by default – you can check it in the extension manager.

Web > Template

To use the default rendering definitions CSS Styled Content provides you have to add the static template to your TypoScript template.

Normally you should choose the template “CSS Styled Content”. If you upgraded from a previous TYPO3 version and notice that something breaks your layout – try the template corresponding to your version (for example “CSS Styled Content TYPO3 v4.2”).

Note: The upgrade wizard in the install tool does automatically insert the static template corresponding to your compatibility version.

Inserting content into your template

To get the different columns from the backend displayed in the frontend you can use predefined CONTENT objects. Normally you would do something like the following to get the content from the “Normal” column into your template:

page = PAGE

page.10 = TEMPLATE

page.10 {

file = your/html/template.html

subparts {

MAIN_CONTENT = CONTENT

MAIN_CONTENT {

table = tt_content

select {

orderBy = sorting

where = colPos=0

languageField = sys_language_uid

}

}

}

}

Now with CSS Styled Content you can shorten that code quite a bit:

page = PAGE

page.10 = TEMPLATE

page.10 {

file = your/html/template.html

subparts {

MAIN_CONTENT < styles.content.get

}

}

“styles.content.get” is one of the predefined CONTENT objects, that renders the “normal” column. The following predefined CONTENT objects exist:

CONTENT object	Column
styles.content.get	Normal
styles.content.getLeft	Left
styles.content.getRight	Right
styles.content.getBorder	Border

How to ...

… use the Constant Editor for configuration

Basic configuration for CSS Styled Content is done using the constant editor. Go to the Web > Template module on your root page and switch to the Constant Editor. Choose the category “CONTENT”. You'll now get a list of possible constants and their descriptions. The descriptions should be pretty self explaining.

… use the Object Browser to change a single value

If you want to change a certain value – like a wrap around an element – you should use the TypoScript Object Browser. Go to the Web > Template module and choose “TypoScript Object Browser”. Now expand the tt_content tree to the element you want to change (for example the “div” [Divider] element):

On pressing “Update” the value is written into the setup field of your current template. If you edit quite a few values you should later manually cleanup the setup field (setting brakes for better readability, deleting double entries...).

Configuration

Reference

In this section the various CSS styled content specific constants are explained. Later on you will find a detailed description of the TypoScript setup. Please note that for the most parts only things specific for CSS Styled Content are explained in detail, normal TS options aren't explained (much).

Constants

Property:	Data type:	Description:	Default:
PAGE_TARGET	string	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"	

content

Property:	Data type:	Description:	Default:
defaultHeaderType	int	The number of the header layout to be used by default	1
pageFrameObj	string	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!	
shortcut.tables			tt_content, tt_address, tt_links, tt_guest, tt_board, tt_calender, tt_products, tt_news, tt_rating, tt_poll
spaceBefore	int	Space before each content element (pixels)	0
spaceAfter	int	Space after each content element (pixels)	0

[content.][]

styles.content

Property:	Data type:	Description:	Default:
getNews.newsPid	int	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!	0

[styles.][content.][]

styles.content.links

Property:	Data type:	Description:	Default:
extTarget	string	Target for external links	_blank
target	string	Default target for links	{$PAGE_TARGET}
allowTags	string		b,i,u,a,img,br,div,center,pre,font,hr,sub,sup,p,strong,em,li,ul,ol,blockquote,strike,del,ins,span,h1,h2,h3,h4,h5,h6,address

[styles.][content.][links.]

styles.content.imgtext

Property:	Data type:	Description:	Default:
maxW	int	This indicates that maximum number of pixels (width) a block of images inserted as content is allowed to consume.	600
maxWInText	int	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.	
captionSplit	bool		0
imageTextSplit	bool	If this is set, then the image text (caption, alt, title, longdesc) will be split by each line and they will appear on the corresponding images in the image list.	1
emptyTitleHandling	string	How the 'title' attribute will 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 use of alt=”” text as title use "useAlt".	removeAttr
titleInLink	bool	Do you want the 'title' attribute to be added to the surrounding <a> tag, if present? Recommended for accessibility is "true".	1
titleInLinkAndImg	bool	If you have the title in the <a>-tag (titleInLink=1), you don't get the 'title' in the <img>-tag. IE6 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 IE6, set this to "true".	0
colSpace	int	Horizontal distance between images in content elements of type "Image" or "Text w/Image". If you change this manually in your CSS, you need to adjust this setting accordingly.	10
rowSpace	int	Vertical distance after image rows in content elements of type "Image" or "Text w/Image". If you change this manually in your CSS, you need to adjust this setting accordingly.	5
textMargin	int	Horizontal distance between images and text in content elements of type "Text w/Image".	10
borderColor	string	Border color of images in content elements when "Border"-option for element is set. Has to be either a defined color (like black, lime, maroon) or a hexadecimal color code (like #FF00FF)	black
borderThick	int	Thickness (in pixels) of border around images in content elements when "Border"-option for element is set.	2
borderSpace	int	Padding (in pixels) left and right to the image, around the border.	0
borderSelector	string	The selector where the image border is applied to. 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'.	DIV.{$borderClass} DIV.csc-textpic-imagewrap .csc-textpic-image IMG
borderClass	string	The name of the CSS class inserted and used for creating image borders	csc-textpic-border
separateRows	bool	Whether images should be rendered/wrapped in separated rows, e.g. inside a DIV.csc-textpic-imagerow element	1
linkWrap	See below		

[styles.][content.][imgtext.]

styles.content.imgtext.linkWrap

Property:	Data type:	Description:	Default:
width	int+		800m
height	int+		600m
effects			

[styles.][content.][imgtext.][linkWrap.]

styles.content.uploads

Property:	Data type:	Description:	Default:
jumpurl_secure			
jumpurl_secure_mimeTypes			pdf=application/pdf, doc=application/msword
jumpurl			
filesizeByteLabels	string	The labels for bytes, kilobytes, megabytes and gigabytes	" | K| M| G"

[styles.][content.][uploads.]

styles.content.mailform

Property:	Data type:	Description:	Default:
target	string	The mailform target	{$PAGE_TARGET}
goodMess	string	This is the message (if any) that is popped-up (JavaScript) when a user clicks "send" in an email-form	
badMess	string	This is the message that is popped-up (JavaScript) when a user has NOT filled required fields in an email-form	

[styles.][content.][mailform.]

styles.content.loginform

Property:	Data type:	Description:	Default:
target	string	The login form target	_top
goodMess	string	This is the message (if any) that is popped-up (JavaScript) when a user logs in as a front-end user	
pid	int	Enter the page-uid number (PID) of the sysFolder where you keep your fe_users that are supposed to login on this site. This setting is necessary, if login is going to work (and you aren't using “felogin”)!	

[styles.][content.][loginform.]

styles.content.searchform

Property:	Data type:	Description:	Default:
goodMess	string	This is the message (if any) that is popped-up (JavaScript) when a user performs a search	

[styles.][content.][searchform.]

styles.content.searchresult

Property:	Data type:	Description:	Default:
resultTarget	string		{$PAGE_TARGET}
target	string		{$PAGE_TARGET}

[styles.][content.][searchresult.]

styles.content.media

Property:	Data type:	Description:	Default:
videoPlayer	string	configure the path to the video player	typo3/contrib/flashmedia/flvplayer.swf
defaultVideoWidth	int	define the default width for the media video (in pixels)	600
defaultVideoHeight	int	define the default height for the media video (in pixels)	400
audioPlayer	string	configure the path to the audio player	typo3/contrib/flashmedia/player.swf
defaultAudioWidth	int	define the default width for the media audio (in pixels)	300
defaultAudioHeight	int	define the default height for the media audio (in pixels)	30

[styles.][content.][searchform.]

Setup

styles.content

Property:	Data type:	Description:	Default:
get	cObj	Predefined CONTENT objects for getting content from columns. Column: Normal	CONTENT
getRight	cObj	Predefined CONTENT objects for getting content from columns. Column: Right	CONTENT
getLeft	cObj	Predefined CONTENT objects for getting content from columns. Column: Left	CONTENT
getBorder	cObj	Predefined CONTENT objects for getting content from columns. Column: Border	CONTENT
getNews	cObj	Predefined CONTENT object for getting News from a special page (defined in Constants)	CONTENT
editPanelPage	cObj	Predefined EDITPANEL object for displaying a panel to edit the page (frontend editing).	EDITPANEL

[styles.][content.]

styles.content.get

Property:	Data type:	Description:	Default:
	cObj	styles.content.get is from type CONTENT	CONTENT
table	string	The content table – in a normal TYPO3 installation this should be tt_content	tt_content
select.orderBy	string	The field name to sort the content by. In TYPO3 if available the column named “sorting”.	sorting
select.where	string	Where clause for the select. Used to define from which column content is fetched. Example: colPos = 0 (0 = normal, 1 = left, 2 = right, 3 = border)	colPos = 0 [get] colPos = 1 [getLeft] colPos = 2 [getRight] colPos = 3 [getBorder]
select.languagefield	string	Field containing the id of the translated record.	sys_language_uid
select.pidInList	string	Only set for getNews (else it's automatically “this”). The page id to fetch content from.	{$styles.content.getNews.newsPid}

[styles.][content.][get] / [styles.][content.][getRight] / [styles.][content.][getLeft] / [styles.][content.][getBorder] / [styles.][content.][getNews]

Code:

styles.content.get = CONTENT

styles.content.get {

table = tt_content

select.orderBy = sorting

select.where = colPos=0

select.languageField = sys_language_uid

}

styles.content.editPanelPage

Property:	Data type:	Description:	Default:
allow	string	Allowed actions	toolbar, move, hide
label.data	string	Language label	LLL:EXT:css_styled_content/pi1/locallang.xml:eIcon.page
label.wrap	string	Wrap around the label	|&nbsp;<b>%s</b>

[styles.][content.][editPanelPage]

Code:

styles.content.editPanelPage = EDITPANEL

styles.content.editPanelPage {

allow = toolbar,move,hide

label.data = LLL:EXT:css_styled_content/pi1/locallang.xml:eIcon.page

label.wrap = |&nbsp;<b>%s</b>

}

lib.parsefunc_RTE

The lib.parsefunc_RTE is responsible for rendering the RTE content. It's mainly a copy of lib.parsefunc with some modifications.

Code:

# 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 {

# Processing <table> and <blockquote> blocks separately

externalBlocks = table, blockquote, ol,ul, div

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 {

default.callRecursive=1

addChr10BetweenParagraphs=1

}

div.stripNL = 1

div.callRecursive = 1

}

nonTypoTagStdWrap.encapsLines {

encapsTagList = p,pre,h1,h2,h3,h4,h5,h6

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

}

}

lib.stdheader

With the lib.stdheader object the headlines are rendered. Here you can influence how the different header layouts will appear on your site.

The Code explained:

# Content header:

lib.stdheader = COA

lib.stdheader {

# Create align style-attribute for <Hx> tags

# If you choose a header position when inserting a header, this is where the position is rendered

2 = LOAD_REGISTER

2.headerStyle.field = header_position

2.headerStyle.required = 1

2.headerStyle.noTrimWrap = | style="text-align:|;"|

# Create class="csc-firstHeader" attribute for <Hx> tags

# The first header on a page gets an extra css class, so you could for example give it a

# different margin

3 = LOAD_REGISTER

3.headerClass = csc-firstHeader

3.headerClass.if.value=1

3.headerClass.if.equals.data = cObj:parentRecordNumber

3.headerClass.noTrimWrap = | class="|"|

# Date format:

# You can insert the date from the content element in the headline. This is done automatically if

# the date field is set with the following TS

5 = TEXT

5.field = date

5.if.isTrue.field = date

5.strftime = %x

5.wrap = <p class="csc-header-date">|</p>

5.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

# should the text be htmlSpecialChard (converting f.e. ä to &auml;)

htmlSpecialChars = 1

# the field for the possible link

typolink.parameter.field = header_link

}

# this is the field determining how the headline is rendered (“layout”)

10.key.field = header_layout

# if the field is empty choose the default header type (defined in constants)

10.key.ifEmpty = {$content.defaultHeaderType}

10.key.ifEmpty.override.data = register: defaultHeaderType

# render layout 1

10.1 = TEXT

10.1.current = 1

10.1.insertData = 1

10.1.fontTag = <h1{register:headerStyle}{register:headerClass}>|</h1>

# render layout 2

10.2 < .10.1

10.2.fontTag = <h2{register:headerStyle}{register:headerClass}>|</h2>

# render layout 3

10.3 < .10.1

10.3.fontTag = <h3{register:headerStyle}{register:headerClass}>|</h3>

# render layout 4

10.4 < .10.1

10.4.fontTag = <h4{register:headerStyle}{register:headerClass}>|</h4>

# render layout 5

10.5 < .10.1

10.5.fontTag = <h5{register:headerStyle}{register:headerClass}>|</h5>

# Pops the used registers off the stack:

98 = RESTORE_REGISTER

99 = RESTORE_REGISTER

# Post-processing:

# only render the tags if there is a headline to render

stdWrap.fieldRequired = header

# don't render the headline if header layout “hidden” (value=100) is selected

stdWrap.if {

equals.field = header_layout

value = 100

negate = 1

}

# define the editing possibilities (frontend editing)

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

# wrap the header – with a counter so you can specifically assign styles to the nth element

stdWrap.dataWrap = <div class="csc-header csc-header-n{cObj:parentRecordNumber}">|</div>

# the prefix comment of the header

stdWrap.prefixComment = 2 | Header:

}

tt_content

This is the heart of CSS Styled Content. The CASE object for rendering the different content element types.

tt_content >

tt_content = CASE

# the field deciding which rendering to choose is CType (Containing for example strings like “textpic”,

# “text”, “div”...

tt_content.key.field = CType

stdWrap.innerWrap

The innerWrap part is responsible for the rendering of section frames. This is the definition of what happens if you choose a frame in a content element.

The Code explained:

innerWrap.cObject = CASE

innerWrap.cObject {

# render frames depending on the selected section frame

key.field = section_frame

# define the default frame – this is used as base for most of the others

default = COA

default {

# defines the starting div with the content element uid (that uid is used as anchor if

# you link directly to a content element)

# no id is inserted if the content element is of type “divider”

10 = TEXT

10 {

value = <div id="c{field:uid}"

override.cObject = TEXT

override.cObject {

value = <div

if.value = div

if.equals.field = CType

}

insertData = 1

}

# the css class to insert – the default class is csc-default. As most frames are just

# using different css classes you can easily get your own frames with copying the

# default one and changing this class

15 = TEXT

15 {

value = csc-default

noTrimWrap = | class="|" |

required = 1

}

# COA for rendering spaceBefore and spaceAfter content elements

20 = COA

20 {

# spaceBefore: The value for spaceBefore from the constant editor is added

# to the value of the spaceBefore from the content element and then inserted as

# margin-top in the frame div.

10 = COA

10 {

10 = TEXT

10 {

value = {$content.spaceBefore}

wrap = |+

if.isTrue = {$content.spaceBefore}

}

20 = TEXT

20 {

field = spaceBefore

}

stdWrap {

prioriCalc = intval

wrap = margin-top:|px;

required = 1

ifEmpty.value =

}

}

# spaceAfter: The value for spaceAfter from the constant editor is added

# to the value of the spaceAfter from the content element and then inserted as

# margin-bottom in the frame div.

20 = COA

20 {

10 = TEXT

10 {

value = {$content.spaceAfter}

wrap = |+

if.isTrue = {$content.spaceAfter}

}

20 = TEXT

20 {

field = spaceAfter

}

stdWrap {

prioriCalc = intval

wrap = margin-bottom:|px;

required = 1

ifEmpty.value =

}

}

# the margins are added in a style attribute

stdWrap.noTrimWrap = | style="|" |

stdWrap.required = 1

}

# the closing part of the wrapper div

30 = TEXT

30.value = >|</div>

}

# the first section frame rendered (invisible).

# you can see here, that only the css class is changed compared to the default rendering	1 =< tt_content.stdWrap.innerWrap.cObject.default

1.15.value = csc-frame csc-frame-invisible

# frame: ruler before

5 =< tt_content.stdWrap.innerWrap.cObject.default

5.15.value = csc-frame csc-frame-rulerBefore

# frame: ruler after

6 =< tt_content.stdWrap.innerWrap.cObject.default

6.15.value = csc-frame csc-frame-rulerAfter

# frame: indent

10 =< tt_content.stdWrap.innerWrap.cObject.default

10.15.value = csc-frame csc-frame-indent

# frame: indent 33/66

11 =< tt_content.stdWrap.innerWrap.cObject.default

11.15.value = csc-frame csc-frame-indent3366

# frame: indent 66/33

12 =< tt_content.stdWrap.innerWrap.cObject.default

12.15.value = csc-frame csc-frame-indent6633

# frame: frame1

20 =< tt_content.stdWrap.innerWrap.cObject.default

20.15.value = csc-frame csc-frame-frame1

# frame: frame2

21 =< tt_content.stdWrap.innerWrap.cObject.default

21.15.value = csc-frame csc-frame-frame2

}

stdWrap.innerWrap2

Generates the link to top if the editor activated it in the content element.

Code:

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

stdWrap.prepend

Used to prepend the localized uid of the content element (in case it is translated).

Code:

prepend = TEXT

prepend.dataWrap = <a id="c{field:_LOCALIZED_UID}"></a>

prepend.if.isTrue.field = _LOCALIZED_UID

stdWrap.editPanel

Defines the edit panels for the content elements.

Code:

editPanel = 1

editPanel {

allow = move,new,edit,hide,delete

line = 5

label = %s

onlyCurrentPid = 1

previewBorder = 4

edit.displayRecord = 1

}

Rendering the content elements

Header

Code

tt_content.header = COA

tt_content.header {

# this is mainly just a copy from lib.stdheader – see that part for the specific header

# rendering information

10 = < lib.stdheader

# rendering the subheader

20 = TEXT

20 {

field = subheader

required = 1

# the wrap around the subheader, the css class is adjusted depending on the layout field

dataWrap = <p class="csc-subheader csc-subheader-{field:layout}">|</p>

htmlSpecialChars = 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:

}

}

Text

Code

tt_content.text = COA

tt_content.text {

# the headline of the text element gets rendered like every headline

10 = < lib.stdheader

# rendering the text field

20 = TEXT

20 {

field = bodytext

required = 1

# passing the content of the element through the parseFunc_RTE we defined earlier

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:

}

}

Image / Text with Image

Code

tt_content.image = COA

tt_content.image.10 = < lib.stdheader

tt_content.image.20 = USER

tt_content.image.20 {

userFunc = tx_cssstyledcontent_pi1->render_textpic

As you can see, the image is rendered by a user function “tx_cssstyledcontent_pi1->render_textpic”. You can have a look at the reference for possible rendering parameters:

Reference

Property:	Data type:	Description:	Default:
text	->CARRAY /stdWrap	Use this to import / generate the content, that should flow around the imageblock.	
textPos	int / stdWrap	Textposition: bit[0-2]: 000 = centre, 001 = right, 010 = left bit[3-5]: 000 = over, 001 = under, 010 text 0 - Above: Centre 1 - Above: Right 2 - Above: Left 8 - Below: Centre 9 - Below: Right 10 - Below: Left 17 - In Text: Right 18 - In Text: Left 25 - In Text: Right (no wrap) 26 - In Text: Left (no wrap)	
imgList	list of imagefiles / stdWrap	list of images from ".imgPath" Example: This imports the list of images from tt_content's image-field "imgList.field = image"	field = image
imgPath	path /stdWrap	Path to the images Example: "uploads/pics/"	uploads/pics/
imgMax	int /stdWrap	max number of images	0 [all]
imgStart	int /stdWrap	start with image-number ".imgStart"	0
imgObjNum	imgObjNum +optionSplit	Here you define which IMAGE-cObjects from the array "1,2,3,4..." should render which image. "current" is set to the image-filename. Example: "imgObjNum = 1 |*||*| 2": If your “.imgList” contains 3 images, this would render the first two images with "1. ..." and the last image with "2. ...".	1
1,2,3,4,...	->IMAGE (cObject)	Rendering of the individual images The register "IMAGE_NUM" is set with the number of image being rendered for each rendering of a image-object. Starting with zero. The image-object should not be of type GIFBUILDER! Important: "file.import.current = 1" fetches the name of the images!	
caption	->CARRAY /stdWrap	Caption	
captionAlign	align /stdWrap	Caption alignment	field = imagecaption_position
imageTextSplit	boolean	If this is set, the caption/alttext/title/longdescURL text is split by the character (or string) from ".token" , and every item is rendered to the accordant image in the image block.	
border	boolean /stdWrap	If true, a border is generated around the images.	field = imageborder
borderCol	HTML-color /stdWrap	Color of the border, if ".border" is set. This is used just to create the CSS class that will be added to an image block that needs a border. The border itself will have to be specified in CSS. See CSS section later.	black
borderThick	pixels /stdWrap	Width of the border around the pictures This is used just to create the CSS class that will be added to an image block that needs a border. The border itself will have to be specified in CSS. See CSS section later.	2
cols	int /stdWrap	Columns	field = imagecols
rows	int /stdWrap	Rows (higher priority than "cols")	
noRows	boolean /stdWrap	If set, the rows are not divided by table-rows. Thus images are more nicely shown if the height differs a lot (normally the width is the same!)	field = image_noRows
noCols	boolean /stdWrap	If set, the columns are not made in the table. The images are all put in one row separated by a clearer to space them apart. If noRows is set, noCols will be unset. They cannot be set simultaneously.	
colSpace	int /stdWrap	Space between columns. If you use the default CSS this will be added automatically as margin-right to the images.	
maxW	int /stdWrap	Max width of the image-table. This will scale images not in the right size! Takes the number of columns into account!	
maxWInText	int /stdWrap	Max width of the image-table, if the text is wrapped around the image-table (on the left or right side). This will scale images not in the right size! Takes the number of columns into account!	50% of maxW
equalH	int /stdWrap	If this value is greater than zero, it will secure that images in a row have the same height. The width will be calculated. If the total width of the images raises above the "maxW"-value of the table the height for each image will be scaled down equally so that the images still have the same height but are within the limits of the totalWidth. Please note that this value will override the properties "width", "maxH", "maxW", "minW", "minH" of the IMAGE-objects generating the images. Furthermore it will override the "noRows"-property and generate a table with no columns instead!	
colRelations	string /stdWrap	This value defines the width-relations of the images in the columns of IMGTEXT. The syntax is "[int] : [int] : [int] : ..." for each column. If there are more imagecolumns than figures in this value, it's ignored. If the relation between two of these figures exceeds 10, this function is ignored. It works only fully if all images are downscaled by their maxW-definition. Example: If 6 images are placed in three columns and their width's are high enough to be forcibly scaled, this value will scale the images in the to be eg. 100, 200 and 300 pixels from left to right 1 : 2 : 3	
image_compression	int /stdWrap	Image Compression: 0= Default 1= Don't change! (removes all parameters for the image_object!!) (adds gif-extension and color-reduction command) 10= GIF/256 11= GIF/128 12= GIF/64 13= GIF/32 14= GIF/16 15= GIF/8 (adds jpg-extension and quality command) 20= IM: -quality 100 21= IM: -quality 90 <=> Photoshop 60 (JPG/Very High) 22= IM: -quality 80 (JPG/High) 23= IM: -quality 70 24= IM: -quality 60 <=> Photoshop 30 (JPG/Medium) 25= IM: -quality 50 26= IM: -quality 40 (JPG/Low) 27= IM: -quality 30 <=> Photoshop 10 28= IM: -quality 20 (JPG/Very Low) The default ImageMagick quality seems to be 75. This equals Photoshop quality 45. Images compressed with ImageMagick with the same visual quality as a Photoshop-compressed image seems to be 50% bigger in file size!! NOTE: Works ONLY if IMAGE-obj is NOT GIFBUILDER	
image_effects	int /stdWrap	Adds these IM/GM commands to the parameters for scaling. This function has no effect if "image_compression" above is set to 1!! 1 => "-rotate 90", 2 => "-rotate 270", 3 => "-rotate 180", 10 => "-colorspace GRAY", 11 => "-sharpen 70", 20 => "-normalize", 23 => "-contrast", 25 => "-gamma 1.3", 26 => "-gamma 0.8" NOTE: Works ONLY if IMAGE-obj is NOT GIFBUILDER	
image_frames	Array + .key /stdWrap	Frames: .key points to the frame used. ".image_frames.x" is imgResource-mask (".m")properties which will override to the [imgResource].m properties of the imageObjects. This is used to mask the images into a frame. See how it's done in the default configuration and IMGTEXT in the static_template-table. Example: 1 { mask = media/uploads/darkroom1_mask.jpg bgImg = GIFBUILDER bgImg { XY = 100,100 backColor = {$bgCol} } bottomImg = GIFBUILDER bottomImg { XY = 100,100 backColor = black } bottomImg_mask = media/uploads/darkroom1_bottom.jpg } NOTE: This cancels the jpg-quality settings sent as ordinary ".params" to the imgResource. In addition the output of this operation will always be jpg or gif! NOTE: Works ONLY if IMAGE-obj is NOT GIFBUILDER	
editIcons	string	(See stdWrap.editIcons)	
stdWrap	->stdWrap		
renderMethod	string /stdWrap	The rendering method to use for this content object. The name of the method must be one of the entries in the rendering setting.	
fallbackRendering	cObj	If no rendering is specified, this is the fallback that will be used. Can be used to overwrite the rendering method in specific "edge" situations (e.g. when rendering only one image, or when rendering a list of files without captions). This cObject will be called once the major "rendering" type is defined (dl, ul, div) and when the pre-processor already has gathered some information about how many images to render (register:imageCount) and if the current rendering will output a global caption for the whole image block or split captions are needed (register:renderGlobalCaption). Using this information the fallbackRendering can output some string, which will overwrite the default rendering method (e.g. dl, ul, div and newly introduced "simple", which renders least structure, intended for one image only). The default css_styled_content setup in TYPO3 v4.3 provides these fallbacks: with rendering=dl,ul,div, a single image fallbacks to rendering=simple with rendering=dl, a list of images with no caption fallbacks to rendering=ul with rendering=dl, a list of images with one "global" caption (no splitCaption configured) fallbacks to rendering=ul	dl
rendering	Array of IMGTEXT properties	In this array, a list of renderers can be created from which the user chooses which one will render each “Text with image” content object. The settings in each entry can override settings from this table, and there is also a set of stdWrap's that allows you to create the XHTML structure of your choosing for rendering the imageblock. In the standard installation the rendering will be loaded from the lib.imgtextrendering TypoScript object, so you might want to change/add stuff here. Example: tt_content.textpic.20.rendering { dl { imageRowStdWrap.wrap = <div class="csi-imagerow" style="width:{register:rowwidth}px;"> | </div> imageRowStdWrap.insertData = 1 noRowsStdWrap.wrap = oneImageStdWrap.wrap = <dl class="csi-image" style="width:{register:imagewidth}px;"> | </dl> oneImageStdWrap.insertData = 1 imgTagStdWrap.wrap = <dt> | </dt> editIconsStdWrap.wrap = <dd> | </dd> captionStdWrap.wrap = <dd class="csi-caption"> | </dd> } # Now we add another rendering method: dl-nospace < .dl dl-nospace.addClasses = csi-textpic-dl-nospace }	
addClasses	string /stdWrap	Add the specified classes to the csc-textpic <div> (the outer surrounding block). This is useful to override in a specific “rendering” engine, allowing you for example to have different margin styles (one with margin around images, the other without).	
addClassesImage	String /stdWrap	Add the specified classes to the image element	
separateRows	boolean /stdWrap	Separate the rows of images in different <div>s, so that they can be styled in some other way. See CSS-section for more details.	0
imgTagStdWrap	string /stdWrap	Wrapping around the <img> tag.	
editIconsStdWrap	string /stdWrap	Wrapping around the frontend editing icons	
oneImageStdWrap	string /stdWrap	Wrapping around one “image” in the block (with image and caption)	
imageRowStdWrap	string /stdWrap	Wrapping around one row of images	
imageLastRowStdWrap	string /stdWrap	Wrapping around the last row of images	
noRowsStdWrap	string /stdWrap	Wrapping around all images if there are no separate rows (either by seprarateRows setting, of if we just have one row).	
imageStdWrap	string /stdWrap	Wrapping around the whole image block if a width is needed. This is the case when position is center there is more than 1 row or we have a global caption	
imageStdWrapNoWidth	string /stdWrap	Wrapping around the whole image block if no width is needed.	

Bullet list

Code

tt_content.bullets = COA

tt_content.bullets {

# header like everywhere else

10 = < lib.stdheader

# rendering the bullets

20 = TEXT

20 {

field = bodytext

# first we trim the contents

trim = 1

# then we split the content on the chr(10) (linebreak)

split{

token.char = 10

# now we render the list alternating with obj 1 or 2

cObjNum = |*|1|| 2|*|

1.current = 1

1.parseFunc =< lib.parseFunc

# obj 1 for the odd rows

1.wrap = <li class="odd">|</li>

2.current = 1

2.parseFunc =< lib.parseFunc

# obj 2 for the even rows

2.wrap = <li class="even">|</li>

}

# then we wrap an <ul> around the list elements, with the corresponding layout class

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.php:eIcon.bullets

prefixComment = 2 | Bullet list:

}

}

Table

Code

tt_content.table = COA

tt_content.table {

10 = < lib.stdheader

20 = USER

20.userFunc = tx_cssstyledcontent_pi1->render_table

20.field = bodytext

[...]

}

As you can see, the table element – like the image element – is rendered by a specifically written user function. See more details in the reference below:

Reference

Property:	Data type:	Description:	Default:
field	data	The field to fetch the content from.	bodytext
innerStdWrap	stdWrap	StdWrap to the content of the table cells. With this you can for example pass the content through lib.parseFunc	innerStdWrap.parseFunc =< lib.parseFunc
color		Background Color of the table. Some predefined values are already there. (Look into the background color dropdown of the table element) Add your own with color.[dropDownId] = #000000 Fallback is color.default =	1 = #EDEBF1 2 = #F5FFAA
tableParams_[layout]	border, cellpadding, cellspacing	Table params dependent on the selected layout (dropdown). You should better use CSS to style your tables. For example: tableParams_0 { border = cellpadding = cellspacing = }	
stdWrap	stdWrap	StdWrap to the whole table	

[tt_content][table][20]

Filelinks / Uploads

The uploads / filelinks element is also rendered by a custom PHP function.

Code

tt_content.uploads = COA

tt_content.uploads {

10 = < lib.stdheader

20 = USER

20.userFunc = tx_cssstyledcontent_pi1->render_uploads

[...]

Reference

Property:	Data type:	Description:	Default:
filePath	string / stdWrap	The path to the files to read out.	field = select_key
field	string	The field to fetch the content from.	media
linkProc		The link processing options. Example: target = _blank jumpurl = {$styles.content.uploads.jumpurl} jumpurl.secure = {$styles.content.uploads.jumpurl_secure} jumpurl.secure.mimeTypes= {$styles.content.uploads.jumpurl_secure_mimeTypes} removePrependedNumbers = 1 iconCObject = IMAGE iconCObject.file.import.data = register : ICON_REL_PATH iconCObject.file.width = 150 ATagParams = class="external-link-new-window"	See example
labelStdWrap	stdWrap	Provides a mean to override the default text that is linked in the "linkedLabel" registry for each itemRendering. Registry items filename, path, description, fileSize and fileExtension are available at this point. Example: tt_content.uploads.20.labelStdWrap.override.data = register:description	
stdWrap	stdWrap	StdWrap to the whole filelist.	
fileSize		Display options for file size.	bytes = 1 bytes.labels = {$styles. content. uploads. filesizeBytesLabels}
itemRendering	cObj /+optionSplit	Provides the rendering information for every row in the file list. Each file will be rendered with this cObject, optionSplit will be applied to the whole itemRendering array so that different rendering needs can be applied to individual rows. Default rendering in css_styled_content is a COA for table based rendering with even/odd classes in the rows. Available registers at this point are: linkedIcon: a linked icon representing the file (either extension-dependent or a thumbnail of the image) linkedLabel: the linked text, usually the filename. The text can be overwritten using the labelStdWrap property. filename: the filename being rendered (with extension, but without path) path: the full path of the file description: optional, if available fileSize: the size of the file in bytes fileExtension: the extension of the file (e.g. "pdf", "gif", etc) Example: itemRendering = COA itemRendering { wrap = <tr class="tr-odd tr-first">|</tr> |*| <tr class="tr-even">|</tr> || <tr class="tr-odd">|</tr> |*| 10 = TEXT 10.data = register:linkedIcon 10.wrap = <td class="csc-uploads-icon">|</td> 10.if.isPositive.field = layout 20 = COA 20.wrap = <td class="csc-uploads-fileName">|</td> 20.1 = TEXT 20.1 { data = register:linkedLabel wrap = <p>|</p> } 20.2 = TEXT 20.2 { data = register:description wrap = <p class="csc-uploads-description">|</p> required = 1 } 30 = TEXT 30.if.isTrue.field = filelink_size 30.data = register:fileSize 30.wrap = <td class="csc-uploads-fileSize">|</td> 30.bytes = 1 30.bytes.labels = {$styles.content.uploads.filesizeBytesLabels} }	

[tt_content][uploads][20]

Media

The Media content element acts as a dispatcher for different media output formats.

The Media content element is a dispatcher which gets its HTML output from one of the available render objects. By default, these render objects include SWFOBJECT (Flash driven by Javascript), QTOBJECT (Quicktime driven by Javascript) and Multimedia (the original Multimedia object rendered with EMBED tags).

The renderType defines which object is used for rendering. If set to its default value of “auto”, the Media content element uses the media file's extension to choose the right renderer. This auto-detection may not work as well for external URLs so setting the renderType manually is preferable in that case.

If one of the existing renderTypes does not meet your needs, new renderTypes can be registered and rendered with a custom extension.

The Media content element contains the following 3rd party files at typo3/contrib/flashmedia:

qtobject/qtobject.js (Javascript for QTOBJECT)

swfobject/swfobject.js (Javascript for SWFOBJECT)

swfobject/expressInstall.swf (this is displayed if Flash version of client is too low)

flvplayer.swf (TYPO3 video player for flv, swf, mp4, m4u etc)

player.swf (Audio player from 1pixelout)

player.txt (License for audio player)

If you want to use a different player, it can be configured via Typoscript.

Reference

Property:	Data type:	Description:	Default:
flexParams	stdWrap	Used for Flexform configuration of the content element	flexParams.field = pi_flexform
alternativeContent	stdWrap	Alternative content	alternativeContent.field = bodytext
type	string	Defines media type: video/audio	video
renderType	string	Used for select the render object. Possible renderTypes are: auto/swf/qt/object. Extensions may add custom renderTypes as well.	auto
allowEmptyUrl	boolean	If set to 0 you see a warning if no file/URL is configured. If you do some advanced setup such as a Javascript-driven player with a playlist you may use the object without a URL and need to set the value to 1.	0
mimeHandler	array	The mappings between file extensions and render types can be configured here and will be used when renderType=auto. Possible values are MEDIA, SWF, QT	mimeHandler { default = MEDIA mp3 = SWF mp4 = SWF m4v = SWF mov = QT avi = MEDIA asf = MEDIA class = MEDIA swa = SWF }
mimeConf.swfobject mimeConf.qtobject	array	Copy of configuration for SWFOBJECT and QTOBJECT	mimeConf.swfobject < tt_content.swfobject.20 mimeConf.qtobject < tt_content.qtobject.20

[tt_content][media][20]

Property:	Data type:	Description:	Default:
player	string	Location of video player	{$styles.content.media.videoPlayer} typo3/contrib/flashmedia/flvplayer.swf
defaultWidth	int	Default video media width	{$styles.content.media.defaultVideoWidth} 600
defaultHeight	int	Default video media height	{$styles.content.media.defaultVideoHeight} 400
default	array	Default parameters for flashvars / params / attributes Usage: default { flashvars.allowFullScreen = true params.wmode = transparent attributes.align = center } flashvars are used for swf file configuration. There is no standard across players, but for flvplayer see description below. For detailed description of possible params/attributes visit this URL: http://livedocs.adobe.com/flash/9.0/UsingFlash/help.html?content=WSd60f23110762d6b883b18f10cb1fe1af6-7ba7.html	default { params.quality = high params.wmode = transparent params.menu = false params.allowScriptAccess = sameDomain params.allowFullScreen = true }
mapping	array	If you want to rename predefined vars you can use mapping. See tt_content.media.20.audio where it's needed	

[tt_content][media][20][video]

Property:	Data type:	Description:	Default:
player	string	Location of audio player	{$styles.content.media.audioPlayer} typo3/contrib/flashmedia/player.swf
defaultWidth	int	Default audio media width	{$styles.content.media.defaultAudioWidth} 600
defaultHeight	int	Default audio media height	{$styles.content.media.defaultAudioHeight} 400
default	array	Default parameter for flashvars / params / attributes Usage: default { flashvars.allowFullScreen = true params.wmode = transparent attributes.align = center } flashvars are used for swf file configuration. There is no standard across players, but for flvplayer see description below. For detailed description of possible params/attributes visit this URL: http://livedocs.adobe.com/flash/9.0/UsingFlash/help.html?content=WSd60f23110762d6b883b18f10cb1fe1af6-7ba7.html	default { params.quality = high params.wmode = transparent params.allowScriptAccess = sameDomain params.menu = false }
mapping	array	The audio player doesn't work with file, but instead expects the file with the flashvar soundFile. mapping does the rename of parameter for you by default.	mapping { flashvars.file = soundFile }

[tt_content][media][20][audio]

Property:	Data type:	Description:	Default:
file	stdWrap	Media file or URL	
width	int	Width of swfObject	
height	int	Height of swfObject	
flexParams		Used for Flexform configuration of the CE	flexParams.field = pi_flexform
alternativeContent	stdWrap	Alternative content	alternativeContent.field = bodytext
layout	stdWrap	HTML Template for the Object. ###SWFOBJECT### is replaced with the sfwobject, ###ID### is replaced with the unique Id of the div/object	###SWFOBJECT###
video.player audio.player	See media object		

[tt_content][swfobject][20]

Property:	Data type:	Description:	Default:
file	stdWrap	Media file or URL	
width	int	Width of qtObject	
height	int	Height of qtObject	
flexParams		Used for Flexform configuration of the CE	flexParams.field = pi_flexform
alternativeContent	stdWrap	Alternative content	alternativeContent.field = bodytext
layout	stdWrap	HTML Template for the Object. ###QTOBJECT### is replaced with the qtobject, ###ID### is replaced with the unique Id of the div/object	###QTOBJECT###
video.player audio.player	See media object		

[tt_content][qtobject][20]

Mailform

The mailform is a normal FORM cObj. For further information look at the TSref section "FORM".

Code

tt_content.mailform = COA

tt_content.mailform.10 = < lib.stdheader

tt_content.mailform.20 = FORM

tt_content.mailform.20 {

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 = {$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

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:

}

}

Search

The search is a COA consisting of the header rendering, the cObj SEARCHRESULT and a copy of the mailform with slightly different configuration for rendering the search form. For further information look at the mailform section and/or at the TSref.

Code

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 = {$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 = {$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:

}

}

Login

The login form is mainly a copy from the mailform rendering. Read the following code and comments for further information:

Code

# copy the general mailform configuration

tt_content.login < tt_content.mailform

# use the default header rendering

tt_content.login.10 = < lib.stdheader

tt_content.login.20 {

# the message if everything went well

goodMess = {$styles.content.loginform.goodMess}

# disable redirect

redirect >

# clear recipient (as we send no mail)

recipient >

# clear data

data >

# set data to be sent

dataArray {

10.label.data = LLL:EXT:css_styled_content/pi1/locallang.xml:login.username

10.type = *user=input

20.label.data = LLL:EXT:css_styled_content/pi1/locallang.xml:login.password

20.type = *pass=password

30.type = logintype=hidden

30.value = login

40.type = submit=submit

40.value.data = LLL:EXT:css_styled_content/pi1/locallang.xml:login.login

}

type.field = pages

type.listNum = 0

# set target for the loginform

target = {$styles.content.loginform.target}

locationData = 0

# configure hidden fields

hiddenFields.pid = TEXT

hiddenFields.pid {

value = {$styles.content.loginform.pid}

override.field = pages

override.listNum = 1

}

stdWrap.wrap = <div class="csc-loginform"> | </div>

stdWrap {

editIcons.iconTitle.data = LLL:EXT:css_styled_content/pi1/locallang.xml:eIcon.login

prefixComment = 2 | Login/Logout form:

}

}

# change the appearance of the form after user has logged in:

[loginUser = *]

tt_content.login.20 {

# set form to logout form

dataArray >

dataArray {

10.label.data = LLL:EXT:css_styled_content/pi1/locallang.xml:login.username

10.label.wrap = |&nbsp;<!--###USERNAME###-->

30.type = logintype=hidden

30.value = logout

40.type = submit=submit

40.value.data = LLL:EXT:css_styled_content/pi1/locallang.xml:login.logout

}

}

[global]

Menu / Sitemap

The menu / sitemap element is a CASE object that - dependent on the selected option (Sitemap, Menu of these pages, Section index ...) - renders a HMENU of pages.

Code

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

wrap = <ul class="csc-menu csc-menu-def">|</ul>

1 = TMENU

1 {

target = {$PAGE_TARGET}

NO {

stdWrap.htmlSpecialChars = 1

wrapItemAndSub = <li>|</li>

ATagTitle.field = description // title

}

noBlur = 1

}

}

# "Menu of subpages to these pages"

1 < .default

1 {

special = directory

wrap = <ul class="csc-menu csc-menu-1">|</ul>

}

# "Sitemap - liststyle"

2 = HMENU

2 {

wrap = <div class="csc-sitemap">|</div>

1 = TMENU

1 {

target = {$PAGE_TARGET}

noBlur = 1

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 < styles.content.get

3 {

wrap = <ul class="csc-menu csc-menu-3">|</ul>

select.andWhere = sectionIndex!=0

select.pidInList.override.field = pages

renderObj = TEXT

renderObj {

fieldRequired = header

trim = 1

field = header

htmlSpecialChars = 1

noBlur = 1

wrap = <li class="csc-section">|</li>

typolink.parameter.field = pid

typolink.section.field = uid

}

}

# "Menu of subpages to these pages (with abstract)"

4 < .1

4 {

wrap = <dl class="csc-menu csc-menu-4">|</dl>

1.NO {

wrapItemAndSub >

linkWrap = <dt>|</dt>

after {

data = field : abstract // field : description // field : subtitle

required = 1

htmlSpecialChars = 1

wrap = <dd>|</dd>

}

ATagTitle.field = description // title

}

}

# "Recently updated pages"

5 < .default

5 {

wrap = <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 {

wrap = <ul class="csc-menu csc-menu-6">|</ul>

special = keywords

special {

excludeNoSearchPages = 1

}

}

# "Menu of subpages to these pages + sections - liststyle"

7 < .1

7 {

wrap = <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>

}

}

}

20.stdWrap {

editIcons = tt_content: menu_type, pages

editIcons.iconTitle.data = LLL:EXT:css_styled_content/pi1/locallang.xml:eIcon.menuSitemap

prefixComment = 2 | Menu/Sitemap element:

}

}

Insert Records (shortcut)

The insert records element allows elements from all over a page to be referenced, so you can display the same element multiple times without copying it. This is done using the top level TypoScript object "RECORDS".

Code

tt_content.shortcut = COA

tt_content.shortcut {

20 = CASE

# render records dependent on the layout selector

20.key.field = layout

20.0= RECORDS

20.0 {

source.field = records

# get the allowed tables from the constant

tables = {$content.shortcut.tables}

# THESE are OLD plugins. Modern plugins registers themselves automatically!

conf.tt_content = < tt_content

conf.tt_address = < tt_address

conf.tt_links = < tt_links

conf.tt_guest = < tt_guest

conf.tt_board = < tt_board

conf.tt_calender = < tt_calender

conf.tt_rating < tt_rating

conf.tt_products = < tt_products

conf.tt_news = < tt_news

conf.tt_poll = < plugin.tt_poll

}

20.1= RECORDS

20.1 {

source.field = records

tables = {$content.shortcut.tables}

conf.tt_poll = < plugin.tt_poll

conf.tt_poll.code = RESULT,SUBMITTEDVOTE

}

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):

}

}

Insert Plugin (List)

Plugins are rendered by the plugins configuration which generally resides in plugin.tx_extensionname. Plugins register themselves as list_type and are therefore automatically added to the tt_content render object. Some old plugins however (like tt_board) are still registered by hand.

Code

tt_content.list = COA

tt_content.list {

10 = < lib.stdheader

20 = CASE

20.key.field = list_type

20 {

# LIST element references (NOT copy of objects!)

# THESE are OLD plugins. Modern plugins registers themselves automatically!

3 = CASE

3.key.field = layout

3.0 = < plugin.tt_guest

4 = CASE

4.key.field = layout

4.0 = < plugin.tt_board_list

4.1 = < plugin.tt_board_tree

2 = CASE

2.key.field = layout

2.0 = < plugin.tt_board_tree

5 = CASE

5.key.field = layout

5.0 = < plugin.tt_products

7 = CASE

7.key.field = layout

7.0 = < plugin.tt_calender

8 = CASE

8.key.field = layout

8.0 = < plugin.tt_rating

9 = CASE

9.key.field = layout

9.0 = < plugin.tt_news

11 = CASE

11.key.field = layout

11.0 = < plugin.tipafriend

20 = CASE

20.key.field = layout

20.0 = < plugin.feadmin.fe_users

21 = CASE

21.key.field = layout

21.0 = < plugin.feadmin.dmailsubscription

}

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:

}

}

Divider

The divider element renders by default a <hr /> wrapped in a <div>. The <div> is needed for styling in IE6.

Code

tt_content.div = TEXT

tt_content.div {

value = <hr />

wrap = <div class="divider">|</div>

prefixComment = 2 | Div element

}

HTML

Renders pure HTML content.

Code

# This truely IS a content object, launched from inside the PHP class of course.

tt_content.html = TEXT

tt_content.html {

field = bodytext

editIcons = tt_content: pages

editIcons.iconTitle.data = LLL:EXT:css_styled_content/pi1/locallang.xml:eIcon.html

prefixComment = 2 | Raw HTML content:

}

Default Message

This message is shown in the frontend if an element has no rendering definition.

Code

tt_content.default = TEXT

tt_content.default {

# Display the CType of the element that can't be rendered

field = CType

# wrap it in an ugly yellow box

wrap = <p style="background-color: yellow;"><b>ERROR:</b> Content Element type "|" has no rendering definition!</p>

prefixComment = 2 | Unknown element message:

}

Out of the box CSS styling

This extension comes with a working CSS, which will be auto-generated and added to the rendered pages. This auto-generated CSS can also be externalized if you set config.inlineStyle2TempFile = 1 (see TSref). This provides the most “out-of-the-box” experience, because you can now influence the appearance through some settings in the CONSTANT EDITOR (e.g. border, spacing, etc).

But you can also avoid this auto-generated CSS and choose to include the CSS responsible for this plugin in your own .css files. To do so, include this in your TypoScript Template:

plugin.tx_cssstyledcontent._CSS_DEFAULT_STYLE >

But if you do so, be aware that some settings in the external CSS influence the rendering that needs to be done in the plugin. Thus some settings that are done in CSS have to be specified in TypoScript too, so that our plugin knows how to handle them. Basically those are settings that influence spacing and borders and they can be set in the CONSTANT EDITOR.

So you adapt your CSS to your wishes and then go to the CONSTANT EDITOR and reflect these settings in these constants:

colSpace: The space between columns of images (in pixels)

rowSpace: The space after each row of images (in pixels)

textMargin: The space from the imageblock to the text (in case of in-text rendering) (in pixels)

borderSpace: The space that the borders around images take (in pixels)

borderThick: The thickness of borders (in pixels)

Have a look at the code below and the constants in it to get an understanding of how the CSS reflects the settings in the constant editor.

Code

plugin.tx_cssstyledcontent._CSS_DEFAULT_STYLE (

/* Captions */

DIV.csc-textpic-caption-c .csc-textpic-caption { text-align: center; }

DIV.csc-textpic-caption-r .csc-textpic-caption { text-align: right; }

DIV.csc-textpic-caption-l .csc-textpic-caption { text-align: left; }

/* Needed for noRows setting */

DIV.csc-textpic DIV.csc-textpic-imagecolumn { float: left; display: inline; }

/* 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-imagewrap { padding: 0; }

DIV.csc-textpic IMG { border: none; }

/* DIV: This will place the images side by side */

DIV.csc-textpic DIV.csc-textpic-imagewrap DIV.csc-textpic-image { float: left; }

/* UL: This will place the images side by side */

DIV.csc-textpic DIV.csc-textpic-imagewrap UL { list-style: none; margin: 0; padding: 0; }

DIV.csc-textpic DIV.csc-textpic-imagewrap UL LI { float: left; margin: 0; padding: 0; }

/* DL: This will place the images side by side */

DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image { float: left; }

DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image DT { float: none; }

DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image DD { float: none; }

DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image DD IMG { border: none; } /* FE-Editing Icons */

DL.csc-textpic-image { margin: 0; }

DL.csc-textpic-image DT { margin: 0; display: inline; }

DL.csc-textpic-image DD { margin: 0; }

/* Clearer */

DIV.csc-textpic-clear { clear: both; }

/* Margins around images: */

/* Pictures on left, add margin on right */

DIV.csc-textpic-left DIV.csc-textpic-imagewrap .csc-textpic-image,

DIV.csc-textpic-intext-left-nowrap DIV.csc-textpic-imagewrap .csc-textpic-image,

DIV.csc-textpic-intext-left DIV.csc-textpic-imagewrap .csc-textpic-image {

display: inline; /* IE fix for double-margin bug */

margin-right: {$styles.content.imgtext.colSpace}px;

}

/* Pictures on right, add margin on left */

DIV.csc-textpic-right DIV.csc-textpic-imagewrap .csc-textpic-image,

DIV.csc-textpic-intext-right-nowrap DIV.csc-textpic-imagewrap .csc-textpic-image,

DIV.csc-textpic-intext-right DIV.csc-textpic-imagewrap .csc-textpic-image {

display: inline; /* IE fix for double-margin bug */

margin-left: {$styles.content.imgtext.colSpace}px;

}

/* Pictures centered, add margin on left */

DIV.csc-textpic-center DIV.csc-textpic-imagewrap .csc-textpic-image {

display: inline; /* IE fix for double-margin bug */

margin-left: {$styles.content.imgtext.colSpace}px;

}

DIV.csc-textpic DIV.csc-textpic-imagewrap .csc-textpic-image .csc-textpic-caption { margin: 0; }

DIV.csc-textpic DIV.csc-textpic-imagewrap .csc-textpic-image IMG { margin: 0; }

/* Space below each image (also in-between rows) */

DIV.csc-textpic DIV.csc-textpic-imagewrap .csc-textpic-image { margin-bottom: {$styles.content.imgtext.rowSpace}px; }

DIV.csc-textpic-equalheight DIV.csc-textpic-imagerow { margin-bottom: {$styles.content.imgtext.rowSpace}px; display: block; }

DIV.csc-textpic DIV.csc-textpic-imagerow { clear: both; }

/* No margins around the whole image-block */

DIV.csc-textpic DIV.csc-textpic-imagewrap .csc-textpic-firstcol { margin-left: 0px !important; }

DIV.csc-textpic DIV.csc-textpic-imagewrap .csc-textpic-lastcol { margin-right: 0px !important; }

/* Add margin from image-block to text (in case of "Text w/ images") */

DIV.csc-textpic-intext-left DIV.csc-textpic-imagewrap,

DIV.csc-textpic-intext-left-nowrap DIV.csc-textpic-imagewrap {

margin-right: {$styles.content.imgtext.textMargin}px !important;

}

DIV.csc-textpic-intext-right DIV.csc-textpic-imagewrap,

DIV.csc-textpic-intext-right-nowrap DIV.csc-textpic-imagewrap {

margin-left: {$styles.content.imgtext.textMargin}px !important;

}

/* Positioning of images: */

/* Above */

DIV.csc-textpic-above DIV.csc-textpic-text { clear: both; }

/* Center (above or below) */

DIV.csc-textpic-center { text-align: center; /* IE-hack */ }

DIV.csc-textpic-center DIV.csc-textpic-imagewrap { margin: 0 auto; }

DIV.csc-textpic-center DIV.csc-textpic-imagewrap .csc-textpic-image { text-align: left; /* Remove IE-hack */ }

DIV.csc-textpic-center DIV.csc-textpic-text { text-align: left; /* Remove IE-hack */ }

/* Right (above or below) */

DIV.csc-textpic-right DIV.csc-textpic-imagewrap { float: right; }

DIV.csc-textpic-right DIV.csc-textpic-text { clear: right; }

/* Left (above or below) */

DIV.csc-textpic-left DIV.csc-textpic-imagewrap { float: left; }

DIV.csc-textpic-left DIV.csc-textpic-text { clear: left; }

/* Left (in text) */

DIV.csc-textpic-intext-left DIV.csc-textpic-imagewrap { float: left; }

/* Right (in text) */

DIV.csc-textpic-intext-right DIV.csc-textpic-imagewrap { float: right; }

/* Right (in text, no wrap around) */

DIV.csc-textpic-intext-right-nowrap DIV.csc-textpic-imagewrap { float: right; clear: both; }

/* Hide from IE5-mac. Only IE-win sees this. \*/

* html DIV.csc-textpic-intext-right-nowrap .csc-textpic-text { height: 1%; }

/* End hide from IE5/mac */

/* Left (in text, no wrap around) */

DIV.csc-textpic-intext-left-nowrap DIV.csc-textpic-imagewrap { float: left; clear: both; }

/* Hide from IE5-mac. Only IE-win sees this. \*/

* html DIV.csc-textpic-intext-left-nowrap .csc-textpic-text { height: 1%; }

/* End hide from IE5/mac */

DIV.csc-textpic DIV.csc-textpic-imagerow-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; height: 1%; }

)

About this document

Most parts of this document are copied from somewhere else. Here are the credits. Thanks goes to:

Kasper Skårhøj for the original document

Ernesto Baschny for the documentation (and development of course) of croncssstyledimgtext.

Steffen Kamper for the media element (documentation and development, again)

Marc Wöhlken for reading and correcting the alpha version

EXT: CSS Styled Content - css_styled_content	Configuration

1

EXT: CSS Styled Content

css_styled_content

forAdmins forDevelopers forIntermediates forAdvanced

The keywords help with categorizing and tagging of the manuals. You can combine two or more keywords and add additional keywords yourself. Please use at least one keyword from both lists.
If your manual is NOT in english, see next tab "language"
----
forEditors (use this for editors / german "Redakteure")
forAdmins (use this for Administrators)
forDevelopers (use this for Developers)
forBeginners (manuals covering TYPO3 basics)
forIntermediates (manuals going into more depth)
forAdvanced (covering the most advanced TYPO3 topics)
see more: http://wiki.typo3.org/doc_template#tags
----

Susanne Moog

2010-02-18T17:33:18