Creating Dynamic CSS Styling

Just as the system dynamically creates new IDs for nodes, you can easily add a similar functionality to your CSS selectors, enabling you to generate dynamic styling.

Using Dynamic Selectors for Nodes

As an alternative to creating unique node templates, you can provide a degree of individual node styling through the CSS. By default, the system generates a unique CSS ID for each node on the website. To create a node-specific selector to take advantage of this feature, use the following nomenclature for the ID:

For example, assume you wish to add a border to the node with the ID of 2. Simply create a new div in style. css with the name:

border: lpx solid #336600 }

Changing the Selector Based on $layout

One of the easiest modifications you can make is to make the selector responsive to the layout.

$layout is provided by the system to help enable this functionality. To make a class specific to the layout, add $layout to the class in the template file. For example, to make class=content reflect the layout in action, state the class as follows:

class="content-<?php print $layout ?>"

This code will result in variations on the class, content-none, content-left, content-right, content-both, with the appropriate selector being active depending on the presence of all, one, or none of the sidebars.

Column layout

$layout suffix

No sidebars


Left sidebar only


Right sidebar only


Both sidebars


$layout provides the key to easily creating collapsible sidebars. To set up this functionality, modify the primary container style to include $layout. In the example theme we created earlier in this chapter, we will modify this line of the page .tpl. php file from:

<div id="main-wrapper">

<div id="main-wrapper-<?php print $layout ?>"> -[192]-

Now, go to the style. css file and define the following:

The final step is to create the styling for each of the selectors above.

When the site is viewed, the value of $layout will determine which selector is applied. You can now specify, through the selectors above, exactly how the page appears — whether the columns collapse, the resulting widths of the remaining columns, etc., etc.

I * This technique is used in the sample theme Bluewater, to define the

I content area.

0 0

Post a comment