Removing Featured Image from some pages

  • Unknown's avatar
    brendaflannery · Member ·

    Hi there,
    My theme ‘Obsidian’ uses a featured image for all backgrounds/pages. While I’m happy with the featured image as a background image for my Home, About & Contact Pages I would like my ART WORK Pages to have a white background. Can you help me figure this out? Is there a CSS I can use?

    The blog I need help with is: (visible only to logged in users)

  • pauljacobson · Staff ·

    Hi Brenda

    It’s possible to do something close to what you may be aiming for, although it will require you to make a couple changes to your theme’s code. I don’t have a complete solution yet but I suspect these are the steps you’d need to follow to make the change:

    Firstly, assign a CSS class to all your art pages (this is the part I’m not sure about because I’m not familiar with how the theme defines these particular pages), for example art-page. In this case, I added the class to the <article> element itself but you’d want to target the art pages specifically to limit the changes to those pages.

    Next, in your CSS file, add something along these lines (you can do this in the Customizer in the “CSS” section (for custom CSS) – you’ll need to have a Premium or Business plan to do this):

    .art-page {
  background-color: #fff;
}

    This will add a white background around your art, like this.

    The one challenge is that the text on your site is white by default so if you add the new class to more global site elements, it won’t be possible to read text like the title text, and so on.

  • kathrynwp · Staff ·

    Hi Paul – thanks for helping out!

    Firstly, assign a CSS class to all your art pages (this is the part I’m not sure about because I’m not familiar with how the theme defines these particular pages), for example art-page. In this case, I added the class to the <article> element itself but you’d want to target the art pages specifically to limit the changes to those pages.

    These sorts of changes aren’t possible without access to modifying the theme files directly, which brendaflannery doesn’t have here on WordPress.com with the Premium plan.

    The good news is that every WordPress page and post has an automatically unique ID that can be used to target it with custom CSS. You can view source or use a browser inspector to find the ID on the body tag or on a specific element, like the post itself.

    Brenda – I’m not seeing a featured image in the background on the five current pages under Art Work in your menu – but I am seeing a custom background image, which was added in the Customizer’s Colors & Backgrounds panel. I’m going to assume it’s this image that you want to remove?

    To have a white background instead of the background image, here’s the code you’d need:

    /* Make background solid white, no image */
body.custom-background.page-id-252,
body.custom-background.page-id-253 {
  background-image: none;
}
.page-id-252 .obsidian-background-overlay::before,
.page-id-253 .obsidian-background-overlay::before {
  background-color: #fff;
  opacity: 1.0;
}
/* Reset white text to grey so it's readable on a white background */
.page-id-252 .site-title, 
.page-id-252 .site-branding .site-description,
.page-id-252 .menu, 
.page-id-252 .site-navigation .menu > .current-menu-item > a, 
.page-id-252 .site-navigation .menu > .current-menu-parent > a, 
.page-id-252 .site-navigation .menu > .current-menu-ancester > a,
.page-id-252 .entry-title, 
.page-id-252 .site-footer,
.page-id-253 .site-title, 
.page-id-253 .site-branding .site-description,
.page-id-253 .menu, 
.page-id-253 .site-navigation .menu > .current-menu-item > a, 
.page-id-253 .site-navigation .menu > .current-menu-parent > a, 
.page-id-253 .site-navigation .menu > .current-menu-ancester > a,
.page-id-253 .entry-title, 
.page-id-253 .site-footer {
 color: #333;
}

    I’ve started you off with the code for the 2018 and 2017 pages; yu can add the other pages following this example.

    Let me know how it goes.

  • The topic ‘Removing Featured Image from some pages’ is closed to new replies.