CSS Styled Content

Extension Key: css_styled_content

Copyright 2002-2006, Kasper Skårhøj, <kasper@typo3.com>

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

Table of Contents

CSS Styled Content	1

Introduction	2

Introduction	2

Screenshots	2

Target audience	2

What is “content rendering”?	2

Applying CSS based content rendering	2

How to use this plugin	2

Adapting the stylesheet	3

Setting up the TypoScript constants	3

Managing access and options for users	3

HowTo	4

Under the hood of “tt_content” TypoScript Object Path	4

RTE and non-HTML content	4

Configuration	4

TypoScript properties of the user object	4

Objectives and History	4

Modern content element rendering	4

Changelog from the old preliminary version	5

Todo	5

Introduction

Introduction

The extension provides a static TypoScript Template file and additional resources for CSS based, XHTML compliant rendering of content elements in TYPO3. It is a modern substitution of the traditional static template, “content (default)”.

Screenshots

Content elements / Page rendering

Target audience

Nearly any developer of a website using TYPO3; A central concept in TYPO3 is that pages are composed of content elements and those need rendering which is much the same from site to site except any individual styles and modifications applied.

This extension is therefore interesting for developers, not directly for “administrators” and “users”.

What is “content rendering”?

Content elements explained, types shown

Flexible - for any page design

Fixed - (see TemplaVOila)

Content elements in a column / on website

“tt_content” object tree for rendering

HTML source / Styling with CSS

Applying CSS based content rendering

Chapter which is the short version of what to do. Exhaustive for getting started ok.

Installs the extension

Adds it as a static template

Creates a small website

Sets up the necessary constants

Creates test content element

Imports the “package” (which must be finalized with smaller images!!)

Adds a notice about RTE / Page TSconfig / Compatibility / XHTML compliance etc.

How to use this plugin

You need to do two things:

You must add the static template file to your template record. This is meant to substitute the old static template record called “content (default)”.

(This step enables all the TypoScript needed for rendering of the content elements including configuration of the Stylesheet editor)

If you did not set the “Set PageTSconfig by default” -flag of the extension when you installed if, you'll have to add the following line in the “PageTSconfig” of the root page of the website which uses the new content rendering.

<INCLUDE_TYPOSCRIPT: source="FILE:EXT:css_styled_content/pageTSconfig.txt">

(This line will include some PageTSconfig code from an extenal file. The settings will disable certain unused fields and options in the tt_content records and furthermore it will configure the Rich Text Editor to process content slightly differently compared to the old content-rendering.)

About the “default”-flag: If you want to use the new content rendering concept throughout your whole database, you don't need to include this PageTSconfig in each root page. Instead you can just set this flag in the extension configuration and it will be done for you by default. This is set by default unless you unchecked it during installation:

Adapting the stylesheet

Presents the example / example_outlines stylesheets

Color schemes set.

Presents the concept behind the class-names

Using the CSS analyzer

Warning about other CSS resources included and how they can interact.

CSS/Content Elements howto reference

Setting up the TypoScript constants

In-depth information about the constants

Setup vs. Constants fields, redundancy, changes directly into Setup, when to use constants, About inserting constants in constants.

Constants Editor

Walks through the constants

Walks through some of the Setup field values as well! (Like table properties)

Top-10 constants / howto table

Managing access and options for users

Page TSconfig manipulation

Allowed Exclude Fields.

Disabling plugins in a certain section of the site.

Frontend editing as alternative

HowTo

Examples of:

extending the PHP class

overriding rendering of an element

RTE configurations, adding character classes.

custom parsing tags for HTML and non-HTML content.

overriding maxImageWidth for sites with columns / for TemplaVoila.

Adding old objects

Example of image frames enabling.

Enabling "Scripts" content element.

Disable the comments in the HTML code (which reveals the rendering orders)

Under the hood of “tt_content” TypoScript Object Path

In-depth about the object tree.

Generally about the Setup object tree

Using TS spaces: “styles.content” + “content” (constants) and “styles.content”, “tt_content” and “lib.xxx” i Setup

For each element, an explanation of how the TypoScript renders it.

howto table

RTE and non-HTML content

???

Formal statement on policies of content in RTE fields of database (ts_css?)

extensions usage of this!

Fixe TEXT fields, RTE standard: Eg. entities in db fields standard?

Configuration

TypoScript properties of the user object

Property:	Data type:	Description:	Default:

Objectives and History

This extension, “css_styled_content”, has (at this point) been around for more than a year without ever being finished. It has been requested by many that it was finished. This has finally been done, although it has changed certain parts radically. But full support is now achieved and settled to “stable” state.

Modern content element rendering

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

The objectives has 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 hacks 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 stylesheet now.

use PHP for special rendering where a TypoScript implementation becomes too complex (this was the case for bulletlists, tables and filelinks 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, filelinks etc. And of course the base-setup of page objects, framesets 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. Bulletlists, 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 the quality and modernity.

This is 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 reliances 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”, “Bulletlist” and “Filelinks” which are rendered by a USER cObject calling methods “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 version > 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.

Changelog from the old preliminary version

Since an alpha version has been functional for more than a year, it deserves to be declared what has changed in this final version:

The philosophy of using a PHP plugin class for the main control has been abandoned; TypoScript is now fully used again as the pinnacle of the rendering and thus is looks much more like the old “content (default)” than the alpha version of “css_styled_content” (but modernized!). The reason simply was; it was easier and more “whole” in this way. In particular the more special content elements like login, email and search forms, menus etc. was far easier to just write in TypoScript using the cObjects originally created for this purpose!

Clear-gifs are still used for spacing here and there. However the amount is fairly low. No good, solid alternative was found.

Many of the fields that was hidden in the alpha version has come back. This includes the “Layout” selector, image frames and quality (but not frames!), alignment etc. This means that it is almost full-featured compared to the old rendering.

Backwards compatibility has been persued but not kept 100%. Generally the priority was a clean content rendering engine for the future.

Todo

RTE rendering

CSS Styled Content - 5

CSS Styled Content

Kasper Skårhøj

2002-11-01T00:32:00

Michael Stucki

Kasper Skårhøj