Yesterday we discussed creating rounded corner boxes within the dashboard for each of the sections. I made the design decision to separate the boxes in the first column into three separate sections for Profile, About Me, and Relationship. I have since gotten several questions as to how can you keep those together. So I thought perhaps we would revisit the code and make some changes there so you can see the difference. We'll also discuss some other options for you to consider in your design.
/* Dashboard Box Background */I think it bears repeating how important it is to document your code so please make sure you add the appropriate comments so that you can remember what each section of code does.
.segment-content {
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;
margin: 8px 6px 8px 6px;
}
/* End Dashboard Box Background */
/* Name, Avatar */
#dash-profile {
color: #FF6600;
margin: 0px 5px;
padding: 5px 3px 5px 5px;
}
/* End Name, Avatar */
/* About Me */
p#about_me {
color: #FF6600;
text-align: center;
}
/* End About Me */
/* Relationship */
#relationship_container {
color: #FF6600;
text-align: center;
padding: 5px 5px 5px 5px;
}
/* End Relationship */
/* Statistics */
#dash-stats {
color: #FF6600;
text-align: center;
}
#dash-stats table td {
color: #FFFFFF;
text-align: left;
}
/* End Statistics */
/* Friends */
#dash-friends {
color: #FF6600;
text-align: center;
}
/* End Friends */
/* Fans */
#dash-fans {
color: #FF6600;
text-align: center;
padding: 5px 5px 11px 3px;
}
/* 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 */
/* Dashboard Box Background */
.segment-content {
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;
margin: 8px 6px 8px 6px;
}
/* End Dashboard Box Background */
This first section of code is actually what controls the background for each of the box sections. The first statement is the same as we used during <a href="http://plurkskins.com/2008/08/rounded-boxes-within-the-dashb.html">yesterday's tutorial</a>. It is the background statement that tells the system to use a transparent color if the image is not large enough;
gives the URL for where your background image is located; repeats the image horizontally and vertically; scrolls the image with the screen; and positions the image in the top left corner. The next four statements are the same CSS3 commands that will round the corners on the box. The final statement is the "margin" statement that tells the system how much space to put between the boxes. In this case we said we wanted 8 pixels along the top and bottom edges and 6 pixels on the left and right edges. Remember that for the middle 3 boxes that will mean there are 12 pixels between them as you will be adding the right margin of one box to the left margin of the next box. It should be noted that you could use color instead of an image for the background statement just replace "transparent" with the color code and replace the URL statement with "none". /* Name, Avatar */
#dash-profile {
color: #FF6600;
margin: 0px 5px;
padding: 5px 3px 5px 5px;
}
/* End Name, Avatar */
The Profile section is reduced because we have moved all the background information to the section above. Within this is the text color, a margin and padding for the profile. This simplifies that piece substantially and you will see similar sections for the other boxes as well.
/* About Me */
p#about_me {
color: #FF6600;
text-align: center;
}
/* End About Me */
The About Me section now contains only the text color and text alignment section. It will inherit all the other theme data from the container itself.
/* Relationship */
#relationship_container {
color: #FF6600;
text-align: center;
padding: 5px 5px 5px 5px;
}
/* End Relationship */
The Relationship box is also minimized containing the text color and text alignment statements. I also added a padding statement to make it visually similar to the boxes above by placing 5 pixels of white space around each side of the relationship.
/* Statistics */
#dash-stats {
color: #FF6600;
text-align: center;
}
#dash-stats table td {
color: #FFFFFF;
text-align: left;
}
/* End Statistics */
The Statistics section looks similar to the About Me where we are defining only the color and the text alignment. These statements could be added to the .segment-content section but I broke them out separate so I could control each box differently if I choose to. The second code block modifies the text to the right of the labels in the statistics. I wanted them a different color and left aligned.
/* Friends */
#dash-friends {
color: #FF6600;
text-align: center;
}
/* End Friends */
The Friends section looks like the others and contains the text color and text alignment statements. This again was broken out so that you could change the color of the text in the friends box independently from the other boxes.
/* Fans */
#dash-fans {
color: #FF6600;
text-align: center;
padding: 5px 5px 11px 3px;
}
/* End Fans */
The Fans box is slightly different in that I wanted some additional padding around the box to the far right. The text color and text alignment statements are the same but I've now got 5 pixels of space on the top and right, 11 pixels of space at the bottom, and 3 pixels of space to the left inside the box.
/* 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. This section of code is identical to what was used in the previous tutorial
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 while keeping all the boxes in the first column together. 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