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.
As always we'll start with the entire code segment to allow you to copy and paste it into your profile so that you can immediately start using the functionality.
#filter_tab a {
-moz-border-radius: 0px 0px 4px 4px;
-khtml-border-radius: 0px 0px 4px 4px;
-webkit-border-bottom-left-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
border-radius: 0px 0px 4px 4px;
}
/* End Filter Tabs */
As always I strongly recommend documenting your code so that you will know what this code does should you ever go back into your profile CSS to make changes. Without these comments it makes it much more difficult to remember what the code does and why it is included in the profile.
This code is just the beginning of the changes we will make. We'll start off simple by just rounding the two lower corners of the tabs. We'll follow up with another tutorial to change the timeline bar itself and at that time we'll revisit the tabs and change them further with different colors, images, etc. For now though we'll be content to change the rounded corners.
We will accomplish this change using the same CSS3 commands that we have used in other tutorials such as Rounding the Timeline Message Corners, Rounded Boxes within Dashboard, Body and Time Line Theming.
The first statement is used by browsers that are built on the Mozilla Gecko engine such as Firefox. The "-moz-border-radius" statement tells the browser to round the top left and top right corners as square (a curve of 0 pixels) and the bottom left and bottom right corners to round with a 4 pixel radius curve. If you want a more rounded corner just increase the values from 4 to some larger number. If you want more squared corners reduce the values from 4 to a lower number. The "-khtml-border-radius" statement was an early implementation of proposed CSS3 and are used in nightly builds of Safari but not necessarily within the released version. I included it in case there is a user that is testing a build of Safari, I don't want their user experience to break. Safari is built upon the Webkit rendering engine as is the new Google Chrome browser. Both of these browsers will utilize the "-webkit-border-radius" statements. Unfortunately Webkit does not allow you to modify each corner with a single statement such as Mozilla. Instead you have to call out each individual corner. You'll notice that we have a separate statement for the bottom left and the bottom right corners. The final statement is what is the proposed CSS3 standard. Ultimately the Mozilla and Webkit specific versions of this statement will go away and be replaced with "border-radius" This is here for futureproofing when the standard is ratified.
That's really all there is to it. With these few lines of code you can have your tabs rounded to look more like tab folders instead of just square boxes. Good luck and be sure to let everyone know you found this on Plurk Skins.
Leave a comment