Home Forums Pro Themes Blog Diary Pro Remove or reduce header image.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #112707
    Nikita Ward
    Participant

    I’m looking to resize or remove outright the large header image that dominates each page in the theme.

    Thank you.

    #112789
    wensolutions
    Keymaster

    Hello,

    As per your query regarding the header image, to hide the header image you can follow the path Appearance > Customize > Header Image and hide the image.

    To resize the image you can add the CSS following the path Appearance > Customize > Additional CSS

    #header-banner-image {
        
        height: 200px;
    }

    You can manage height as per your requirement from above CSS in order to resize.

    To remove the header image in the theme, you can add CSS following the path Appearance > Customize > Additional CSS

    div#header-banner-image {
        display: none;
    }

    Hope this helps.

    If you have further queries, let us know.

    Thank you.

    #114778
    Simon Selmer
    Participant

    Hi
    This CSS code manages the background picture behind the title in the top.

    What I think Nikita asks for, and what I now also need, is how to reduce or remove the picture (which is the same as behind the title), that is behind the breadcrumb. Because of of the box, that picture is very large, so on every page you have to scroll way down to get to the actual content.

    #114904
    wensolutions
    Keymaster

    Hello,

    To remove the picture that is behind the breadcrumb, you have to add CSS following the path Admin Panel > Appearance > Customize > Additional CSS,

    div#page-site-header{
    
        display:none;
    }

    To reduce the picture that is behind the breadcrumb, you have to add CSS following the path Admin Panel > Appearance > Customize > Additional CSS,

    #page-site-header {
        padding: 298px 0;
        }

    You can adjust the picture by padding size.

    Hope this helps.

    If you have further queries, let us know.

    Thank you.

    #114944
    Simon Selmer
    Participant

    Hi, thank you.

    This
    div#page-site-header{
    display:none;
    }

    removes the whole breadcumb block, including the headline. Not just the the background picture.

    Can you suggest the CSS to just remove the background picture please?

    #114983
    wensolutions
    Keymaster

    Hello,

    To remove the background image but not the breadcrumb and the title, you can add the CSS following the path Admin Panel > Appearance > Customize > Additional CSS,

    .single #page-site-header{
           background-image: none !important;
           background-color: transparent;
           padding: 0px;
    }
    
    .single .overlay{
          background-color: transparent;
    }
    
    .single #page-site-header .page-title{
      color: #191e23;
    }
    
    .single .trail-items li a {
        color:  #191e23;
    }
    
    .single .trail-items li{
      color:  #191e23;
    }
    
    .single .trail-items li:not(:last-child):after{
       color:  #191e23;
    }
    
    .single .trail-items {
        margin-bottom: 20px;
    }
    
    .single  #content {
        padding: 25px 0;
    }

    Regards.

    #114986
    Simon Selmer
    Participant

    Hi

    The code didn’t work at first, but removing the .single in front of them seems to have the correct effect.

    Thank you

    #114988
    wensolutions
    Keymaster

    Hello,

    Glad you found the workaround.

    If you have further queries, let us know.

    Thank you.

    #122773
    redhouse
    Participant

    I just used this successfully to reduce the image but it does it on every page. Is it possible to reduce on one page and keep large on another. eg Blog page small, contact page large?
    Also changing the image, i worked this out by changing featured image but it doesnt work on the blog page. when looking to edit the page is shows the new image but when i look at the published page it still the same image as the header image.
    https://managersstudy.com/blog/
    thank you

    #122791
    wensolutions
    Keymaster

    Hello,

    Regarding your query, you can add below given CSS following the path Admin Panel > Appearance > Customize > Additional CSS, to decrease the featured image.

    .blog #content #page-site-header {
        padding: 50px 0;
    }

    Hope this helps.

    If you have further queries and if this won’t help you please provide us with the screenshots of specific pages so that we can help you with a precise fix.

    Regards.

    #123545
    redhouse
    Participant

    Thanks
    that worked with size of image but how do I change the image under the header image on the blog page?
    thanks

    #123578
    wensolutions
    Keymaster

    Hello @redhouse,

    The image that is added under the header is the image that comes from the option of customizer “Header image”. The image will be displayed at the top of the page and below it.

    Hope this clears the confusion.

    Thank you.

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.