Jeff Summers
  shares  Theming the Follow Friends / Fan Boxes

| | Comments (2) | TrackBacks (0)

Plurk includes a definition of something they call "friends" and "fans". There is a minor distinction between these two. The premise is that your Plurk "friends" are people you know in the real world while "fans" are those you meet on-line but might not really know. I'm still struggling with the notion of these two but that is best left to another discussion. As you search on Plurk you are able to find people who you want to connect with. By looking at their profile you may decide you want to request friendship or become a fan. There are two buttons on the timeline within the dashboard that will allow you to do this. In this tutorial we'll discuss how to theme these.

As we always do, we'll start by providing the entire code snippet for you to cut and paste into your profile to immediately begin using this functionality.
/* Follow Friend/Fan Box */
.friend_man.add_follow, .friend_man.remove, .friend_man.add_friend, .friend_man.pending {
    -moz-border-radius: 6px 6px 6px 6px;
    -khtml-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}
/* End Follow Friend/Fan Box */
We will follow this up with a discussion of each line.  This is a relatively small change so we will talk about the entire block of code rather than breaking it up.  As always I strongly recommend that you include comments in your code in order to help you to remember what it does if you happen to go back to make changes.

There are four specific elements we will be dealing with so let me explain each of them:
  • .friend_man.add_follow - This element is the blue box stating you want to follow a person's time line
  • .friend_man.remove - This element is the red box used to remove a friend
  • .friend_man.add_friend - This element is the green box used to initiate a friend request
  • .friend_man.pending - This is the red box that allows you to cancel a pending friend request
lesson10.jpgBy listing all four of these boxes with a comma between them we are telling the system that we want it to modify the presentation behavior the same for all of them.  The four statements within this code tell the system that we want to round the corners of the boxes to make them consistent with the other boxes within our theme.

The four rounded corner statements are CSS3 commands which means they will only work with CSS3 compliant browsers.  Right now this would include FireFox, Safari, Opera, and the new Google Chrome browser.  Internet Explorer does not support this at the present time. The "-moz" statement is the proprietary FireFox command while the "-webkit" and "-khtml" are for Safari including the nightly builds.  Ultimately it is expected that everyone will use the "border-radius" command but since the specification is not finalized we'll include all of them just to be on the safe side.  The numbers represent the Top Left, Top Right, Bottom Left and Bottom Right corners.  In our example we are rounding all four corners with a 6 pixel radius.

This code will round the corners on all of the friend/fan request boxes in the dashboard and give you a consistent look and feel with the others in your theme.  That's really all there is to making the change.  Good luck and be sure to let everyone know you found this on Plurk Skins.

0 TrackBacks

Listed below are links to blogs that reference this entry: Theming the Follow Friends / Fan Boxes.

TrackBack URL for this entry: http://plurkskins.com/cgi-bin/mt/mt-tb.cgi/18

2 Comments

I was under the impression that the difference between friend and fan was pretty simple: Fans are one-way, friends go both ways. So if you have two people, A and B, and A is a Fan of B, the Plurks of B will show up on their Plurk page, but A's plurks will not be on B's page. Friends go both ways, and have to be verified by both people. If A and B are friends, both see each others' plurks.

I can kind of see that except I can choose to be a fan of you and you can choose to be a fan of me then your Plurks show on my time line and mine show on your time line. In that sense it is nearly identical to friends. The only difference I can really find between friends and mutual fans is that friends can send private Plurks to each other while fans can only send public Plurks to one another.

Leave a comment

About this Entry

This page contains a single entry by Jeff Summers published on September 2, 2008 3:42 PM.

Theming Email Validation was the previous entry in this blog.

Moving Karma to Make Room for the Arrow is the next entry in this blog.

Find recent content on the main index or look in the archives to find all content.