How to edit the Posts Page

I’m having trouble editing the “ignis-hero-area” element on my designated Posts Page.

Typically when I add CSS for a specific page, I insert the page id for that page before I begin the CSS (i.e. page-id-2378)

However, on my posts page I’m unable to locate the page id to edit the header for my blog

How can I edit the header on my posts page?

Hello there,

What’s your intention of doing so? Adding a different header image? Probably I could suggest you with custom code solution.

Regards,
Kharis

Yes that’s correct, I’m am trying to change the background image in the ignis hero header only for my Posts Page (Blog Page). I want to keep the original header on every other page though

I’m using the current CSS to change the header background image:

    .ignis-hero-area {
       background-color: transparent;
       background-image: url(‘full image url’);
       background-size: 60%;
       height: 350px;
    }

However this changes the background for all headers on my website. And I can’t locate the page id to make the change specific to the Blog Page.

How it currently looks: www.lucidlilac.com/blog

What I’m trying to achieve (just the header part): www.lucidlilac.com/test

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .blog .ignis-hero-area {
      background-color: transparent;
      background-image: url('http://www.lucidlilac.com/wp-content/uploads/2019/07/Blog-Header.png');
      background-size: 60%;
      height: 350px;
    }

    .blog .ignis-hero-area .entry-title {
      display: none;
    }

Regards,
Kharis

Yes that did it! Nice, thanks so much for your help! :slight_smile:

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis