Removing Headers from Pages

chasingpisces · Member · Aug 18, 2017 at 2:38 pm
Copy link

Add topic to favorites
Hi everyone,

Does anyone know if it is possible to remove the theme header from an individual page or create a page-specific one? One of my pages is for a specific topic that I find my header competes with. I use Chronicle theme and the page is:

Friday’s Fantastic Tales

Any suggestions are greatly appreciated.

Thanks,
Joe

The blog I need help with is: (visible only to logged in users)
crazywickedawesome · Member · Aug 18, 2017 at 3:28 pm
Copy link
It’s totally possible to do that! to hide the header on the page you linked for example you can try CSS that looks like this:

.page-id-2946 a.header-image {display: none;}

The page id is unique to that page. to set this up for other pages you can find it in each pages’ source code.

With that CSS applied, the page should look like this: http://i.imgur.com/hwX1GBD.jpg?1

Let me know if that helps!
chasingpisces · Member · Aug 18, 2017 at 6:56 pm
Copy link
Thank you, crazywickedawesom

I’ve been trying to do this forever. Your code worked perfectly for me. I really appreciate your time and clear explanation to an amateur like myself.

All the best and have a great weekend,

Joe
crazywickedawesome · Member · Aug 18, 2017 at 7:59 pm
Copy link
No problem Joe! You can also set up custom headers on a page by page basis if you need help with that just ask :)
chasingpisces · Member · Aug 18, 2017 at 10:51 pm
Copy link
I would love to be able to do that, crazywickedawesome. Would be much better than the title I’ve inserted into the body copy. Thanks for the offer.

Joe
crazywickedawesome · Member · Aug 19, 2017 at 1:26 pm
Copy link
Okay so similarly to how you needed the page id to get the header to disappear only on the Fantastic Tales page you need the page id for each page you want a different header on.

But wait, what about the home page? The home page doesn’t have a numerical page id, it’s just home. Your CSS will look something like this:
```
a.header-image a img{ visibility:hidden !important;}
.home a.header-image {display: background-image:url(https://chasingpisces.files.wordpress.com/2017/02/cropped-chasing-pisces_header.jpg) !important; }
```
Then for each page your CSS looks like this:

.page-id-XXX a.header-image {display: background-image:url(https://chasingpisces.files.wordpress.com/JOE-COOL-HEADER-IMAGE.JPEG) !important;}

Replacing the XXX with the page id number, and the JOE-COOL-HEADER-IMAGE.JPEG with the actual url of the header image you want on that page.

At least that’s how it would work in theory, it may require some tweaking. let me know if that helps!
chasingpisces · Member · Aug 19, 2017 at 7:28 pm
Copy link
HI crazywickedawesome,

Thanks very much for the CSS. I gave the code a try, but the original header still kept reappearing, no matter what URL I placed in it. Not sure why it won’t work.

Joe
crazywickedawesome · Member · Aug 19, 2017 at 9:47 pm
Copy link
Hmm Joe try the following:

.container a.header-image {visibility: hidden !important;}

Your theme encapsulates the header image inside that .container class so hiding it should resolve things.

Let me know if that works
chasingpisces · Member · Aug 20, 2017 at 12:44 am
Copy link
Still no go, crazywickedawesome

That code removes the homepage header from the entire site, but I still can’t get the custom header to appear on the page. Maybe the theme is built so that you can’t do it.

Thanks again,
Joe
crazywickedawesome · Member · Aug 20, 2017 at 1:08 am
Copy link
I’ll keep working on it, I’m pretty sure it’s doable with your theme :)
chasingpisces · Member · Aug 20, 2017 at 1:59 am
Copy link
Thanks very much, crazywickedawesome

I appreciate all your time and effort.

Joe
thesacredpath · Member · Aug 22, 2017 at 7:37 pm
Copy link
To use different header images on different pages, you can use the following example I worked up for your Fiction page. I just randomly grabbed an image from your media library that was the right size.
```
.page-id-3361 a.header-image img {
  visibility: hidden;
}
.page-id-3361 a.header-image {
  background: url('https://chasingpisces.files.wordpress.com/2017/02/cropped-chasing-pisces_header_2017_feb_5_2.png') no-repeat scroll center top / contain;
}
```
chasingpisces · Member · Aug 24, 2017 at 2:25 pm
Copy link
Hi thesacredpath,

Thanks very much for that code. Works great, except I inserted a URL for a header on one page and it appeared smaller than a regular header. The image dimensions for the header are 1250 x 350. I can’t figure out why it would appear smaller on the page. Any ideas?

The page id is 2958 and the header URL is https://chasingpisces.files.wordpress.com/2017/08/cropped-fft_page_title.png.

Thanks again for your help,
Joe
thesacredpath · Member · Aug 25, 2017 at 2:53 am
Copy link
Hi, you have this in your custom CSS, which completely hides the header image. You want to use visibility hidden, not display none. With display: none, the div we will put the new image into collapes to a zero height.
```
.page-id-2958 a.header-image {
 display:none
}
```
For this to work, you need to make your replacement images the same size as the header image you now have set, which is 1350 x 246px. This will allow the replacement images to be responsive and not get cut off or parts of them disappear.
chasingpisces · Member · Aug 25, 2017 at 3:15 am
Copy link
Thanks very much, thesacredpath

I would have never figured that out in a million years. I’m humbled and most grateful.

Take care,
Joe
thesacredpath · Member · Aug 25, 2017 at 3:41 am
Copy link
Joe, you are welcome.

No items found.