Stylesheet Selectors

This tutorial covers the usage of a page stylesheet selector to manipulate images, styles and sizing for the Zen Series XHTML templates without touching the orginal CSS for XHTML files.

The templates 1column.html, 2column.html, 3column.html, home2column.html layouts are controlled by 1 CSS file. layout.css, located in fileadmin/templates/zwire/css/layout.css, is responsible for background images, the masthead and other design elements like character spacing, header styles, colors, etc.

If you want to change color and header graphics for different pages or share these HTML files between multiple domains on a single server this can be achieved by using a Page StyleSheet Selector.

The Advanced Page Stylesheet Selection extension is recommend and offers the option of recursive or single page selection. The Page StyleSheet Selector extension is also good but does not have recursive page selection or as many other options.

Example of how a page stylesheet selector can be applied.

Let's say  superbusiness.com uses masthead.jpg and you want to use a different header for ubergeekforum.com like masthead2.jpg. Simply create a CSS file like ubergeekforum.css and use the Page StyleSheet Selector extension to assign the new CSS file containing the new masthead2.jpg like this.

#masthead{background: url(../images/masthead2.jpg) 0 0 no-repeat;}

You can continue to add other alternative styles like this.

#header {background: url(../images/background2.gif) 0 0 repeat;}

Using Stylesheet Selectors to reduce CSS code bloat

Each TYPO3 extension has CSS styles unique for that extension. When a TYPO3 extension is installed at the root PID these CSS styles affect all pages globally, which can add a lot of CSS code bloat to pages not using the extension in question.

A page stylesheet selector can be used to apply an extensions CSS style for a single page hence reducing this CSS from populating itself throughout the entire site. The extension CSS styles are typically located in a file called setup.txt or a similar name.

Once you locate the CSS styles for the extension you will need to precede to create a CSS document containing those styles. We'll use the News extension tt_news as our example.

First we locate the CSS for tt_news here /typo3conf/ext/tt_news/static/css/setup.txt

Locate and open the file and copy/paste the CSS minus the TypoScript code into a text file.

-----------------------------------  snip  -----------------------------------

.news-list-container HR.clearer, .news-single-item HR.clearer, .news-latest-container HR.clearer{
    clear:right;
    height:1px;
    border:1px solid #F9FFE5;.........

-----------------------------------  snip  -----------------------------------