Styling Drupal Blog

So it seems this is not something that is covered very well for the drupal community. Maybe it is just that easy.

In the past I have just used views to make my blog page and I may end up there in the end of this. I wrote this really quickly while testing my blog layout. Since I want to get our new site up by the 4th, I didn't go nuts on the styling. I will put it in mantis as something I should come back to when I have more time. But it is very easy, here are the step you need to take to style a drupal blog:

Copy node.tpl.php add it to your theme directory (this is the part the instructions are missing)
Copy node.tpl.php again and save it as node-blog.tpl.php
Make changes to node-blog.tpl.php

To make changes to you main blog page, where all your blog entries are listed change the code following: <?php if (!$page): ?>

It bothers me when people don't put in code snippets, so here is my node-blog.tpl.php:

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

<?php print $picture ?>

<?php if (!$page): ?>

<div style="background: #99CCFF; padding:5px;margin-top:15px;">

  <h2><a href="<?php print $node_url ?>" title="<?php print $title ?>"><?php print $title ?></a></h2>

<?php endif; ?>

  <div class="meta">

  <?php if ($submitted): ?>

   <span class="submitted"><?php print $submitted ?></span>

  <?php endif; ?>

  <?php if ($terms): ?>

   Tags : <div class="terms terms-inline"><?php print $terms ?></div>

  <?php endif;?>

  </div>

<?php if (!$page): ?>

</div>

<?php endif; ?>

  <div class="content">

   <?php print $content ?>

  </div>

<div id="blog-buttons">

<?php print $links; ?>

</div></div>

CSS:

#blog-buttons {

   margin-top:20px;

}

#blog-buttons a {

color: #FFFFFF;

background:#336699;

padding:4px 15px;

margin:10px 0 12px 0;

border:1px solid #2b4051;

font-size:90%;

}

#blog-buttons a:hover,

#blog-buttons a:focus {

color: #336699;

background:#efefef;

border:1px solid #2b4051

}

#cblog div { padding-top: 10px; }

Remember this is only to get you started. I am going to come back and make some changes in the future, dang deadlines.

This was my main source of information: http://drupal.org/node/190815

Next Steps

Styling Drupal Blog

Our Products

Check Us Out