Having Your Own Badges

Plurk awards people with badges for some achievements, like inviting certain number of people, reaching plurk nirvana, etc.

The good news, you can also have your own “badge” or images to be displayed there.

The not so good news, you have to obtain at least one badge for the award_bar tag to exist in your stats box.

Each badge is 39 pixels x 39 pixels. Below I’ve included a template for the badge default positioning.

Plurk Badge Layout

Plurk Badge Layout

By default, each badge are separated by 10 pixels horizontally, and 8 pixels vertically. Just go crazy with your creativity and replace those blue boxes with your own.

After you’re set, upload your newly made set then add the following lines in your customization CSS:

.award_bar {
min-height: 47px;
background: url(your_image_url) transparent no-repeat;

The above min-height value is used for default sized badges like the badge template I included above. The badge itself is 39 pixel in height, add 8 pixels default top margin and you have 47 pixels per badge.
If you want more rows of badges, just multiply 47 with the number of rows and duplicate the badge template vertically.

Example for two rows of badges:

Two Rows Badges

Two Rows Badges

The code would be like this:

.award_bar {
min-height: 94px;
background: url(your_image_url) transparent no-repeat;

And if you want to take away the legit badge so you have full portion for your custom image, just add the following code in you CSS:

.award_bar div { opacity: 0; filter: alpha(opacity=0); }

There you have it. :-)

The following are the available legit Plurk badges. First three is the invitation award, then plurk community site owner award, translator award, plurk nirvana award, and 50 fans award.

These are also legit Plurk badges, but I’ve never seen anyone having them thus I have no idea what they’re for.

Published in: on September 28, 2008 at 11:46 am  Comments (20)  

The URI to TrackBack this entry is: https://peacepiece.wordpress.com/2008/09/28/having-your-own-badges/trackback/

RSS feed for comments on this post.

20 CommentsLeave a comment

  1. help. i can’t post it. well it appers on my plurk profile but it looks like this: http://i283.photobucket.com/albums/kk309/parafreak14/badge.jpg

    HELP ME…

  2. Have you included this line?

    .award_bar div { opacity: 0; filter: alpha(opacity=0); }

    Seems like you forgot to make the original badge disappear :) I just tested that line, it still works (in Firefox, at least).

  3. yes i put that code. this is how i paste the codes on CSS section:

    .award_bar div { opacity: 0; filter: alpha(opacity=0); }

    .award_bar {
    min-height: 47px;
    background: url(http://www.imageshack.us/example.jpg) transparent no-repeat;

    .award_bar {
    min-height: 47px;
    background: url(http://www.imageshack.us/example.jpg) transparent no-repeat;

    is that right? because i want to add two or three more Badge.

  4. I don’t get where you do it wrong, I just use the award_bar code as follows:

    .award_bar {
    min-height: 47px;
    background: url(http://i38.tinypic.com/24bujaq.png) transparent no-repeat;

    i use my template image (the blue boxes), and it results as wanted http://i43.tinypic.com/w9fyfr.jpg.

    and I add the hiding the original badge, it goes like this http://i42.tinypic.com/dnhd76.jpg

    you can view it on my plurk page atm. what browser do you use, btw?

  5. i use mozilla firefox.

    i got it. thanks. =)

  6. i cant put it on my plurk site it’s like mara’s badges help!

  7. please help me.. i put this codes then only one badge is appearing. i cant put 1 more badge because its being replaced by the other badge. please help

  8. yey,have this one..before you put your bg url to the codes..don’t put ur images one by one..compile it first=) so that it won’t hover each other=) and your real badges..and don’t forget to put the hide codes=)

  9. can animated images do?

  10. HELP! It replaces the first badge. How come?

  11. you have to take the image with 4 blue blocks and edit it (put it in) the badsges you wanted . Then you’ll have an image with 4 badges, thats the time you can upload it and use its background url :) you cant punt the badges one bye one

  12. thanks dude. is it possible to make something like that ‘Has more than 50 fans’ or ‘Invited more than 10 friends’ message onmouseover?

  13. do you have css code for those who has not obtained at least one badge? :D

  14. woah. Thanks for sharing :)

    this is really a great help :)

    but i have 1 question to ask :)

    how to add 2 more badge in the first row…

    please reply. thanks

  15. Thanks for sharing –
    I had installed that HTML codes to put new badges but nothing’s appeared when I hover it . Any script to make tect appear?

  16. hi it’s me not logged in… try to answer some question.

    @salbehe: the tag doesn’t exist if you don’t have at least one badge, it’s in the script and there’s nothing can be done about it. one badge is easy, go get it :)

    @omega: adding mouseovers like you asked is no do, because this trick only does the background image; mouseovers are script generated so you can’t trick that one. if you don’t have it, it doesn’t exist, and if it doesn’t exist, how can you trick it? :)

    @Mearebvine: 2 more badges on first row? you mean having 6 pictures? i don’t think that’s a good idea as it may ruin your overall layout… but if you insist, try adding min-width in award_bar

    @sutans: i don’t understand your question… this trick has nothing to do with hovers =\

  17. Hey, how’d I put the images? I can’t do it. I put the .award_bar {
    min-height: 47px;
    background: url(http://i38.tinypic.com/24bujaq.png) transparent no-repeat;
    } code and tried to replace the url with an image url and the badges disappear. Why is that so?

  18. excuse me .. if put the code .. the white part of the template can be seen. can you help ? thanks

  19. ei just wanna ask i got the ryt codes already pero natatabunan xa ng original badge ko..wat will i do,,

    • Akin din.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: