Remove thin line between blog posts (Integrity)

Support
#1

I’m using the Ethos stack with Pro and want to remove the thin gray line separating posts on the blog page for my website (screenshot-1 below). How do I do this?

Link to screenshot-1: https://goo.gl/mkdj65

Also, is there a way to add a “read more” link that looks like the one in screenshot-2 below?

Link to screenshot-2: https://goo.gl/6UEPnd

#2

Hi,

To achieve that, you can add this in PRO > Launch > Theme Options > CSS

.blog .x-main .hentry {
    border:0;
}

Then add this in your child theme’s functions.php file.


  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 ' ...';
    } else if ( $stack == 'ethos' ) {
      return ' <a href="' . get_permalink() . '" class="more-link">' . __( 'Read More >', '__x__' ) . '</a>';
    }

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

Hope that helps.

#3

Thanks, that info helped a lot! A few additional questions:

  1. Is there a way to increase the size of the blog thumbnail as a percentage of the total page view?

  2. Is there a way to customize the font size specific to the blog page (to decrease the size of the font)?

  3. Is there a way to use only the meta description for each entry on the main blog page instead of just grabbing the first 15-25 words of the article?

Basically, I’d like to render the blog page similar to what is shown in the screenshot-2 link below… thanks for any help you can give!

#4

Hello There,

Thanks for writing in!

1.) The size of the thumbnail can be increased by using this code:

.blog .x-main .hentry>.entry-featured, 
.search .x-main .hentry>.entry-featured, 
.archive .x-main .hentry>.entry-featured {
    width: 40%;
}

.blog .x-main .hentry.has-post-thumbnail>.entry-wrap, 
.search .x-main .hentry.has-post-thumbnail>.entry-wrap, 
.archive .x-main .hentry.has-post-thumbnail>.entry-wrap {
    width: 60%;
}

Feel free to change the width and make sure that the total width will not exceed 100%.

2.) To descrease the font size of the title and excerpts, you can make use of this code:

.blog .x-main .hentry .entry-title, 
.search .x-main .hentry .entry-title, 
.archive .x-main .hentry .entry-title {
    font-size: 24px;
}

.blog .x-main .hentry .entry-content.excerpt, 
.search .x-main .hentry .entry-content.excerpt, 
.archive .x-main .hentry .entry-content.excerpt {
    font-size: 16px;
}

3.) You may adjust the excerpt length in the theme options. Please go to X > Launch > Options > Blog > Content and set the excerpt length. Or you can set a manual excerpt instead. Excerpts are optional hand-crafted summaries of your content that can be used in your theme. Learn more about manual excerpts.

Hope this helps.

#5

Very helpful, thank you!

The only thing I’m still having trouble with is the meta excerpt. When I use the manual excerpt I lose the “Read More >” link. Can you tell me how I can fix this?

Again, thanks for all your help!

#6

Hello There,

Thanks for updating in! I am glad the the css works out well for you. When using the manual excerpts, the read more will disappear because it is part of the auto excerpt. If you want to add a read more link, please update the excerpt code in your child theme and make use of this code instead:

  // remove the read more
  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 ' ...';
    } else if ( $stack == 'ethos' ) {
      return '';
    }

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


// transfer read more after the excerpt.
function move_readmore(){
  echo '<p><a href="' . get_permalink() . '" class="more-link">' . __( 'Read More >', '__x__' ) . '</a></p>';
}
add_action('x_before_the_excerpt_end', 'move_readmore');

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

#7

That worked, thanks so much!

#8

I noticed this CSS works well for my desktop view but makes the mobile view hard to read. Is there a line of code I can add to make it display 40/60% in desktop but then normal in mobile?

#9

Hi there,

You can update the code to:

@media (min-width: 768px) {
    .blog .x-main .hentry>.entry-featured, 
    .search .x-main .hentry>.entry-featured, 
    .archive .x-main .hentry>.entry-featured {
        width: 40%;
    }

    .blog .x-main .hentry.has-post-thumbnail>.entry-wrap, 
    .search .x-main .hentry.has-post-thumbnail>.entry-wrap, 
    .archive .x-main .hentry.has-post-thumbnail>.entry-wrap {
        width: 60%;
    }
}

And the code should only take effect on desktop.

#10

Thank you Jade!

#11

You are most welcome. :slight_smile: