How does work the changing image in the logo (header) in the index.html page?

JjuanchpApr 11, 2016

Helloooo!
I am looking for the mechanism in the index.html page, that makes the src change in the header from the canvas.png to canvas-dark.png. I searched for the ID references and I found:

Reference in the functions.js with "logo: function()"

I want to make the same actions for other image, is it possible?
Thanks!
JC

SSemicolon WebSTAFFApr 11, 2016

Hello,

This is Definitely Possible but would require some duplicating:

Please find the following code in the js/functions.js File:

if( ( $header.hasClass('dark') || $body.hasClass('dark') ) && !$headerWrap.hasClass('not-dark') ) {
	if( defaultDarkLogo ){ defaultLogo.find('img').attr('src', defaultDarkLogo); }
	if( retinaDarkLogo ){ retinaLogo.find('img').attr('src', retinaDarkLogo); }
} else {
	if( defaultLogoImg ){ defaultLogo.find('img').attr('src', defaultLogoImg); }
	if( retinaLogoImg ){ retinaLogo.find('img').attr('src', retinaLogoImg); }
}

and replace it with:

if( ( $header.hasClass('dark') || $body.hasClass('dark') ) && !$headerWrap.hasClass('not-dark') ) {
	if( defaultDarkLogo ){ defaultLogo.find('img').attr('src', defaultDarkLogo); }
	if( defaultDarkLogo2 ){ defaultLogo2.find('img').attr('src', defaultDarkLogo2); }
	if( retinaDarkLogo ){ retinaLogo.find('img').attr('src', retinaDarkLogo); }
	if( retinaDarkLogo2 ){ retinaLogo2.find('img').attr('src', retinaDarkLogo2); }
} else {
	if( defaultLogoImg ){ defaultLogo.find('img').attr('src', defaultLogoImg); }
	if( defaultLogoImg2 ){ defaultLogo2.find('img').attr('src', defaultLogoImg2); }
	if( retinaLogoImg ){ retinaLogo.find('img').attr('src', retinaLogoImg); }
	if( retinaLogoImg2 ){ retinaLogo2.find('img').attr('src', retinaLogoImg2); }
}

Now you will need to find the following code in the same file:

defaultLogo = $('#logo').find('.standard-logo'),
defaultLogoWidth = defaultLogo.find('img').outerWidth(),
retinaLogo = $('#logo').find('.retina-logo'),
defaultLogoImg = defaultLogo.find('img').attr('src'),
retinaLogoImg = retinaLogo.find('img').attr('src'),
defaultDarkLogo = defaultLogo.attr('data-dark-logo'),
retinaDarkLogo = retinaLogo.attr('data-dark-logo'),

and replace it with:

defaultLogo = $('#logo').find('.standard-logo'),
defaultLogoWidth = defaultLogo.find('img').outerWidth(),
retinaLogo = $('#logo').find('.retina-logo'),
defaultLogoImg = defaultLogo.find('img').attr('src'),
retinaLogoImg = retinaLogo.find('img').attr('src'),
defaultDarkLogo = defaultLogo.attr('data-dark-logo'),
retinaDarkLogo = retinaLogo.attr('data-dark-logo'),
defaultLogo2 = $('#logo-2').find('.standard-logo'),
defaultLogoWidth2 = defaultLogo2.find('img').outerWidth(),
retinaLogo2 = $('#logo-2').find('.retina-logo'),
defaultLogoImg2 = defaultLogo2.find('img').attr('src'),
retinaLogoImg2 = retinaLogo2.find('img').attr('src'),
defaultDarkLogo2 = defaultLogo2.attr('data-dark-logo'),
retinaDarkLogo2 = retinaLogo2.attr('data-dark-logo'),

Make sure that you have Duplicated the Codes for the Logo properly so that they work fine.

This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.

JjuanchpApr 12, 2016

Fantastic news! Really works perfect!

Thanks so much
JC