Plurk Skins

Green Beret Theme

Mon, 10 Nov 2008 15:57:19 -0700

While I was searching for a suitable background for my Veteran's Day theme I came across another background image that really touched me. I've therefore created a second Veteran's Day theme with this background as well. This version features members of the Green Berets as they salute their fellow soldiers and their flag. This simple action should be a reminder to all of us how indebted we are to those who served their country.

Veteran's Day Theme

Sun, 09 Nov 2008 15:07:02 -0700

As I was thinking about all of the freedoms we enjoy I began to think that perhaps it might be appropriate to create a theme for Veteran's Day to pay tribute to those who have defended our liberties. From the comments that I have received I decided this theme would be a great candidate to share with others so that they too can show how important Veterans have been to our way of life.

Haunted Mansion Theme

Fri, 31 Oct 2008 13:48:12 -0700

As I work through the CSS code for Plurk I sometimes begin to question how things work and whether I can modify them for my own warped use. Since I try not to introduce this madness onto the unsuspecting masses I usually end up updating my own personal profile theme. Sometimes I'll have people ask if I would please share the code so that they too can us it. I'm always more than happy to provide whatever help I can so every so often I'll include a post where I will give you the code from my profile page that you are free to use.

Everything's Changing

Tue, 28 Oct 2008 20:47:54 -0700

Over the course of the last 24 hours the Plurk development team rolled out several new features to the Plurk community. Many of these were welcomed additions but a few of them had an undesirable impact. It was definitely one of those good news/bad news kind of things. The good news is that the features introduced are great additions to an already good product. The first new functionality was the inclusion of a "Block User" button to the user's profile. You now have the capability to block a user directly from their profile. This has been something that the user community has been asking about for quite some time so it's inclusion brought a lot of joy from the user base. The default graphic is a red square button so you can bet that I'll be covering how to theme that in an upcoming tutorial so it matches the style and color scheme of your profile page. The second new feature that was introduced was the ability to follow or friend someone directly from the friend/fan page. This again brings great strides in usability to the interface. Both of these show that the developers are definitely listening to the users which is one of the best reasons for using Plurk versus one of the other micro-blogging services.
Now for the bad news. I should probably preface this by saying this isn't necessarily bad news just that it had implications to a lot of users that were somewhat unexpected. In an effort to make Plurk faster and more scalable, the development team made several changes to the CSS files. These changes should make things run a little faster as the files have been optimized at least initially. As a result several areas may have broken if you have modified or customized your CSS profile.
From first glance it appears the changes have impacted the following:

Modified the Karma arrow and added an element ID for it
Added a SPAN and background image to the Find Twitter Friends box
Added a SPAN and background image to the Embed Plurk Widget box
Added a SPAN and background image to the Mobile Plurk link box
Added a SPAN and background image to the Invite or Find Your Friends box
Added an element for the Loading Image
Added an element for the left browse arrow image
Added an element for the right browse arrow image
Added an element for the Back to Today image
Added an element for the update box divider (# new plurks/# new responses)

There are probably other changes that have been added that I haven't come across yet and I will try to document them were I can. I've created a Plurk message that I am updating as I find new items. I've already updated the existing Plurk Skins tutorials to include these changes so if you read a tutorial before and read it again now don't be confused if the text seems different than you remember.
Over the course of the next several days and weeks I'll continue to try and add new tutorials to the site. I'm also toying with the idea of releasing the themes that I am creating such as the Halloween theme you might have seen. I'm currently working on a Thanksgiving theme and I am in the initial planning stages to create a Christmas theme. I'll continue to use the motorcycle theme for continuity in the tutorials as well.
As always, if you have an idea for a tutorial or a theme please don't hesitate to ask and I will see what I can do to create something to meet your needs. As always I suggest following my Plurk account or check back often to stay abreast of anything new on the site.

Theming the Private Plurks, Languages & Options Button

Mon, 27 Oct 2008 16:19:20 -0700

While I was writing the tutorials on the Dashboard Buttons I noticed that Plurk had created a new box below the main input field to select Private Plurks, define the language of the Plurk, and allow the user to set options on the message. This used to be just a text link but now has the appearance of being a button. They added an icon of a padlock to the left side. Unfortunately the orange background color they used clashes with just about every known color on the planet. It was clear that something needed to be done with that and quickly so I created this short tutorial that will make this area more aesthetically pleasing.

Part 4: Create Share Plurk Page Button on Dashboard

Sun, 26 Oct 2008 15:55:00 -0700

In part 4 of the series on modifying the buttons we are going to turn our focus back to the dashboard as we make some changes under the Friends and Fans segments. Plurk recently made some changes to the buttons included in these sections many of which don't work well with our theme. There are large buttons for Inviting friends to Plurk, a leather looking section containing the URL for sharing your Plurk link, and three rotating buttons for embedding your Plurk widget, finding friends on Twitter, and a link to the Plurk mobile page. There are also two text links for showing all of your friends and showing all of your fans. Through the next two tutorials we will be modifying all of these to provide a look and feel to these buttons that will add some style to your theme. These tutorials can be followed individually or done in series to get the full effect for all of these changes. This is part 4 of this series and will focus on the Share your plurk page area. Part 1 in this series is titled Create Dashboard Buttons for Twitter Contacts, Widget, Mobile, Part 2 of this series is titled Create Dashboard Button for Invite Friends and Part 3 of this series is titled Create Dashboard Buttons for Show All Friends, Show All Fans.

Part 3: Create Dashboard Buttons for Show All Friends, Show All Fans

Sat, 25 Oct 2008 14:19:27 -0700

In part 3 of the series on modifying the buttons we are going to turn our focus back to the dashboard as we make some changes under the Friends and Fans segments. Plurk recently made some changes to the buttons included in these sections many of which don't work well with our theme. There are large buttons for Inviting friends to Plurk, a leather looking section containing the URL for sharing your Plurk link, and three rotating buttons for embedding your Plurk widget, finding friends on Twitter, and a link to the Plurk mobile page. There are also two text links for showing all of your friends and showing all of your fans. Through the next two tutorials we will be modifying all of these to provide a look and feel to these buttons that will add some style to your theme. These tutorials can be followed individually or done in series to get the full effect for all of these changes. This is part 3 of this series and will focus on making buttons from the Show All Friends and Show All Fans text links. Part 1 in this series was titled Create Dashboard Buttons for Twitter Contacts, Widget, Mobile and Part 2 of this series is titled Create Dashboard Button for Invite Friends.

Part 2: Create Dashboard Button for Invite Friends

Fri, 24 Oct 2008 13:31:47 -0700

In part 2 of the series on modifying the buttons we are going to turn our focus back to the dashboard as we make some changes under the Friends and Fans segments. Plurk recently made some changes to the buttons included in these sections many of which don't work well with our theme. There are large buttons for Inviting friends to Plurk, a leather looking section containing the URL for sharing your Plurk link, and three rotating buttons for embedding your Plurk widget, finding friends on Twitter, and a link to the Plurk mobile page. There are also two text links for showing all of your friends and showing all of your fans. Through the next three tutorials we will be modifying all of these to provide a look and feel to these buttons that will add some style to your theme. These tutorials can be followed individually or done in series to get the full effect for all of these changes. This is part 2 of this series and will focus on the invite friends button under the Friends section. Part 1 in this series is titled Create Dashboard Buttons for Twitter Contacts, Widget, Mobile.

Part 1: Create Dashboard Buttons for Twitter Contacts, Widget, Mobile

Thu, 23 Oct 2008 10:51:33 -0700

We are going to turn our focus back to the dashboard as we make some changes under the Friends and Fans segments. Plurk recently made some changes to the buttons included in these sections many of which don't work well with our theme. There are large buttons for Inviting friends to Plurk, a leather looking section containing the URL for sharing your Plurk link, and three rotating buttons for embedding your Plurk widget, finding friends on Twitter, and a link to the Plurk mobile page. There are also two text links for showing all of your friends and showing all of your fans. Through the next four tutorials we will be modifying all of these to provide a look and feel to these buttons that will add some style to your theme. These tutorials can be followed individually or done in series to get the full effect for all of these changes. This is part 1 of this series and will focus on the rotating buttons for the widget, Twitter contacts, and the Plurk Mobile link.

Theming the US Elections Tab

Mon, 06 Oct 2008 10:42:47 -0700

Yesterday I talked about the new US Elections 2008 tab that appeared below the timeline. At the the time there were several people who complained that they didn't want to see this tab so I provided a quick CSS hack that would hide the tab from view using the opacity command. Never let it be said that the Plurk developers don't listen. This morning we awoke to changes that were implemented that will allow the user to hide this tab from view. The tab now has a close box associated with it. Unfortunately the tab and associated close box are a beastly gray color that doesn't match our theme at all. In this tutorial I'll walk you through theming this new tab to match the others on your timeline.

Hiding the US Elections Tab

Sun, 05 Oct 2008 17:48:55 -0700

Today Plurk introduced a new tab to cover the upcoming presidential elections in the United States. Along with it they also began a new contest including a mini-election where users are invited to vote for their favorite candidate. The tab appears below your timeline on the far right side of the screen. Hopefully the tab will be used by the Plurk community to search out

existing political discussions and concentrate the discussions there rather than creating new message streams.

There have been several people complaining that they don't wish to be involved in the political discussions and wish they didn't have to see them. While I can't solve the fact that political threads appear, I can provide you with a way of hiding the US Election 2008 tab. By adding the following code to your profile you will hide this tab:

#filter_tab .election {opacity:0;filter:alpha(opacity=0);zoom:1;}

This code will act upon the election tab and basically hide it from view so you won't have to look at it any longer. This line sets the opacity of the election tab to zero making it invisible. You can change the value from 0-100 to make it semi-transparent if you wish. It won't solve all your problems but it does allow you to make a statement that you don't want to be involved with the political views on social networking sites. Hopefully this will help some of you cope. Just breathe deeply and be comforted by the thoughts that the elections will be over in a month then hopefully things will calm down a little.

Creating a Custom Update Box

Tue, 16 Sep 2008 13:16:57 -0700

Today we'll turn our attention to the Update box that appears in the lower left corner of the time line whenever a new Plurk message is entered or there are responses to existing messages on your time line. In its generic form this is a rectangular yellow box with a dark red font. While this is adequate it doesn't necessarily look right when the rest of your theme has a different color scheme. We will therefore change this box to be a translucent orange with white text and black links to provide a more uniform look to our theme.

Changing Sign-Up / Log-in Background

Sat, 13 Sep 2008 15:28:14 -0700

This is a continuation to the miscellaneous aspects of your theme. These are small details that are often overlooked but have the ability to differentiate your profile from the others that are out there. If you happen to look at a user's profile when you are not logged in you will notice a bright pink bar at the top right side of the screen in the title bar. It tells the user to either login or sign up for the Plurk service. While I am ok with the color pink overall, it doesn't really fit in well with the orange and black we are using for our current theme. This code will change the background to a translucent black and set the text to a color compatible with that background.

Removing the Dotted Outline on Focused Links

Fri, 12 Sep 2008 14:56:58 -0700

The next few postings are going to deal with a few miscellaneous aspects of your theme. These are minute details that could very easily be overlooked but will differentiate your theme from the other profiles that are out there. Individually they are not that impressive as say a new graphic or rounded corners but they are useful things to know about. If you are using a Firefox browser you may have noticed that the active link on the screen has a dotted line outline around it. This was done to differentiate it and give the user a visual cue of what they had clicked. If you you don't like that effect you can turn it off. The code to eliminate the outline is given below

Theming the Page Title and Top Page Links

Thu, 11 Sep 2008 15:43:45 -0700

Today we are going to turn our attention to the very top of the screen. There you will find a horizontal set of links that provide you access to your profile, your friends list, alerts, interesting plurkers, your account, and the ability to log off. By default these will display over the top of the background as text links. If you are using a background like our diamondplate these links can sometimes become lost. We will therefore make some CSS changes and see if we can get the top of the window to more closely match the rest of our theme.