• Resolved jme3089

    (@jme3089)


    Is there a way to remove the text from on top of the featured images on posts (https://www.gamingbroadly.com/episode02/) and put it further down on the page? Or at the very least make the text totally transparent (which would mean I would need to manually input headers on each post).

    The types of featured images I want to use look funky with text over them. Especially in mobile view.

Viewing 8 replies - 1 through 8 (of 8 total)
  • Moderator Kathryn Presner

    (@zoonini)

    Hi there, to hide the post title, date, and Read More button on single posts, this custom CSS should do the trick:

    .single #single-wrap {
      display: none;
    }

    Don’t edit the theme files directly, otherwise your changes will be overwritten every time the theme is updated.

    An easy way to add custom CSS is to use the CSS editor included in the Customizer as of WordPress 4.7. Head to Appearance > Customize > Additional CSS to add your custom CSS.

    If you prefer to move it rather than hide it and add a title and/or date within each post – which might become cumbersome – I’d suggest doing that in a child theme, instead of just with CSS, because of the way the theme is structured. It’ll involve making a couple of theme-file edits, and that way you won’t have to enter any additional information on your end.

    I would be glad to help you with that if you like, just let me know.

    Thread Starter jme3089

    (@jme3089)

    Hey Kathryn,

    Thank you so much for this response!

    Help with a child theme would be amazing. Anything that’s less cumbersome sounds great to me.

    JD

    Thread Starter jme3089

    (@jme3089)

    Hey! I just had a thought, could we make this work for both pages and posts? I realize my first question just mentioned posts, but on second look I realize that having the header text be in the content area itself (instead of on top of featured image) would look better throughout my entire website.

    Also, I just looked at a post on mobile (www.gamingbroadly.com/episode02/) and it looks as though the header image is being cut off because the post title/read more button is not there. Is there a way to not have text be on top of the featured image, but still have the featured image be fully visible?

    JD

    • This reply was modified 7 years, 7 months ago by jme3089. Reason: saw additional issue
    Moderator Kathryn Presner

    (@zoonini)

    Also, I just looked at a post on mobile (www.gamingbroadly.com/episode02/) and it looks as though the header image is being cut off because the post title/read more button is not there. Is there a way to not have text be on top of the featured image, but still have the featured image be fully visible?

    Try this instead of what I gave you earlier. visibility: hidden preserves the amount of space the hidden element takes up.

    .single #single-wrap {
      visibility: hidden
    }

    Hey! I just had a thought, could we make this work for both pages and posts? I realize my first question just mentioned posts, but on second look I realize that having the header text be in the content area itself (instead of on top of featured image) would look better throughout my entire website.

    Sure! I’ll try to get back to you on the child-theme parts within the next day or two.

    Moderator Kathryn Presner

    (@zoonini)

    The first step you’ll want to do is set up your child theme.

    Making a child theme means your changes won’t be overwritten when you update the theme. If you’re new to child themes, you can explore these guides:

    https://codex.www.ads-software.com/Child_Themes
    https://www.smashingmagazine.com/2016/01/create-customize-wordpress-child-theme/

    Next, take all your earlier custom CSS and move it into your child theme’s style.css file, so you won’t have CSS in two places.

    To hide the title on the featured image on pages (in addition to posts), you’ll want to modify what I gave you earlier:

    .single #single-wrap {
      visibility: hidden
    }

    Changing it to this:

    .single #single-wrap, .page #single-wrap  {
      visibility: hidden
    }
    

    Next, make a copy of the file content-single.php and place it in your child theme.

    You’ll want to remove or comment out these lines:

    13 – <?php if ( empty( $featuredimage )) : ?>
    15 – <?php endif; ?>
    57 – <?php if ( empty( $featuredimage ) ) : ?>
    59 – <?php endif; ?>

    To comment them out, put // just after <?php on each line. That deactivates that part of the code without needing to remove it.

    Removing these two conditions displays both the post title and date on single posts whether or not the post has a featured image.

    On pages, the post title is already output below the featured image on pages, so you won’t need to anything extra there.

    Let me know it goes or if you have any questions!

    • This reply was modified 7 years, 7 months ago by Kathryn Presner. Reason: fixed typo
    Thread Starter jme3089

    (@jme3089)

    This worked great! Thank you so much. It’s looking SO much better, and I learned a trick to boot. Thanks Kathryn!

    Thread Starter jme3089

    (@jme3089)

    Whoops. Forgot to mark as resolved. Thanks!

    Moderator Kathryn Presner

    (@zoonini)

    Wonderful – glad this did the trick!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Removing Text on Top of Featured Image’ is closed to new replies.