3 Col layout with blueprint css

  • bingeboy

    (@bingeboy)


    16 years, 10 months ago

    Hi,

    I’m trying to create a 3 col lay out for my wordpress theme using the Blueprint CSS framework. The issue I’m having is on the index.php page.
    Since I need to use 3 different divs, one for each post.

    Div #1 should be something like this:

    <div class="span-8 first">
post content here
</div>

    Div #2 should be something like this:

    <div class="span-8">
post content here
</div>

    Div #3 should be something like this:

    <div class="span-8 last">
post content here
</div>

    How can I updated the loop for the posts to work with the 3 unique divs? I would also like this to be supported if the user looks through older posts but the actual post page will only be a single wide col.

    Thanks for the help.

Viewing 3 replies - 1 through 3 (of 3 total)
  • esmi

    (@esmi)

    16 years, 10 months ago

    http://codex.wordpress.org/The_Loop#Multiple_Loops

    Thread Starter bingeboy

    (@bingeboy)

    16 years, 10 months ago

    Thanks for the link… I’m not sure I have the skills to fully sort it out but I’ll see if I can get something to work with and re-post.

    Thread Starter bingeboy

    (@bingeboy)

    16 years, 9 months ago

    I’m still having trouble to make the loops work properly. The link was very educational I am just lacking the php skills to get everything the way I want it.

    ` <?php $my_query = new WP_Query(‘category_name=featured&showposts=1’);
    while ($my_query->have_posts()) : $my_query->the_post();
    $do_not_duplicate = $post->ID; ?>

    <div class=”span-8 first” id=”post-<?php the_ID(); ?>”>

    <h2 class=”postTitle”>” rel=”bookmark”><?php the_title(); ?></h2>
    <small><?php the_date(); ?> by <?php the_author(); ?></small>

    <div class=”post span-7″><?php the_content(__(‘(more…)’)); ?></div>

    </div>

    <?php endwhile; ?>

    So with the above I’m able to pull the first code from the featured cat, but I really don’t want to have to pull from different cats. I really need 1st post, 4th post, 7th post etc in the first col. Then the 2nd post, 5th post, 8th post, etc in the second col. Third col should have the 3rd post, 6th post, 9th post
    etc. So then the <<next and prev>> links to work properly.

    How would I link with this type of increment in the 3 separate loops?

    Thanks

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘3 Col layout with blueprint css’ is closed to new replies.