Results tagged “css” from Plurk Skins

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.

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 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.

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.