Styling the first post differently from the rest

  • Resolved AlternativePhotography

    (@alternativephotography)


    11 years, 9 months ago

    Is there any way i can change the first post to have a different stylesheet and JUST on home, not the other pages? I would like the newest post to have a big splash, like in a newspaper… can a really sharp css expert tell me if this is possible?

    A very helpful person suggested this:

    #content div.thumbnail:nth-of-type(2) {
    display: block;
    width: 840px;
}

    or this

    .home #content div.thumbnail:nth-of-type(2)

    But it messes up the 2 columns on the right and just displays the posts. This is the website I’m working on:
    https://www.alternativephotography.com/wp/

    Any ideas?

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

  • have you tried to look into the many results of a forum search using your topic title:
    https://www.ads-software.com/search/Styling+the+first+post+differently+from+the+rest+?forums=1

    do you need to have a different output for that first post, or just a different formatting?

    Thread Starter AlternativePhotography

    (@alternativephotography)

    Thanks… I am not that good at deciphering php and where to put it.
    I would like the first post on the home page to have double the width of the other posts and also a larger image.
    This is how my home page looks:

    <?php get_header() ?>

NEW CODE HERE?
<?php $i = 1; ?>

	<div id="container">
		<div id="content">

			<div id="nav-above" class="navigation">
				<div class="nav-previous"><?php next_posts_link(__( '<span class="meta-nav">&laquo;</span> Older posts', 'sandbox' )) ?></div>
				<div class="nav-next"><?php previous_posts_link(__( 'Newer posts <span class="meta-nav">&raquo;</span>', 'sandbox' )) ?></div>
			</div>

<h1 style="margin:0px; padding:0px">Love alternative photographic processes?</h1>
<p style="margin-top:0px; padding-top:0px">You've come to the right place. Enjoy the latest articles.</p>

<?php
while ( have_posts() ) : the_post() ?>

<div class="thumbnail">

<h2 style="margin:0px; padding:0px">
<?php
$category = get_the_category();
echo $category[0]->cat_name;
?>
</h2>

<div id="post-<?php the_ID() ?>" class="<?php sandbox_post_class() ?>">

<h3 class="entry-title" style="margin-top:0px; padding-top:0px">
<div class="floatright" style="padding:0px">
<?php the_post_thumbnail( 'thumbnail' ); ?>
</div>

<a href="<?php the_permalink() ?>" title="<?php printf( __('Permalink to %s', 'sandbox'), the_title_attribute('echo=0') ) ?>" rel="bookmark"><?php the_title() ?></a></h3>

<?php
$myExcerpt = get_the_excerpt();
if ($myExcerpt != '') {
    // Some string manipulation performed
}
echo $myExcerpt; // Outputs the processed value to the page
?>

			</div></div><!-- .post -->

<?php comments_template() ?>

NEW CODE HERE?
<?php $i++; ?>

<?php endwhile; ?>

			<div id="nav-below" class="navigation">
				<div class="nav-previous"><?php next_posts_link(__( '<span class="meta-nav">&laquo;</span> Older posts', 'sandbox' )) ?></div>
				<div class="nav-next"><?php previous_posts_link(__( 'Newer posts <span class="meta-nav">&raquo;</span>', 'sandbox' )) ?></div>
			</div>

		</div><!-- #content -->
	</div><!-- #container -->

<?php get_sidebar() ?>
<?php get_footer() ?>

    I found the place for the first two code pieces, but where would i put this?
    <?php if ( 1 == $i ) { $firstclass="firstpost"; } ?>
    I can’t find “the_loop” in the code…

    Where did you add that CSS I gave you? It should be added to the end of your theme’s style.css file. If you tried adding it directly to the page template it would not have been interpreted as CSS unless it were wrapped in <style> tags, like this:

    <style>
#content div.thumbnail:nth-of-type(2) {
    display: block;
    width: 840px;
}
</style>

    The style.css file gets loaded in the <head> section of header.php as a stylesheet; the PHP in your page templates gets processed on the server side and typically results in new HTML being added to the template; and then all of the HTML (including markup inside <style> tags) gets served to your visitors’ web browser.

    Hope that is helpful!

    Thread Starter AlternativePhotography

    (@alternativephotography)

    Much better, thanks! I added it in the beginning of the stylesheet, which was the problem. When adding at the end it works fine.
    Just two more issues:
    -It messes up other pages, how can i make it apply only to the home page?
    -Can i style the text differently too? I tried this, but no difference:

    /* 2 columns splash on homepage */
#content div.thumbnail:nth-of-type(2) {
    display: block;
    width: 580px;
}
#content h2:nth-of-type(2) {
    font-family:Georgia, Times New Roman, Times, serif;
	color:#993333;
	font-size:30px;
	line-height:130%;
	font-style:italic;
}
/* End splash */
    Thread Starter AlternativePhotography

    (@alternativephotography)

    Oh, and this may be a real challenge:
    Is there any way to make the thumbnail bigger in only the first post?
    Thanks a lot for taking the time with this!

    As I mentioned in the other thread, your homepage has a body class of home, so you can single out the homepage like this:

    body.home #content div.thumbnail:nth-of-type(2) {
    display: block;
    width: 580px;
}

    As far as styling the headings and images in your first post, the CSS selector :nth-of-type(2) is used to identify the correct <div> container in your particular case. Using it on an <h2> element will not give you the desired results.

    You would want to do something like this:

    body.home #content div.thumbnail:nth-of-type(2) h2 {
    /* Your <h2> heading styles here. */
}
body.home #content div.thumbnail:nth-of-type(2) img {
    /* Your <img> image styles here. */
}
    Thread Starter AlternativePhotography

    (@alternativephotography)

    Thank you! It works like a dream. I’m very grateful! Thank you. Thank you. Thank you.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Styling the first post differently from the rest’ is closed to new replies.