You have probably noticed that Plurk will add a vertical line on the screen to differentiate one day from the next. This can be beneficial to prevent you from responding to a Plurk message from several days ago when you thought it was more current. But if you are going to all of the trouble of creating a custom CSS profile, then it just doesn't seem right that your vertical day separator is the standard colored bar. Instead wouldn't it be cool if you could have an image that matched the theme you are creating? The code is extremely simple so let's get started.
As always we'll start by providing all of the code necessary to implement this change.
.day_bg .div_inner {
background: transparent url(http://jeffdsummers.com/images/plurk/bat.png) no-repeat scroll center;
border-left: 0px none;
border-right: 0px none;
}
Typically we break down each section of the code but since this is such a small set of code we'll provide the details here for the entire code snippet. The first statement describes the element we will be theming. In this case it is the .day_bg and .div_inner containers. Only these elements will be affected by this code.
The next statement is the actual image we'll be using as the day separator. The old code contained a background color. This new code has a little bit more going on. We are doing this by modifying the background for this element. Within that statement are several parameters. The first is transparent which tells the system that in the absence of a graphic we don't want a background color so it becomes transparent from a color perspective. The second parameter is URL. This is the location of your new graphic. You will need to modify this parameter to point to where you are hosting your new replacement graphic. The no-repeat parameter tells the system not to repeat the graphic. Other options are repeat-x to repeat the graphic horizontally, repeat-y to repeat the graphic vertically or repeat to duplicate the image both horizontally and vertically. You may need to change this parameter if your image is not tall or wide enough to fill the timeline height. By default the day separator is 24 pixels wide by 365 pixels high. Something you should keep in mind when selecting an image to use. The scroll parameter tells the system to scroll the graphic with the screen. The center parameter tells the system that you want the image centered horizontally and vertically within the element.
The default day separator contains a border on the left and right of 1 pixel. The next two statements will remove that border from view. The border-left will manage the left side border while border-right will deal with the other edge. The 0px tells the system how wide the border should be while "none" is the line style which in this case we don't want one.
That's basically all there is to it. Now instead of a vertical colored bar you will have a unique vertical separator displayed along your time line. Good luck and please be sure to tell everyone you found this on Plurk Skins.
Leave a comment