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..
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 next parameter is the location for the background image. The value within the parenthesis of the URL statement tells the system to use the image found at this location. This example is a translucent white background that is being used elsewhere in the theme. You will need to change this value to point to your image. The next parameters will tell the system how to manage the image background. The "repeat" parameter tells the system to duplicate the background both horizontally and vertically to fill the space. The "scroll" parameter tells the background to move with the screen as it moves horizontally and vertically when a user uses the window scroll bars. The final two "top" and "left" tells the system to position the background image beginning in the upper left hand corner of the screen. The final statement in this section tells the system to add a 1 pixel border to all 4 sides of the ellipse box and to make it a light gray color. This gives the box definition and sets it apart from the other elements.
That's about it. We now have a translucent box for plurk responses as well as translucent background for the responses we create. We've modified the text color of several elements to make them consistent with our color scheme and set ourself up for the final section where we round the boxes within the plurk list, create the colored title bars, and do a little more housekeeping on text colors and styles. Good luck and be sure to let everyone know you found this on Plurk Skins.
/* Border around Small Avatar */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.
.p_img {
border-color: #FF6600 #D25502 #D25502 #FF6600;
}
/* End Border around Small Avatar */
/* Border and Background color for elipse */
.dots .inner {
background: transparent url(http://jeffdsummers.com/images/plurk/hd/whitetrans.png) repeat scroll top left;
border: 1px solid #999999;
}
/* End Border and Background color for ellipse */
/* Color of New Response Count */
.new .response_count {
background: transparent url(http://jeffdsummers.com/images/plurk/hd/orangetrans.png) repeat scroll top left;
color: #000000;
}
/* End Color of New Response Count */
/* Plurk Box for Responses */
.plurk_box .plurk_cnt {
background: transparent url(http://jeffdsummers.com/images/plurk/hd/whitetrans.png) repeat scroll top left !important;
}
/* List Box Border */
.plurk_box .list {
border-right: 1px solid #999999;
background: transparent url(http://jeffdsummers.com/images/plurk/hd/whitetrans.png) repeat scroll top left;
}
/* Mini-Form Box Border */
.plurk_box .mini_form {
background: transparent url(http://jeffdsummers.com/images/plurk/hd/whitetrans.png) repeat scroll top left;
border-right: 1px solid #999999;
border-bottom: 0px solid #999999;
}
/* Mini-Form Character Color */
.mini_form .char_updater {
color: #FF6600;
}
/* End Mini-Form Character Color */
/* Mute-Delete Character Color */
.manager .delete {
color: #FF6600;
}
/* End Mute-Delete Character Color */
/* Edit Message Character Color */
.manager .action {
color: #333333;
}
/* End Edit Message Character Color */
/* Link to Permalink Page */
.info_box a:link {
color: #000000;
}
/* End Link to Permalink Page */
/* Plurk External Links */
.plurk a.ex_link {
color: #D25502;
}
/* End Plurk External Links */
/* Border around Small Avatar */This first code snippet adds a border around the avatar to the left of the message on the time line. The "border-color" statement defines the color. It defines the colors for each of the four sides of the box. the order goes top, right, bottom, left. In our example the top and left are defined by the bright orange we use throughout the theme. The right and bottom edges are a darker color. Using a darker color on two sides tricks the eye into thinking that the item has some depth. It is subtle and many people will miss it but does give the page some interest.
.p_img {
border-color: #FF6600 #D25502 #D25502 #FF6600;
}
/* End Border around Small Avatar */
/* Border and Background color for elipse */In yesterday's tutorial we gave an overall style to the ellipse box. here we get a little more specific defining the background and border for this small box. The first statement in this code section defines the background and is made up of several parameters. The first parameter is background color. In this sense we are setting the color to transparent. This is only displayed in areas where the background image does not reach the edges.
.dots .inner {
background: transparent url(http://jeffdsummers.com/images/plurk/hd/whitetrans.png) repeat scroll top left;
border: 1px solid #999999;
}
/* End Border and Background color for ellipse */
The next parameter is the location for the background image. The value within the parenthesis of the URL statement tells the system to use the image found at this location. This example is a translucent white background that is being used elsewhere in the theme. You will need to change this value to point to your image. The next parameters will tell the system how to manage the image background. The "repeat" parameter tells the system to duplicate the background both horizontally and vertically to fill the space. The "scroll" parameter tells the background to move with the screen as it moves horizontally and vertically when a user uses the window scroll bars. The final two "top" and "left" tells the system to position the background image beginning in the upper left hand corner of the screen. The final statement in this section tells the system to add a 1 pixel border to all 4 sides of the ellipse box and to make it a light gray color. This gives the box definition and sets it apart from the other elements./* Color of New Response Count */Yesterday we defined the background for message responses for those messages that had been read. We set the background to be the white translucent background. When a message has replies that are unread we want to differentiate them. In this case we will set the background to be an orange translucent background. this is a visual cue that the message is unread. We will do this by using the background statement. This is similar to what was used before. The difference is the value within the URL parameter which tells the system to use the orange background image instead of the white one. The final statement in this code changes the text color to black. this is necessary since the box was defined to default to orange text which would be hard to read on an orange background.
.new .response_count {
background: transparent url(http://jeffdsummers.com/images/plurk/hd/orangetrans.png) repeat scroll top left;
color: #000000;
}
/* End Color of New Response Count */
/* Plurk Box for Responses */Within the detailed list of the all the responses we want to set the background to the translucent white image. This will make it similar to what we have for the message itself. The detailed list is the middle section with each individual message response. The background is identical to what we used for the message. We set the background color to transparent, use the translucent white image through the URL parameter, tell the system to repeat the background horizontally and vertically, set it to scroll with the screen and place it in the top left corner of the screen. We include the "!important" parameter to make sure that this definition is not overwritten by precedence by other statements set after this declaration.
.plurk_box .plurk_cnt {
background: transparent url(http://jeffdsummers.com/images/plurk/hd/whitetrans.png) repeat scroll top left !important;
}
/* List Box Border */The ".plurk_box .list" is the background behind the list of responses. It is the middle section listed upnder "Recent plurk responses". Within this code we are setting a 1 pixel border to the right side of the list and making it a light gray. This is necessary because this side of the box may include a scroll bar and the border on that side sets the box off away from the scroll bar a little better. The second statement is the same background statement that we used above setting the background to the white translucent background.
.plurk_box .list {
border-right: 1px solid #999999;
background: transparent url(http://jeffdsummers.com/images/plurk/hd/whitetrans.png) repeat scroll top left;
}
/* Mini-Form Box Border */Below the "Recent plurk responses" is a section titled "Plurk your response". This section of code will define the presentation of that box. The first statement sets the background to be the consistent translucent white image that we are using through these tutorials. We keep using this to provide graphical continuity to the theme giving it a simplistic and elegant look. The next two statements provide a 1 pixel solid border in light gray. First we apply that to the right side for consistency with the list box above. Second we set the same border to the bottom which gives the window a three-dimensional look.
.plurk_box .mini_form {
background: transparent url(http://jeffdsummers.com/images/plurk/hd/whitetrans.png) repeat scroll top left;
border-right: 1px solid #999999;
border-bottom: 0px solid #999999;
}
/* Mini-Form Character Color */Below the input field is a character counter that tells you how many characters remain in your 140 limit. It defaults to a light gray that is almost impossible to read on a light background. With this section of code we are setting that character countdown text to the same orange color that we have used throughout the theme.
.mini_form .char_updater {
color: #FF6600;
}
/* End Mini-Form Character Color */
/* Mute-Delete Character Color */Similarly the delete text in the message section that allows you to delete a message you created defaults to a very light color. With this statement we are telling the system to change the text color for this link to the same orange color we have used elsewhere. This will make it much easier to read and it will standout more against the white translucent background.
.manager .delete {
color: #FF6600;
}
/* End Mute-Delete Character Color */
/* Edit Message Character Color */Next to the delete text in the message section is the edit link that allows you to change the text of the message. It defaults to a light blue color which again is difficult to read. With this section of code we are changing the color to a medium gray that shows up better against the white translucent background without resorting to making it so pronounced that it takes away from the message text itself.
.manager .action {
color: #333333;
}
/* End Edit Message Character Color */
/* Link to Permalink Page */Below the "Plurk your response" section is a colored title bar. On the right side of that title bar is a link to the perma-link page for this Plurk message. It defaults to a muddy gray color and looks dull. With this code section we are changing the link text to be black which makes it stand out against the background.
.info_box a:link {
color: #000000;
}
/* End Link to Permalink Page */
/* Plurk External Links */The links to external sites defaults to a bright blue color. This really doesn't fit with our theme of orange and black. This section of code will change the text color of those external links to be a darker orange color. I choose the darker orange instead of the brighter to make it easier on the eye when reading the link text. It also helped to differentiate it from delete link text that we defined above.
.plurk a.ex_link {
color: #D25502;
}
/* End Plurk External Links */
That's about it. We now have a translucent box for plurk responses as well as translucent background for the responses we create. We've modified the text color of several elements to make them consistent with our color scheme and set ourself up for the final section where we round the boxes within the plurk list, create the colored title bars, and do a little more housekeeping on text colors and styles. Good luck and be sure to let everyone know you found this on Plurk Skins.
Leave a comment