Jeff Summers

  shares  Dashboard Theming

As is always the case we'll start with the entire code section so that you can cut and paste it in its entirety if you choose to do so.

/* Plurk Dashboard */
#plurk-dashboard {
    color: #ffffff;
    background: #000000 url(http://jeffdsummers.com/images/plurk/hd/NightTrain.jpg) no-repeat scroll left center;
    border: 5px #000000;
    -moz-border-radius: 18px;
    -khtml-border-radius: 18px;
    -webkit-border-radius: 18px;
    border-radius: 18px;
}

#plurk-dashboard a:link, #plurk-dashboard a {
    color: #ffffff;
    text-decoration: none;
}

#plurk-dashboard a:hover {
    text-decoration: underline;
}
/* End Plurk Dashboard */

Now let's go through the code in more detail to try and understand what exactly this is doing.  As I stated in the last entry, it is important to comment these as you go to help you to remember what each section of the code is doing otherwise you might forget why you added a section to your CSS file.

#plurk-dashboard {
    color: #ffffff;
    background: #000000 url(http://jeffdsummers.com/images/plurk/hd/NightTrain.jpg) no-repeat scroll left center;
    border: 5px #000000;
    -moz-border-radius: 18px;
    -khtml-border-radius: 18px;
    -webkit-border-radius: 18px;
    border-radius: 18px;
}

This first section begins by telling the system what HTML element you will be styling.  In this case we will be dealing withe #plurk-dashboard container.  Following the declaration statement is "color: #ffffff".  This sets the text within the dashboard to white.  Colors are set in value pairs in hexadecimal format.  The "ffffff" represents white. 

The next statement is the background.  This is the same command we used yesterday when modifying the background of the timeline and of the page body.  The first parameter says to use the color black "#000000" if the graphic does not fill the entire dashboard area. 

The second parameter "url(http://jeffdsummers.com/images/plurk/hd/NightTrain.jpg)" is the location of the image file you want to use for the background of your dashboard.  You will need to change this value otherwise you'll find your dashboard displaying a picture of my Harley-Davidson Night Train.  The next parameter "no-repeat" tells the system to show just one copy of the graphic and not to repeat it on the page.  The "scroll" parameter tells the system to scroll the graphic with the page.  The image is positioned with the final parameter "left center" which tells the system to center the graphic vertically and to the left side of the dashboard.

The next statement "border: 5px #000000;" puts a 5 pixel black border around the dashboard.  This is only visible to browsers that do not support the rounded corners.  You could choose to leave this out if you don't want the border.

The next four statements control the rounded corners.  There are four statements in order to support the various versions of element rounding. It bears repeating that these rounding routines are proposed standards for CSS3 and so will only work with browsers that support this version of style sheets.  The important piece for you to know is the radius values.  This is the size of the rounding. In our case I used 18 pixels as the radius for a gradual curve.  Feel free to play around with the values to get the level of rounding that you like and fits with your theme.

#plurk-dashboard a:link, #plurk-dashboard a {
    color: #ffffff;
    text-decoration: none;
}

This next section of code deals with the links that occur within the dashboard.  The declaration contains 2 statements.  The first tells the system to make the text color of the links be white.  I did this because I wanted them to blend in with the other text. If you want the links to stand out change this to a contrasting color from the text.  The second statement removes the underline from the link.  This again makes them blend into the text but we'll use the decoration shortly.

#plurk-dashboard a:hover {
    text-decoration: underline;
}

The final code deals with the links within the dashboard when you hover your mouse over the link.  Since we've themed the text of the links to be identical to regular text and removed the underline we need to give the user some visual queue when they are looking for a link.  With the "text-decoration: underline;" we tell the system to underline the link when the user points to it.

That's pretty much it.  Now we've added to the framework of a custom CSS profile with a custom color or image as the dashboard background.  We'll continue to build on this example in subsequent posts until we have a complete theme.  Good luck and be sure to let everyone know you found this on Plurk Skins.