Customize Page/Post Title Banner/Image

  • Author
    Posts
  • #89491

    raphaelledergerber
    Member
    Original poster

    Dear all,

    I would like to customize the page title banner/image:

    1. The image of the page and post title banner, which is displayed below the page/post title, I would like to remove, but not on parent grid pages (the grid should display the images of the child pages on the parent page).

    2. I would like to change the darkness of the overlay of the page and post title banner (pages and posts which have a title image). Per default it’s a dark grey overlay, which should be a bit less dark.

    3. On pages without an page title image I would like to change the color of the banner (per default grey) and the font color (per default dark grey).

    How to do that?

    Thanks,
    Raphael

    The blog I need help with is: ledergerber-partner.ch

    #89593

    tarasdashkevych
    Theme Author

    Hi Raphael,

    “The image of the page and post title banner, which is displayed below the page/post title, I would like to remove, but not on parent grid pages (the grid should display the images of the child pages on the parent page).”
    – Each page has its own unique id ( To find the Page ID, go to Pages → All Pages and click the title of the page. The address bar of your browser will display a URL with a numeric ID at the end ).
    Let’s say you want to hide featured image for this page: http://ledergerber-partner.ch/angebot/unternehmensstrategie/
    The ID of this page is 123. So, to hide the featured image on this page, you need to use the following css:

    .page-id-123 .site-main .hentry .entry-thumb {
      display: none;
    }

    ” I would like to change the darkness of the overlay of the page and post title banner (pages and posts which have a title image). Per default it’s a dark grey overlay, which should be a bit less dark.”
    – Please use this custom css:

    #primary-header .overlay,
    .page-header.has-featured-image .overlay {
      opacity: 0.5;
    }

    “On pages without an page title image I would like to change the color of the banner (per default grey) and the font color (per default dark grey).”
    – In order to change background color, please use this custom css:

    .single .entry-header.primary-hentry,
    .page .entry-header.primary-hentry,
    .archive .page-header,
    .search .page-header,
    .error404 .page-header {
       background: #09c;
    }

    To change text color, please add this css:

    .entry-header.primary-hentry .entry-title,
    .page-header .page-title {
      color: #ffffff;
    }

    Best,
    Taras

    #89608

    raphaelledergerber
    Member
    Original poster

    Hi Taras,

    Thanks, that helps a lot! Very appreciated!

    1. The image of the page and post title banner, which is displayed below the page/post title, I would like to remove, but not on parent grid pages (the grid should display the images of the child pages on the parent page).

    Because I want to remove the title image also on all posts, it would be complicated to enhance the CSS whenever we post a new article.

    Is there a way to remove the title image on all pages and posts generally, but not on parent grid pages (the grid should display the images of the child pages on the parent page)?

    Thanks,
    Raphael

    #89639

    tarasdashkevych
    Theme Author

    Raphael,

    Please try this custom css:

    .single .site-main .hentry .entry-thumb,
    .page:not(.home):not(.page-parent) .site-main .hentry .entry-thumb {
      display: none;
    }

    Thanks,
    Taras

    #89640

    raphaelledergerber
    Member
    Original poster

    It works! Thanks, Taras!

    Best regards,
    Raphael

    #89687

    tarasdashkevych
    Theme Author

    You are welcome Raphael :)

The topic ‘Customize Page/Post Title Banner/Image’ is closed to new replies.