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.
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 URL statement tells the system where our background image is located online. In this case we are using the translucent white background that we have used elsewhere in the theme. This will give the messages a white background but will allow some of the timeline background image to show through. You will want to change this value to your own image and location. The next parameter tells the system to repeat the background image horizontally and vertically to cover the message. The "scroll" parameter tells the system to move the background image when the screen is moved via a scroll bar. The next two parameters "top" and "left" tell the system to position the translucent white background starting in the upper left-hand corner of the box. You will notice there is one additional parameter "!important". This is necessary to tell the system to override other background definitions that are defined after this statement in our CSS file. This is important because the Plurk system will reset the color to a white background after you have read a message. Since that background color is defined after our file during processing it will override our definition. The result will be that your messages will look translucent on the screen but will turn white after you have read them once. This may not be the behavior you are looking for.
The next four statements in this code block define the CSS3 parameters for rounding the corners. The "-moz-border-radius" will set the rounding for Firefox. The "-khtml-border-radius" and "-webkit-border-radius" are there to support Safari and those browsers that use the webkit rendering engine that includes Google Chrome. The "border-radius" is the CSS3 defined code that will ultimately be used and therefore is included here for those browsers that begin to support the proposed standard in its native state.
The next two statements will add a 1 pixel margin on the left and the right side of the box to give a little needed white space to the message box. The final statement defines the text color within the message box. In this case we are setting the text to black to set it off on our translucent white background. The color is represented by three hexadecimal numbers that describe red, blue and green color pairs.
The next statement tells the system to center the number of responses within the defined box. The next four lines are the CSS3 parameters that will round the corners of the response box. In this case we are telling the system to round the corners by 5 pixels. If you want them more rounded increase the 5 to a higher value. If you want them less rounded set the value to less than 5. The next statement tells the system to set the font to 115% the size of text. This will make the number of responses larger and more visible. I did this because I am using a larger monitor and found them easier for my eye to pick up on the screen. You could set this value to a pixel setting. I used percentage so that it would scale as the user modifies their default text size within their browser. It makes for a better accessibility experience. The padding statement tells the system to put 2 pixels all around the number of responses to give it some space within the white box. This was done for readability. The final statement tells the system to set the text which in this case is the number of responses to the same color orange we have been using throughout the theme. The result is an orange number being displayed in a rounded translucent white box next to the message.
That is about all there is to it. You will now have the beginning of rounded corners. If you choose to stop here all of your messages on your time line will have rounded corners and the ellipse and number of responses will also be rounded. In the next part of the tutorial we'll turn our attention to the message box itself when you click on it to see the message detail and responses. Good luck and be sure to let everyone know you found this on Plurk Skins.
/* Round Boxes for Plurk Messages */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.
.plurk_cnt {
background: transparent url(http://jeffdsummers.com/images/plurk/hd/whitetrans.png) repeat scroll top left !important;
border: 1px solid #999999;
-moz-border-radius: 6px 6px 6px 6px;
-khtml-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
margin-right: 1px;
margin-left: 1px;
color: #000000;
}
/* End Round Boxes for Plurk Messages */
/* Round Boxes for Response Count */
.response_count {
background: transparent url(http://jeffdsummers.com/images/plurk/hd/whitetrans.png) repeat scroll top left;
text-align: center;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
font-size: 115%;
padding: 2px;
color: #FF6600;
}
/* End Round Boxes for Response Count */
/* Round boxes for elipse, qualifiers, updater, etc. */
.qualifier, .m_qualifier, .segment-content, .dots .inner, #more_options_holder, #emoticon_selecter, #updater {
-moz-border-radius: 3px 3px 3px 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
/* End Round boxes for ellipse, qualifiers, updater, etc. */
/* Round Boxes for Plurk Messages */This first block of code is the actual message itself as it is displayed on the Plurk timeline. These are the bulk of what you see on your Plurk screen and are defined by the style for element ".plurk_cnt". The first line within this code block is the background. This is similar to the other background statements we have previously used. The parameters tell the system to make the background color transparent where the background image does not show up.
.plurk_cnt {
background: transparent url(http://jeffdsummers.com/images/plurk/hd/whitetrans.png) repeat scroll top left !important;
border: 1px solid #999999;
-moz-border-radius: 6px 6px 6px 6px;
-khtml-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
margin-right: 1px;
margin-left: 1px;
color: #000000;
}
/* End Round Boxes for Plurk Messages */
The URL statement tells the system where our background image is located online. In this case we are using the translucent white background that we have used elsewhere in the theme. This will give the messages a white background but will allow some of the timeline background image to show through. You will want to change this value to your own image and location. The next parameter tells the system to repeat the background image horizontally and vertically to cover the message. The "scroll" parameter tells the system to move the background image when the screen is moved via a scroll bar. The next two parameters "top" and "left" tell the system to position the translucent white background starting in the upper left-hand corner of the box. You will notice there is one additional parameter "!important". This is necessary to tell the system to override other background definitions that are defined after this statement in our CSS file. This is important because the Plurk system will reset the color to a white background after you have read a message. Since that background color is defined after our file during processing it will override our definition. The result will be that your messages will look translucent on the screen but will turn white after you have read them once. This may not be the behavior you are looking for.The next four statements in this code block define the CSS3 parameters for rounding the corners. The "-moz-border-radius" will set the rounding for Firefox. The "-khtml-border-radius" and "-webkit-border-radius" are there to support Safari and those browsers that use the webkit rendering engine that includes Google Chrome. The "border-radius" is the CSS3 defined code that will ultimately be used and therefore is included here for those browsers that begin to support the proposed standard in its native state.
The next two statements will add a 1 pixel margin on the left and the right side of the box to give a little needed white space to the message box. The final statement defines the text color within the message box. In this case we are setting the text to black to set it off on our translucent white background. The color is represented by three hexadecimal numbers that describe red, blue and green color pairs.
/* Round Boxes for Response Count */This next set of code will change the presentation for the number of responses a given message has. This section is for those responses that you have previously viewed not the new responses, we will manage that case in a little bit. The code section is very similar to what we just did above for the message itself. The first statement defines the background. I've chosen to use the same background as we did for the messages to give this section continuity. The first parameter is background color which I've set to transparent if the background image does not cover all of the space. The URL defines the location of the background image and again I am setting it to the same as above to get the translucent white background. You will need to change the location within the parenthesis to point to your background image. The final four parameters tell the system to repeat the image horizontally and vertically, scroll the image with the screen, and locate the background beginning in the upper left corner.
.response_count {
background: transparent url(http://jeffdsummers.com/images/plurk/hd/whitetrans.png) repeat scroll top left;
text-align: center;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
font-size: 115%;
padding: 2px;
color: #FF6600;
}
/* End Round Boxes for Response Count */
The next statement tells the system to center the number of responses within the defined box. The next four lines are the CSS3 parameters that will round the corners of the response box. In this case we are telling the system to round the corners by 5 pixels. If you want them more rounded increase the 5 to a higher value. If you want them less rounded set the value to less than 5. The next statement tells the system to set the font to 115% the size of text. This will make the number of responses larger and more visible. I did this because I am using a larger monitor and found them easier for my eye to pick up on the screen. You could set this value to a pixel setting. I used percentage so that it would scale as the user modifies their default text size within their browser. It makes for a better accessibility experience. The padding statement tells the system to put 2 pixels all around the number of responses to give it some space within the white box. This was done for readability. The final statement tells the system to set the text which in this case is the number of responses to the same color orange we have been using throughout the theme. The result is an orange number being displayed in a rounded translucent white box next to the message.
/* Round boxes for ellipse, qualifiers, updater, etc. */This final section will define the ellipse (...) box that displays when the message is larger than what is displayed in the message box. The code within this section contains the CSS3 code for rounding the the corners of the box. We've included the commands to support Mozilla (Firefox), Webkit (Safari and Chrome), and standard CSS3 browsers. for this ellipse box we are rounding the corners only slightly with a 3 pixel radius. This gives them a slightly more squared off look compared to number of responses and the message itself. If you want these all consistent set the pixel values the same in all three sections above and you will have uniformly rounded corners.
.qualifier, .m_qualifier, .segment-content, .dots .inner, #more_options_holder, #emoticon_selecter, #updater {
-moz-border-radius: 3px 3px 3px 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
/* End Round boxes for ellipse, qualifiers, updater, etc. */
That is about all there is to it. You will now have the beginning of rounded corners. If you choose to stop here all of your messages on your time line will have rounded corners and the ellipse and number of responses will also be rounded. In the next part of the tutorial we'll turn our attention to the message box itself when you click on it to see the message detail and responses. Good luck and be sure to let everyone know you found this on Plurk Skins.
Leave a comment