prefixing the Current Node Title with an icon
Last modified: May 1, 2007 - 11:44
Unfortunately the node title does not carry a handy CSS tag, and trying to select it by context is not very reliable either because it doesn't (eg Garland) have a parent <div> container that distinguishes it from other <h2> elements in page content (eg the comments header).
The quick solution is to add a tag using #yourtheme's page.tpl.php; eg Garland:
(note we use an id tag because there should only ever be one instance of this title on a given page.)
- <?php if ($title): print '<h2'. ($tabs ? ' class="with-tabs"' : '') .'>'. $title .'</h2>'; endif; ?>
+ <?php if ($title): print '<span id="node_title"><h2'. ($tabs ? ' class="with-tabs"' : '') .'>'. $title .'</h2></span>'; endif; ?>and then in icons.css add:
/** iconify node-title only **/
#node_title h2 {
padding-left: 20px;
background:url(icons/user.png) no-repeat;
background-position: center left;
}
How do I vary this per node
How do I vary this per node type? So for example to display a little calendar icon for an event and a page icon for a page?
Any help would be appreciated...
Add node type to to id
Something like
Change
<?php if ($title): print '<span id="node_title"><h2'. ($tabs ? ' class="with-tabs"' : '') .'>'. $title .'</h2></span>'; endif; ?>to
<?php if ($title): print '<span id="node_title-' . $node->type . '"><h2'. ($tabs ? ' class="with-tabs"' : '') .'>'. $title .'</h2></span>'; endif; ?>(Personally I would have just added the id to the h2 tag instead of adding the span)
Then you need css something like
/** iconify node-title only **/#node_title-event h2 {
padding-left: 20px;
background:url(icons/event.png) no-repeat;
background-position: center left;
}
#node_title-page h2 {
padding-left: 20px;
background:url(icons/page.png) no-repeat;
background-position: center left;
}