Changing the heading background colour for individual pages

  • Keith

    (@aguair)


    8 years, 10 months ago

    Hi,

    On the Hueman demo (http://demo.alxmedia.se/x/?theme=Hueman) under Styling there are 4 subpages, each of which has a different coloured header background. On ‘Style Test 1’ it is a dark grey, on ‘Style Test 2’ it is a brown, on ‘Style Test 4’ it is a light blue. These appear to just be regular blog posts but the heading background colour seems to change. Does anyone know how to change this colour on a page-by-page basis?

    Thanks,
    Keith.

Viewing 1 replies (of 1 total)
  • bdbrown

    (@bdbrown)

    8 years, 10 months ago

    Hi Keith. You can accomplish this using CSS.

    1. Edit the post/page you want to change and get the post id from the browser address bar. At the end it will be something like this:

    post.php?post=9&action=edit

    The theme generates a class in the <body> tag that corresponds to the post/page:

    postid-9
    page-id-9

    Use the post/page class to change the background color. This would go in a child theme style.css file, the theme Custom CSS option or use a plugin like Simple Custom CSS.

    /* change header background to red */
.page-id-9 #header {
  background-color: #f00;
}
/* change header background to yellow */
.postid-9 #header {
  background-color:#ff0;
}
Viewing 1 replies (of 1 total)
  • The topic ‘Changing the heading background colour for individual pages’ is closed to new replies.