PunchTab Rewards - How To Change Rewards Button

I recently installed the PunchTab Rewards app to JenSocial, and so far I love it! What about you?

There's been a lot of discussion about PunchTab on Creators, and in fact, probably the place I heard about it first. This is a very simple tip on how to change the default "Rewards" button.

 

PunchTab lets site-owners build free loyalty programs for their websites, blogs and apps with no development cost or marketing spend.


Seems pretty exciting to me to check the leaderboard, even as a by-stander. If you don't know about it yet, you can check them out here: http://www.punchtab.com The Rewards app definitely encourages user engagement and social sharing of your site.

 

Notice the button located at top-left of JenSocial, labeled "Earn Rewards". I customized the button, because I really wanted something that stood out a little better than the default button offered by PunchTab. I've already received several emails asking how I changed it, so I wanted to share this code.

 

  1. You will need to create a button that is approximately 35 pixels in height by 146 pixels in width. Or, change the code below to work for your button.
  2. Upload your button via a Ning Blog, or if you are a Pro Subscriber you can use your File Manager via: My Network/Content/File Manager
  3. Change URL below to your image path.
  4. Add code to your Advanced CSS via: My Network/Settings/Appearance/Advanced CSS.

 

/* PunchTab Rewards */
#red_tab {background-image:none!important;}
#rwd_tab {background:url("http://api.ning.com/files/aDJc0P5c8HDftR80HsyJqvQYqvid0BSOfsIHRbsxNbLEs4SpbdpmeBcZWNrWJbmxpqm54TShfW*pWgp-GmkhT-ghtIzPd*3V/earnrewards2.png") no-repeat!important;
height: 35px!important;
width:146px!important;
background-position: -1px!important; }
/* PunchTab Rewards */

 

The horizontal position of PunchTab behaves better in all browsers if you leave it on the left, the default position. To change the location of your button in vertical positioning, add and adjust:

top:35px!important; OR

bottom:15px!important;

 

 

Enjoy!

Jen

Tags: punchtab, punchtab button, rewards, rewards buttons

Views: 660

Replies to This Discussion

Permalink Reply by Predestined by God on June 8, 2011 at 12:41pm
Got a bit confused ... so in addition to the html code they gave, add your code, right? I need another cup of joe!!!
Permalink Reply by JenSocial on June 8, 2011 at 12:51pm

Best I remember - - Add their code to your custom code box, because it should be script. And add what I provided to your Advanced CSS for styling.

Hope that helps,

Jen

Permalink Reply by Predestined by God on June 8, 2011 at 12:52pm

Got it, thanks .... =)....

 

Permalink Reply by Predestined by God on June 8, 2011 at 7:02pm
Your Punchtab is not loading and neither is mine when I click on the tab.  It keeps reading Loading Error.  Let me know if you find out anything.
Permalink Reply by JenSocial on June 8, 2011 at 7:43pm

I've noticed sporadic down-times in the past day or so. I expect it's because of all the new users, and being so new, these Guys trying to learn exactly what server space and bandwidth is needed. I would give it a little time to settle down.

Best,

Jen

Permalink Reply by Predestined by God on June 8, 2011 at 7:56pm
Thanks for the update! I can rest now ... LOL ... cheers!
Permalink Reply by GirlRiders on June 8, 2011 at 8:18pm

Worked great Jen!   I made a custom image, not sure if I'm crazy about it though.  I'll have to stare at it for a couple days, lol.

 

 

Permalink Reply by JenSocial on June 8, 2011 at 8:44pm
I think it's cute, and matches your site nicely. Maybe add a little bike?
Permalink Reply by GirlRiders on June 9, 2011 at 6:54am
Awww thanks, I like the bike idea.
Permalink Reply by GirlRiders on June 8, 2011 at 8:25pm
The extra ribbon it throws next to my +1 is spaced odd and ends up over the adjacent text box.  Do you think there is a way to fix that?
Permalink Reply by JenSocial on June 8, 2011 at 9:02pm

I'm not seeing it yet on your site. I see it on mine. Not sure what styling it would take. It could probably be tweaked a bit. But, I don't think it's serious enough to dive into. Is yours worse than mine?

Best,

Jen

Permalink Reply by GirlRiders on June 9, 2011 at 6:56am

No diving necessary!! I can live with it, and I'm going to move things around there in a little while anyway, add FB, maybe it will fix itself.  Here's what it looks like, its hard to see over the textbox, its on the pink bar:

 

RSS

© 2013   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips