BANNER HEIGHT AND FEATURED IMAGE

  • Author
    Posts
  • #161080

    Hi

    For some pages I only want to display the featured image in the banner and therefore also wish to increase the height of the banner slightly so that more of the image is displayed similar to the front homepage.

    I there a way of doing this regardless of what page template I use.

    Best, Matt

    The blog I need help with is zenith-performance.com.

    #161088

    tarasdashkevych
    Theme Author

    Hello Matt,

    The page header section is generated automatically. There are no options to modify it for specific pages. On the other hand, we can use a custom CSS to change appearance of the page header section for a specific page.

    Each page in WordPress has its own unique id: https://wordpress.com/support/pages/#how-to-find-the-page-id

    We can use that ID in our custom CSS to make custom changes to the page header. For example, let’s take the Finance page from a demo (https://fortunedemo.wordpress.com/our-services/finance/). The ID of this page is 253. In order to hide the featured image in the content area and change the height of the page header, I can use the following CSS:

    
    /* hide featured image in the content area */
    .page-id-253 .hentry .entry-thumb {
      display: none;
    }
    
    /* increase height of the page header section */
    .page-id-253 .page-header {
      padding-top: 6.5rem;
      padding-bottom: 1.5rem;
    }
    

    We will consider to add a custom template (in future theme updates) with a larger page header, and the content area without a featured image.

    Please let me know if you have any additional questions.

    Kind regards,
    Taras

    #161096

    Hi Taras

    Thanks for the quick response. Getting rid of the featured image has worked -great thanks.

    If I want to do this for more than one page do I need to enter each piece of code separately for each page or can I add a number of pages

    eg

    /* hide featured image in the content area */
    .page-id-41,45,67,89 .hentry .entry-thumb {
    display: none;
    }

    Obviously not sure how to write it but do you know what I mean?

    The height go the banner hasn’t changed

    /* increase height of the page header section */
    .page-id-253 .page-header {
    padding-top: 6.5rem;
    padding-bottom: 1.5rem;
    }

    I am assuming I need to increase the padding? I have put in 20 and 5 for example but seen no change. Am I doing this wrong?

    Best,
    Matt

    #161098

    Found it. I didn’t put the page ID in!

    So now just need a reply to the first bit. Can I change multiple pages with same piece of code or do I need to ent CCS code for each page?

    #161105

    tarasdashkevych
    Theme Author

    Matt,

    ” Can I change multiple pages with same piece of code…”
    – Sure. To do so, your custom CSS should look like this:

    
    /* hide featured image in the content area */
    .page-id-41 .hentry .entry-thumb,
    .page-id-45 .hentry .entry-thumb,
    .page-id-67 .hentry .entry-thumb,
    .page-id-89 .hentry .entry-thumb {
      display: none;
    }
    

    Please let me know if you have any additional questions.

    Kind regards,
    Taras

    #161119

    Hi Taras

    That’s great thank you very much. Really impressed with the level of service on this forum.

    Will be sure to be posting a few more questions soon.

    Thanks again.

    Matt

    #161149

    tarasdashkevych
    Theme Author

    You are very welcome, Matt! :)

    Kind regards,
    Taras

The topic ‘BANNER HEIGHT AND FEATURED IMAGE’ is closed to new replies.