Home Forums Pro Themes Magpaper Pro New to Remove image from header

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #159501
    Omar Arouna
    Participant

    I need to remove header image from blog pages from all menu and sub menu. And only keep it for the home page.

    I used the CCS with the command line .blog div#page-site-header
    display: none;
    }

    But it didn’t work- Here is the website
    http://omara114.sg-host.com

    Could you please provide me with the exact command as how to do it?
    Thanks

    #159517
    Psink
    Keymaster

    Hello Omar,

    Please try this CSS

    
    
    .archive #page-site-header,
    .blog #page-site-header {
        background-image: none !important;
        padding: 100px 0;
    }
    
    #page-site-header .page-title {
        font-size: 32px;
    }
    
    @media screen and (max-width: 767px){
        #page-site-header .page-title, #hero-section .entry-title, .section-title {
    		font-size: 22px;
    	}
    }
    

    Hope this helps

    If you have any confusion please let us know

    #159524
    Omar Arouna
    Participant

    Thank you for the fix. It works but only partially. I was able to reduce the image header to an acceptable size by reducing the padding to 40px. Now I have a black banner as image with the page header.
    I would like to be able to change the color of that banner to a color that blends better with my site or or make it transparent and change the page header to another color than white.

    On another matter, on the footer as well I need to be able to change the color of the footer image from black to another color- I am talking about the part where the “information” “quick links” are displayed. I need to change the color to a color of my choosing and reduce the size.

    http://omara114.sg-host.com/

    #159532
    sanam
    Keymaster

    @OAROUNA, could you please replace the above CSS that we have provided you previously with the new one.
    i.e:

    Old CSS

    
    .archive #page-site-header,
    .blog #page-site-header {
        background-image: none !important;
        padding: 100px 0;
    }
    
    #page-site-header .page-title {
        font-size: 32px;
    }
    
    @media screen and (max-width: 767px){
        #page-site-header .page-title, #hero-section .entry-title, .section-title {
    		font-size: 22px;
    	}
    }
    
    

    New CSS

    
    .archive #page-site-header,
    .blog #page-site-header,
    .search #page-site-header{
        background-image: none !important;
        padding: 100px 0;
    }
    #page-site-header .page-title {
        font-size: 32px;
    }
    @media screen and (max-width: 767px){
        #page-site-header .page-title, #hero-section .entry-title, .section-title {
    		font-size: 22px;
    	}
    }
    body:not(.single) #page-site-header .overlay {
    	
        background-color: #000;
        opacity: unset;
    }
    .single-post #page-site-header .overlay {
        background-color: #000;
        opacity: 0.1;
    }
    #page-site-header .overlay {
        background-color: #0AFFFF;
        opacity: unset;
    }
    .footer-widgets-area {
        background-color: #000000a3;
    }
    
    

    Also, please visit this site https://www.computerhope.com/htmcolor.htm for color code references to change the background color as per your requirement.

    Hope this helps

    If you have any confusion please let us know.

    • This reply was modified 1 month ago by sanam.
    • This reply was modified 1 month ago by sanam.
    #159536
    Omar Arouna
    Participant

    Thanks perfect fit. it works.
    Best regards

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