Hey there Divi people! This is John from Divi Ready Themes. In this tutorial, I’m going to show you how I came up with a solution to the issue of needing 2 different logos on 2 different pages.
When I created the Campaignz Political Divi Layout, I wanted the demo to show both the Democratic and Republican color schemes. The home page lands on the Democratic Divi layout theme, with the Democratic Logo. From there you can go to the Republican theme page to view that layout. The problem was, well not really a problem per se, more like a design “I want it” – the problem was when you were taken to the Republican page – the logo remained Democratic.
So I did a little research and found a tiny little piece of code that could do the job I wanted it to do. You are going to need 3 things:
- 2 logos – make them the same size.
- The PageID# of the page you want the second logo to appear on.
- CSS Code (below)
/* Logo Change Page */
.page-id-PAGEID# img#logo {
content: url(“http://yourwebsite.com/logoimage.png”);
}
Okay – so lets start with the 2 logos – These are the logos I created for the Campaignz Divi Layout. I did them in Photoshop, with a transparent background – saved as PNG files. You can use whatever you want, just make sure it is seamless with the rest of the header.
The next thing we need is our PageID# of the page where you want the second logo to appear. Navigate to your Pages listing. Hover your mouse pointer over the page name and at the very bottom of the screen, you will see the PageID# displayed. For use in this tutorial, the PageID# is 155.
Upload your second logo image to your Media Library. Once uploaded, click on the image thumbnail. You will be brought to the Attachment Details Page. Here you will find the image URL that you are going to need for your CSS.
Okay, now that we have gathered everything we need, let’s go to our Custom CSS section and put our code in, replacing the information with the specs we gathered. My code will look like the CSS below:
/* Logo Change Page */
.page-id-155 img#logo {
content: url(“http://campaignz.divireadythemes.com/wp-content/uploads/2018/06/political-REP.png”);
}
Let’s head over to our Divi Theme Options, scroll to the bottom of the page and insert your CSS in the Custom CSS section. Make sure that your PageID and Image URL are in place.
Now all we have to do is load the site up, head to the page where we wanted the second logo and low and behold – there it is:
I hope you have found this tutorial helpful. Share it with your friends. Make sure and check back with me for future Divi tips and tutorials. And don’t forget to visit my shop page for some of the best Divi Child Themes and Divi Layouts.
This is a great tutorial but I cannot get it to work for me for some reason. I get a broken image symbol and this would be a great feature for me. Any advice?
Steve – if you are getting a broken image symbol then the URL to your image is incorrect. Try putting the image URL into a browser window and see if it’s still broken. Make sure there are ” ” around the image URL.
Here is the code again:
.page-id-PAGEID# img#logo {
content: url(“”);
}
Let me know what happens.
I see what the problem is and have run into it before. The Firefox browser does not recognize the css rule to change the logo whereas Chrome does. It behaves the same way on your Candidate demo and does not switch logos on Firefox.
Good to know – Thanks. I guess we can’t make all the browsers happy.
Hi,
I tried with this code, but the image is broken. The image URL into a browser is fine, so not sure what is the problem.Also, there are ” ” around the image URL….
Nelly:
I’m going to quote Steve from a previous comment: “I see what the problem is and have run into it before. The Firefox browser does not recognize the css rule to change the logo whereas Chrome does. It behaves the same way on your Candidate demo and does not switch logos on Firefox.”
Are you using FireFox?
My original page is still up with effect working. Go here: https://divireadythemes.com/campaignz/ and do an inspect – maybe you have something different in yours(?)
Hi jmdrago,
Nope I am using Chrome. Actually, this is my case: the site I am supporting is bilingual. There is a logo already uploaded through Divi-Theme Options-Logo field. Now customer wants to add same logo but in English for the eng version of the site. So I tried following the instruction above (adding this css, image same size as the other one, not missing “””etc…)but for some reasons image is broken..
HIi JMdrago.
I have the same problem and get a broken image. I use Chrome and already checked everything what here above.
Do you now whats the problem is?
Hi there, I have the same broken image problem. Could this have something to do with the latest Divi update?
I have Divi version: 3.17.6 installed on the demo.
Removing the “” around the URL got rid of my broken image symbol!
/* Logo Change Page */
.page-id-155 img#logo {
content: url(http://campaignz.divireadythemes.com/wp-content/uploads/2018/06/political-REP.png);
}
Hopefully, this works for the others – thanks for your help!
Dev site is at: https://staging1.roamconsultingllc.com/ and the page ID is definitely 9 which is for the Leadership with Horses page. The image IS at the url in my CSS and I’ve triple checked the page number! Here’s what I’ve got:
.page-id-9 img#logo {
content: url(“https://staging1.roamconsultingllc.com/wp-content/uploads/2017/09/RoamLwHColor.png”) !important;
}
It’s true that it does work in Chrome which I hadn’t realized but I need it to work in FF. Is there a fix for that? I’ve tried removing the quote marks but that doesn’t seem to make it work in FF although it continues to work in Chrome with or w/o the quotes.
Too bad, this was SO simple and really seemed like it’d work! Any ideas or do I need to look for a different solution? Thanks!
OK…solved this! A friend sent me the CSS fix. Here’s what we did:
.page-id-9 img#logo {
display: none;
}
.page-id-9 .logo_container a {
content: url(https://staging1.roamconsultingllc.com/wp-content/uploads/2017/09/RoamLwHColor.png) !important;
max-height: 120%;
}
This is hiding the original image and then assigning the “content” image to the link that is wrapping the hidden image instead of replacing the image with an image.
It looks like this works in both Chrome and Firefox
Here’s the page with the unique logo https://staging1.roamconsultingllc.com/leadership-with-horses/ and you can click home or logo to see the other logo.
Hi! The broken image appears because you must change ” ” in URL image instead “”. Then, works fine.
Thanks for your snipped!!