I’m just completely mixed-up with this.
I need the 1st post of the loop looks differently,
as a kind of magazine style, you know: bigger thumbnail
and bigger title.
I tried already nth-of-type in CSS, :first-child, and
different php variations.
But nothing works.
Here is the main part of code on index.php::
<h3 class="latest">The Latest</h3>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post excerpt <?php echo (++$j % 2 == 0) ? 'last' : ''; ?>">
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" rel="nofollow" id="featured-thumbnail"></a>
<div class="post-content-inner">
<header>
<div class="img-container">
<?php if ( has_post_thumbnail() ) { ?>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" rel="bookmark"><?php echo '<div class="featured-thumbnail">'; the_post_thumbnail('slider',array('title' => '')); echo '</div>'; ?></a>
<?php } ?>
</div>
<div class="info-container">
<h2 class="title">
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" rel="bookmark"><?php the_title(); ?></a>
</h2>
<div class="post-info">
<span class="thetime"><span class="icon-clock" style="margin-right:-4px;"></span>
<?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?> </span>
</div>
</div>
</header><!--.header-->
<div class="post-content image-caption-format-1">
<!--<?php echo excerpt(48);?>-->
</div>
</div>
</div><!--.post excerpt-->
I’ll be tremendously appreciate if you could help me with this.
Since you’re using the default loop (not a custom one), you can check the counter for the first (0th) loop and alter your output just for that one.
The WordPress support forum had a similar question that offered this bit of code:
You can put your whole block of HTML inside that
if
statement with your customization, or use it to just add classes to the elements for styling with CSS. For example, something like this could work:That would give you
class="post excerpt first-post"
on the first one andclass="post excerpt "
on the others. You can do this in addition to your other custom classes that are in your code.I would make sure its not a specificity issue try
As many levels as you can just to check if its not simply a css issue.