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.
Results tagged “timeline” from Plurk Skins
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.
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.
