Change the appearance of teasers on the home page

By larrymac-1 on 12 Aug 2011 at 13:41 UTC

I'm trying to figure out what I need to edit to create a block and basically add a style to the teasers on the front page of my site. I've gone through styles.css and nothing jumps out.

I believe there are modules that can do it as well, but I'm trying to keep the number of modules to a minimum while I'm getting my feet wet with Drupal - if I can do it by directly editing a file, I'd rather do that.

Thanks!

Comments

It may be that you don't need

goron commented 14 August 2011 at 17:42

It may be that you don't need to edit anything at all. I'm assuming that when you say "add a style" you mean you want to add a CSS class to teasers on the front page, so you can then change their style through CSS. If so, then you don't need to add a class. The teasers will already have classes applied to them that you can use to select them, and there is also a CSS class for the front page. The best way to find these classes is to use the Firebug extension. Find your element and see the classes applied to it. You can also just look at the page's source code. Figure out how to isolate the teasers on the front page (it will be very simple, probably just a 'front' class on the body element and 'teaser' class on the node), and use that to select with CSS.

If this doesn't help, then please explain more clearly what you want to accomplish.

Forgive my syntax, that's

larrymac-1 commented 14 August 2011 at 19:34

Forgive my syntax, that's what I'm trying to do. I've been looking at the source code an managed to tweak a few other things, but the divs and classes are nested so deeply that it's hard to figure out what I need to edit. A good portion of the time, I think I have the name of the class, but can't find it anywhere in styles.css.

Is there another file that the theme draws classes from that I'm missing?

I'm using the waffles theme if that helps.

Thanks!

Yes, it's a bit difficult to

goron commented 15 August 2011 at 00:45

Yes, it's a bit difficult to locate elements and their classes. This is why I suggested you use Firebug, which is an extension (plugin) you can download for free for Firefox or Chrome, and it can let you inspect elements very easily. For instance, you can go to the front page of your site, open Firebug, and use a tool that lets you click on an element on the page (a teaser, in your case), and it'll show you its code. You can then try to locate the divs and classes your interested in.

When you have those classes figured out, you should create new CSS for it, rather than editing your theme's default styles. You could add your CSS at the end of your theme's style.css, or you could add a new CSS file.

For D7, I believe you could select all teasers on the front page like this:

body.front div.node-teaser {
  // your CSS here
}

That will select the whole teaser node. You could then also select the title or content of the teaser, etc. Hope that helps.

Any thoughts on what it would

larrymac-1 commented 15 August 2011 at 00:52

Any thoughts on what it would be for D6?

I installed Firebug, but haven't really gotten the hang of it yet.

I'm not sure. But it

goron commented 15 August 2011 at 01:38

I'm not sure. But it shouldn't be too hard to figure out, and it will be very similar to the code above. And Firebug's a good tool to learn how to use. Let me know if you figure it out.

I isolated the class, but I

larrymac-1 commented 15 August 2011 at 01:43

I isolated the class, but I get "node odd teaser node-type-news" which doesn't match anything in styles.css. I tried the code you suggested and that didn't do anything, so now I'm experimenting.