Jeff Summers: August 2008 Archives

We are going to switch gears a little bit. I had planned to make this tutorial about creating rounded corners on the Plurk Message window and begin cleaning up the time line. But after yesterday's changes I have had quite a number of requests come through to devote a little time to the new Search function and further discussion on the fonts. I'll therefore push the other tutorial to a later date and we can work through these two new features of Plurk to get a better handle on what they are doing and how we can manage their behavior better.

The Plurk development team is currently deploying several new features. Although this is merely a guess, it would appear that they are planning an update to the site search criteria and are modifying some of the Cascading Style Sheets. I happened across these while writing the latest tutorial for Plurk Skins. I was in the midst of styling the Plurk messages adding rounded corners, changing backgrounds, and basically messing around. Suddenly things started getting really weird. Weird in my world is a relative perspective. I am like a magnet for the weird so usually this sort of thing doesn't affect me. But when you are messing around with the presentation layer of a web page and suddenly content changes in strange and unusual ways you immediately begin questioning yourself. This is exactly what happened in my case. I modified the background on the response box of a Plurk message and the search box disappeared on the screen and was replaced with a new box pre-populated with "I love plurk". I ran back to my code to see exactly what I had done. Several panicked moments later I realized I was not responsible for that. While I remained confused I decided to continue. I again made what I thought were minor changes to the profile code and this time the font size of Plurk messages increased by 20 percent! Again my initial reaction was, "Now what did I do?" After several minutes of troubleshooting I again realized I didn't do it.

This is a sure sign that you have completely lost your mind when it comes to modifying your profile. The Plurk development team introduced a new color scheme for the drop down menu next to the Plurk Message Author's name. Rather than being appreciative of their hard work and admiring the job they did; I immediately began scouring the CSS to identify what tags they were using so that I could modify it. I wonder if there are psychologists that now specialize in helping people with obsessive CSS disorders? While I contemplate whether CSS obsession is covered under my medical insurance, let's see if we can modify this new section to fit aesthetically with the theme we are building for our profile.

Today we'll continue our series on profile modification. So far we have added a page background, a custom time line image, added an image to the Plurk dashboard, and added an image to the Plurk form. Today we will add the one final large element to our page. We are going to continue working on the Plurk form. When we added the background image it had the adverse effect of making some of the text difficult to read. There are other aspects that don't quite flow with our overall effect so we will be modifying them as well. This is the detail work that many people forget but doing these will help your profile look professional and complete.

As part of the Customize Your Plurk Profile series we have added images to several elements of our page. When I was creating my own personal custom profile one of the first questions I asked was, "What size do these images have to be?" What I found was that there were not really any good answers to that question. There are several reasons for this but I still wanted to get some sort of guideline as to image dimensions for the page. In my quest to find an answer I took many paths.

Today we'll continue our series on profile modification. So far we have added a page background, a custom time line image, and added an image to the Plurk dashboard. Today we will add the one final large element to our page. We are going to focus on the Plurk input form where you enter your individual Plurk messages. We will add a custom image as the background and we'll round the corners of the box to make it consistent with the rest of our layout.

Yesterday we discussed creating rounded corner boxes within the dashboard for each of the sections. I made the design decision to separate the boxes in the first column into three separate sections for Profile, About Me, and Relationship. I have since gotten several questions as to how can you keep those together. So I thought perhaps we would revisit the code and make some changes there so you can see the difference. We'll also discuss some other options for you to consider in your design.

Today we'll continue with the series that began August 19 on creating a customized Plurk profile. In the first entry we learned Body and Time Line Theming. In the second entry we expanded it to add Dashboard Theming. Looking over the dashboard the text gets lost on top of the image and it is hard to differentiate the various sections of the data. Today we'll add a semi-transparent background to each dashboard section and round the corners of the sections. We'll also begin formatting the text and titles to give our theme a consistent feel.

Continuing where we left off yesterday we are going to turn our attention now to the dashboard and give it a custom feel. On a standard profile the dashboard is represented by a burnt orange box that is displayed towards the bottom of the page below the time line and the Plurk entry box. With this tutorial we'll replace the orange box with a custom graphic background and we'll also round the corners of the box. So let's get started and start working on the dashboard.

So far I've started with some relatively advanced CSS manipulations which was probably not the most prudent way to go about modifying your profile.  So let's take a step back and start with some very basic CSS theming.  Today we'll begin with the overall page and the time line.  This will be the first of several posts that will hopefully give those with limited or no CSS experience a chance to begin modifying their own profile.  Hopefully as we build upon these tutorials you will be able to quickly get up to speed and before long you will have a fully functional custom profile. 

You have probably noticed that Plurk will add a vertical line on the screen to differentiate one day from the next. This can be beneficial to prevent you from responding to a Plurk message from several days ago when you thought it was more current. But if you are going to all of the trouble of creating a custom CSS profile, then it just doesn't seem right that your vertical day separator is the standard colored bar. Instead wouldn't it be cool if you could have an image that matched the theme you are creating? The code is extremely simple so let's get started.

Yesterday I described how to replace the Loading image in the Plurk response box. Previously I documented replacing the Loading image on the main Plurk timeline. In those two discussions I alluded to the fact that there was a third place where the loading image was used. This third area is in the Edit Profile page. The Loading image is displayed as the system retrieves your data from the database. In many cases this image does not even have time to load before the page is refreshed with your profile data. During times of slow response or if you lose network connectivity the image stays up much longer. After several attempts to capture the CSS element identifiers I was finally able to find it. This then is the third and last installment for replacing the Loading image.

For some inexplicable reason I have become obsessed with the loading graphic that shows Blinky the Nuclear fish. Recently I posted an entry describing how to replace this graphic on your main time line. I wrongfully assumed this fix would replace all instances of this graphic but that is not the case. The loading image shows up on two additional places within Plurk. It shows within the Plurk response box and within the window when you click Edit Profile. I had not really noticed these two probably because Plurk was going so quickly that there was not time to display the image. In the past few days the system has been running slowly allowing the images to sit on the screen longer. This was especially the case with the Plurk response window. This graphic has been hanging on long enough to pull up the editor and find exactly what CSS element is controlling the graphic. Once that was identified it became quite easy to create a CSS rule that would allow you to replace it with a unique graphic of your own.

Today the development team responsible for Plurk updated the home page which included several new features. The lower left side of the page now contains five tabs that describe various groups of Plurk users.

• Most Viewed - these are users whose profiles are viewed most often. Some of these users are very active while others are celebrities but no necessarily active in the Plurk community.


• Most Followed - these are users who are actively being followed either as a friend or as a fan. These users tend to be a little more active as they have at least had to acknowledge a friend request


• New - these are new users that have just joined Plurk.


• Random - these users have been random selected by the system to provide other Plurk users an opportunity to meet someone new that they may otherwise not see on their timeline.


• Karma - these are the top 10 users on Plurk with the highest Karma scores. They tend to be the most active users currently on Plurk.

On the lower right side of the page are two tabs dealing with Plurk messages.

• Most Responded - these are Plurk messages which have had the most active conversation going on. It's always interesting to see what subjects have people carrying on for the longest conversations. I see these are Plurk filibusters (does that make them Plurlibusters?)


• Most Recent - these Plurk messages are the ones the system has just seen started. This is a chance to get in on the ground floor of a conversation before it becomes long-winded or dies.

As users begin to theme their Plurk Profile they typically start with modifying the background image or color and slowly migrate to other aspects of the page. Before long they have a fairly unique representation of their personality or mood. They take a step back and admire their handiwork and immediately want to share it with the world. Before doing that they'll usually run through a quick check to make sure everything is just right. As new Plurk messages arrive they suddenly notice that there is a standard image that appears on the middle of their time line that says "Loading...". The excitement of a custom profile fades as they realize that this graphic is the same as ever other user on Plurk. Part of the goal of a theme is to make their profile unique so obviously having this standard image just will not do. Follow along with this post and before you know it you'll have an image that is unique just to you.

One of the more interesting aspects of Plurk is the creature icons they have created.  There are 12 creature icons from which to choose.  Many of these creature choices require a certain level of Karma before you are able to select them.  The creature you select is displayed at the top right side of your Plurk timeline.  The elimination or modification of the creature graphics are not specifically changable but by using a little CSS slight of hand you are able to make the graphic be one of your own.  For example, on my profile I have replaced the horny Stitch character with Disney's Goofy wearing an Arizona Diamondbacks uniform.  So let's get started and see how that was done.

Welcome to Plurk Skins where I'll attempt to teach your Plurk Creature new tricks.  I've set up this site to begin documenting the various aspects of the "Insanely Great" social media service Plurk.  For those of you unaware of this incredible site; it is a micro-blogging service that provides conversational threads for communicating with your friends.  I happened across this site in June and immediately became hooked.  I've met some incredible people and learned a tremendous amount.  The service is available world-wide and gives you an opportunity to meet people with similar interests as yours.  I've become great friends with people from Austria. Australia, Great Britain, Canada, and many other areas of the world.  The system is run by a great set of developers who are meaningfully connected to the community.  As such they are constantly coming out with new features to make the user experience even better.