Adding CSS boxes around front page content

First off you'll need to put the following into the theme's template.php file:

function _phptemplate_variables($hook, $vars = array()) {
  switch ($hook) {
    case 'node':
      if ($vars['page']) {
        $vars['template_files'] = array('node-default-page', 'node-'. $vars['node']->type .'-page', 'node-'. $vars['node']->nid .'-page');
      }
      else {
        $vars['template_files'] = array('node-'. $vars['node']->nid);
      }
      break;
  }

  return $vars;
}

The above allows you to create different node templates by node variables (nid, type, view). In other words, this allows you to create a separate layout for the page view and the node teaser(s).

Next, create a new file called node-story-page.tpl.php ("story" if you are using the "story" content type) and copy your existing node.tpl.php's contents into node-story-page.tpl.php

Then create a new file called node-story.tpl.php and place into that file the following :

  <div class="nodeTeaser">
    <?php if ($picture) {
      print $picture;
    }?>
    <?php if ($page == 0) { ?><div class="nodeTitle"><a href="<?php print $node_url?>"><?php print $title?></a></div><?php }; ?>
    <span class="submitted"><?php print $submitted?></span>
    <?php if ($terms) { ?><div class="taxonomy">Tagged: <?php print $terms?></div><?php }; ?>
    <div class="content"><?php print $content?></div>
    <?php if ($links) { ?><div class="nodeLinks"><?php print $links?></div><?php }; ?>
  </div>

In the style.css file, for the theme, add the .nodeTeaser class as follows:

.nodeTeaser
{
	border:1px solid #ccc;
	margin:0 0 20px;
	padding:8px;
}

Now, node-story.tpl.php will control the look for the teasers and node-story-page.tpl.php will control the look for the page.

If you're using a custom content type (other than "story") then change node-story & node-story-page to node-name_of_your_content_type.tpl.php and node-name_of_your_content_type-page.tpl.php

See screenshot for the end result.

Or.. you can just do an ifelse conditional statement (based on page !=0) in node.tpl.php and forget everything mentioned above. :)

I've tried this and it is working for me well.

The only thing is, all of Headings on the front page have lost their formatting. They used to be in bold and large fonts, now they are normal hyperlinks.

I'm guessing something above changed the .css.

Any ideas?