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: Template for YAML and TemplaVoila¶

Created:	2010-02-18T17:33:18
Changed:	2011-04-04T18:09:12.100000000
Classification:	dev_null_voila
Description:	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 ----
Keywords:	Template, TemplaVoila, page.headerData, page.includeCSS
Author:	Wolfgang Rotschek
Email:	scotty@dev-null.at
Info 4:
Language:	en, de

EXT: Template for YAML and TemplaVoila - dev_null_voila

EXT: Template for YAML and TemplaVoila¶

Extension Key: dev_null_voila

Language: en, de

Keywords: Template, TemplaVoila, page.headerData, page.includeCSS

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: Template for YAML and TemplaVoila 1

`Introduction 3 <#1.1.Introduction|outline>`_

What does it do? 3

Features 3

Credits 3

`Users manual 4 <#1.2.Users%20manual|outline>`_

FAQ 4

`Administration 5 <#1.3.Administration|outline>`_

Example 5

FAQ 5

`Configuration 6 <#1.4.Configuration|outline>`_

Reference 6

`Usage 7 <#1.5.Usage|outline>`_

`Update from version 0.4 8 <#1.6.Update%20from%20version%200.4|outline>`_

`Setup 8 <#Setup|outline>`_

`Known problems 9 <#1.7.Known%20problems|outline>`_

`To-Do list 10 <#1.8.To-Do%20list|outline>`_

`ChangeLog 11 <#1.9.ChangeLog|outline>`_

Introduction¶

What does it do?¶

Inspired by the extension db_ttv I derived my own extension with some changes to the original work. Also completely new features are included.

Features¶

Preconfigured TS-Templates for menus
CSS-Configuration for each TemplaVoila template object within local processing xml field
Conditional loading of Css-files – replacement for page.includeCss and page.headerData

Credits¶

Dieter Bunkerd, < db@t3net.de > for his extension db_ttv

Users manual¶

Download and install the extension with the extension manager
Enter the configuration for template depending css-files into the templavoila local processing field
Add the static template to your page template if you like to use the menus or for easy configuration of many options
Configure the extension with a TS extension template

Although I use on my websites the YAML-Framework for the css-layout this is not part of this documentation. You can use any css-framework for layout your pages.

FAQ¶

Possible subsections: FAQ

Administration¶

If you like to use the option of using preconfigured TemplaVoila templates you have to enter the xml-configuration into the local processing xml filed of each page template object with templavoila. This is especially usefull in multidomain environments.

The information has to be entered into the field “local processing XML” of each template object.

Example¶

<T3DataStructure>
  <ROOT type="array">
    <devNullVoilaCSS type="array">
      <cssfile>layout_2col_left_seo.css</cssfile>
      <iehacks>patches/patch_2col_left_seo.css</iehacks>
    </devNullVoilaCSS>
  </ROOT>
</T3DataStructure>

With above listing you define two fields with the keys “cssfile” and “iehacks”.

The name of the node devNullVoilaCSS is default but can be changed by typoscript.

FAQ¶

((generated))¶

Can I change the node <devNullVoilaCss> to a different name?¶

Yes – in your extension template switch to the constants editor and select the category DEVNULL-CSS. Change the name for the node to what you want.

My css-file dosn't get loaded¶

Check the sourcecode of your webpage. You will find comments with hints what went wrong.

Configuration¶

Configuration for the page layout is done through the constant editor.

Configuration for loading of the css-files has to be done in the setup part in the page template.

Reference¶

outerWrap¶

Property

outerWrap

Data type

string

Description

Wraps the whole css link item (obsolete 0.5.0)

Default

cssPath¶

Property

cssPath

Data type

string

Description

Prefix for the entries in the cssConfigs array.

Default:

{$plugin.devnullvoila.cssPath}

Default

xmlDevNullRoot¶

Property

xmlDevNullRoot

Data type

string

Description

Used to change to node identification for the local processing xml field in the template object.

Default

devNullVoilaCSS

cssConfigs¶

Property

cssConfigs

Data type

array

Description

Holds configuration for xml-parsing

For each item the properties cssWrapItem, cssWrapLink and cssWrapHref can be set independently and will override the configuratio of the plugin for this item.

Field refers which item from the xml-configuration has to be retrieved.

Example:

cssConfigs {
        css1.field = cssfile
        css2.field = iehacks
        css2.cssWrapItem = <!--[if lte IE 7]>|<![endif]-->
}

Default

[tsref:config.devnullvoila]

[config]¶

Property

[config]

Data type

file

Description

Holds the full path to a css-file. If provided paramters “field” and “cssPath” are ignored for this item.

Default

[config].field¶

Property

[config].field

Data type

string

Description

Field name to retrieve a value from the xml-configuration.

Important:

Ignored if “Config” is set to a value

Default

[config].media¶

Property

[config].media

Data type

string

Description

Value for media=”...” attribute.

Will be inserted into the link tag

Default

all

[config].title¶

Property

[config].title

Data type

string

Description

Value for title=”...” attribute.

Will be inserted into the link tag if not empty.

Default

[config].wrap¶

Property

[config].wrap

Data type

wrap

Description

Wraps the link tag for the css-file. With this you can create conditional css-links as shown in the example.

Default

[config].cssPath¶

Property

[config].cssPath

Data type

string

Description

Prefix for the entries in the cssConfigs array.

Default:

{$config.devnullvoila.cssPath}

Important:

Ignored if “Config” is set to a value. Means “Config” points directly to a file.

Default

[config].pidOnly¶

Property

[config].pidOnly

Data type

int

Description

If set to the ID of a page. Css-link will be written to header only for give page

Default

[tsref:config.devnullvoila.cssConfigs.[config]]

Usage¶

((generated))¶

Example¶

Here you can see how to use this plugin with a whole page template and templavoila. With to css-files that are configured in the local processing xml file of an templavoila template object. The second file will be wrapped by a conditional comment.

Main TS page template

# Default CSS-configuration
config.devnullvoila {
  cssConfigs {
    css1 {
      field            = cssfile
    }
    iehacks {
      field                = iehacks
      wrap           = <!--[if lte IE 7]>|<![endif]-->
    }
  }
}
# Default PAGE object:
page = PAGE
page {
  10 = USER
  10.userFunc = tx_templavoila_pi1->main_page
}

The corresponing xml-configuration from the TO-record

<T3DataStructure>
  <ROOT type="array">
    <devNullVoilaCSS type="array">
      <cssfile>layout_2col_left_seo.css</cssfile>
      <iehacks>patches/patch_2col_left_seo.css</iehacks>
    </devNullVoilaCSS>
  </ROOT>
</T3DataStructure>

On an other page you can add an additional file

config.devnullvoila {
  cssConfigs {
    mycssfile         = fileadmin/templates/css/mycssfile.css
    mycssfile.pidOnly = 38
  }
}

Usage compared with page.includeCSS¶

Here you see a configuration with usage of page.inludeCSS

page {
  includeCSS {
    # css for main slogan
    letsdive = fileadmin/at.letsdive/css/letsdive.css
  }
}

The following configuration does the same

config.devnullvoila {
  cssConfigs {
    letsdive           = fileadmin/at.letsdive/css/letsdive.css
  }
}

And now we change the example from above, so that the css-file will be included on only one page

config.devnullvoila {
  cssConfigs {
    letsdive           = fileadmin/at.letsdive/css/letsdive.css
    letsdive.pidOnly   = 187
  }
}

Update from version 0.4¶

The configuration has been moved from plugin.plugin.tx_devnullvoila_pi1 to config.devnullvoila

((generated))¶

Constants¶

::¶

Version 0.4

plugin.devnullvoila.*

Version 0.5

config.devnullvoila.*

::¶

Version 0.4

plugin.devnullvoila.lang.*

Version 0.5

config.devnullvoila.lang.*

::¶

Version 0.4

plugin.devnullvoila.navMain.*

Version 0.5

config.devnullvoila.navMain.*

::¶

Version 0.4

plugin.devnullvoila.navSub.*

Version 0.5

config.devnullvoila.navSub.*

::¶

Version 0.4

plugin.devnullvoila.navTop.*

Version 0.5

config.devnullvoila.navTop.*

::¶

Version 0.4

plugin.devnullvoila.expert.*

Version 0.5

config.devnullvoila.expert.*

Setup¶

::¶

Version 0.4

page {
  10 = USER
  10.userFunc = tx_templavoila_pi1->main_page

  1963 = < plugin.tx_devnullvoila_pi1
}

Version 0.5

page {
  10 = USER
  10.userFunc = tx_templavoila_pi1->main_page
}

::¶

Version 0.4

plugin.tx_devnullvoila_pi1 {
  cssConfigs {
    css1 {
      field  = cssfile
    }
    css2 {
      field  = iehacks
      wrap   = <!--[if lte IE 7]>|<![endif]-->
    }
  }
}

Version 0.5

config.devnullvoila {
  cssConfigs {
    css1 {
      field  = cssfile
    }
    css2 {
      field  = iehacks
      wrap   = <!--[if lte IE 7]>|<![endif]-->
    }
  }
}

Known problems¶

None so far

Feature request & Bugs¶

If you find a bug or a missing feature, please add it to the bugtracker of the extension at forge.

The address is:

http://forge.typo3.org/projects/extension-dev_null_voila/issues

For posting a bug or feature request you need an account of typo3.org.

You can see this extension in operation on one of my websites

http://www.dev-null.at

http://www.letsdive.at

To-Do list¶

Support for properties media and title (rev. 0.4.0)
Support for inline css
Possibility to add rel links to pages

ChangeLog¶

0.5.1¶

Version

0.5.1

Changes

Manual updated with link to bugtracker

0.5.0¶

Version

0.5.0

Changes

Migrated to Typo3 Database-API

Change from plugin to hook operation so tx_devnullvoila_p1 became obsolete and no more need to add the extension to the page object

Changed from $GLOBALS[TSFE]->additionalHeaderData[] to pageRenderer->addCssFile()

Change TS-structure (moved from plugin to config)

0.4.0¶

Version

0.4.0

Changes

Change TS-structure for cssConfigs to became compatibility to page.includeCSS

Support for media and title attribute in css-links

0.3.0¶

Version

0.3.0

Changes

Initial upload to TER

0.2.0¶

Version

0.2.0

Changes

Added code for css configuration with field value “file”

0.1.0¶

Version

0.1.0

Changes

Initial version

11