Add a solid divider between blog posts

[Stephanus]

Hi there,

Great theme, by the way.

Would you please help me with the following two issues?

1. I’m trying to add a simple, solid full-width divider (without any icons) between my blog posts, exactly as on your blog demo (http://seventhqueen.com/themes/kleo/blog-normal/).At the moment, my blog page looks different, as shown here: http://www.happyandhealthy.co/blog. I’ve been everywhere under blog settings and played around with shortcodes, but couldn’t figure this out. For example, I tried this shortcode ([kleo_divider type="full" position="right" text="" class="" id=""], but I didn’t know where to put it.

2. My blog page (http://www.happyandhealthy.co/blog/) seems to show 3 featured blog posts (almost like a slide show / accordion) before the full width blog posts appear. I don’t want the 3 featured blog posts on this page. Where do I go to remove them? I want my blog page to look exactly like your demo one (http://seventhqueen.com/themes/kleo/blog-normal/).

Kind regards,

Stephanus

[sharmstr]

1 – That demo page isnt a blog page. Its was built using the kleo posts shortcode. That’s why the styling is different. In any case, put this in your quick css.

COPY CODE

.posts-listing.standard-listing .type-post {
    border-bottom-color: #e5e5e5;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    padding-bottom: 20px;
}

2 – Looks like you’ve figured out how to remove the featured posts.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Stephanus]

Hi Sharmstr,

Thanks for your help. Yes, I eventually figured out how to remove the featured images. However, I still have 2 related questions about the formatting of my blog posts:

Question 1:

You mentioned that “That demo page isn’t a blog page. Its was built using the kleo posts shortcode. That’s why the styling is different.” There are times where I would also just want to use the KLEO shortcode instead of going the CSS route. What is the KLEO posts shortcode for a full width horizontal line or divider without an icon? When I’m in a post (or page) and I click on KLEO > Content elements > Divider, it provides me with the following shortcake:

[kleo_divider type="full|long|double|short" double="yes|no" position="center|left|right" text="" class="" id=""]

How do I edit this shortcode to give me a full width divider with no icon, but having the same color, thickness, etc. as the horizontal line that you helped me to create via CSS?

Question 2:

I want my recipe blog posts to look like my standard blog posts when viewing them on my blog page. You can view my standard blog posts here: http://www.happyandhealthy.co/blog/

However, when I view the recipe blog posts, they don’t contain the “Continue reading” button or an excerpt of the blog’s content. You can see what I mean here: http://www.happyandhealthy.co/blog/page/3/.

I basically want to give website visitors the same easy-to-understand, uniform experience that they expect whether they are using a regular ‘recipe’ blog posts or a ‘standard’ blog post. In other words, I want to know how I can get my recipe posts to have the same look and feel (including font type, font sizes, heading sizes, etc.) as my standard blog posts? I’m trying to get my recipe posts to show a short excerpt of the recipe’s description / body copy (if it has one, otherwise it should obviously just be left blank) and a ‘Continue reading’ button that then takes them to the recipe blog post. For example, this recipe (http://www.happyandhealthy.co/blog/recipe/rainbow-salad/) contains a description (namely “Almost too beautiful to eat. This rainbow salad makes me happy! It is important to eat colourful and beautiful food. The red color in the berries are cancer fighting and enhance your health in a number of ways.”) which should be used in the excerpt that gets shown just above the ‘Continue reading’ button.

Could you please tell me how to do this? Would I again need to make changes to the CSS here? If so, could you please send me the code?

I will really appreciate your help on this because I’ve spent a lot of time trying to figure out how to do this, but finally gave up.

Thanks!

[sharmstr]

1 – the divider is part of the kleo posts shortcode. you dont have to add a divider.

2 – I’m assuming your recipes are a custom post type? If so, try using a custom excerpt.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Stephanus]

Hi Sharmstr,

1. What do you mean by the following?

“the divider is part of the kleo posts shortcode. you dont have to add a divider.”

Also, how do I add a divider (like the one described, i.e. plain, solid, full-width grey line) if I DO want to add one somewhere in a post or page?

2. Yes, it’s a custom post type. Please can you explain what you mean by ‘try using a custom excerpt’. Can you send me an example with detailed instructions? I’m not a web developer, so I need a bit more help than usual 🙂

[sharmstr]

1 – I gave you the css to add the divider between posts on your blog archive in my first response. That means the standard place where WP displays blog posts. There is also a shortcode called Kleo Posts that you can use on pages that you create (the demo page that you linked me to is like this). The divider is there by default when using a shortcode.

2 – You dont need to be a developer 🙂 I cant give you detailed instructions since its a custom post type. Most post types have an excerpt field that you can fill out. Does yours? Basically Kleo uses the standard WP way of getting an excerpt. It looks for anything in the excerpt field. If it doesnt find anything there, then it will try to create an excerpt based on the content it finds. But if you’re CPT has strange info (code) in there then it could be that it doesnt know what to do. Also, it could be that your CPT doesnt use the standard content type fields. Its all hard to guess at since its a CPT. Hopefully that make more sense.

From the WP Codex: https://codex.wordpress.org/Excerpt

How to add excerpts to posts
To add an excerpt to a post, simply write one in the Excerpt field under the post edit box. An excerpt can be as short or as long as you wish. Usually, given its purpose, a couple of sentences is fine. If adding the excerpt manually, you may use (some) HTML formatting and the tags will not be stripped.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Author]

Posts