-
Posts
-
Hi guys, I’d like to switch out a custom logo for a single page. I have a plugin that allows me to add a custom css and js file in each page (which I’ve used to change all the hover, etc colors) but I can’t seem to get it to work for the logo. I’ve done this before using css but seeing the complexity of this theme, would I need to add custom js instead?
Hi,
You can Inspect Element with Google Chrome, look for the unique body class id of the page.
On the image above, the body class id is .page-id-2251, yours will be different. Use it to change the background image of the logo. Add this on your custom.css or Quick CSS
.page-id-2251 .logo.bg-logo img {
position: absolute;
left: -9999px;
}
.page-id-2251 .logo.bg-logo {
background: url(../images/layout/logo.png) no-repeat center;
display: block;
height: 116px;
width: 210px;
}Regards,
Ismael
Thanks Ismael, I really appreciate the response!
I changed the code to:
Code:.page-id-115 .logo img {
position: absolute;
left: -9999px;
}
.page-id-115 .logo {
background: url(http://linxhome.com/wp-content/uploads/2013/07/linxhome-red.png) no-repeat center;
display: block;
height: 65px;
width: 200px;
}That displays the different logo (of course I changed it to the right page ID and fixed the dimensions for my logo). I should however probably clarify and mention I am using the ‘Fixed Header with Social Icons and additional navigation’. So I actually knew how to change the css but that just moves the original logo from view and places in the new logo in a fixed position, which would work with most themes. What I was trying to do was actually replace it because with this theme as you scroll, the image readjusts itself. My problem is placing in the new logo via css means it doesn’t adjust as the original would. The image below shows the variation logo that has been replaced using css and how it looks once you’ve scrolled down the page. I did attempt using the javascript replace function, but was unsuccessful. I’m more familiar with css, not js.
[img]http://thedeancorp.com/images/Capture.PNG[/img]
It may not be possible, but hopefully you can see something I’m not. Thankyou!!
Hi thedeancorp,
The only thing I can think of outside of creating an alternate header.php file to load into the page just for the logo would be to use jquery to switch the image on page load. There will be a split second delay since it has to load after the window is loaded but not sure what else.
See this codepen: http://codepen.io/DevinVinson/pen/mvoDk
The javascript would be added to your js>avia.js file just above the document ready function start. You will also need to change the .logo a img to the direct location of your logo which will be more like:
.page-id-115 #wrap_all #header #header_main .container .logo imgRegards,
Devin
Hi Devin,
That jquery worked! I think the split second load is fine. And everything seems to be working great! Thanks.
Dean
- The topic ‘Custom Logo for Specific Page’ is closed to new replies.