Today we'll continue with the series that began August 19 on creating a customized Plurk profile. In the first entry we learned Body and Time Line Theming. In the second entry we expanded it to add Dashboard Theming. Looking over the dashboard the text gets lost on top of the image and it is hard to differentiate the various sections of the data. Today we'll add a semi-transparent background to each dashboard section and round the corners of the sections. We'll also begin formatting the text and titles to give our theme a consistent feel.
As is standard practice, we'll start with the entire code section so that you can cut and paste it in its entirity if you choose to do so. There is a lot of code but don't be intimidated, much of it is identical so once you learn one section you'll be able to do them all.
/* Name, Avatar */
#dash-profile {
color: #FF6600;
background: transparent url(http://jeffdsummers.com/images/plurk/hd/blacktrans.png) repeat scroll top left;
-moz-border-radius: 8px 8px 8px 8px;
-khtml-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
padding-top: 5px;
padding-left: 5px;
padding-right: 3px;
padding-bottom: 5px;
margin: 0 5px;
}
/* End Name, Avatar */
/* About Me */
p#about_me {
color: #FF6600;
background: transparent url(http://jeffdsummers.com/images/plurk/hd/blacktrans.png) repeat scroll top left;
-moz-border-radius:8px 8px 8px 8px;
-khtml-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
padding-top: 15px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
margin:0 5px;
text-align: center;
}
/* End About Me */
/* Relationship */
#relationship_container {
color: #FF6600;
background: transparent url(http://jeffdsummers.com/images/plurk/hd/blacktrans.png) repeat scroll top left;
-moz-border-radius: 8px 8px 8px 8px;
-khtml-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
text-align: center;
}
/* End Relationship */
/* Statistics */
#dash-stats {
color: #FF6600;
background: transparent url(http://jeffdsummers.com/images/plurk/hd/blacktrans.png) repeat scroll top left;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding-top: 5px;
padding-bottom: 11px;
padding-left: 5px;
padding-right: 5px;
text-align: center;
}
#dash-stats table td {
color: #FFFFFF;
text-align: left;
}
/* End Statistics */
/* Friends */
#dash-friends {
color: #FF6600;
background: transparent url(http://jeffdsummers.com/images/plurk/hd/blacktrans.png) repeat scroll top left;
-moz-border-radius:8px 8px 8px 8px;
-khtml-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
padding-top: 5px;
padding-bottom: 11px;
padding-left: 5px;
padding-right: 5px;
text-align: center;
}
/* End Friends */
/* Fans */
#dash-fans {
color: #FF6600;
background: transparent url(http://jeffdsummers.com/images/plurk/hd/blacktrans.png) repeat scroll top left;
-moz-border-radius:8px 8px 8px 8px;
-khtml-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
padding-top: 5px;
padding-bottom: 11px;
padding-left: 5px;
padding-right: 5px;
text-align: center;
}
/* End Fans */
/* Box Headings */
p#relationship_container b, #plurk-dashboard h2 {
color: #FFFFFF;
text-align: center;
font-weight: bold;
padding: 0;
text-transform: uppercase;
font-size: 14px;
border-bottom: 1px solid #FF6600;
font-family: Arial, Verdana, san-serif;
background: transparent none repeat scroll 0 0;
}
/* End Box Headings */
Now we'll divide up the code into smaller sections and explain it in more detail. As always don't forget to include comments so that you can remember what each section of your stylesheet does what. We'll begin with the far left area of the dashboard and work our way across to the right.
/* Name, Avatar */
#dash-profile {
color: #FF6600;
background: transparent url(http://jeffdsummers.com/images/plurk/hd/blacktrans.png) repeat scroll top left;
-moz-border-radius: 8px 8px 8px 8px;
-khtml-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
padding-top: 5px;
padding-left: 5px;
padding-right: 3px;
padding-bottom: 5px;
margin: 0 5px;
}
/* End Name, Avatar */
This first section deals with the container called "#dash-profile". It is the area that includes your avatar graphic, your user name, and your location. After defining the HTML element we are styling, the first line defines the text color that will be used within this box.
The next line defines the background graphic we will use with this box. The first attribute says that we do not want a background color and to leave it transparent if the graphic does not cover the whole box. The second attribute is actually the graphic we want to use. I created a semi-transparent black PNG graphic to allow the underlying background under the box. You will want to change the URL to define the location of your own graphic. The next attribute tells the system to repeat the image horizontally and vertically. Scroll tells the application to allow the image to roll as the screen is scrolled. The final attribute gives the position where the image will start. In our case we want the image to begin in the top left corner of the box. The next four lines -moz-border-radius: 8px 8px 8px 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; and border-radius: 8px; will take care of the rounded corners. These corners will appear rounded in any CSS3 compliant browser including FireFox, Safari, and Opera. Each of these lines do basically the same thing but using different proposed standards for rounding. the "8px" value tells the system how rounded you want the corners. The higher the number the more rounded the corners become. A value of zero will make the corners square. The next four statements provide spacing from the sides of the background to when the content inside the box is displayed. Without the padding statements your content will go right to the edge of the box which may not be the effect you want. Always put in space to give your layout a clean look. The final statement sets the margin for the box on the screen. You'll notice that all of the various sections that follow are nearly identical. This gives your layout a consistent look. The descriptions therefore will look very much the same going forward.
/* About Me */
p#about_me {
color: #FF6600;
background: transparent url(http://jeffdsummers.com/images/plurk/hd/blacktrans.png) repeat scroll top left;
-moz-border-radius:8px 8px 8px 8px;
-khtml-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
padding-top: 15px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
margin:0 5px;
text-align: center;
}
/* End About Me */
The next section of code will theme the informational box telling about you. It is located directly below the Name and Avatar section that we just finished. It is defined as p#about_me. The code is identical to the code above with the following differences. The padding values provide additional space to move the text to the appropriate spot below the box above so that they do not overlap. This section also includes "text-align: center;" which tells the system to center all of the about text in the box. If you would prefer the text be left-justified just remove this line or replace the word "center" with "left".
/* Relationship */
#relationship_container {
color: #FF6600;
background: transparent url(http://jeffdsummers.com/images/plurk/hd/blacktrans.png) repeat scroll top left;
-moz-border-radius: 8px 8px 8px 8px;
-khtml-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
text-align: center;
}
/* End Relationship */
The next box is for Relationship. If in your profile you do not select a relationship type, this box will not appear on your dashboard. You should begin to see a trend here, this container looks nearly identical to the others. We set the color, define the background, assign the corner rounding radius, set the padding, and finally tell it to center the text.
/* Statistics */
#dash-stats {
color: #FF6600;
background: transparent url(http://jeffdsummers.com/images/plurk/hd/blacktrans.png) repeat scroll top left;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding-top: 5px;
padding-bottom: 11px;
padding-left: 5px;
padding-right: 5px;
text-align: center;
}
#dash-stats table td {
color: #FFFFFF;
text-align: left;
}
/* End Statistics */
This next section themes the statistics section. There are two sections here and I'll explain why. The first section again looks very similar to those we used for the first three boxes. The difference is basically in the padding but it uses similar constructs to what you have previously used. It too uses a "text-align: center;" statement to center text. You'll notice another section right below this where we are theming "#dash-stats table td". This is the text that appears next to Plurks, Plurk Responses, Friends Invited, Member Since, Last Login, and Profile Views. In this section we set the color of the text to be white and align it to the left. If we did not do that then the text would be centered rather than lining up next to the orange field descriptions.
/* Friends */
#dash-friends {
color: #FF6600;
background: transparent url(http://jeffdsummers.com/images/plurk/hd/blacktrans.png) repeat scroll top left;
-moz-border-radius:8px 8px 8px 8px;
-khtml-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
padding-top: 5px;
padding-bottom: 11px;
padding-left: 5px;
padding-right: 5px;
text-align: center;
}
/* End Friends */
This section will theme the Friends section of the dashboard. It is nearly identical to the previous boxes. Again the differences mostly lie in the padding around the box to give it the right look and feel. You should probably be getting very good at copying and pasting or typing these statements so that they'll stick with you long after this tutorial has ended.
/* Fans */
#dash-fans {
color: #FF6600;
background: transparent url(http://jeffdsummers.com/images/plurk/hd/blacktrans.png) repeat scroll top left;
-moz-border-radius:8px 8px 8px 8px;
-khtml-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
padding-top: 5px;
padding-bottom: 11px;
padding-left: 5px;
padding-right: 5px;
text-align: center;
}
/* End Fans */
The final box we are theming is for fans. It is absolutely identical to the friends box. You could combine these two pieces of code if you wish to reduce the size of your style sheet. I chose to keep it separate so that I could play with the padding independantly depending on how I wanted the box. Having them separate also gives me the flexibility to change the background images per box if I want to do that later on.
/* Box Headings */
p#relationship_container b, #plurk-dashboard h2 {
color: #FFFFFF;
text-align: center;
font-weight: bold;
padding: 0;
text-transform: uppercase;
font-size: 14px;
border-bottom: 1px solid #FF6600;
font-family: Arial, Verdana, san-serif;
background: transparent none repeat scroll 0 0;
}
/* End Box Headings *
This final section of code does not pertain to the boxes themselves but rather to the title text in the boxes. The Stats, Friends, and Fans boxes use an H2 heading for the title. The Relationship title is not a title but I wanted it to be consistent. I therefore told the system that I wanted to style both the "#plurk-dashboard h2" and the "p#relationship_container b" the same. I did this by putting both elements before the curly bracket "{" and separated by a comma. The first statement tells the system that we want the text in the titles to be white. The next statements says to align the text in the center of the section and the font to be bold with no padding but the letters to all be upper case. We further define that the font size should be 14 in the Arial font face if available. The background statement states that we do not want any background at all on the titles. The "border-bottom" statement says to put a 1 pixel boarder at the bottom of the title and to color it orange the same as the text. This will give you consistent headings through the dashboard.
That's pretty much it. Now we've added to the framework of a custom CSS profile with a custom image as the background on each box within the dashboard. 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.
Leave a comment