Changing header & body text size of individual post, from list of posts

You need to use more specific CSS selectors so that the change only affects the part you want. So for the featured “sticky” post, you would use:

.sticky-header .entry-title {
   font-size: XXpx;
}

.sticky .entry-summary {
   font-size: XXpx;
}

To move the image below the text, you’ll need to modify the template that is being used in that page — if you post that code to a pastebin, someone can likely advise you.

Spot on, your advice works and thank you for being clear. The only issue now is removing the big white space under the header. I could use [e.g.] margin-bottom: -14px; to remove it, but is that good practice or is there a better way?

Lastly, I want the body text to sit above the featured post image (as it is), and to the right of the non-featured posts’ thumbnails below. This code is in the index.php file, which is what I’ve been editing and is what the page uses – is this what you mean?

<?php
/**https://www.thelayreporter.com/
 * Index Template
 *
 * This is the default template.  It is used when a more specific template can't be found to display
 * posts.  It is unlikely that this template will ever be used, but there may be rare cases.
 *
 * @package Origin
 * @subpackage Template
 */

get_header(); // Loads the header.php template. ?>

	<?php do_atomic( 'before_content' ); // origin_before_content ?>

	<div id="content">

		<?php do_atomic( 'open_content' ); // origin_open_content ?>

		<div class="hfeed">

			<?php if ( have_posts() ) : ?>

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

					<?php do_atomic( 'before_entry' ); // origin_before_entry ?>

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

							<?php do_atomic( 'open_entry' ); // origin_open_entry ?>

							<div class="sticky-header">

								<?php echo apply_atomic_shortcode( 'entry_title', '[entry-title]' ); ?>

							</div><!-- .sticky-header -->

								<div class="entry-summary">

								<?php the_excerpt(); ?>

								<?php wp_link_pages( array( 'before' => '<p class="page-links">' . __( 'Pages:', 'origin' ), 'after' => '</p>' ) ); ?>

							</div><!-- .entry-summary -->

							<?php if ( current_theme_supports( 'get-the-image' ) ) {

								if ( is_sticky ( $post->ID ) ) {

									get_the_image( array( 'meta_key' => 'Thumbnail', 'size' => 'single-thumbnail', 'image_class' => 'featured' ) );

								} else {

									get_the_image( array( 'meta_key' => 'Thumbnail', 'size' => 'thumbnail', 'image_class' => 'featured' ) );

								}

							} ?>

							<?php do_atomic( 'close_entry' ); // origin_close_entry ?>

						</div><!-- .hentry -->

					<?php do_atomic( 'after_entry' ); // origin_after_entry ?>

				<?php endwhile; ?>

			<?php else : ?>

				<?php get_template_part( 'loop-error' ); // Loads the loop-error.php template. ?>

			<?php endif; ?>

		</div><!-- .hfeed -->

		<?php do_atomic( 'close_content' ); // origin_close_content ?>

		<?php get_template_part( 'loop-nav' ); // Loads the loop-nav.php template. ?>

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

	<?php do_atomic( 'after_content' ); // origin_after_content ?>

<?php get_footer(); // Loads the footer.php template. ?>

Okay, to fix that space, try this CSS:

.sticky-header h2.entry-title {
   margin: 0;
}

To do the other, first make sure you have a back-up copy of the index.php file. The move this section of code

<div class="entry-summary">
...
</div><!-- .entry-summary -->

to right ABOVE this line:

<?php do_atomic( 'close_entry' ); // origin_close_entry ?>

Almost there – your first code worked a treat – again, many thanks. Just so I can understand how it works – how did you know about that “.sticky-header h2.entry-title {} CSS code? Since it wasn’t in the original stylesheet.

Moving the php code does place the post summary text below the image, but it does that for all the posts – is there a way for us to define the featured post/featured post summary separately (e.g. give it a different class?) to the normal posts, so the ‘summary text’ can be moved without affecting them? I appreciate this may be complicated, but knowing how to achieve this could help when editing other elements.

Thank you for your help so far.

On the first question, the best way to work with CSS is by using a tool such as Firebug to look at what CSS is affecting specific elements on the page. In addition, understanding how CSS selectors work lets you define narrowly targeted styles. In this case, using Firebug, I saw that there was an existing bottom margin on the .entry-title div. But if I only changed it there, it would change the margins on all divs that used that class — which is many throughout the site. So then I looked at the specific context of that div — and used two other selectors so that the new style would only apply to situations of “an h2 element with a class of of entry-title that is contained in an element with the class of sticky-header.”

Hope that’s comprehensible :)!

This is a good CSS reference: https://www.w3schools.com/css/

On your other question, I’m sure that it’s possible to do what you want, but unfortunately, my php knowledge is not that great. I’m guessing you would need to use some sort of conditional tag — maybe the “is-sticky” since that’s what you are trying to isolate here. Hopefully one of php wizards will happen along here…

Thanks WPyogi, I understand. I thought separating and styling individual elements would be a task! Here’s hoping someone has the answer as it could prove very useful.

*Bump* So how can a wordpress user define elements in PHP, so they can be edited separately to other elements?

What I want to do is move a post’s content to sit above an image in a featured post, for example, but to have content sit below the image in normal posts. I hope someone can help.