Purity III - change logo between desktop and mobile

[skelterdev]

Hello all,

How can i change the logo of purity for a banner (800px*300px) for the desktop version and for the mobile version just show the text
i'm using the Purity III on J3.3
Thanks

[sitesrus]

Add custom JS through proper channels (like custom.js for some template providers, via your own plugin/module, get a free extension to add your custom js, etc.) so it's not a hack.

Than write something that uses jquery to hit the logo's id and swap the source of the image.

$('#<logo-id>').src('images/mobile-logo.jpg');

Problem with that though is you'd have to add a regex and check user agent maybe to see if it's a smart phone/tablet before doing that.

Or you can add in custom css (same as above, don't hack it) that uses a media query to override the logo on the page,

/* phones */
@media only screen and (max-width: 760px) {
#<logo-id> { background: url('smiley.gif') no-repeat; }
}

The solution depends if the logo uses css or has the source in the html (ie div w/ background or img with source) but either approach is possible.

Some templates even load the logo as an HTML module in which case you can use joomla built in styles to hide it for mobile/tablet or desktop. You can have two modules and each with the correct style to show it on the right display.

[skelterdev]

Thanks