I recently installed the PunchTab Rewards, 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.
See my custom button located at top-left of JenSocial, labeled "Earn Rewards". I customized the button (made my smaller since I created this tip on my site). 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.
- 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.
- 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
- Change URL below to your image path.
- 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("https://storage.ning.com/topology/rest/1.0/file/get/546878?profile=original") 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
Replies
Good question Kris. I can't think of a way this second. If I come up with a way to attach to xg_body or xg, I'll let you know.
Best,
Jen
nice! those look SLICK! I REALLLLY like the "now showing" button you have blinking at the top of the page, it totally got my attention...I'd love to make my punchtab ribbon blik like that, with the 2 colors of fonts (#fc9a1b and #99ffff) with this ribbon...what do you use to make your gifs? i need to do this!
Actually, those buttons have a tiny bit of blur. They won't if you click into them. I checked the code and they're not being re-sized above. So, not sure why that's happening.
Best,
Jen
I used ImageReady off of PhotoShop for that particular gif.
Am I blind or what? That button still looks blurry on Creators site, but not on my site. Yet I see no special formatting going on. I'm obviously missing something simple here. Regardless, it should show up nice and crisp on your site.
Don't expect this often. ;-)
awww SR, seriously, you didn't need to do that, especially in a case like this. I offered. But really appreciate it.
;-)
-
1
-
2
-
3
of 3 Next