Page StyleSheet Selector

A page stylesheet selector is used to add CSS to a page(s) and modify the result  of  an existing CSS file(s) without touching the original CSS file(s). The TYPO3 extension, Page StyleSheet Selector (css_select), is the recommend tool of choice and offers the option of recursive or single page CSS selection.

The templates 1column.html, 2column-style1, 2column-style2, 2column-style3, 3column.html layouts are controlled by layout.css in fileadmin/templates/zwire/css/layout.css.

layout.css is responsible for column widths, form elements, container templates and general element styles like character spacing, header styles, colors, etc. If you want to change general element styles for a specific page without effecting other pages this can be achieved by using a page stylesheet selector.

The Page StyleSheet Selector is also used to reduce the weight of pages generated by TYPO3 extensions. Many TYPO3 extensions apply a global stylesheet to a file generated that looks like typo3temp/stylesheet_e48be37973.css  when viewing TYPO3 page source.

Zen Wireframe's root level Typoscript template has removed most of these globally applied stylesheets with the following TypoScript.

## Clean CSS from temp file
###########################################
plugin.tx_srfeuserregister_pi1._CSS_DEFAULT_STYLE =
plugin.tx_cal_controller._CSS_DEFAULT_STYLE =
plugin.tt_news._CSS_DEFAULT_STYLE =
plugin.tx_indexedsearch._CSS_DEFAULT_STYLE =
plugin.tx_abdownloads_pi1._CSS_DEFAULT_STYLE <
plugin.tx_ablinklist_pi1._CSS_DEFAULT_STYLE <
plugin.tx_irfaq_pi1._CSS_DEFAULT_STYLE =
plugin.tx_srfreecap_pi2._CSS_DEFAULT_STYLE =




TYPO3 Tutorials