September 2008 Archives

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.

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.

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

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.

Yesterday we created a Custom Bottom Timeline, Day Separator. This gave us a consistant look and feel for the date and time at the bottom of the timeline. It also created custom tabs below the timeline. There remains one final piece to make our bottom timeline complete. You'll notice that when we over the mouse over a specific message that Plurk will show a tab along the bottom that gives you the time that message was created. By default this tab shows up as an off-white with a light blue outline. There are actually two tabs. The first tab shows with a sun in the upper left corner while the other shows a crescent moon and stars. These tabs are used to differentiate between day and night. In this tutorial we will make a custom set of images that are a better match to the theme we are trying to create.

Today we are going to focus our efforts on the bottom timeline and the tabs. Yesterday we modified the tabs below the timeline by rounding the bottom two corners to make them look more like file tabs. We left the color of the tabs the default. We'll remedy that today by modifying the tabs to color them appropriately. We'll also theme the bottom line of the timeline that contains the date and time. We'll also add a custom graphic for the day separator to match the theme we are building.

By now most everyone has probably found the new tab that has appeared below your timeline with the title of "Responded plurks" This tab followed the reintroduction of the "Private plurks" tab that reappeared last week. That now makes 4 tabs below your timeline that will allow you to filter the timeline display by "All plurks", "My plurks", Private plurks", and "Responded plurks". These are great features that are very useful to manage the various messages and discussions that you are involved with on Plurk. With the introduction of all of these tabs it is inevitable that we will want to modify their look and feel to match our profile theme. This tutorial will describe how to round the corners of the tabls to make them look like folder tabs rather than square boxes.

Two days ago we began a three-part series for modifying the timeline display. It focused on the message box itself along with ellipse and response count boxes. Part two focused on the Plurk message response box and detail list. Today we will complete the rounded boxes tutorial by rounding the sections of the message box, add colored header bands, and do a little bit of housekeeping. These tutorials will give the message boxes a rounded corner look, modify the text display, and change the colors of the new replies numbers that display next to the messages themselves. We'll also give the whole thing a unique look by changing the background color to a translucent background to allow our background image to show through slightly. Breaking these tutorials up into three parts reduces the overall code and allows you the opportunity to determine how far you want to take this..

Yesterday we began a three-part series for modifying the timeline display. It focused on the message box itself along with ellipse and response count boxes. Today is part two where we are going to focus our efforts on the Plurk message response box and detail list. These tutorials will give the message boxes a rounded corner look, modify the text display, and change the colors of the new replies numbers that display next to the messages themselves. We'll also give the whole thing a unique look by changing the background color to a translucent background to allow our background image to show through slightly. Breaking these tutorials up into three parts reduces the overall code and allows you the opportunity to determine how far you want to take this..

Today we will begin a three-part series for modifying the timeline display. We are going to focus our efforts on the Plurk messages and ultimately will style the response box and detail list. These tutorials will give the message boxes a rounded corner look, modify the text display, and change the colors of the new replies numbers that display next to the messages themselves. We'll also give the whole thing a unique look by changing the background color to a translucent background to allow our background image to show through slightly. I've broken this up into three parts so that none of the tutorials are too long. It will also allow you to select how far you want to take these changes since you can stop at any time.

I've noticed lately that my Karma number sometimes pushes the arrow to the next time. For some odd reason this really bothers me so I decided that it needed to be fixed. This really doesn't warrant a full entry but it was bothering me so I figured I would fix it and share the code with anyone who might also want the number and arrow on the same line. The code is very straight forward:

/* Move Karma Title to Left for Larger Numbers */
#dash-stats h3 {
margin: 20px 0px 10px 10px;
}
/* End Move Karma Title to Left for Larger Numbers */

The element that controls this is "#dash-stats h3". What I did was set the margin to 20 pixels from the top, zero pixels from the right, 10 pixels from the bottom, and 10 pixels from the left. This gives the numbers enough space that the arrow fits on the same line. Like I said, it's not a major deal, I just get tired of seeing my arrow bouncing around from one line to the next. (This is a sure sign that I have absolutely no life.)

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.

The Plurk development team is busy working on several new features and functions. They are also doing a little housecleaning and preparing the user database to become more useful. As such they needed to initiate an email validation routine for users. This will impact new users as they sign up but was rolled out to everyone in order to verify that the email message on record was correct and that users are receiving emails from Plurk. They therefore had the system request that each user validate their email address with the system. As you logged in you were notified with a bright reddish pink box in the title bar asking to validate your email. Well I couldn't just let that pass up since it clashed with the other messages on the system so I themed it. At first I thought why bother but then decided to do this in the off chance that Plurk will use the same CSS tag for other future messages then this will set them up to look more aesthetically pleasing and match the overall theme.