Docs

[Super]

Hi there.
I’m hoping you can help me with a few questions about styling the blog posts.

1) When I click on Blog in the main nav bar, it doesnt show a list of articles. How can I enable this?
2) When I go to a blog article I’m wondering how I can style the name of the blog title at the top. Currently it appears on the right with very small text, I’d like it to appear on the left and want to style the text to match the rest of the site.
3) How can I change the colour of the background behind the title of the blog post?
4) How can i remove the icon that appears above the blog post on the left?
5) How can I change the colour of the links on the blog page. They’re currently invisible because the background is white.
6) How can I turn the comments box off underneath the post?

I’ve attached a screengrab to show you the page I mean.

[Super]

This reply has been marked as private.

[Christian]

Hey there,

1. Go to Settings > Reading and set your Blog page as the Post page (see attachment).

2. That is not the title but the breadcrumbs. Your title or headline’s color is white that is why it is hidden. Please go to Appearance > Customize > Typography and set your Headings Font Color to black.

3. Add the code below in your Appearance > Customize > Custom > Global CSS

.x-header-landmark {
    background: red;
}

Change red as per your needs. Please see http://cloford.com/resources/colours/500col.htm or http://www.color-hex.com/ for more CSS colors.

4. As said earlier, this is not the title but the breadcrumb so the icon is an indicator where you are in the site so it is not recommended to remove this icon.

5. Go to Typography and change the Site Links color

6. Please see this article http://www.wpbeginner.com/plugins/how-to-turn-off-or-disable-comments-in-wordpress-pages/ to learn how to disable comments in WordPress.

If you’re new to WordPress, it is recommended to learn from our Knowledge Base first.

Thanks.

[Super]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for the updates!

1] To change the color of the heading of your blog, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-landmark .h-landmark {
    color: #000;
}

2] If you want to remove the blog header section, you can turn off the breadcrumbs in the customizer, Appearance > Customize > Header > Miscellaneous and set it to off.

3] To remove the icon, you can make use of this code:

.entry-wrap .entry-title:before{
    display: none;
}

4] To change the text colour, font, size, spacing, weight and hover colour of the links within the blog post, you can make use of this code:

.post .entry-wrap a{
    color: red;
    font-family: Arial, serif;
    font-size: 20px;
    font-weight: 600;
}

.post .entry-wrap a:hover {
    color: green;
}

5] You can check out this code:
`.entry-content.excerpt {
// your styling here
}

6] Please turn on the post meta. You may go to the customizer, Appearance > Customize > Blog > Content and set the Post Meta to Off.

7] The author of the post will also be included in the post meta.

Hope this helps.

[Super]

This reply has been marked as private.

[Super]

one more thing.

How can I decrease the space between where the snippets of one blog post end and the next blog article link starts.
It’s quite a large gap right now and I’d like to decrease that space.

[Super]

sorry, I realised there’s one more thing.

When I change the colour of the headers in typography to black, it changes all the headers to black, including the ones in my footer, which I want to stay white. Is there a CSS code for changing specifically the text color of the headings in the footer.
the text “Join Our Mailing List, Blog Posts and Social”

[Jade]

Hi there,

Please add these codes:

.entry-header .p-meta span:nth-child(2):after, 
.entry-header .p-meta span:last-child,
.blog .x-landmark-breadcrumbs-wrap,
.single .x-landmark-breadcrumbs-wrap {
    display: none;
}

.blog .hentry {
    margin-top: 45px;
}

.x-colophon.top .h-widget {
    color: #fff;
}

Hope this helps.

[Super]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for updating in!

1] To remove the entire section, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.site .x-header-landmark {
    display: none;
}

2] And to reduce the space above, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.blog .hentry:first-child{
    margin-top: 0;
}

Hope this helps.

[Super]

This reply has been marked as private.

[Super]

This reply has been marked as private.

[Paul R]

Hi,

You can find these classes using chrome developer tools.

Hope that helps.

[Super]

great, thank you.
and my second question?

And finally, when I click on one of the blog articles to read more, it doesnt have the title of the article above the blog post.
Is there a way to turn that on. I want it to be styled the same way as the links on the main blog page.

[Author]

Posts