Different logo for Specific pages

This topic is: not resolved

Tagged: change, Logo

This topic has 4 replies, 4 voices, and was last updated 7 years, 8 months ago by Gandt.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts
July 7, 2015 at 10:38 am #158681
Jack
Member
Hi, I am trying to get the logos to load with a specific page. I want separate logos for the "Innovation", "Technology" & "Engineering" pages.

I tried to just change the url for the image for the specific pages but this doesn't seem to be working.
```
.page-id-8591 .header-image .site-header .title-area {
  background-image: url("http://sievecreative-dev.co.uk/redbourn/wp-content/uploads/2015/07/Redbourn-Innovation.png");
}
```
I'm clueless at PHP but was reading that it could be done that way and thats why I've come to you lovely people for some help and suggestions.

Any help is greatly Appreciated.
Many Thanks,
Jack.
http://sievecreative-dev.co.uk/redbourn/
July 7, 2015 at 12:01 pm #158691

Christoph
Member

Hi Jack,

did you try this plugin?
https://wordpress.org/plugins/genesis-custom-headers/

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

July 8, 2015 at 5:11 am #158765

Jack
Member

Hi Christopher,

Looking through the plugin i cant find a setting that would allow me to change the logo.
If you could give me any guidance on how i could do that it would be a lot of help.

Many Thanks,
Jack.

July 8, 2015 at 1:29 pm #158826

Brad Dalton
Participant

You could try the WP Display Header plugin.

Tutorials for StudioPress Themes.

July 9, 2015 at 12:53 pm #158930
Gandt
Member
Jack, if by logo you mean the one you currently have set to 'REDBOURN' on the top left of your screen, then the answer is simple. You want a different logo for each of your three pages:

INNOVATION
TECHNOLOGY
ENGINEERING

So, we must start by making sure each of these pages is loading a different class for the body or page. I prefer using body.
This would mean the <body> element would thus look like:
```
<body class="innovation">
<body class="technology">
<body class="engineering">
```
To achieve this, if you don't already know how, go to your wp-admin dashboard, go to each of the individual pages in question (innovation, technology and engineering) and specify the custom class there:

Now that each of your pages has that specific class allocated in the body element, we can now target them independently via css without making a mess.

You are currently using:
```
.header-image .site-header .title-area {
  background-image: url("http://sievecreative-dev.co.uk/redbourn/wp-content/uploads/2015/07/Redbourn.png");
  background-position: center center;
  background-repeat: no-repeat;
  height: 60px;
  width: 222px;
```
So you can add to this already existing css declaration with similar copies, like this:
```
body.innovation .header-image .site-header .title-area {
/* different background declaration tareting different image goes here */
}
body.technology .header-image .site-header .title-area {
/* different background declaration tareting different image goes here */
}
body.engineering .header-image .site-header .title-area {
/* different background declaration tareting different image goes here */
}
```
Hope this helps

G
Author

Posts