Inner Page Headers

Hi Forum,

I know there are several posts on this subject across the forum but I don’t understand any of them … sorry.

Sydney appears to give only one header image option for the inner pages (not Homepage) but, obviously, different pages are set up for different subjects or reasons and I would like, therefore, to determine a different header image for each of my pages.

How do I do this?

P.S. I have no idea what CSS is or what to do with it, so if it involves this, please give a dummies step-by-step guide. :slight_smile:

Many thanks

Hello there,

The simplest way to change the header image within this theme is using some custom css code. Please follow the steps below:

  1. you have to find the page id by inspect the HTML element using chrome dev tools (we will using chrome browser). right click of the page then choose “inspect” http://prntscr.com/af552x to display the chrome dev tools

  2. Make sure you open the “Element” tab, from there you’ll see the page id http://prntscr.com/af56d6

  3. Now, you have to put the page id to the css code as follows:

.PAGE-ID .header-image {
   background-image: url(YOUR IMAGE URL);
   display: block;
}

change the PAGE-ID from the code in above with the page id and make sure to put the dot . before the page id, i.e: .page-id-176

  1. change the YOUR IMAGE URL from the code in above with your image. i.e: http://img.png

  2. Now you have to install simple custom css plugin and activate it.

  3. Go to appearance > custom css > then put your custom css code there.

That’s it, Let me know how it goes.

Regards,
Awan

Hello there,

Thank you for asking. Please follow this short tutorial https://athemes.com/forums/topic/header-images-per-page/#post-219315

Regards,
Kharis

Thank you Awan, after several tearful tantrums I got as far as step 2. I don’t know where to type what you said, do I type it exactly as you have put it?

Kharis: I have looked at the short tutorial before and, unfortunately it meant absolutely nothing to me … sorry, it might as well have been in Martian.

Please could someone, in a step-by-step manner, tell me how to change a header photo on a particular page? I don’t understand ANY code, I don’t know what it means, where it’s supposed to go etc.

Regards,
Karen

Dear Karen,

Please could someone, in a step-by-step manner, tell me how to change a header photo on a particular page? I don’t understand ANY code, I don’t know what it means, where it’s supposed to go

Apologies, currently there is no other way than using custom CSS code. Try to carefully follow the suggested steps above. If it doesn’t change anything, please share your page URL here. So we can inspect it directly and could do correcting the code.

Regards,
Kharis

Thank you, but … share the what and how do I do that?

Dear Karen,

I would like to apologize in advance for the delay.

Try to use the Unique Header plugin instead. I think it would be much easier.

Regards,
Kharis