Adding a Divider Line to a node listing

Last modified: August 23, 2009 - 21:10

Description

Sometimes it nice to have a physical divider between the node list when white space isn't enough to make the break.

Files to Change

Node.tpl

Enter the following code after <?php if ($links) { ?><div class="links">&raquo; <?php print $links?></div><?php }; ?>:

  <?php if (($page == 0) && ($id < taxonomy_term_count_nodes(arg(2)))) {?>
<div class="dividerline">&nbsp;</div>

The code looks at the node as it is being listed and check it's number against the total count of nodes for the particular term page. If it's less, it will print a divider line.

Style.css

.dividerline
{
margin: 5px auto 18px auto;
width: 75%;
border-bottom: 1px solid #ccc;
}

Alternate Style Sheet

Sometimes it might be necessary to create an alternate style sheet to take care of IE's quirks.

Page.tpl

Right after <?php print $styles ?>, put the following line.

  <!--[if IE]>
    <style type="text/css" media="all">@import "<?php print base_path() . path_to_theme() ?>/style-ie.css";</style>
  <![endif]-->

Style-ie.css

Here's the code, I used to adjust IE's spacing problem:

.dividerline
{
margin: 10px auto;
}

Notes and Considerations

  • It's highly recommend that you make back ups of all the files that you are editing, just in case you want to refer back to them.
  • All values suggested on this page are what I needed for my particular application, please tweak as necessary to suit your needs.
  • Quirksmode.org has a great listing of all the conditional comments you can use for the various versions of IE.
  • Only tested in Drupal 5. Will update for Drupal 6 at some point.
 
 

Drupal is a registered trademark of Dries Buytaert.