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..
As always we'll start with all of the code displayed in one place so that you can just cut and paste it into your profile to immediately begin using this functionality.
The first statement sets the background color to use the bright orange color we have used throughout the theme. I considered making it translucent orange but it made it difficutl to read so I settled on a solid color. The next statement defined the text color to be black making it very readable on the orange background. The remaining statements handle the box rounded corners. Notice that these are different from above. In this case we only want to round the upper left and upper right corners. This is done through Mozilla with values for the first two parameters and zeroes for the other two. This is likewise the same for -khtml and "border-radius". Webkit differs in that you cannot define all 4 corners differently. Instead we have to specify the top left corner and top right corner with separate statements to get the effect we want. We only rounded the top so that it looks rounded with the section but the bottom looks connected to box itself. Without these rounding statements the orange heading would be square on each corner and hide the top rounded edges of the white translucent box below.
That's about it. We've now modified the presentation of the message boxes, the response boxes, and the title bars within the timeline messages. This concludes the rounded boxes series of tutorials. Good luck and be sure to let everyone know you found this on Plurk Skins.
/* Response Caption Bars */We will then follow this up with a discussion of each line item so that you can understand what each section of code is doing. 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. Each of the changes are relatively small but when combined they have a relatively large visual impact.
.plurk_box {
-moz-border-radius: 6px 6px 6px 6px;
-khtml-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}
/* End Response Caption Bars */
/* Caption Title Bar */
.plurk_box .caption {
background-color: #FF6600;
color: #000000;
-moz-border-radius: 6px 6px 0px 0px;
-khtml-border-radius: 6px 6px 0px 0px;
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
border-radius: 6px 6px 0px 0px;
}
/* End Caption Title Bar */
/* Lower Response Title */
.info_box {
background-color: #FF6600;
color: #000000;
border-right: 1px solid #999999;
-moz-border-radius: 0px 0px 6px 6px;
-khtml-border-radius: 0px 0px 6px 6px;
-webkit-border-bottom-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
border-radius: 0px 0px 6px 6px;
}
/* End Response Caption Bars */
/* Text Area Input Box */
textarea#input_small {
background: transparent url(http://jeffdsummers.com/images/plurk/hd/blacktrans.png) repeat scroll top left;
}
/* End Text Area Input Box */
/* Response List Rounded Corners */
.list {
-moz-border-radius: 0px 0px 6px 6px;
-khtml-border-radius: 0px 0px 6px 6px;
-webkit-border-bottom-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
border-radius: 0px 0px 6px 6px;
}
/* End Response List Rounded Corners */
/* Response Text Area */
#input_small {
height: 75px;
}
/* End Response Text Area */
/* Make responses fit within window when scroll bar present */
.list table {
width: 100%;
font-size: 100%
}
/* End Make responses fit within window when scroll bar present */
/* Response Caption Bars */This first section of code manages the middle section of the message detail box that is bounded on the top by "Recent plurk responses" and on the bottom by "Plurk your response". We are going to round these corners to give consistency with the rest of the message block. This section of code is made up of 4 CSS3 statements that manage the rounding corners. During part 1 of this series we discussed each of these but let me recap. The "-moz-border-radius" line will manage Firefox and browsers using the Gecko presentation engine. The -khtml-border-radius" and the "-webkit-border-radius" lines focus on those browsers using the Webkit presentation engine which include Safari and Google Chrome. The "border-radius" statement is the proposed CSS3 standard and will be picked up by browsers that support the CSS3 standard. Both Mozilla and Webkit have committed to supporting this statement and the others will slowly fade away. These statements add rounded corners to all four corners of the middle box with a 6 pixel radius corner. Please note that the top two corners of this box will not yet look rounded until we deal with the title bar shortly.
.plurk_box {
-moz-border-radius: 6px 6px 6px 6px;
-khtml-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}
/* End Response Caption Bars */
/* Caption Title Bar */The ".plurk_box .caption" element is the colored title bar for "Recent plurk responses". This section is made up of several statements and we'll go through each.
.plurk_box .caption {
background-color: #FF6600;
color: #000000;
-moz-border-radius: 6px 6px 0px 0px;
-khtml-border-radius: 6px 6px 0px 0px;
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
border-radius: 6px 6px 0px 0px;
}
/* End Caption Title Bar */
The first statement sets the background color to use the bright orange color we have used throughout the theme. I considered making it translucent orange but it made it difficutl to read so I settled on a solid color. The next statement defined the text color to be black making it very readable on the orange background. The remaining statements handle the box rounded corners. Notice that these are different from above. In this case we only want to round the upper left and upper right corners. This is done through Mozilla with values for the first two parameters and zeroes for the other two. This is likewise the same for -khtml and "border-radius". Webkit differs in that you cannot define all 4 corners differently. Instead we have to specify the top left corner and top right corner with separate statements to get the effect we want. We only rounded the top so that it looks rounded with the section but the bottom looks connected to box itself. Without these rounding statements the orange heading would be square on each corner and hide the top rounded edges of the white translucent box below./* Lower Response Title */This section of code is at the bottom of the message window under the "Plurk your resonse" section. It contains the "plurk page" link in the bottom right corner. This is very similar to the section above with a couple of small twists. The first statement in this section sets the background color to the bright orange. The second statement sets the text color to black. The "border-right" statement defines a 1 pixel solid border on the right side in a light gray. this is used to bring continuity to the box above and helps definition when the scroll bar appears on the list section. The final statements in this section are for creating the rounded corners. The section above we rounded the upper left and upper right corners. In this section we are rounding the lower left and lower right corners. Without these statements the colored heading bar would be square and would cover up the rounded corners of the "Plurk your response" section. Again for Webkit we need to define each corner separately whereas the others will accept each corner within a single statement.
.info_box {
background-color: #FF6600;
color: #000000;
border-right: 1px solid #999999;
-moz-border-radius: 0px 0px 6px 6px;
-khtml-border-radius: 0px 0px 6px 6px;
-webkit-border-bottom-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
border-radius: 0px 0px 6px 6px;
}
/* End Response Caption Bars */
/* Text Area Input Box */Within the "Plurk your response" area is a text box for entering your response. Here we are changing this from a white background to one that uses a translucent black background that is used elsewhere in the theme. This is accomplished with a single background statement. The parameters for this tell the system to make the background color transparent, use an image located in the URL section, repeat the image horizontally and vertically, scroll the background image with the page, and position the background beginning in the top left corner.
textarea#input_small {
background: transparent url(http://jeffdsummers.com/images/plurk/hd/blacktrans.png) repeat scroll top left;
}
/* End Text Area Input Box */
/* Response List Rounded Corners */This section of code manages the middle section of the message detail box that is bounded on the top by "Recent plurk responses" and on the bottom by "Plurk your response". This is the inner container that we need to manage and as such needs to have the lower left and lower right corners rounded otherwise they will be squared off. This is done similar to those above with CSS3 statements for the various browser families. As was noted above, we have to define each corner separately for the Webkit presentation engine.
.list {
-moz-border-radius: 0px 0px 6px 6px;
-khtml-border-radius: 0px 0px 6px 6px;
-webkit-border-bottom-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
border-radius: 0px 0px 6px 6px;
}
/* End Response List Rounded Corners */
/* Response Text Area */This section will take the text area that is within the "Plurk your response" section and increase the height to be large enough to support all 140 characters. Without this the field will scroll which can be difficult to edit during text entry. Assigning the extra height allows you to see all of the text you are entering without having to deal with the scroll bar.
#input_small {
height: 75px;
}
/* End Response Text Area */
/* Make responses fit within window when scroll bar present */This final code section is a personal item. In its default state a plurk response is defined at a pixel width to fit within the "Recent plurk responses". If there is no scroll bar for multiple responses this works fine. If the number of responses reaches a point where a scroll bar is defined, the final character in a line is somewhat hidden under the scroll bar making it difficult to read. With this code we will eliminate this problem. The first statement tells the system to use 100% of the available space less padding and margins for text. The second statement makes the font the same as the overall design of the theme. These statements will dynamically adjust the width when the scroll bar appears making the line lengh slightly smaller so that the text is always readable.
.list table {
width: 100%;
font-size: 100%
}
/* End Make responses fit within window when scroll bar present */
That's about it. We've now modified the presentation of the message boxes, the response boxes, and the title bars within the timeline messages. This concludes the rounded boxes series of tutorials. Good luck and be sure to let everyone know you found this on Plurk Skins.
Leave a comment