How to hide title grey area on blog posts

Can you provide a link to your theme please so I can see what it looks like?

Hi @j_

Thanks for your question.

You’re right, there isn’t a setting to remove the post title at the moment. We could do this using Custom CSS or we could help with a child theme to remove the post title at a code level. Which would you prefer?

Thanks. Custom CSS seems like the simpler option but are there any disadvantages to that over a child theme?

A child theme would remove the code completely so we wouldn’t be hiding anything. There is perhaps a tiny SEO benefit to that. The downside of a child theme is if you’re not using one already, all Appearance > Customize > Theme Design settings need to be reapplied. If you’re running Ultra Premium that can be time consuming.

Here is how the CSS might look:

/* Single Posts */

.single .entry-header {
	display: none;
}

.single .entry-meta {
	padding-top: 1.78571em;
}

Great lets go with CSS then and if it could also be a feature request for future revisions. Is the code above good to go?

Definitely, it’s a great feature suggestion. The above CSS is good to go, try pasting it in your Custom CSS plugin which should be available at Appearance > Custom CSS or Appearance > Edit CSS.

Thanks that seems to work perfectly for blog pages but I’ve noticed that the blog page (domain.com/blog) still shows the title- can you update the CSS to take care of that too?

Glad to hear that helped.

Please, try going to Appearance > Theme Settings. Under the Blog heading there is a Blog Title setting. Try clearing it and saving settings.

Great- that worked perfectly. Whilst we’re on the topic f I could ask two other questions about how the title grey area works:

1) Is there a way to customise its padding, font and background colour? I don’t want it on most pages to save space but there are some where it is handy. I’ve looked for this in customiser etc but couldn’t find it- I presume there’s a CSS option if not?

2) A small one but important for style consistency- the breadcrumbs that show on the right side of the grey title area capitalise the first item Home whilst I use lower case for all pages. The page home itself is lower case- how can I amend this to lower case so it flows better?

Thank you

Super ?? Really glad to hear you’ve made progress.

In the Customizer you’ll find a section called Content Header. That has all of the style settings for the content header. Padding isn’t an option but should be added. To change padding you can use the following Custom CSS:

.single .entry-header,
.page .site-content > .entry-header,
.blog .page-header,
.archive .page-header,
.search-results .page-header,
.search-no-results .page-header,
.error404 .page-header {
    padding: 1.33929em 0;
}

2. Sure! Let’s try:

.breadcrumb-trail span {
	text-transform: lowercase;
}

A reminder that this is a comment in CSS:

/* A CSS Comment */

It’s always handy to add comments to your Custom CSS sections or individual rules so you know what’s what when you come back months later.

Let me know how this goes.

That all works great- thank you very much.

Fantastic! Glad to hear it.

Chat soon ??

Cheers