Change Post Header HTML?

  • Resolved JazzSP8

    (@jazzsp8)


    9 years, 5 months ago

    Hi All

    I’m new to this WordPress thing, and to CSS – I’ve got a new blog that I’ve been working on am now getting it “just right” before I start to publicise it properly.

    I like the idea of images for the header of each post, but I don’t want them to be big as seems standard, I want them to be small thumbnails offset to the right of the Title Text.

    I managed to find the sizing options in the CSS but now I want to amend the header so that it sits to the right.

    This is the before: https://www.thechillidiaries.co.uk/blog/forum/before.jpg

    This is what I want: https://www.thechillidiaries.co.uk/blog/forum/after.jpg

    As you can see I used the Firefox Inspect Element to achieve it with the following code;

    <a href="https://www.thechillidiaries.co.uk/blog/next-years-chilli-plan/" rel="bookmark">Next years Chilli plan</a><img src="https://i2.wp.com/www.thechillidiaries.co.uk/blog/wp-content/uploads/2015/10/20151001_180840-e1444239793897.jpg?fit=150%2C150" class="attachment-post-thumbnail wp-post-image" alt="Next Years Crop" align="right">

    But I don’t know where to make the changes, I’ve already broken it once and had to mess around to get it working again so before I randomly jab around at the code again I was hoping someone could explain it to me?

    In as simple terms as possible please ??

    Thanks in advance for any help anyone can give me on this ??

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

  • What you want is to float the image to the right.

    That can be achieved with this CSS:

    .wp-post-image {
    float: right;
}

    If you don’t have a place to enter custom CSS, you can use a plugin like Simple Custom CSS.

    Thread Starter JazzSP8

    (@jazzsp8)

    Hi NozeGraze

    Thanks for the reply but I don’t think I’ve made myself clear, or I’ve not understood your reply :/

    From poking around it seems as though I should be able to find a php file that I can edit to change the HTML to what I want, but I can’t seem to find it.

    It’s that I need.

    I think :/

    Thread Starter JazzSP8

    (@jazzsp8)

    Oh!

    Never mind, worked it out thanks to a little nudge from you NoseGraze!

    I had to edit the content.php file and change it like so;

    <header class="entry-header">
			<?php if ( is_single() ) : ?>
			<h1 class="entry-title"><?php the_title(); ?></h1>
			<?php else : ?>
			<h1 class="entry-title">
				<a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?>
			<?php if ( ! post_password_required() && ! is_attachment() ) :
				the_post_thumbnail();
			endif; ?></a>
			</h1>
			<?php endif; // is_single() ?>
			<?php if ( comments_open() ) : ?>
				<div class="comments-link">
					<?php comments_popup_link( '<span class="leave-reply">' . __( 'Leave a reply', 'twentytwelve' ) . '</span>', __( '1 Reply', 'twentytwelve' ), __( '% Replies', 'twentytwelve' ) ); ?>
				</div><!-- .comments-link -->
			<?php endif; // comments_open() ?>
		</header><!-- .entry-header -->

    and then changed the Stylesheet (style.css) to;

    }
.entry-header img.wp-post-image {
	float: right;
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}

    It was a combination of things – I wouldn’t have thought to poke around the CSS if it wasn’t for that bit of nudging – Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Change Post Header HTML?’ is closed to new replies.