Community Forums › Forums › Archived Forums › Design Tips and Tricks › Replace Site Logo Conditionally
Tagged: Logo
- This topic has 8 replies, 2 voices, and was last updated 8 years, 4 months ago by carasmo.
-
AuthorPosts
-
November 10, 2015 at 9:55 am #170671bisonbrahParticipant
I need some assistance with changing the site logo from black to white on specific portfolio pages. I have tried via CSS, PHP and JS; but nothing has worked thus far. The logo is wrapped in a <div class="site-logo"> within <div class="title-area"> .
Any assistance would be phenomenal for I've exhausted all other options.
Thanks in advance!
http://ssstudios.wpengine.com/portfolio/balpark-media/November 10, 2015 at 10:24 am #170682carasmoParticipantI see you already have a class
.label-white-header
on your body. Good.Change the absolute paths. Put in your JQuery file after your document ready function in main.js
// full urls in between the ticks var logodefault = 'http://christinacreativedesign.com/assets/images/main-logo.png', logowhite = 'http://christinacreativedesign.com/assets/images/white-logo.png'; if ($('body').hasClass('label-white-header')) { $('img[src="' + logodefault + '"]').attr('src', logowhite); } else { //default logo $('img[src="' + logowhite + '"]').attr('src', logodefault); } //end if label white header
November 10, 2015 at 10:40 am #170687bisonbrahParticipantThanks for that advise; however, I've done what you recommended and still isn't working :/
//replace black logo with white logo // full urls in between the ticks var logodefault = '/wp-content/uploads/genesis-extender/plugin/images/logo.png', logowhite = '/wp-content/uploads/genesis-extender/plugin/images/logo-white.png'; if ($('body').hasClass('label-white-header')) { $('img[src="' + logodefault + '"]').attr('src', logowhite); } else { //default logo $('img[src="' + logowhite + '"]').attr('src', logodefault); } //end if label white header
November 10, 2015 at 11:06 am #170691carasmoParticipantAbsolute path, that's how WordPress rolls.
http://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/
November 10, 2015 at 11:11 am #170692bisonbrahParticipantTried with absolute paths as well - no change :/
November 10, 2015 at 11:16 am #170695carasmoParticipantI looked in your main.js file, the code is not there. Where are you putting it?
When you do get it to work, the absolute paths have to be there and your full url to your logo is:
http://ssstudios.wpengine.com/wp-content/uploads/2015/11/logo.png
Not:
http://ssstudios.wpengine.com/wp-content/uploads/genesis-extender/plugin/images/logo.png
The jQuery looks for an exact path to an existing file then it swaps, if that plus the hasClass condition is met.
November 10, 2015 at 11:32 am #170698bisonbrahParticipantWoot I got it working - I was trying to load it via Genesis Extender's js module. Once I moved theme to uploads and saved in main.js it worked perfectly! Thanks again so very, very much!
November 10, 2015 at 11:42 am #170699carasmoParticipantNovember 10, 2015 at 12:19 pm #170702carasmoParticipantAlso, in your case, you won't need the else.
else { //default logo $('img[src="' + logowhite + '"]').attr('src', logodefault); }
Not required. Don't remove other stuff.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.