WordPress.org

Ready to get started?Download WordPress

Forums

Different CSS style for the top 3 posts (12 posts)

  1. hooopla
    Member
    Posted 9 years ago #

    OK, I'm looking at this line in index.php...

    <h3 class="storytitle" id="post-<?php the_ID(); ?>"><?php the_title(); ?></h3>

    ...and thinking that there should be some way of applying a different style to the top 3 items. Is there something other than the_ID that could be used here? Maybe a counter that would increment each time the loop executes?

    Any thoughts?

  2. Lorelle
    Member
    Posted 9 years ago #

    But this isn't an incremental heading. It's a heading on a single post. Do you have more than one H3 heading in a post or on a sidebar?

    The ID increments itself automatically when you enter your post, so I'm not sure what you are asking.

    If you want a different style for each post, then you would have a style set for the H3 heading for post-42, post-64, post-72, etc. But that doesn't set it forever, just when those particular posts are present.

  3. hooopla
    Member
    Posted 9 years ago #

    But this isn't an incremental heading. It's a heading on a single post.

    What I'd like is a different style for the top 3 posts only (i.e., a larger fontsize for the storytitle).

    I've used other blogging software that has a counter which increments each time the loop executes. That way it's possible to apply a separate style to the first n posts. Like so...

    <h3 class="storytitle" id="post-<?php the_loopcounter(); ?>"><?php the_title(); ?></h3>

    You'd have ids defined like...

    #post-1, post-2, post-3 {font-size: 18px;}

    I know I can't use ID for this. Is there another way in WordPress to reference an arbitrary number of posts from "the top"?

  4. Kafkaesqui

    Posted 9 years ago #

    Go into The Loop starting php tag and add in a variable with the increment operator:

    ... the_post(); $loopcounter++; ?>

    Each post *instance* will increment the value by one. Then change your id to:

    id="post-<?php echo $loopcounter; ?>"

    Not pretty, but does what you're after.

  5. Root
    Member
    Posted 9 years ago #

    Or you add a bit. If it is 3 or less class equals x if it is over 3 class equals y.

  6. hooopla
    Member
    Posted 9 years ago #

    Thanks for this!

    Kafkaesqui, what are you getting at with "Each post *instance* will increment the value by one?" How could a post have more than one instance?

  7. Root
    Member
    Posted 9 years ago #

    The first post is an instance of a post in programming speak. The second post is another instance. The code runs in a loop. Here we add a counter. It counts each instance. After three we can do something else.

  8. Kafkaesqui

    Posted 9 years ago #

    Probably should have said "each instance of a new post," but what Root said. Although if you're not tracking the other $loopcounter values (4, 5, etc) in the other post titles for use in css, you can leave them as is, especially since the id value is supposed to be unique on a page.

  9. Root
    Member
    Posted 9 years ago #

    So if n is less than 4 class is firstthree for example.

  10. hooopla
    Member
    Posted 9 years ago #

    Thanks again, Kafkaesqui and Root.

  11. thedesigncoalition
    Member
    Posted 7 years ago #

    I am trying to the same thing but I only want the first post to have a different class. and i dont want the rest to be numbered. I want all of the posts to have class "post" and only the first post to have a class of "post-1". I know root said how to do it but could somebody write this for me. I don't know php.

    "Or you add a bit. If it is 3 or less class equals x if it is over 3 class equals y. "
    -root

  12. thedesigncoalition
    Member
    Posted 7 years ago #

    Oops found it. here is the link if anyone else is looking.

    http://wordpress.org/support/topic/22505?replies=11

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.