Jeff Summers

  shares  Custom Bottom Timeline, Day Separator

As we always do, we'll start off by providing all of the code to allow you to copy and paste it into your profile to immediately begin using the new functionality.

/* Filter Tabs Backgrounds */
.bottom_line_bg {
    background: #D55602 url(http://jeffdsummers.com/images/plurk/hd/ontab.jpg) repeat-x scroll top left;
    color: #ffffff;
}

#filter_tab .off_tab {
    background: #D55602 url(http://jeffdsummers.com/images/plurk/hd/offtab.jpg) repeat-x scroll top left;
    color: #000000;
}
/* End Filter Tabs Backgrounds */


/* Day Separator */
.day_bg .div_inner {
    background: transparent url(http://jeffdsummers.com/images/plurk/hd/chain.png) no-repeat scroll center;
    border-left: 0px none;
    border-right: 0px none;
}
/* End Day Separator */

/* Bottom Line with times */
#bottom_line {
    background: transparent url(http://jeffdsummers.com/images/plurk/hd/timeline.jpg) repeat-x scroll top left;
    border-top: 1px solid #ff6600;
}
/* End Bottom Line with times */

/* Bottom Line Text */
.bottom_start {
        color: #000000;
}

.bottom_end {
        color: #000000;
}

.day_start .bottom_start {
    color: #ffffff !important;
}
/* End Bottom Line Text */

We will now follow up by discussing each line of code so that you will understand what each section of code does and why it is in the profile. As I always do, I strongly recommend documenting the code and making notes for yourself so that you remember why you placed the code within your profile. It may take a little extra time up front but it will pay dividends if you ever have to go back into the code and try figure out what it does or why you put it in your profile.

/* Filter Tabs Backgrounds */
.bottom_line_bg {
    background: #D55602 url(http://jeffdsummers.com/images/plurk/hd/ontab.jpg) repeat-x scroll top left;
    color: #ffffff;
}

#filter_tab .off_tab {
    background: #D55602 url(http://jeffdsummers.com/images/plurk/hd/offtab.jpg) repeat-x scroll top left;
    color: #000000;
}
/* End Filter Tabs Backgrounds */

This first section of code will continue where we left off yesterday. As you remember we rounded to lower two corners of the tabs but left them otherwise untouched.

This code is going to modify the background and the text color of the tabs along the bottom of the timeline. The first code section will modify the currently selected tab while the second code section will modify the tabs that are not currently selected.

The currently selected tab is represented by the element ".bottom_line_bg". We are adding a a new background to replace the off white that it defaults to; this is accomplished with the "background" command. This is similar to the other instances of background we have used. The command is made up of several parameters. The first parameter is background color. Here we are setting it to a darker orange color that matches the bottom of the image we will be using. I used this color so that if the tabs end up being taller than my background image it will fill with the color and make a smooth transition to the color hiding my image size mistake. The next parameter is the background image location. I have saved the file to my server and am now pointing to it. You will want to change the value within the URL statement otherwise you will get the bright orange fade button I am using in this example. The next parameter is "repeat-x". This tells the system to repeat the background image horizontally to fill the tab. I only wanted the image to repeat horizontally because I am using the background color above to deal with the vertical image differences. The next parameter tells the system to scroll the image when the screen scrolls. Finally we tell the system that we want to start the background image in the upper left corner. The color statement is for text color. In this case we want the active tab to use white text.

The off tabs are all controlled by the "#filter_tab .off_tab" element. Applying styling to this element will give all the off tabs the same look and feel. The commands are identical to those we used for the active tab. The only differences are that we are using a different image for the background that fades from dark to light to give it the impression of being farther behind. The other difference is the font color which I set to black to again visually suggest that it is in the background. I could have used a dark orange to suggest it further but I wanted good readability of the tabs and black was better based on my testing.

/* Day Separator */
.day_bg .div_inner {
    background: transparent url(http://jeffdsummers.com/images/plurk/hd/chain.png) no-repeat scroll center;
    border-left: 0px none;
    border-right: 0px none;
}
/* End Day Separator */

The day separator is the vertical bar that runs through the timeline that differentiates each day and gives you a visual cue that you are reading messages from a previous date. It defaults to a light blue color bar which doesn't really fit with our theme. I am therefore going to replace the background color with a custom graphic to make it fit better with what we are trying to design. We are again going to use the background command to manage this. The first parameter is background color which I am setting to transparent as I don't want any color to show through if the image is not large enough. I then use the URL parameter to tell the system where to find my custom background image. You will need to change this otherwise you will get the motorcycle chain graphic I am using in this example. I then tell the system not to repeat the image, scroll it with the screeen and center it within its container.

The default has a border on the left and right side of the day separator. Now that we are using a graphic with transparancy the borders look out of place. We can suppress them by setting the width of the borders to zero pixels and the style as none. Each side of the border is called out separately to eliminate them.

/* Bottom Line with times */
#bottom_line {
    background: transparent url(http://jeffdsummers.com/images/plurk/hd/timeline.jpg) repeat-x scroll top left;
    border-top: 1px solid #ff6600;
}
/* End Bottom Line with times */

Now that we have the tabs completed and a custom vertical day separator we move on to the timeline bottom itself. We'll change from the off-white horizontal color band to a custom graphic that better matches our theme. We will of course use the same background statement that we have been using throughout this tutorial. We start with making the background color transparent. We then define the location of the background image we will be using. Again you will need to change this statement otherwise you will get the orange bar I am using for this example. I created a gradiated orange bar to give the imression of roundness but you could use whatever image you want. With the "repeat-x" statement we tell the system to repeat the image horizontally to fill the screen width. We then tell the system to scroll the image with the screen and place it in the top left corner of the container. The final statement in this section creates a 1 pixel solid line border in bright orange. The default is a light blue which didn't really matter. You could set the width to zero pixels and make the style "none" if you didn't want the border at all.

/* Bottom Line Text */
.bottom_start {
    color: #000000;
}

.bottom_end {
    color: #000000;
}

.day_start .bottom_start {
    color: #ffffff !important;
}
/* End Bottom Line Text */

The final section of code redefines the color of the text that appears on the bottom timeline. Without this they will default to a light gray which was very difficult to read. Each of these sections are only dealing with the text color. The system will differentiate the starting time and ending time of a section of the timeline. I have broken them out separately so that I could come back and set a different color for the beginning time versus the ending time in a section. You could combine these if you don't plan on ever having this text be different colors. In this example I have set the start and end times to black. The final element ".day_start .bottom_start" is for the date text that appears under the day separator. I set that text to white to differentiate it from the time text.

That's really all there is to it. With this code you will have a customized bottom line in your timeline, colored and themed page tabs, and a custom day separator. Hopefully you found this useful. Good luck and be sure to let everyone know you found this on Plurk Skins.