Community Forums › Forums › Archived Forums › Design Tips and Tricks › Different logo for Specific pages
- This topic has 4 replies, 4 voices, and was last updated 9 years, 9 months ago by
Gandt.
-
AuthorPosts
-
July 7, 2015 at 10:38 am #158681
Jack
MemberHi, 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.
http://sievecreative-dev.co.uk/redbourn/
Many Thanks,
Jack.July 7, 2015 at 12:01 pm #158691Christoph
MemberJuly 8, 2015 at 5:11 am #158765Jack
MemberHi 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 #158826Brad Dalton
ParticipantJuly 9, 2015 at 12:53 pm #158930Gandt
MemberJack, 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
ENGINEERINGSo, 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
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.