Wordpress posts side by side...by side...by side

Discussion in 'Web Design and Development' started by tobefirst, May 15, 2007.

  1. tobefirst macrumors 68040

    tobefirst

    Joined:
    Jan 24, 2005
    Location:
    St. Louis, MO
    #1
    Strange request, I know, but bear with me. I'm really just a print designer masquerading as an online presence. :)

    I'm looking for a way to make Wordpress display each post to the left of the one preceding it, so that the posts get older as you scroll to the right. I'd like to be able to specify the number of the posts that show up just like I always would, through the Wordpress dashboard. Does that make sense?

    I've seen themes with two posts side by side, like Japanese Cherry Blossom, but I don't know how to make it do more than two. I'm currently using a modified White as Milk, so that would be where I'm starting from.

    Would someone be able to look at the code and point me in the right direction or help me figure it out? What more information should I post to help you help me? Thank you so much.
     
  2. tominated macrumors 68000

    tominated

    Joined:
    Jul 7, 2006
    Location:
    Queensland, Australia
    #2
    in the css, you could change the float property of the post divs to float left or something
     
  3. Winterfell macrumors regular

    Joined:
    Apr 3, 2007
    Location:
    Tulsa, Oklahoma
    #3
    I agree with Tominated in that using CSS layouts would probably be the best way to accomplish what you're looking for.

    There are some great CSS sites out there. A favorite of mine is Glish ... at the very least it will get you pointed in the right direction, and some of the multi-column layouts should be helpful in accomplishing what you want to accomplish.
     
  4. tobefirst thread starter macrumors 68040

    tobefirst

    Joined:
    Jan 24, 2005
    Location:
    St. Louis, MO
    #4
    Thanks guys. I'm pretty sure I understand that it will be done through CSS, along with editing the PHP file. I'm just not sure where to start attacking. Here is what I think is the relevant code from the Japanese Cherry Blossom stylesheet:
    Code:
    #primary.onecol-stories .primary{
    	float:left;
    	width:50%;
    }
    #primary.onecol-stories .secondary{
    	float:right;
    	width:40%;
    	margin:0 0 0 50%;
    }
    and the PHP code from the index.php:
    Code:
    // Here is the call to only make two posts show up on the homepage REGARDLESS of your options in the control panel
    				query_posts('showposts=2');
    			?>
    			<?php if (have_posts()) : ?>
    				<?php $first = true; ?>
    				<?php while (have_posts()) : the_post(); ?>
    					<div class="story<?php if($first == true) echo " first" ?>">
    						<h3><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h3>
    						<?php the_excerpt() ?>
    						<div class="details">
    							Posted at <?php the_time('ga \o\n n/j/y') ?> | <?php comments_popup_link('no comments;', '1 comment', '% comments'); ?> | Filed Under: <?php the_category(', ') ?> | <span class="read-on"><a href="<?php the_permalink() ?>">read on</a></span>
    						</div>
    					</div>
    					<?php $first = false; ?>
    				<?php endwhile; ?>
    			<?php else : ?>
    What should I be changing to make it display however many posts I put in my Dashboard? And how can I change the CSS file to allow the width of the page to be as wide as 10 posts, or 8 posts, or 6 posts if that's what I choose in the dashboard? Would I need to have a #primary.onecol-stories .tertiary, #primary.onecol-stories .whatevercomesaftertertiary, etc.?
     
  5. tobefirst thread starter macrumors 68040

    tobefirst

    Joined:
    Jan 24, 2005
    Location:
    St. Louis, MO
    #5
    Back from vacation...

    Can anyone point me in the right direction? Not looking for a complete handout, just a push in the right direction. Thanks.
     
  6. jng macrumors 65816

    jng

    Joined:
    Apr 6, 2007
    Location:
    Germany
    #6
    Code:
    // Here is the call to only make two posts show up on the homepage REGARDLESS of your options in the control panel
    				query_posts('showposts=2');
    			?>
    			<?php if (have_posts()) : ?>
    				<?php $first = true; ?>
    				<?php while (have_posts()) : the_post(); ?>
    <div class="FLOATLEFT">/*****start****/
    					<div class="story<?php if($first == true) echo " first" ?>">
    						<h3><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h3>
    						<?php the_excerpt() ?>
    						<div class="details">
    							Posted at <?php the_time('ga \o\n n/j/y') ?> | <?php comments_popup_link('no comments;', '1 comment', '% comments'); ?> | Filed Under: <?php the_category(', ') ?> | <span class="read-on"><a href="<?php the_permalink() ?>">read on</a></span>
    						</div>
    					</div>
    					<?php $first = false; ?>
    </div>/***end****/
    				<?php endwhile; ?>
    			<?php else : ?>
    /*****clear*****/<br style="clear: both;" />
    
    I commented so you can see where I put the code. I wasn't sure you wanted to float left or right, so I just cleared both sides.

    Make a class called "FLOATLEFT" and just have "float: left;" if you want or something similar. This should get your started, but you'll probably need tweaking.
     
  7. dunc85 macrumors regular

    Joined:
    Jul 23, 2006
    #7
    Please don't do this, horizontal scrolling is nasty, and a usability catastrophe.
     
  8. Macnoviz macrumors 65816

    Macnoviz

    Joined:
    Jan 10, 2006
    Location:
    Roeselare, Belgium
    #8
    I agree, vertical scrolling is more natural, looks better and is easier to do (not all people have a mighty mouse).
     
  9. tobefirst thread starter macrumors 68040

    tobefirst

    Joined:
    Jan 24, 2005
    Location:
    St. Louis, MO
    #9
    Thanks. I'll give that a try in the coming days and post with how it works out.
    I'll concede that it is less than natural. But catastrophic? :) I have thought about why I want to go horizontal though, and think that it is an adequate solution for my blog. I do appreciate the advice, though.
     
  10. psychofreak Retired

    psychofreak

    Joined:
    May 16, 2006
    Location:
    London
    #10
    Or a trackpad with two-finger scroll :)
     
  11. dunc85 macrumors regular

    Joined:
    Jul 23, 2006

Share This Page