Ethos blog posts customization

Hi there,

I am currently working on a new website with Ethos stack.
I would like to add a border to the featured image/thumb on the blog page (list view).

Also is the a way to modify recent posts element, so that image hover has the same style as the hover on the posts list images: dar background and “Read more” text?

Thank you

PS. I look foreword to the grid element. And thank you very much for the recent video tips. They are awesome.

Hello @tashitendrel,

Thanks for writing in!

To add a border to the featured images in your blog index, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r). Feel free to change the border color.

.blog .x-main .hentry>.entry-featured, 
.search .x-main .hentry>.entry-featured, 
.archive .x-main .hentry>.entry-featured {
    border: solid 4px red;
}

Be advised that the recent posts element has a different structure than the featured image in your blog index. It will only be possible to have the same hover effect with custom development. Custom development is beyond the scope of our support.

Please explore more with the grid. You should be able to create unique and complicated layouts with it.

Best Regards.

Thank you.
The border works. And for the Recent Posts I will looks also at some plugins.

One more thing for the Blog:

This is Polish website and I need to remove particles like: “in”, “by” in the post meta. And change “Leave a comment” into something else. How to do it?
Also I may need to remove author from meta completely.

Hi @tashitendrel,

The best way is by translation. Please check this article for guidance.

Do you have a child theme already? Try to add the following code on your child theme’s function.php file.

if ( ! function_exists( 'x_ethos_entry_meta' ) ) :
  function x_ethos_entry_meta() {

    //
    // Author.
    //

    // $author = sprintf( __( 'by %s', '__x__' ), get_the_author() ) . '</span>';


    //
    // Date.
    //

    $date = sprintf( ' <span><time class="entry-date" datetime="%1$s">%2$s</time></span>',
      esc_attr( get_the_date( 'c' ) ),
      esc_html( get_the_date() )
    );


    //
    // Categories.
    //

    if ( get_post_type() == 'x-portfolio' ) {
      if ( has_term( '', 'portfolio-category', NULL ) ) {
        $categories        = get_the_terms( get_the_ID(), 'portfolio-category' );
        $separator         = ', ';
        $categories_output = '';
        foreach ( $categories as $category ) {
          $categories_output .= '<a href="'
                              . get_term_link( $category->slug, 'portfolio-category' )
                              . '" title="'
                              . esc_attr( sprintf( __( "View all posts in: &ldquo;%s&rdquo;", '__x__' ), $category->name ) )
                              . '"> '
                              . $category->name
                              . '</a>'
                              . $separator;
        }

        $categories_list = sprintf( '<span>%1$s %2$s',
          __( 'In', '__x__' ),
          trim( $categories_output, $separator )
        );
      } else {
        $categories_list = '';
      }
    } else {
      $categories        = get_the_category();
      $separator         = ', ';
      $categories_output = '';
      foreach ( $categories as $category ) {
        $categories_output .= '<a href="'
                            . get_category_link( $category->term_id )
                            . '" title="'
                            . esc_attr( sprintf( __( "View all posts in: &ldquo;%s&rdquo;", '__x__' ), $category->name ) )
                            . '"> '
                            . $category->name
                            . '</a>'
                            . $separator;
      }

      $categories_list = sprintf( '<span>%1$s %2$s',
        __( 'In', '__x__' ),
        trim( $categories_output, $separator )
      );
    }


    //
    // Comments link.
    //

    if ( comments_open() ) {

      $title  = apply_filters( 'x_entry_meta_comments_title', get_the_title() );
      $link   = apply_filters( 'x_entry_meta_comments_link', get_comments_link() );
      $number = apply_filters( 'x_entry_meta_comments_number', get_comments_number() );

      $text = ( 0 == $number ) ? __( 'Leave a Comment', '__x__' ) : sprintf( _n( '%s Comment', '%s Comments', $number, '__x__' ), $number );

      $comments = sprintf( '<span><a href="%1$s" title="%2$s" class="meta-comments">%3$s</a></span>',
        esc_url( $link ),
        esc_attr( sprintf( __( 'Leave a comment on: &ldquo;%s&rdquo;', '__x__' ), $title ) ),
        $text
      );

    } else {

      $comments = '';

    }


    //
    // Output.
    //

    if ( x_does_not_need_entry_meta() ) {
      return;
    } else {
      printf( '<p class="p-meta">%1$s%2$s%3$s%4$s</p>',
        $categories_list,
        $author,
        $date,
        $comments
      );
    }

  }
endif;



Hope this helps.

Hi there, thank you very much for the translation tool. I have managed to translate most of the needed texts by now.
The change in the Functions works, but it has also deleted / which was separating meta. Can I still add it somehow now?

And another issue I have with the header. I have created very top bar on the right with Social icons, and a very bottom bar with breadcrumbs. But still the breadcrumbs bar’s border goes over the Social bar. What have I missed?

Attaching screeshot with both problems.

Hello @tashitendrel,

The / in the post meta is added with a css built in the theme itself. You may have inserted a code that removes it. To better assist you with your issue, please provide us access to your site so that we can check your settings. Please 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 in advance.

Hi @tashitendrel,

Please add this to Theme Options > CSS to add separator on the meta

/*posts meta separator*/
.p-meta>span>a:after,
.p-meta>span>span:after {
	content: "/";
    padding: 0 0.45em;
}
.p-meta>span>span:last-child:after {
	content: "";
	padding: 0;
}

Regarding the header issue, unfortunately, I was not able to take a closer look on it, it seems your security features kick me out and block me from accessing the site. But please do this, make sure that the Bar that contains the social icons has a higher z-index than the Bar with the border.



Hope it helps,
Cheers!

Thank you so much! I all works out well.

Hi @tashitendrel,

You’re welcome. Have a great day!

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