[Resolved] Change Colours per page basis

Home Forums Support [Resolved] Change Colours per page basis

Home Forums Support Change Colours per page basis

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #85004
    Craig Nicholson


    i am starting to get the hang of wordpress and loving the GeneratePress plugins

    i have a questions regarding the ability to change colours and header image in the top header.

    as you can see from my current site it is a black and gold theme, however, we also have a sub organisation which is orange.

    in this link you will see the logo is orange and i was wondering if there was a way for me to change the background colours for all elements and widgets on this page and all subsequent student related pages.


    any help you be appreciated but if someone could help me on how i can change the colours and the header image from Luxor Estates to Luxor Students i would appreciate it

    this is the image i want the top to be changed to for only the student pages


    any help would be really greatful

    thanks again

    Lead Developer
    Lead Developer

    Hi Craig,

    To display different header images on different pages, you would have to remove your logo from the Header Content area, and re-add it using GP Hooks and some if conditionals. More info here: http://generatepress.com/forums/topic/individual-header-image/#post-51223

    You can also target CSS on individual pages by using the page ID of each individual post.

    Using Chrome, right click on the page and click “Inspect Element”.

    In the <body> element, you’ll see a class like this: page-id-2

    “2” being the ID of the page – this will change depending on the page.

    Using that class, we can target any element in the theme for that specific page.

    For example, to change the site header background color on a specific page with the ID “2”, we could do this:

    .page-id-2 .site-header {
          background: #000;

    Hope this helps ๐Ÿ™‚

    Craig Nicholson

    hey Tom

    thank you for your feedback once again and the speedyness of it – thank you

    i asked 2 questions in 1 thread which i apologise for, so in terms of the questions;

    1. top header icon/image = not attempted this yet

    2. change the background colour – i have attempted this and it has worked, but how can i get the widgets, top banner, navigation bar, footer background colours to change as well
    if you look at “http://luxor-lettings.com/students/&#8221; i have the background set which is great, but i can’t seem to amend the background colours for everything else via the add-ons i purchased from you. will i need some bespoke code?
    that scares me lol ๐Ÿ™‚

    thanks again for your help

    Craig Nicholson

    i am so sorry for being a pain and apologise for coming back to you…but i have attempted my number 1 question (top header image change)

    this is my code and i can’t get it too work – what am i missing?

    i have ticked Execute Code as well and selected “Before Header Content”

    <?php if ( is_page( ‘luxor-lettings.com/students/’ ) ) { ?>

    <?php if ( is_page( ‘luxor-lettings.com/students/student-accommodation/’ ) ) { ?>

    <?php } elseif ( is_page() ) { ?>

    <?php } ?>

    Craig Nicholson

    damm those images have the “url’s”

    <?php if ( is_page( ‘luxor-lettings.com/students/’ ) ) { ?>

    <?php if ( is_page( ‘luxor-lettings.com/students/student-accommodation/’ ) ) { ?>

    <?php } elseif ( is_page() ) { ?>

    <?php } ?>

    Craig Nicholson

    Resolved – apologies i did a silly botch job of copying and pasting – my fault

    Resolved the top header image change with the following code

    <?php if ( is_page( ‘Students’ ) ) { ?>

    <?php } elseif ( is_page( ‘Accommodation’ ) ) { ?>

    <?php } elseif ( is_page() ) { ?>

    <?php } ?>

    Lead Developer
    Lead Developer

    Perfect! You can also use the page ID.

    As for the colors, if you want individual pages to have different styles for all of these elements, you will have to write the CSS for it I’m afraid. The add-ons work globally, but not on a per-page basis.

    These are some of the elements:

    Header: .site-header
    Navigation: https://gist.github.com/generatepress/793804f553c25c70823c (you will have to add the page class before all of those instances)
    Widgets: .widget
    Footer widgets: .footer-widgets
    Footer: .site-info

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.