Is It Possible to Have the Header a Different Colour on Post Pages?

Asked on July 8, 2016 in Customization.


I would like the colour of the Header on Post pages to be a different to the colour of the Header on the Home page.

Currently I have the header set to transparent,  when it is at the top of the page and as the user scrolls it fades to 50% black. Although this is a great Solution,  when the Header appears over an image it’s not the best solution for a Post page with a white background; or in fact any page with a white background.

Is there any way to apply a colour to only Post or regular pages? I thought of putting a banner at the top of the page using a slider widget but was unsure of how to edit post in the Layers customiser. Perhaps I am over thinking this?

All your help hugely appreciated.

Rickerby Layers User

Can you  share your site link to understand properly?

on July 8, 2016.

Hi inkcolor,

I was wanting to achieve an effect similar to this screenshot: where the header is transparent with an image behind it.

I seem to be able to achieve this on the blog page or any other page created in the layers page editor, but any page created under posts is where I am coming a little unstuck.


on July 10, 2016.
  • Possible Answers to Your Question:

  • 1 Answer(s)
    Answered on July 13, 2016.

    Hi there,
    Layers Pro has a header background option that lets you add images to the header, though you can’t attach them to specific posts. To achieve a per-post header that does not interfere with the actual site header height etc, you will need custom CSS or a child theme, as the posts require a title banner at the top to hold the image (which currently is only on pages).  To make this different on every post is much trickier, as using Custom CSS means you need to add a style for every single post. In a child theme, a function can be used to grab the featured image and output it into a special section below the header using one of our template hooks, such as layers_after_header

    So your function would be something like:

     add_action('layers_after_header', 'mypostheader');
    if(! function_exists('mypostheader') ) {
     function mypostheader() {
     if(!is_front_page() && is_single()){
    echo '<div class="my-post-header">';
     if ( has_post_thumbnail() ) {
     echo '</div>';

    Then you would style the div to sit under your transparent header.

     .my-post-header{padding-top: 85px;}