Changing logo on one page without old logo momentarily visible

Hi,

I tried the instructions here: https://theme.co/apex/forum/t/how-can-i-change-a-logo/34506
Its good except that the old logo “blinks” before the replacement logo overrides it. Is there a way to make the switch earlier so that the old logo will not be shown at all?

Is is possible to set the logo CSS parameters (width, max width) in the jQuery call?

Thanks

Hello @mrboats,

Thanks for writing in!

If that is the case, you must hide the log using css instead so that the logo will not show when the page is loaded. You may add this css code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.page-id-7 .x-brand img {
   opacity: 0;
}

And then use this JS code:

jQuery(document).ready(function($){
	$(".page-id-7 .x-brand img").attr("src", "http://image-1.png");
	$(".page-id-7 .x-brand img").css({"width": 120px, "max-width": 120px, "opacity": 1 });
});

We would loved to know if this has work for you. Thank you.

This code gives an “Unexpected token” in Chrome and a “Syntax error” in Dreamweaver?

Hi There,

Is that the site you’re working on below? you updated Cornerstone to the latest version (3.4.6), but you leave X theme behind (6.3.6). Please update your X theme to the latest version (6.4.6).

Updating Your Themes and Plugins

Remember to clear all your caching features (plugin, server-side, CDN, and browser’s cache) after updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

Let us know how it goes,
Cheers!

The problem turned out to be that also the values must to quoted:
$(".page-id-7 .x-brand img").css({“width”: “120px”, “max-width”: “120px”, “opacity”: “1” });

As for the theme, I’m blocked from updating the theme before I do a major site update to WP5/WC3.5, the latest theme version breaks the site.

For future reference, here is a solution that also covers the case where mobile might need different css

jQuery(document).ready(function($){
$(".page-id-7 .x-brand img").attr("src", "http://image-1.png");    
if (/Mobi|Android/i.test(navigator.userAgent)) {
    $(".page-id-7 .x-brand img").css({"width": "125px", "max-width": "160px", "max-height": "80px", "opacity": "1", "margin": "0px 3px -20px 20px", "overflow": "visible" });
} else { 
   $(".page-id-7 .x-brand img").css({"width": "250px", "max-width": "250px", "max-height": "125px", "opacity": "1", "margin": "10px 3px -62px 3px", "overflow": "visible" });
}
});

Hi @mrboats,

Yes you’re right, the value needs to be quoted unless it is passed as a variable. To learn more about this method you can checkout http://api.jquery.com/css/

Thank you for sharing the solution with us, we’re glad you managed to fix it on your own.

Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.