[Theme: Arcade Basic] Changing the height of the header image on one page only

Do you have a place for custom CSS? Use a child theme if not.

So this one was really weird, how did it get like that? Basicly the image was made absolute for some reason and then pushed way up. The other page image is pushed up too but only by 31 pixels. It kind of difficult to explain exactly what was wrong, there seems to be something fundementaly wrong with the flow and so some little hacky job was required to make it work.

Now this should work, but when I did it in the developer console I was unable to overide some rules, despite mine being more specific, and was only able to do it with the !important command. So try just this first.

#header > div > div > img {
position: relative;
top: -31px;
}

Now you should really never use the !important command, because its hard for other programmer who dont know you used it to then apply new style to your sheet, but I can’t figure out why i could not overwrite it so this will at least get it working:

#header > div > div > img {
position: relative !important;
top: -31px !important;
}

Just make sure if you ever have anyone else work on it you tell them you used the important command.

The top code you sent me just pushes all my header images down, it doesn’t change how much is shown, so it’s just cut off at a different point.

The second code you sent me worked, but then applied itself to all the pages – I only want one page to have the bigger header – my “most recent” page. I don’t want any of the other header images on other pages to be affected. Is there a way to fix that?

Thanks for your help! Good to know that a workaround is possible, even though I don’t have the right one yet. If you have any other help you can give me, that’d be great! Thanks! ??

Well your webpage body has the class blog and basic, and that does not appear to be a class for any other of the sites bodies, so you should be able to add it to the selctors.

.basic #header > div > div > img {
position: relative !important;
top: -31px !important;
}

or

.blog #header > div > div > img {
position: relative !important;
top: -31px !important;
}

Let me know if that works.

If one ever does multiple pages then you can try the other. If both ever do multiple pages, might be able to use the head title as a selector, never tried that before. I keep subscribed indeffinitly to post so if that ever happens I can let you know how to do it.

Yes! The second one works!! Seriously, thank you SO much. I would have never figured that out on my own! Thank you!!! ??

Since you are so awesome, I had one other question about my site… maybe you can help?

https://www.ads-software.com/support/topic/theme-arcade-basic-adding-sidebar-to-the-homepage?replies=1

No problem. Just noticed that for some reason its not the same as the other page. Just increase that top number (its a negative so I mean make it less negative) until it is the same as the other page.

Also confirmed that this is a rare case were using !important is the only way.

Hi,
sorry for the stupid question, but I’m not able to change the header image..I able to change the background image but not the header..is it a default image??

i want to change front page image ?????