DEPRECATION WARNING

This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.

EXT: CSS Style Editor¶

Author:	Kasper Skårhøj
Created:	2002-11-01T00:32:00
Changed by:	Donald Duck
Changed:	2004-01-29T16:19:24
Author:	Kasper Skårhøj
Email:	kasper@typo3.com
Info 3:
Info 4:

EXT: CSS Style Editor¶

Extension Key: tstemplate_styler

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¶

EXT: CSS Style Editor 1

Introduction 1

Configuration 2

"CSS_editor": 2

Setting up style collections 5

Storing CSS data in the TypoScript template 6

Introduction¶

An editor for the Web>Template module which adds and edits CSS selectors from various sources including external stylesheets, in- document <style> sections and TypoScript. The editor is designed to work with a configuration telling it which CSS selectors are available. Thus the main idea is that the editor knows the correct selector and can write the selector to the stylesheet - then detailed editing of attributes can be done from an external tool if it fits better.

There is another document describing the scenarios in a case-study style.

The configuration of the editor is based on TypoScript found in the TypoScript template (editorcfg field), namely the TLO “CSS_editor”. It allows preview of the style settings and allows for external plugins and/or custom code to interface.

Configuration¶

"CSS_editor":¶

This is the properties used to configure the editor.

selector¶

Property

selector

Data type

string

Description

Defines the selector of this element. This will inherit (be prefixed with) any selector on a previous level in the parsing.

If the selector is prefixed with a plus-sign, “+”, then there will NOT be placed any space between the former selector and the current.

Default

attribs¶

Property

attribs

Data type

list of strings

Description

List of style-attribues (ef. “font-family” or “color”) which may be set for this element.

A selector must be set before the “attribs” value can do anything.

There are some keywords you might want to use. Please see table below.

Default

ch.[array of keys]¶

Property

ch.[array of keys]

Data type

->CSS_editor

Description

A number of “child” objects which will be prefixed with the “current” selector.

You can use a “referencing syntax” here as with cObjects in general. That means you can define:

...ch.list = < plugin.tx_myextension.CSS_editor
...ch.list.title = This is an alternative title.

Default

example¶

Property

example

Data type

string

Description

Example HTML for the preview

Default

exampleWrap¶

Property

exampleWrap

Data type

wrap

Description

Wrapping all “ch” elements if any.

Default

exampleStop¶

Property

exampleStop

Data type

boolean

Description

If set or unset (detected by isset()) this flag will determine whether examples/edit-links will be available for objects down the branch.

# Setting up the CSS Editor
CSS_editor = Template Styles
CSS_editor.ch {
  BODY = General
  BODY.selector = BODY
  BODY.attribs = font-family, background-color
  BODY.example = Plan text outside of any tags written in the page-body.

  A = Links
  A.selector = A
  A.attribs = LINKS,font-weight
  A.example = This is <A href="#">a link to</A> the page top.
  A.exampleStop=1
  A.ch {
        hover = Mouseover links
        hover.selector = + :hover
        hover.attribs = LINKS

        active = Active links
        active.selector = + :active
        active.attribs = LINKS

        visited = Visited links
        visited.selector = + :visited
        visited.attribs = LINKS
  }

  content = < tt_content.CSS_editor
}
tt_content.CSS_editor = General content
tt_content.CSS_editor {
        title.dk = Generelt Indhold
}

This looks like this:

Example: Configuration of local CSS classes for a specific template¶

(This configuration requires something like the basic configuration above to be set, because you can see a reference to “CSS_editor.ch.A” )

# CFG of editor:
CSS_editor.ch.sitepath = Site path
CSS_editor.ch.sitepath {
  selector = .sitepath
  attribs = TEXT,LINKS
  example = <HR><span class="sitepath"><a href="#">Page 1</a> > <a href="#">Page 2</a> > <a href="#">Page 3</a></span>
  ch.links = < CSS_editor.ch.A
  ch.links.example =
}
CSS_editor.ch.header1 = Special table-wrapped header
CSS_editor.ch.header1 {
  selector = .header1
  attribs = TEXT,LINKS
  example = <hr><span class="header1">This is the special DIBS header <a href="#">with a link</a></span>
  ch.links = < CSS_editor.ch.A
  ch.links.example =
}

Sets up the two classes .header1 and .sitepath to be edited in the editor:

Example: Sets up possibility to configure content for two specific columns on a page (in addition to the default configuration)¶

(This configuration requires the css_styled_content extension to be loaded and added for the template, because the object “tt_content.CSS_editor” is located there)

CSS_editor.ch.content.ch {
  col1 = < tt_content.CSS_editor
  col1.title = Main content column
  col1.selector = .col1
  col1.exampleWrap = <HR><I>This is how content in column 1 is rendered:</I><HR><DIV class="col1">|</DIV>

  col2 = < tt_content.CSS_editor
  col2.title = Right content column
  col2.selector = .col2
  col2.exampleWrap = <HR><I>This is how content in column 2 is rendered:</I><HR><DIV class="col2">|</DIV>
}

And it looks like this:

Setting up style collections¶

Style collections are created either manually or automatically based on the Setup content of the template record's PAGE objects. So all PAGE objects of a template is found, each are probed to see if it refers to a stylesheet (with properties .stylesheet, .includeCSS or .CSS_inlineStyle) and if one is found, it's added as an editable style collection.

Alternatively you can defined them manually. See this example:

# Config of editable files:
page.CSS_docs.10 = EXTERNAL
page.CSS_docs.10 {
  title = Main template
  title.dk = Hovedskabelon
  docs.10 = fileadmin/html/dibs.html
}

This example creates a style collection called “Main template” (or “Hovedskabelon” in danish). It is located in the array of other style collections in position “10” of the “page” set (“page.CSS_docs.10”). It is of the type “EXTERNAL” (which all manually configured collections normally are). But the most important line is the one with “docs.10 = fileadmin/html/dibs.html” because this line tells the editor that the source for this style collection is that file! The content of that file is then read and all <style> sections are detected (and editable) and all <link>-tags pointing to css-files are as well registered.

Other examples are:

# Config of editable files:
page.CSS_docs.10 = EXTERNAL
page.CSS_docs.10 {
  title = Main template
  title.dk = Hovedskabelon
  docs.10 = fileadmin/seditor/dibs.html
  docs.20 = fileadmin/seditor/css/main_style.css
}

page.CSS_docs.20 = EXTERNAL
page.CSS_docs.20 {
  title = External stylesheets
  title.dk = Externe stylesheets
  docs.20 = fileadmin/seditor/css/main_style.css
  docs.30 = mininews*.css
  docs.30.prefixSelector = .tx-mininews-pi1 , .tx-mininews-pi1
}

# Setting
menu.CSS_docs.30 = EXTERNAL
menu.CSS_docs.30 {
  docs.20 = fileadmin/seditor/css/menu.css

  CSS_editor = BLBLBL
  CSS_editor.ch.sitepath = Site path
  CSS_editor.ch.sitepath {
    selector = .sitepath
    attribs = TEXT,LINKS
    example = <HR><span class="sitepath"><a href="#">Page 1</a> > <a href="#">Page 2</a> > <a href="#">Page 3</a></span>
    ch.links = < CSS_editor.ch.A
    ch.links.example =
  }
}

This is the properties used to configure the editor ([PAGEobj].CSS_docs.[array-integer])

Remember: Set [PAGEobj].CSS_docs.[array-integer]=EXTERNAL

title¶

Property

title

title.[lang]

Data type

string

Description

Label

Default

docs.[number-array]¶

Property

docs.[number-array]

Data type

resource

Description

Pointing to the documents containing the style information to edit.

Default

CSS_editor¶

Property

CSS_editor

Data type

->CSS_editor

Description

Alternative editor configuration. Default is to use the TLO-config.

Default

prefixSelector¶

Property

prefixSelector

Data type

N/A yet

Description

Default

Storing CSS data in the TypoScript template¶

If you wish the editor to store CSS data in your TypoScrip template (and not directly in css-files), then you should “prepare” the template for it. You can do that by inserting these lines:

###CSS_EDITOR STYLE INFORMATION MARKER - begin ###
page.CSS_inlineStyle (
  BODY { font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; background-color:aqua; }{
)
###CSS_EDITOR STYLE INFORMATION MARKER - end ###

This will insert some default CSS for the BODY selector at least, but as you enter the editor it will throw in a lot more as you being to edit the stuff.

EXT: CSS Style Editor - 6

EXT: CSS Style Editor¶