Jeff Summers: October 2008 Archives

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.

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.

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.

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.

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.

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.

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.

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.

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.