WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] I want posts to look like this (5 posts)

  1. HK
    Member
    Posted 4 years ago #

    Hi,
    I would like the posts on the home- and category pages to look like this example: post-view
    For now, I am using K2 but I did not find a solution in the style.css. Maybe it is in the loop?
    http://www.bootjesgek.com

  2. Mr. Vibe
    Member
    Posted 4 years ago #

    You can give the class box to the post ID and your loop HTML should look like this:

    <div id="post-XXX" class="box">
    
    	<div class="entry-content">
    
            <a href="#"><img class="alignleft size-medium wp-image-51" title="de-oude-bootjesgek" src="http://www.bootjesgek.com/wp-content/uploads/2009/05/de-oude-bootjesgek-240x174.jpg" alt="de-oude-bootjesgek" width="250" height="174" /></a>
    
            <h3 class="entry-title">
    		<a href="#" rel="bookmark" title="Permanent Link to...">The Post Title</a>
    		</h3>
            <p>
                Your content here - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit commodo scelerisque. Aenean eu turpis lectus. Donec libero dolor, tempus et aliquet in, tempor vitae nunc. Vestibulum eleifend porttitor purus sed tincidunt.
            </p>
    	</div><!-- .entry-content -->
    
        <div class="entry-meta">
    	    Published by <a href="#">Admin</a> on 10 Sept 2009 in <a href="#">Category</a>
    	</div>
    
    <div style="clear:both"></div>
    </div><!-- #post-ID -->

    Than you can add the following code to your style.css file

    img{
      border: 0;
      text-decoration: none;
    }
    .box {
      margin: 0px 0px 10px 0px;
      border: 10px solid #DCDCDC;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
      color: #222;
      line-height: 18px;
    }
    .box img {
      padding: 1px;
      background: #222;
      margin: 0px 10px 0px 0px;
      float: left;
      border-right: 10px solid #DCDCDC;
      -ms-interpolation-mode: bicubic;
      width: 250px !important;
    }
    .entry-title {
      padding: 3px 0px 3px 10px !important;
      margin: 0;
      border-bottom: 10px solid #DCDCDC;
    }
    .entry-title a, .entry-title a:visited {
      font-size: 18px;
      font-weight: normal;
      text-decoration: none;
      color: #222;
    }
    .entry-content p {
      padding: 5px 10px 5px 0px;
      margin: 0;
    }
    .entry-meta {
      border-top: 10px solid #DCDCDC;
      padding: 5px 10px 5px 0px;
    }

    Remove the border from your thumbnail generator and change the with to 250px. Because of this:
    -ms-interpolation-mode: bicubic;
    Your image will look very nice after re size in internet explorer as well.

  3. HK
    Member
    Posted 4 years ago #

    Sorry, I am not familiar with writing code in PHP. I can give you the code of k2loop.php. I would be very thankfull if you could rewrite it for me?

    <?php
    /**
    * Default Loop Template
    *
    * This file is loaded by multiple files and used for generating the loop
    *
    * @package K2
    * @subpackage Templates
    */

    // Post index for semantic classes
    $post_index = 1;

    while ( have_posts() ): the_post(); ?>

    <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <div class="entry-head">
    <h3 class="entry-title">
    " rel="bookmark" title="<?php k2_permalink_title(); ?>"><?php the_title(); ?>
    </h3>

    <?php /* Edit Link */ edit_post_link( __('Edit','k2_domain'), '<span class="entry-edit">', '</span>' ); ?>

    <?php if ( 'post' == $post->post_type ): ?>
    <div class="entry-meta">
    <?php k2_entry_meta(1); ?>
    </div> <!-- .entry-meta -->
    <?php endif; ?>

    <?php /* K2 Hook */ do_action('template_entry_head'); ?>
    </div><!-- .entry-head -->

    <div class="entry-content">
    <?php the_content( sprintf( __('Continue reading \'%s\'', 'k2_domain'), the_title('', '', false) ) ); ?>
    </div><!-- .entry-content -->

    <div class="entry-foot">
    <?php wp_link_pages( array('before' => '<div class="entry-pages"><span>' . __('Pages:','k2_domain') . '</span>', 'after' => '</div>' ) ); ?>

    <?php if ( 'post' == $post->post_type ): ?>
    <div class="entry-meta">
    <?php k2_entry_meta(2); ?>
    </div><!-- .entry-meta -->
    <?php endif; ?>

    <?php /* K2 Hook */ do_action('template_entry_foot'); ?>
    </div><!-- .entry-foot -->
    </div><!-- #post-ID -->

    <?php endwhile; /* End The Loop */ ?>

  4. HK
    Member
    Posted 4 years ago #

    Meanwhile I found the answer to my question in some themes, like Blogstarter (1 sidebar) and Schemertype Mag (2 sidebars). Themes like this are hard to find as there is no special name or tag for this quality. The name most used is Magazine Style. I will go on working with one of these themes now. Thanks.
    http://www.bootjesgek.nl / http://www.bootjesgek.com

  5. ali_cruse
    Member
    Posted 4 years ago #

    i want to show 20 posts at main page how can i do this.

    Regards.

Topic Closed

This topic has been closed to new replies.

About this Topic