By bassplaya on

Hi there,

I would like to know if there is a way that we can style teasers differently than the full node itself?
I would like to see my front page a little nicer and clearer so people can see immediately what's what.

Thanx in advance.

BassPlaya

⋅ Categories: Drupal 5.x

Comments

davemybes’s picture

davemybes commented

There's lots of ways to skin this cat. Two quick and simple solutions come to mind right away (choose one):

1. edit your page.tpl.php file and add a css class to the body tag if the page is the front page

<body<?php if($is_front) { print ' class="front"'; } else { print ' class="not-front"'; } ?>>

OR

2. edit node.tpl.php and wrap your teaser in a div with a class of "teaser" (original code from Garland theme)

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

That should do it.

______________________________________________________________________________________________________
mybesinformatik.com - Drupal website development

______________________________________________________________________________________________________

bassplaya’s picture

bassplaya commented

sounds good incarnate !!
the first option seems the easiest (I'm not a php guru and the second scares me away, a bit) and I can see that you have to use the class "front" which I get.. so in css that would be something like: 

.front .node{ 
border: 1px solid #000;
}

right?

But how about if it's not front page? do I have to rewrite the entire css file for everything that isn't front page? How could we rewrite that if else statement so it becomes easier to integrate?
Cheers.

Authentically,
BassPlaya

danpen’s picture

danpen commented

Theme teaser to look different than full node - http://drupal.org/node/53464

cheers

Dan

davemybes’s picture

davemybes commented

You should create a style that is used by default for all teasers or nodes, and then create a style that uses the front class to style the front page stuff differently. In other words, the front page is a special case and would override the normal styles.

So, lets say your regular node style is something like this:

.node {
  border:1px solid #CCC;
}

But you want your front page node list to use a red border, so you add the following style (to make it easier to find later on, I suggest putting it immediately after your regular node declaration):

body.front .node {
  border:1px solid #C00;
}

______________________________________________________________________________________________________
mybesinformatik.com - Drupal website development

______________________________________________________________________________________________________