Use a different image in the grid that's referencing a child page than the page

Hi, to hide the post thumbnail image on the grid pages, and leave the title and the text, you can use the following CSS.

.grid .post-thumbnail img {
    display: none;
}

As far as “b” is concerned, this would require editing of the theme script files, and I’m not entirely sure how to designate two different images to be used.

Hi,
I have a variation of the same question: I’d like to have the thumbnail on the parent page, but not the huge image on the header of the child page.

This is the website: https://fotofamiliabcn.com/ff/

I’d also like to remove the “Read more” button from the grid page links.

Thanks!

Actually, sorry about the confusion on my second question. It’s not only that I’d like to remove the “Read more” button, is more that I don’t want any preview of the text with the thumbnails, only the title.

@luttymoreira, do you want to completely remove the large featured image on the child pages? If so, you can hide it with this CSS:

.page-child .hero.with-featured-image {
     display: none;
}

However, this disrupts the breadcrumbs, so you’ll also need to shift them down.

You can hide the “Read More” button with this CSS:

.more-link {
     display: none;
}

With this change you may need to adjust the padding of the grid

@kevin, thanks for your response..
Where in the code and in which files should I add (or substitute?) these codes?

@luttymoreira, Don’t edit the theme files directly, otherwise your changes will be overwritten whenever the theme is updated.

An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

As alternatives, you could either install a standalone custom CSS plugin, or create a child theme.

Hey, thanks Kevin!
I’m using Simple Custom CSS, thanks for the tip!

The code for the “read more” worked and I’ve adjusted the padding..
But is there a way to still have the “read more” on the blog posts (meaning they’d be hidden only on the grid pages)?

Now the other code didn’t really do what I intended..
If you see my website: https://fotofamiliabcn.com/ff/ , the only big header picture I want is the one on the front page..
On the other static pages (everyone of them), I’d like it to basically start right below the header bar (with the title and menu), and also not under it..

I’m not sure if I’m explaining it well, but I’m trying to be very specific =)

Thanks again for your help!

*Solved the “read more” issue!

If you also want to remove it from the parent pages (this excludes the home page), you can change the CSS

.page-child .hero.with-featured-image, .page-parent .hero.with-featured-image {
     display: none;
}

It there are any static pages that aren’t child or parent pages, you’ll need to add their individual page-id to the CSS to remove the header image. In order to find the page-id, you can inspect the site using your browser tools. Here a guide on finding your theme’s CSS:

https://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

Thank you, this works!

Ok, it works, but I’ve just found a problem…
On this page: https://fotofamiliabcn.com/ff/contacto/ , which is the only page I use with a sidebar, when it’s loading, it looks fine, but then for some reason the sidebar goes below the contact form, not beside it…

This happens only when I remove the header…

Try checking the .content-area width for that page.

Already did, but it does’t work.. I even made it super narrow to try it, and it kinda works once I reach some 300px (which is impossibly narrow), but even this way, what happens it that the column seems to start almost in the middle of the page..

I left it at 300px, so you can take a look if possible..

In my browser I was able to increase it up to 600px wide without any issues. Can you try changing it again?