[Resolved] Hide Content Title

[Todd]

I know this is asked a lot and I’ve read through a bunch of questions / answers, but I can’t seem to get Content Titles to be hidden on the main page of my site. It is hidden on post pages if I disable the ‘Content Title’ when creating the post. I saw this page linked in a previous response and I followed those steps, but no luck. The display rule I set, disabling ‘Content Title’, was for the entire site. Anything I could be missing / misunderstanding that would make these content titles not want to go away?

Side question: If I use the Disable Elements functionality, are the items hidden still available from an SEO perspective (i.e. just hidden from the visible page?) or are they removed entirely?

Thanks!

[Tom]

Hi there,

Are you trying to disable titles within each post on your blog/archives? If so, the Disable Elements module doesn’t handle that.

To do that, you would need to install a child theme, and copy the parent content.php file. Once it’s added to your child theme, you’d need to find this line and remove it: https://github.com/tomusborne/generatepress/blob/2.2.1/content.php#L34

Disable Elements actually removes the elements from the page – it doesn’t use CSS.

Let me know if you need more info 🙂

[Todd]

Thanks for the reply. Long story short, on the main page of the website, in the content area, I just want the latest posted image and <-back / forward -> navigation links to other images. No text. However I can do that the easiest is fine by me.

Is there a reason it can’t be done with the Disable Elements module? It seems like selecting to disable ‘Content Title’ for the entire site should work? I’m sure I’ll have to create a child theme at some point, but I haven’t had to yet so I’m trying to avoid it until there’s no other option. 🙂

[Tom]

The option to disable the content title has always been for singular templates. In most cases, a title is required on archives so people can link through to the single post.

Do you have an example of the kind of design you’re going for?

[Todd]

Ah, I get it now. I’m trying to do something like the following sites (ignore how busy they are with ads and such):

https://www.smbc-comics.com/
http://www.mrlovenstein.com

Basically, just the image / navigation in the content area.

If I need to do a child theme, that’s no problem, I just wanted to make sure I exhausted the easier solutions before I went that route. 🙂

[Tom]

Aha, for something like that I don’t think you’d be using the archives at all. Instead, I would just focus on using single posts. That way it wouldn’t show the title – it would only show your content and then the next/previous links to other single posts.

Let me know if that makes sense or not?

[Todd]

It makes sense, generally, but I need the front page of the website to constantly show the latest image. I’m not sure how to do that if I’m only making use of single posts. If you have a slick way to do it, I’m all ears.

If not… can you look at my site again (I think you have the link) and let me know if I’m able to remove the space between the image and the pagination? That space is there specifically because I moved the image above the post title (when I have the image below the post title, the space is at the top). I’ve tried modifying the CSS and can’t get it to go away… not sure what I’m missing.

Hopefully, one of the two paths above should get me to where I’m going and we can close this out! 🙂

[Tom]

Ah yes, it’s not easy to make it so a single post is the front page. Would it always update when you add a new post, or would it be the first post on the front page, most recent on the last page?

For your second question, try this:

.separate-containers .site-main > article {
    margin-bottom: 0;
}

.nav-links {
    text-align: center;
    padding: 20px;
}

Let me know 🙂

[Todd]

.separate-containers .site-main > article {
margin-bottom: 0;
}

This bit did not get rid of the space underneath the image.

.nav-links {
text-align: center;
padding: 20px;
}

This bit added padding to the nav and centered it. I didn’t want the padding, so I pulled that out, but I did want it centered, so that was good!

[Tom]

It seems your site is password protected now. Any chance you could send me the login details?: https://generatepress.com/account

Just be sure to mention this topic 🙂

[Todd]

I removed the password protection, so you can take a look when you get a chance. I’ve spent a lot of time using developer tools to figure out where the extra spacing could be coming from and I’m at my wits end, as nothing I change seems to impact it. I’m even seeing “34” in the margin (see linked image), but it doesn’t seem to be tied to anything in the CSS.

[David]

Hi there,

the margin is added to the bottom of the image – you can see the property in the CSS there ie.
margin-bottom: 2em;

EMs are a unit of measurement based upon your base font size so a 1em = 17px body font. Therfore 2em = 34px.

[Todd]

I should have mentioned that I’d edited margin-bottom in multiple ways, since that was my initial thought. But I’ve set it at ’12em’ and at ‘0em’ and tried changing it to ‘0’ and ‘0px’ and nothing changes it what is presented on the page.

The below is what I’ve edited, fyi:

.post-image-above-header .inside-article .featured-image,.post-image-above-header .inside-article .post-image {
margin-top: 0;
margin-bottom: 2em;
}

It might also be relevant to note that the white space I’ve been referencing appears when I use a featured image with an otherwise blank post. I switched to this format because a regular image post creates an offset at the top of the container which isn’t aligned with the top of sidebar. I’m fine using either the feature image or the regular image as long as I can fix the alignment issue on one of them. The first image on the website is using a regular image, the second uses a featured image. You can see the different alignment / spacing issues.

[Tom]

How did you add the CSS I gave you? It works in developer tools: http://prntscr.com/mb8obv

[Todd]

You’re looking at the post on the main page of the website, which is using a standard image within the post. As mentioned in my last reply, the problem with that setup is the alignment at the top, not the spacing at the bottom. In your screenshot, you can see that the top of the image / container is not aligned with the top of the search widget in the sidebar. Also seen in the image below.

The bottom margin issue can be seen on page 2 (i.e. click ‘2’ in the page nav) and below.

Again, I’m totally fine using either approach if we can resolve one of the alignment / spacing issues. To answer your previous question, I added the css you provided to the style.css in the child theme. The nav padding / centering part works, so I think it’s been applied correctly, the margin just doesn’t seem to change anything.

[Author]

Posts