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

Views: 934

Replies to This Discussion

Got a bit confused ... so in addition to the html code they gave, add your code, right? I need another cup of joe!!!

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

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

 

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.

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

Thanks for the update! I can rest now ... LOL ... cheers!

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.

 

 

I think it's cute, and matches your site nicely. Maybe add a little bike?
Awww thanks, I like the bike idea.
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?

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

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

Members

© 2017   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips