WordPress.org

1. ghanes14
   Member
   Posted 3 months ago #

   First to see my problem, go to http://theamaturetraveler.com . In the top right corner you will see an option for switching the color scheme of the layout (red, and green). My problem is with the RSS button image.

   It goes good with the theme while it's set to red, however, if the theme is set to green, not so much. I have a button like it in green, but my problem is figuring out how to code it so when the theme is changed, it changes. That way when the red theme is selected, it shows the red RSS button, and the green RSS button when the green theme is selected.

   Can anyone explain this?

   Thanks,
   Billy

2. ericmann
   Member
   Posted 3 months ago #

   You'll need to set some more information in your onclick handlers. I'll address just the green one for now (changing the red should follow pretty easily). Here's what you have:

   <a href="#" onclick="setActiveStyleSheet('green'); return false;">Green</a>

   The first thing you need to do is give your feed icon an id. Place id="feedicon" inside your <img src="http://theamaturetraveler.com/wp-content/uploads/2009/08/gmbfeed-icon-128x128.png" align="right"; width="75" height="75"> tag.

   Then you need to add another element to the onclick handler as well. Try this:

   <a href="#" onclick="function() {
       setActiveStyleSheet('green');
       document.getElementById("feedicon").src="http://theamaturetraveler.com/wp-content/uploads/2009/08/gmbfeed-icon-green128x128.png";
   }
   return false;">
   Green
   </a>

   When you click the "Green" link it will swap your active stylesheet and change the src tag on the feed icon. You should be able to swap everything out for the "Red" link based on the same format.

3. ghanes14
   Member
   Posted 3 months ago #

   I think I put the code in like you said, but now the image does not show up and the links are what change color. What did I do wrong 0.o. By the way, I have little to no JavaScript experience yet.

4. ericmann
   Member
   Posted 3 months ago #

   See my next post ... or send me an email at eric@eamann.com so I can talk you through it.

5. ericmann
   Member
   Posted 3 months ago #

   You have a couple of errors in your code, so try this. Replace the following:

   <div class="stylewp"> 
   
   Theme:
       <ul> 
   
   <a href="#" onclick="function() {
   
       setActiveStyleSheet('red');
   
       document.getElementById("redfeedicon").src="http://theamaturetraveler.com/wp-content/uploads/2009/08/gmbfeed-icon-128x128.png";
   
   }
   
   return false;">
   Red
   </a> 
   
   <a href="#" onclick="function() {
   
       setActiveStyleSheet('green');
   
       document.getElementById("greenfeedicon").src="http://theamaturetraveler.com/wp-content/uploads/2009/08/gmbfeed-icon-green128x128.png";
   
   }
   
   return false;">
   Green
   </a> 
   
   <li><a href="#" onclick="setActiveStyleSheet('red'); return false;">Red</a></li>
   <li><a href="#" onclick="setActiveStyleSheet('green'); return false;">Green</a></li>
       </ul>
   <br /> 
   
     </div> 
   
   <div class="stylewp"> 
   
   <a href="http://feeds.feedburner.com/TaTPosts"><img src="http://theamaturetraveler.com/wp-content/uploads/2009/08/gmbfeed-icon-128x128.png" align="right"; width="75" height="75" id="redfeedicon"></a> 
   
   <a href="http://feeds.feedburner.com/TaTPosts"><id="greenfeedicon" img src="http://theamaturetraveler.com/wp-content/uploads/2009/08/gmbfeed-icon-green128x128.png" align="right"; width="75" height="75"></a> 
   
   </div>

   with:

   <div class="stylewp"> 
   
   Theme:
       <ul> 
   
   <li><a href="#" onclick="setActiveStyleSheet('red'); document.getElementById('feedicon').src='http://theamaturetraveler.com/wp-content/uploads/2009/08/gmbfeed-icon-128x128.png'; return false;">Red</a></li>
   <li><a href="#" onclick="setActiveStyleSheet('green'); document.getElementById('feedicon').src='http://theamaturetraveler.com/wp-content/uploads/2009/08/gmbfeed-icon-green128x128.png'; return false;">Green</a></li>
       </ul>
   <br /> 
   
     </div> 
   
   <div class="stylewp"> 
   
   <a href="http://feeds.feedburner.com/TaTPosts"><img src="http://theamaturetraveler.com/wp-content/uploads/2009/08/gmbfeed-icon-128x128.png" align="right" width="75" height="75" id="feedicon"></a> 
   
   </div>

Reply

You must log in to post.