Replace Site Logo Conditionally

[bisonbrah]

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/

[carasmo]

I 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

---

Genesis Theme Customization and Help

[bisonbrah]

Thanks 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

[carasmo]

Absolute path, that's how WordPress rolls.

http://yourdomain.com/....

http://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/

---

Genesis Theme Customization and Help

[bisonbrah]

Tried with absolute paths as well - no change :/

[carasmo]

I 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.

---

Genesis Theme Customization and Help

[bisonbrah]

Woot 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!

[carasmo]

Cool. Please mark this resolved in the toggle.

---

Genesis Theme Customization and Help

[carasmo]

Also, 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.

---

Genesis Theme Customization and Help

[Author]

Posts