Turning off Featured Hero image for specific page

  • Author
    Posts
  • #144941

    rocacswebmaster
    Member
    Original poster

    Is there a way to turn off the hero image for a specific page?
    I figured out how to remove the Featured image, but that keeps the title with a black background where the image would otherwise appear. Can the page title and content area be made to follow immediately after the top banner/menu as it does on the home page?

    I think the hero image looks great for the main pages but I don’t think I want to have this visible on every single child page.

    The blog I need help with is: nerm2020.org

    #145074

    designorbital
    Theme Author

    Hi,

    Please share the specific page URL.
    I will try to share a CSS Snippet with you.

    Thanks

    #145083

    rocacswebmaster
    Member
    Original poster

    Let’s try this one as an example:
    https://nerm2020.org/about/organizing-committee/

    If I can do it, I’d like to apply this modification to other pages if possible too.

    #145128

    designorbital
    Theme Author

    Hi,

    Please try the following CSS Snippet.
    It will not remove Featured Image completely but will reduce the height, and the site content will move up slightly.

    
    .page.page-id-48 .site-hero.site-hero-featured-image {
      height: 320px
    }
    .page.page-id-48 .site-hero .site-hero-content {
      height: 150px;
    }
    

    Thanks

    #145191

    rocacswebmaster
    Member
    Original poster

    Hey, thanks! This is awesome… it got me moving down the right path for this. I went a little further with what you provided and came up with 5 CSS declarations:

    .page.page-id-48 .site-hero  {
      height: 140px;
    }
    
    .page.page-id-48 .site-hero .site-hero-content {
      height: 90px;
    	opacity: 1;
    }
    
    .page.page-id-48 .site-hero .entry-title-site-hero, .site-hero .entry-title-site-hero {
      color: black;
    }
    
    .page.page-id-48 .site-hero .site-hero-overlay {
    	background: white;
    }
    
    .page.page-id-48 .site-hero .site-hero-perspective {
    	display: none;
    }

    Each CSS declaration does the following
    1 and 2: adjust the height of the hero and hero content
    3: Sets text color to black
    4: Sets background to white (if no featured image is used, the default background is black in place of the image)
    5: Turns off Hero Perspective div which may overlap the text.

    I am kind of a CSS rookie… I am trying to figure out if there is a way to combine CSS classes so that these changes could be applied to multiple page ID’s. For instance, apply these changes to page-id-48, page-id-53 and page-id-57 (just making up numbers here)… without having to duplicate these CSS entries for every page.

    Does anyone know how we can do that?

    #145203

    designorbital
    Theme Author

    Hi,

    You did awesome.
    There can be two approaches to target multiple pages without duplicating the CSS rules.

    Approach 1:

    Remove .page-id-48 class, so it will target all pages. Example,

    
    .page .site-hero  {
      height: 140px;
    }
    

    Approach 2:

    Try the following example for targeting the specific pages,

    
    .page.page-id-48 .site-hero,
    .page.page-id-53 .site-hero,
    .page.page-id-57 .site-hero  {
      height: 140px;
    }
    

    Hope it will help you.
    Thanks

    #145213

    rocacswebmaster
    Member
    Original poster

    Works PERFECTLY!
    Thanks so much!

The topic ‘Turning off Featured Hero image for specific page’ is closed to new replies.