Customizing News Template

Hello Felix,

Thanks for asking. :slight_smile:

  1. You can remove post carousel slider from X > Theme Options > Ethos > Post slider - blog.

  1. You can remove sidebar from X > Theme Options > Layout and Design > Content layout and select Full Width.

You can use Recent post element or following shortcode to display posts inside page:

[recent_posts count="4"]

For more information, please take a look at following article.

http://demo.theme.co/integrity-1/shortcodes/recent-posts/

Thanks.

Hi Prasant

Thank you very much for your help and the link to the article. Everything worked great.

In the “Gym Expanded-Demo” there is a view of the post overview, where the image is on the left side 1/3 and the title, author, time and intro-text is on the rights side 2/3 horizontal. How do I achieve this style? There is no shortcode in the article for this design:
http://demo.theme.co/gym/news/

Thanks again for your help!

Hi There,

Thanks for writing in again!

Unfortunately, the similar shortcode is not available in the theme you need custom code for that.
The blog layout in Gym demo is available in Ethos stack. If you use that stack your blog page will look like this.

I would suggest you to please take help from a developer to customize the recent post shortcode to the similar look.
Or you can use Ethos stack so that the blog page would look similar to Gym demo.
Unfortunately, any custom code out of our theme support scope.

Hope this is clear!

Hi basanta

Thank you very much for your reply. I work with the Ethos stack and if I take the original Gym demo page for News, the posts are listed like I want it but then I have no option to place my header:

If I insert the shortcode in a content page, I would have the header, but the list looks like this:

Any idea, what I could do?

Thanks again!

Hi Felix,

You can use some custom CSS to achieve a similar style. I can only provide you a guideline, so that you can improve it with your own custom CSS rules if interested and add it into your X -> Theme Options -> CSS area.

.x-recent-posts a.x-recent-post4 {
    width: 100%;
}
.x-recent-posts-img {
    width: 50%;
    float: left;
    margin-right: 2%;
}

Thanks!

Hi mldarshana

Thank you very much for the CSS. But I already have the look I want from your Expanded-Demo “Gym”. I also work with the Ethos stack, so I thought it should look like Gym Demo when I insert the shortcode. But it looks like cards.

I just would like to have the basic header on top of this post list:

Is there no way to edit post pages with Cornerstone, so I could add the introduction section with the title on top of the posts?

I just don’t know why the list is shown like I want it on the post page but has a other layout if I insert the posts with the shortcode.

Sorry, I am really a beginner with Cornerstone…

Thank you very much!

Hello Felix,

Cornerstone is a page or post builder. It can help you create layouts that you desire for your pages and posts. On the other hand, blog index and the category pages cannot be edited using Cornerstone or even the default WordPress editor. WordPress generates dynamic contents for these pages.

By the way, your blog index is almost the same as the gym demo.:


http://demo.theme.co/gym/news/

The only missing is the post slider and the featured post items. You can enable the post slider in X > Theme Options > Ethos > Post Slider. For more ethos options, you might need to check out this article: https://theme.co/apex/forum/t/customizer-ethos-options/131

Hope this helps.

Hi RueNel

Thank you for helping me. I tried with your link to the article about customizer-ethos-options…

Maybe I am just using the wrong tool, creating News with the post Blog. Is there any better News PlugIn, which works with Cornerstone, so I could customize the list-view and the single news-page, so that it looks the same as the rest of my page? A plugin like The Modern Events Calendar, which is great integrated in X-Theme… but for News?

Thanks very much.

Hi Felix,

Unfortunately, there is none. And if there is one, it’s stilla post type like in the blog where you’ll have to customized as the blog (just different template names) and Wordpress works like that. And to achieve that (dedicated news page), you’ll have to do custom development which I recommend contacting a developer (he would use plugins but with added custom development).

Thanks!

Hi Rad

Thank you very much again for your good advice. I just can’t believe that the standard blog Template for posts, if I want to show all posts, in Ethos theme has to look like this:

I guess, I am doing something wrong. I also have enabled excerpts in the post settings but they are not appearing in the posts overview. I have found a page with different shortcodes for displaying the posts like [display-posts include_excerpt=“true”] but this also is not working.

Thank you anyway for your help and your time.

Hello @fbrugger,

The url that you have mentioned is a normal page. You edited this page in Cornerstone with recent post element in it. Once you have assign this page as your Posts Page in Settings > Reading, those content will be discarded and again, WordPress will dynamically generate the items.

What you can do is to use Masonry layout with 2 or 3 columns for your blog index. You can check out this setting in X > Theme Options > Blog

Hope this make sense.

Hi RueNel

Thank you very much for your clear explanation. Yes, that makes sense - I think, I got it now! I did miss the Theme Option “Blog”. Now everything is perfect! thank you all for your great support!

There is one last thing I would like to modify: Is it possible to make a padding between the image and the top menu on the single post page?

And is it possible to either remove the “View Post” and dark background on mouseover at the overview images or change this text to German.

Thank you very much!

Hi Felix,

Sure, that’s possible. Please add this CSS as well,

.single-post .site > .x-container>.offset {
    margin: 105px auto;
}

As for View Post, I think ti’s much more better just to change the text so it would look interactive than just an image. Please add this code to your child theme’s functions.php

add_filter( 'gettext', 'change_ethos_view_post_text', 20, 3 );

function change_ethos_view_post_text( $translated_text, $text, $domain ) {

	if ( $text == 'View Post' ) {

			return 'Beitrag anzeigen';

	}

    return $translated_text;
}

Thanks!

Hi Rad

Absolutely great! Thank you very much!

I also added this code to the functions.php, but this doesn’t work:

function excerpt_readmore($more) {
return '… ’ . ‘weiter lesen’ . ‘’;
}

add_filter(‘excerpt_more’, ‘excerpt_readmore’);

It would be nice, if there would be a link after the excerpts to the full post. Any idea, why the code is not working?

Thanks! :grinning:

Hi Felix,

That should work, but please try adding this code too in your child theme’s functions.php with your own wording :slight_smile:

  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' );

And since you’re on Ethos, you’ll be changing the block

    } else if ( $stack == 'ethos' ) {
      return ' ...';
    }

Like this

    } else if ( $stack == 'ethos' ) {
      return ' ...weiter lesen';
    }

Thanks!

Hi Rad

Thanks again for your quick response! Unfortunately the link is not showing up. I have added this code to my child theme’s function.php:

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 ' ...weiter lesen';
}

}
add_filter( ‘excerpt_more’, ‘x_excerpt_string’ );

I have enabled the excerpts for posts in the Screen Options on top of the post’s page. Is this the right way for post’s excerpts?

Thank you very much for your help!

Hi Felix,

It will only work on excerpt generated by Wordpress. But since you’re adding excerpts manually (Screen Options > Excerpts) then please check this https://wpmayor.com/add-read-link-manual-excerpts/ too. It could be like this

function manual_excerpt_more( $excerpt ) {
	$excerpt_more = '';
	if( has_excerpt() ) {
    	$excerpt_more = '&nbsp;<a href="' . get_permalink() . '" rel="nofollow"> ...weiter lesen</a>';
	}
	return $excerpt . $excerpt_more;
}
add_filter( 'get_the_excerpt', 'manual_excerpt_more' );

Thanks!

Hi Rad

Absolutely perfect! Exceptional Support!

Thanks a million!

You’re welcome!
We’re glad we were able to help you out.

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