Add gap or padding a top of ethos blog page and single post pages

Hi,

Could you advise how i can add some padding above the images on my posts page as well as the blog page. I am using the Ethos stack.

Also is there a way that i can add a Read More to the posts as its not obvious to click on the image or title for some people.

image showing the no gap here:

thanks guys,

Chris

Hello Chris,

Thanks for writing in!

1.) The padding at the top of your page content in the ethos blog page may not be necessary because it has already been set by default. Usually this issue occurred when the navbar top height is not yet set. To resolve this, please go to X > Theme Options > Header > Navbar and set the “Navbar Top Height” which would normally be equal to the actual height of your navbar. The default is 90 pixels. You may need to increase it depending on the height of your navbar.

2.) Adding a read more would require customization. Because what you are trying to accomplish requires a template customization, we would highly to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released.

After the child theme is set up, please add the following code in your child theme’s functions.php file

// Excerpt More String
// =============================================================================

if ( ! function_exists( 'x_excerpt_string' ) ) :
  function x_excerpt_string( $more ) {
    
    $stack = x_get_stack();

    if ( $stack == 'integrity' ) {
      return ' ... <div><a href="' . get_permalink() . '" class="more-link">' . __( 'Read More', '__x__' ) . '</a></div>';
    } else if ( $stack == 'renew' ) {
      return ' ... <a href="' . get_permalink() . '" class="more-link">' . __( 'Read More', '__x__' ) . '</a>';
    } else if ( $stack == 'icon' ) {
      return ' ...</p><p><a href="' . get_permalink() . '" class="more-link x-btn x-btn-regular">' . __( 'View Full Story', '__x__' ) . '</a>';
    } else if ( $stack == 'ethos' ) {
      return ' ... <div class="mts"><a href="' . get_permalink() . '" class="more-link">' . __( 'Read More', '__x__' ) . '</a></div>';
    }

  }
  add_filter( 'excerpt_more', 'x_excerpt_string' );
endif;

We would loved to know if this has work for you. Thank you.

Thanks @RueNel I will try the php shortly for the read more. The Navbar height setting does not work.Its already set to 100px and increasing has now effect. Isnt the Navbar the bar at the very top of the website (i have this switched off as do not need it whilst using the PRO header) I am using PRO headers and the gap / padding that i need to add is on a posts page between the featured image and the pro header itself so it seems as though it needs to be on the page itself.

Hi,

I checked all your under your account but I can’t seem to find the site in your screenshot.

Can you provide us the url of that site so we can take a closer look.

For the mean time try to set your bar initial position to relative then adjust the height as you like.

Hope that helps.

Hi @paul.r

I have found what i need. It wasnt the PRO header that i needed to ammend. To get the gap that i needed about the featured images on the single posts page, i just needed to add the code:

.page .x-main.left .hentry .entry-featured, .single-post .x-main.left .hentry .entry-featured {
margin-top: 0px;
}

to the global CSS and it works great :slight_smile:

Thanks for your help guys.

I do have one more question though, on the ethos blog page, is it possible for video posts to add the thumbnail of the video like how featured images do. On the Renew theme the video automatically goes as the post image without having to add a featured image and wondered why it doesnt do it in Ethos.

Hi There,

Please navigate to your child theme’s /framework/views/ethos directory create a file named content-video.php and paste the code below:

<?php

// =============================================================================
// VIEWS/ETHOS/CONTENT-VIDEO.PHP
// -----------------------------------------------------------------------------
// Video post output for Ethos.
// =============================================================================

$is_index_featured_layout = get_post_meta( get_the_ID(), '_x_ethos_index_featured_post_layout', true ) == 'on' && ! is_single();

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <?php if ( $is_index_featured_layout ) : ?>
    <?php x_featured_video(); ?>
  <?php else : ?>
    <?php if ( has_post_thumbnail() && ! is_single() ) : ?>
      <div class="entry-featured">
        <?php x_featured_video(); ?>
      </div>
    <?php elseif ( is_single() ) : ?>
      <div class="entry-featured">
        <?php x_featured_video(); ?>
      </div>
    <?php endif; ?>
    <div class="entry-wrap">
      <?php x_get_view( 'ethos', '_content', 'post-header' ); ?>
      <?php x_get_view( 'global', '_content' ); ?>
    </div>
  <?php endif; ?>
</article>

Hope it helps :slight_smile:

Thanks @thai, just before i do this, i went to the child theme (under public_html) and went to wp-content/themes/pro-child/framework/views but there are no folders under the views folder. Should i just create an Ethos folder and put the file in there?

thanks.

Hello @King,

Yes you will have to create the folder paths since it does no exist in your child theme yet.

Please let us know how it goes.

Hi guys,

I did that but it did not work, it gave me this result:

Hello @King,

You might have done it incorrectly.
​To assist you better with this issue, would you mind providing us the url of your site with login credentials so we can take a closer look?

To do this, you can create a secure note with the following info:
– Link to your site
– WordPress Admin username / password

To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Thank you.

Hi @RueNel

To see the site that i am referring to, you will have to enter the following into your local host file and clear your browser cache and flush your dns as i am building it ready to replace a live site:

77.104.134.196 snhs.kirklees.sch.uk

I will add a secure not to this message with the logon details.

thanks,

Hi Chris,

Looks like an encoding issue, I went ahead and fixed it. Please try it again.

Thanks!

Thanks @Rad but could you let me know what i need to do now. I have the video post set up and the M4V file URL populated but not image shows on the post in the blog feed. Do i have to manually add a featured imaged for this. What i was looking for was it to pull through automatically like it does on the renew themes blog feed with the ability to play it fro the image/thumbnail if this makes sense? Thanks for all your help so far on this one :slight_smile:

just another note, so what im looking for is basically the title and text on the right like the normal featured image posts with the video on the left the same size as the featured image posts so it all looks nice and neat.

Hi There,

Sorry for the confusion!

It’s not possible to automatically pull the image for the video. You have to manually set the featured image for each post video format.

You can take a look at this test post: http://snhs.kirklees.sch.uk/wp-admin/post.php?post=1199&action=edit.

After added some texts, the layout looks good now:

Regards!

Hi @thai , i have found that setting the video to 4:3 instead of 16:9 makes the image on the video post on the blog page fill the width more so looks better:

A few things - there are no controls in the player, not even on the video post page to fill screen etc. Can this be added? Also when you add a link to a youtube video then it breaks. If it cannot be done, i will have to go back to no thumbnail so its just text which is a shame as i feel that the theme should already do this out of the box really. It would definately make it a lot more polished and im unsure why the developers didnt just do this from the beginning. Here is a screenshot of what happens when you add a youtube URL to the post:

thanks again.

Chris

Hello Chris,

You cannot simply add a Youtube or Vimeo link into the source. You will need to insert the Youtube or Vimeo embed code instead. For further details, please check out Video Post Settings from this article: https://theme.co/apex/forum/t/meta-options-posts/143

Hope this helps.

of course haha. Sorry guys. I did it a couple of days ago and today didnt read it properly. :relieved:

@King,

No problem.
If you need anything else we can help you with, don’t hesitate to open another thread.

Thanks guys. Apologies for all the threads that i am opening lately. I am learning bits as i am going along and this is my 5th site using X or PRO and couldnt have got to where I am at the moment without your help. :slight_smile:
Thanks all.

Oh … i added the youtube embed code and it worked :grinning: