WordPress.org

Support

Support » Themes and Templates » [Resolved] I want posts to look like this

[Resolved] I want posts to look like this

Viewing 4 replies - 1 through 4 (of 4 total)
  • Mr. Vibe

    @wpthemes

    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.

    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 */ ?>

    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

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

    Regards.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘[Resolved] I want posts to look like this’ is closed to new replies.