How to Style Single Blog Post Page?

[doughballs]

Hi. How do I go about styling the single blog post page? The general design of the site has a hero image at the top, with content underneath, so I should follow this pattern. Right now, if I click on a blog post, the content flows up behind the navbar/masthead.

Also…I can’t see previous/next post buttons - can I activate those?

Thanks.

[rad]

Hi @doughballs,

Thanks for reaching out.

May I know the post URL where content is behind the masthead? I need to check the height of the masthead but couldn’t find a single post. I also checked the site from your account and the theme and cornerstone are still old so the instructions that I’ll provide will not be applicable. Have you planned on using that old version while developing your site? I recommend updating them first so you don’t have to do some compatibility fixes after your changes and the update. I’ll provide further instruction/recommendation once they are updated

As for Prev/Next navigation, it’s inactive in your current active stack, Renew. But it’s available for Ethos, Integrity, and Icon. Where do you wish to place it? Maybe it could be just added through filter depending on the place and the instruction may not apply to your current theme version, so please update them first

How to Update | Themeco Docs

Thanks!

[doughballs]

Hi @Rad - thanks for such a speedy reply

I’ll include the post in secure note. I’ve just updated all plugins and theme, I’ve been away for a while!!

As for Navigation…I’m not too bothered where they are, as long as they appear in a sensible place. This blog is a last minute addition so just want to to get it working to a basic level.

Speak soon!

[rad]

Hi @doughballs,

Ah, it’s a different one from what I was checking.

With the overlapping header and content, is it intentional to have absolute positioning? If yes, then the remaining solution would be just adding this CSS to Theme Options > CSS

.single-post header.x-masthead {
min-height: 250px;
}

I assume it’s intentional if it’s meant to overlap for other pages except for post.

About the prev/and next link, please add this code to your child theme’s functions.php

add_filter('the_content', 'x_display_next_prev', 99999999 );

function x_display_next_prev ( $content ) {

if ( is_singular( 'post' ) && ( ! isset( $_POST['cs_preview_state'] ) || ! $_POST['cs_preview_state'] || 'off' === $_POST['cs_preview_state'] ) ) {

ob_start(); 
  
  $is_ltr    = ! is_rtl(); 
  $prev_post = get_adjacent_post( false, '', false );
  $next_post = get_adjacent_post( false, '', true );

?>

<div class="x-nav-articles">

    <?php if ( $prev_post ) : ?>
      <a href="<?php echo get_permalink( $prev_post ); ?>" title="<?php __( 'Previous Post', '__x__' ); ?>" class="prev">
        <?php _e( 'Previous Post', '__x__'); ?>
      </a>
    <?php endif; ?>

    <?php if ( $next_post ) : ?>
      <a href="<?php echo get_permalink( $next_post ); ?>" title="<?php __( 'Next Post', '__x__' ); ?>" class="next">
        <?php _e( 'Next Post', '__x__'); ?>
      </a>
    <?php endif; ?>

  </div>

<?php

$content .= ob_get_clean();

}

return $content;
}

This code should serve as a snippet and give you an idea of how to implement it. We can’t provide support or maintenance for given custom codes. It may only work to the site’s setup when it’s given.

Hope this helps.

[doughballs]

Hi @Rad

Thanks for this, I’ll implement and let you know.

RE absolute positioning - I don’t think it’s intentional! All the other pages have a hero image which pushes content down correctly, click any link on the red panel to see.

[rad]

Hi @doughballs,

In that case, please inspect each of your header bars and change it’s positioning to relative instead of absolute. And remove the CSS that I provided.

Thanks!

[doughballs]

Hi @Rad

Thanks, the prev/next buttons worked fine.

re the absolute positioning - in fact this was deliberate because I need the hero image of each page to sit behind the nav bar. If I set the position to relative, the hero image gets pushed down by the height of the navbar, and I get some background colour showing through. With this is mind, I suppose I should use your css.

Lastly - is there anywhere in the page builder that can style the single blog post, or will this need to be done with custom css?

[rad]

Hi @doughballs,

I see, then please utilize that provided CSS. And since you’re doing it for all posts then it should be global (Theme Options > CSS). If you added it in page builder’s CSS then it will only take effect to the post where it’s added. So it should be done that way.

Thanks!