Docs

[altugkop]

Hey guys, hope you’re well today.

I really want to change the layout of posts in the renew theme and I’ve tried to follow instructions to move the code around in the “views” folder in my control panel but it confused me a little. I’d just like some instructions on how to change 4 small things and I’ve numbered each one on the image attached.

1) I want the breadcrumbs in the desktop view to be aligned to the left (mobile devices, the layout is fine). I achieved this with the “inspect” function in chrome. Seemed to work when I unticked the ‘display; table cell’ in that css class. What changes to what file do I need to make to align the breadcrumbs to the top left of my screen instead of to the right?

2) I simply want to get rid of the white space seen here because of point 4 below…

3) I would like to remove this icon from the title please and also make the meta font smaller.

4) Finally, I would like to move the title and the meta font underneath the featured image of the blog post instead of on top.

So the final layout will look like breadcrumbs on the top left > Featured image > Title > Meta info (smaller font)

Thank you for any help with this.

Al

[Nabeel A]

Hi there,

Thanks for writing in! Can you please share the page URL so we can take a look and suggest you the solution accordingly?

Thanks!

[altugkop]

This reply has been marked as private.

[Paul R]

Hi Al,

To achieve that, you can add this under Custom > CSS in the Customizer.

.single-post .x-breadcrumbs-wrap {
     text-align:left;
}

.single-post .x-sidebar.right .h-widget:before,
.single-post .entry-title:before
.single-post .x-landmark {
   display:none;
}

.single-post .x-container.offset {
    margin-top:0;
}

After that create file content.php in wp-content/themes/x-child/framework/views/renew and copy this code into that file.

<?php

// =============================================================================
// VIEWS/RENEW/CONTENT.PHP
// -----------------------------------------------------------------------------
// Standard post output for Renew.
// =============================================================================

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <div class="entry-wrap">
    <?php if(is_singular( 'post' ))?>
        
    <?php if ( has_post_thumbnail() ) : ?>
      <div class="entry-featured">
        <?php x_featured_image(); ?>
      </div>
    <?php endif; ?>
<?php x_get_view( 'renew', '_content', 'post-header' ); ?>
    <?php else: ?>
    <?php x_get_view( 'renew', '_content', 'post-header' ); ?>
    <?php if ( has_post_thumbnail() ) : ?>
      <div class="entry-featured">
        <?php x_featured_image(); ?>
      </div>
    <?php endif; ?>
 <?php endif; ?>
    <?php x_get_view( 'global', '_content' ); ?>
  </div>
</article>

Hope that helps

[altugkop]

Hello, I did everything you said but unfortunately the posts now show as attached in the image. Nothing below the breadcrumbs.

I’ve taken the file out for now so it is back to normal layout.

Any ideas?

Thank you for the help so far

[Jade]

Hi there,

Would you mind providing your FTP details are well so that we could test out the code? Thank you.

[altugkop]

This reply has been marked as private.

[Rue Nel]

Hello There,

There was a typographic error in the code. It should be this:

.single-post .x-sidebar.right .h-widget:before,
.single-post .entry-title:before
.single-post .x-landmark {
   display:none;
}

I went ahead to fixed it and now the breadcrumbs is positioned at the left. Regretfully we could not log in to your ftp using the given credentials. It is not working for us. Please double check it so that we can check your custom template.

Thanks.

[altugkop]

No worries, I actually like the layout now how you’ve done it 🙂

Thanks a bunch for your help. That’s really kind.

Al

[Nico]

Happy to hear that.

Feel free to ask us again.

Thanks.

[Author]

Posts