Me + Themeing Node Teasers = Disaster (kind of)

With each view teaser now inside of its own div, I decided to transfer over the remaining content that was in my original node teasers (fivestar ratings and comment count). It is at this point that the CCK + view combo starts to show problems of its own. I managed to add the comment count, but it doesn't link to comments, and it looks like there is no hope for the fivestar ratings. It seems that the only way to add the fivestar ratings to the view teaser is to make them into a field, but that would mean that only the content creater would be able to rate the content. I also don't see any option to only show select articles.

So I gave up on CCK + Views (for my front page teasers) and I decided to try to modify the default node teasers again.

By doing so, I found the source of my original node teaser problems. It is node.tpl.php. In it I found the source of the dash that was bugging me, as well as the source of the html layout.

I separated the code within node.tpl.php into teaser and the actual node itself. Then I made the necessary fixes to the teaser's php and I finished it all up with a CSS layout.

It works absolutely perfect in Firefox and in IE I managed to fix all but one problem. The "Add new comment"/"Login or register to post comments" text flows outside of the teaser div. I don't have anymore time to work on it today, but I will try to tame it tomorrow.

New FF View: http://img514.imageshack.us/img514/4158/newffviewde9.jpg
New IE View: http://img514.imageshack.us/img514/9054/newieviewrg0.jpg

If anyone is interested in using this node teaser layout, here is the code:

CSS Code:

.node.teaser {
  padding: 0px;
  margin: 5px 0px 10px 0px;
  border: 1px solid #000000;
  display: block;
  clear: both;
}

.teaser-container {
  display: block;
  clear: both;
  margin: 10px;
}

.node.teaser img {
  float: left;
  margin: 0px 10px 0px 0px;
}

.node.teaser h2 {
  font-size: 14px;
  width: 295px;
  float: left;
  display: inline;
}
.node.teaser h2 a {
  color: #FF9900;
}
.node.teaser h2 a:hover {
  color: #FFCC00;
  text-decoration: none;
}

.node.teaser .fivestar-static-form-item {
  float: right;
  display: inline;
}
.node.teaser .fivestar-static-form-item .description {
  display:none;
}

.node.teaser .submitted {
  width: 380px;
  float: left;
}

.node.teaser .field_teaser_text {
  width: 380px;
  float: left;
}

.node.teaser ul.links {
}

node.tpl.php (put this file in your theme directory)

<?php phptemplate_comment_wrapper(NULL, $node->type); ?>

<div id="node-<?php print $node->nid; ?>" class="node<?php if ($sticky) { print ' sticky'; } ?><?php if (!$status) { print ' node-unpublished'; } ?><?php if ($page == 0) { print ' teaser'; } ?>">


<?php if ($page == 0): ?>

<div class="teaser-container">

<?php print $node->field_image[0]['view'] ?>

  <h2><a href="<?php print $node_url ?>" title="<?php print $title ?>"><?php print $title ?></a></h2>
  
<?php print $node->content['fivestar_widget']['#value'] ?>

    <?php if ($submitted): ?>
    <span class="submitted"><?php print t('!date', array('!date' => format_date($node->created))); ?></span>
  <?php endif; ?>

<div class="field_teaser_text"><?php print $node->field_teaser_text[0]['view'] ?></div>

  <div class="clear-block clear">
    <div class="meta">
    <?php if ($taxonomy): ?>
      <div class="terms"><?php print $terms ?></div>
    <?php endif;?>
    </div>

    <?php if ($links): ?>
      <div class="links"><?php print $links; ?></div>
    <?php endif; ?>
  </div>
  
  <div style="clear:both;"></div>

  </div>
  
<?php endif; ?>


<?php if ($page == 1): ?>

<?php print $picture ?>

  <?php if ($submitted): ?>
    <span class="submitted"><?php print t('!date — !username', array('!username' => theme('username', $node), '!date' => format_date($node->created))); ?></span>
  <?php endif; ?>

  <div class="content">
    <?php print $content ?>
  </div>

  <div class="clear-block clear">
    <div class="meta">
    <?php if ($taxonomy): ?>
      <div class="terms"><?php print $terms ?></div>
    <?php endif;?>
    </div>

    <?php if ($links): ?>
      <div class="links"><?php print $links; ?></div>
    <?php endif; ?>
  </div>
<?php endif; ?>

</div>

NOTE -> For this code to work for you:

Using CCK, you will need to make an image field for your teaser image, and a text field for your teaser text.

In the file node.tpl.php,
replace <?php print $node->field_image[0]['view'] ?> with <?php print $node->your-image-field-name[0]['view'] ?>

And once again in the file "node.tpl.php",
replace <?php print $node->field_teaser_text[0]['view'] ?> with <?php print $node->your-teaser-text-field-name[0]['view'] ?>