Results tagged “rounded corners” from Plurk Skins

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.

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.

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.

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.