- This topic has 6 replies, 2 voices, and was last updated 9 years, 6 months ago by
.
-
Posts
-
Hi,
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.
http://luxor-lettings.com/students/
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
http://luxor-lettings.com/wp-content/uploads/2015/03/New-Banner2.jpg
any help would be really greatful
thanks again
CraigLead 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 🙂
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/” 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
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 } ?>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 } ?>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 } ?>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
- You must be logged in to reply to this topic.