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

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • October 24, 2021 at 12:12 am #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

    October 24, 2021 at 7:04 am #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

    October 25, 2021 at 12:06 am #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/

    October 25, 2021 at 2:06 am #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 2 years, 6 months ago by sanam.
    • This reply was modified 2 years, 6 months ago by sanam.
    October 25, 2021 at 7:47 am #159536
    Omar Arouna
    Participant

    Thanks perfect fit. it works.
    Best regards

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