Grey line in Top Header and image resized (Ethos)

Hi, I’ve been looking around for an option to do this and can’t find it. So I made two screenshots of what I want to do. Can you help?

Hi There,

To add the grey line to the top header, please add this custom CSS under Theme Options > CSS:

.x-navbar.x-navbar-fixed-top {
    border-bottom: 2px solid #888585;
}

To change the size of featured images, you have to setup a child theme first:

  • On blog page, please also add this custom CSS under Theme Options > CSS:
.blog a.entry-thumb {
     background-size: contain;
}
  • On single page, add this custom code under functions.php file locates in your child theme:
function x_featured_image( $cropped = '' ) {

    $stack     = x_get_stack();
    $fullwidth = ( in_array( 'x-full-width-active', get_body_class() ) ) ? true : false;

    if ( has_post_thumbnail() ) {

      if ( $cropped == 'cropped' ) {
        if ( $fullwidth ) {
          $thumb = get_the_post_thumbnail( NULL, 'entry-cropped-fullwidth', NULL );
        } else {
          $thumb = get_the_post_thumbnail( NULL, 'entry-cropped', NULL );
        }
      } else {
        if ( $fullwidth ) {
          $thumb = get_the_post_thumbnail( NULL, 'full', NULL );
        } else {
          $thumb = get_the_post_thumbnail( NULL, 'full', NULL );
        }
      }

      switch ( is_singular() ) {
        case true:
          printf( '<div class="entry-thumb">%s</div>', $thumb );
          break;
        case false:
          printf( '<a href="%1$s" class="entry-thumb" title="%2$s">%3$s</a>',
            esc_url( get_permalink() ),
            esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), the_title_attribute( 'echo=0' ) ) ),
            $thumb
          );
          break;
      }

    }

}

Hope it helps :slight_smile:

Hi there,
HOME PAGE
for the grey line: great :).

For the size of the picture: almost there but the picture became smaller. Can we make it take a wider space?

For post page, adding to function in my child theme didn’t to anything :wink:

Thanks :slight_smile:

Hi Yannick,

In that case, would you mind providing the login credentials of your site in the secure note? I can’t check it and it’s behind a coming soon page.

Thanks!

Yes, I will. Didn’t know how to do the secure note thing. Thanks

Hi There,

For single post page, please find this custom CSS:

.single-post .entry-featured {
    width: 50%;
    margin: 0 auto;
}

And change to this:

.single-post .entry-featured {
    margin: 0 20px 0 0 !important;
    float: left;
    width: 40%;
}
.single-post .entry-featured img {
    width: 100%;
}

For the blog page, please add this custom CSS:

.blog article.post {
    display: flex !important;
    flex-flow: wrap;
}
.blog a.entry-thumb {
    padding-bottom: 100%;
}
@media (max-width: 767px){
    .blog .entry-featured {
        width: 100% !important;
    }
}

Hope that helps and thank you for understanding.

Hi!

All good, it worked and it’s good enough!

Thank you very much :slight_smile:

You’re most welcome!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.