Argent Theme- removal of header- CSS newbie

ajohnson840 · Member · Jul 9, 2015 at 4:20 pm
Copy link

Add topic to favorites
Hi,
I have looked into previous posts regarding editing CSS to remove header images or replacing them on all other pages except for my home page and I am still having some issues. The instructions stated to add this:

.page-id-2 .site-image img {
display: none;
}

But when I find the matching CSS, I am not sure where to add this portion. If I want the header off of page 2 (About us), where do I place the information above?

I’m very new to this so any help would be great!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jul 9, 2015 at 5:53 pm
Copy link
Hi there, I’m not seeing a header image on your site right now. Did you remove it?

CSS is theme specific, and also, the unique page id can be different on different sites. In your case, the About Us page is page-id-9.

Since I’m not seeing a header image on your site, I worked out this CSS and then substituted your unique about us page id.
```
.page-id-9 .site-branding {
    background-image: none !important;
}
```
Go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the above custom CSS to remove the header image from the About Us page on your site.
ajohnson840 · Member · Jul 9, 2015 at 5:59 pm
Copy link
Hi!

I was playing so I removed it accidentally but I just put back on. Then I went and put your css and the header is still there :(
ajohnson840 · Member · Jul 9, 2015 at 6:00 pm
Copy link
Oh, now I cant get it back on my home page…I must have mucked something up.
thesacredpath · Member · Jul 9, 2015 at 6:30 pm
Copy link
Hi, I’m not seeing a header image on the About Us page. Hmmm, I also see that the page id number has changed, or somehow I got it wrong and you now have it set to page id 1, so it is working. If you are not going to have the site title showing on the about us page, we can replace the existing CSS you now have for that page with the following
```
.page-id-1 .site-branding {
    display: none;
}
```
which will remove the entire site-branding div and tighten up the spacing.
ajohnson840 · Member · Jul 9, 2015 at 7:19 pm
Copy link
Thank you so much!

That worked perfectly.

Quick question: If I want to change the header image depending on the page, would this be the CSS:

.site-branding {
background-image: url(https://dvtemp.files.wordpress.com/2015/07/cropped-2015-07-02_15-10-151.png);
}

Obviously changing the url according to my photo choice?

Thanks again for your help,

Ami
thesacredpath · Member · Jul 9, 2015 at 9:26 pm
Copy link
Ami, you would have to use page id similar to what we did with hiding the header image with the previous CSS. The code would be similar to the Our Team page where you have this CSS
```
.page-id-87 .site-branding {
    background-image: url("//dvtemp.files.wordpress.com/2015/07/cropped-cropped-greytoronto.png");
}
```
You just get the page id for each page and create a rule just like that one.

No items found.