Node CSS uses node fields to populate a CSS template file. CSS for all nodes can either be aggregated into a single file or generated per node. In both modes, the CSS files are added using drupal_add_css() so it complies with full Drupal aggregation and compression. If aggregation is turned on in Node CSS it is recommended to make the CSS node specific via a body node class because the same CSS file is loaded for multiple nodes. Many themes output a node specific class by default.
Full aggregation is recommended for performance (the same CSS file can be used across the entire site). Individual files is recommended for small sites and/or where you don't have access to a body node class.
body.page-node-<?php print $css_vars['nid']; ?>Example applications
- Set an image uploaded into a node as a background image e.g. a body wallpaper or a flourish
- Set the background colour of a page element using jQuery Colorpicker
General usage
By default, fields according to the naming scheme field_css_ in enabled content types will automatically be passed to the template and hidden from the node display. Both the naming scheme and visibility can be changed.
You can customise the template and inject field values from a $css_vars array e.g.:
<?php if (!empty($css_vars['field_css_bg_color']['und'])): ?>
body.page-node-<?php print $css_vars['nid']; ?> {
background: #<?php print check_plain($css_vars['field_css_bg_color']['und'][0]['value']); ?>;
}
<?php endif; ?>The above example checks the field first and will only include the line of CSS if it does exist.
Technical details
The module can be put in debug mode to show the $css_vars array available to the template using hook_node_view. If the Devel module is enabled, this array will be nicely formatted using Krumo.