Change Header Height on one page

It will be much easier to help you if you post the URL of the page you want a different header on. Otherwise your question is kind of theoretical.

Judy’s home page. The header at top is on every page.

2nd header is for blog pages only. The “Journal” page is the main blog page. Her is the header I want to use for the blog:
https://judypaster.com/wp-content/uploads/2011/01/Judy-Blog-E.jpg

hi

Your blog header image is 451px tall and the regular header image is 144px tall.

Please explain where you intend to place the additional 300 pixels of height – is the header going to be 300 pixels taller on the blog page than on the home page? If not, what do you have in mind?

The site is very nice looking by the way.

Oh, thanks. I am designing it for my sister. Most of the pages are still private though.

I would like to make the blog header 451 px tall. I think it will look good (and big). If not I can always change the size a little. Is this even possible to change the header and the size on just blog pages? I would also like to to show up on all blog posts — not just the Journal page. Hard project?
Thanks Barb

try adding this to your stylesheet:

.page-id-20 .header-image #title-area, .single .header-image #title-area {
   height: 451px;
   background-image: url(/wp-content/uploads/2011/01/Judy-Blog-E.jpg);
}

It should display the other header on the blog page and all single post pages.

See where that gets you. If it doesn’t work you may need to change this existing section: (If it is already working don’t do what I am about to say)

.header-image #title-area, .header-image #title-area #title, .header-image #title-area #title a {
    background: url("https://judypaster.com/wp-content/uploads/2011/02/logo.png") no-repeat;

You are assigning the background image to 3 different page elements. I suggest you leave the rest of what is in that section alone but take the background line out. Then add it back assigned to only one page element like this:

.header-image #title-area {
   background: url("/wp-content/uploads/2011/02/logo.png") no-repeat;
}

Well, I tried what you suggested and also some other variations, but no luck yet. The first bit of code did not work – nothing changed.

The theme separates the title area into 3 sections in case you want a partial logo (not full width). When I take any of that code out, it messes up the whole thing. The size of the logo changes and it adds in the Studiopress default logo on top of it. At least I didnt get a fatal error like I have before. Haha. (I do copy everything before I change the file)! I hope this paragraph makes sense. I am not very versed on this subject but can get around.

Any other ideas? It’s ok if you have better stuff to do though. I really appreciate you having put time into it.

Barb

hi

my mistake

change the first thing I told you to this

.page-id-20 #title-area, .single  #title-area {
   height: 451px;
   background-image: url(/wp-content/uploads/2011/01/Judy-Blog-E.jpg);
}

Now you will definitely see part of the image.

Make the other changes I suggested before and you will see the whole image. I have it working in my browser.

I suggested you enter this

.header-image #title-area {
   background: url("/wp-content/uploads/2011/02/logo.png") no-repeat;
}

change that to this

#title-area {
   background: url("/wp-content/uploads/2011/02/logo.png") no-repeat;
}

Hi, almost! It is giving me the blog photo but also up in the left hand corner it was giving me the default logo. If you check the home page afterwards you will see it also.

HOWEVER, Maybe I can just use the first part you gave me and alter the orange photo to make it more narrow. see the journal page as it is now. (I have the original logo and 1/2 of the orange photo. Might work for me with a little altering. I’d still like to figure it out though because I would like to do the same thing on my site eventually. https://judypaster.com/journal/

I think I did it right. You wanted me to replace this whole thing, right?

Original:

.header-image #title-area, .header-image #title-area #title, .header-image #title-area #title a {
background: url(https://judypaster.com/wp-content/uploads/2011/02/logo.png) no-repeat;

NEW:

#title-area {
background: url(“/wp-content/uploads/2011/02/logo.png”) no-repeat;
}

GOT IT!!!!!!!!!!!! just had to take out the }

THANKS!!!! Are you married? Are you male? hahaha
Thank sooo much!!!!!
You are so awesome!!!!!!!

Try clearing your browser cache. I am seeing the full image now on the journal page. Or refresh the screen two or three times

You missed my other posts. check them out because I thank you profusely! I just had to take out the } at the end of the code you gave me.
THANKS!!!

You are welcome.

Wish you the best!
take care