Sunday, 23. July 2006, 22:28:32
Post Title, Sticky Post, Date
Post Title
If we take a look at the main.css stylesheet of almost any of the default Opera themes, we see .post .title.
.post .title {
margin:0 0 10px 0;
font-size:20px;
line-height:normal;
}
Now, as you all can see, this is a text element, so any property we used in Step 1 for similar elements can also be used here. For example, you can add color, font-family, font-style and so on. So, let's take a look at it again, line by line:
- margin:0 0 10px 0;
- The CSS margin properties define the space around elements. In this case margin is 0 0 10px 0. NOTE: margin and padding properties are listed in this order: top, right, bottom, left. In the example above, the top, right, and left margins are 0px, and the bottom margin is 10px. If all margin properties are the same, you can simply state: margin: 10px; (or whatever the property is).
- font-size:20px;
-
- Font-size sets the size of a font, expressed in pixels (px), ems or percenrages. In this case, the font-size is set as 20 pixels.
- line-height:normal;
- The line-height property sets the distance between lines. Value normal sets a reasonable distance between lines.
So what can I do?
We will create four different examples with code showing where changes should be made, and provide screen shots so you can see how each of them looks and how these edits can dramatically affect your text.
Example 1: Changing Font and Color
.post .title {
margin:0 0 10px 0;
font-size:20px;
font-family:'Impact',arial,helvetica,sans-serif;
color:#666699;
line-height:normal;
}
NOTE: When using hexidecimal codes to indicate font color (#rrggbb, where rr=red, gg=green, bb=blue), the color can often be expressed in shorthand. #666699 becomes #669; #ffffff becomes #fff. You cannot convert colors such as #ee8080 or #fce800. Each triad (red, green, blue) must be the same.
Example 2: Changing Font Family, Font Style and Color
.post .title {
margin:0 0 10px 0;
font-size:20px;
font-family:'Verdana',arial,helvetica,sans-serif;
color:#666666;
font-style:italic;
line-height:normal;
}
Note: Again, you can abbreviate #666666 to #666. There are only three font-style attributes: normal, italic and oblique. Some fonts don't render oblique any differently than italic, so for all practical purposes, font-style is just a fancy way to render italic text OR turn off any font-style present by choosing "normal."
Example 3: Changing Font Weight, Font Family and Color
.post .title {
margin:0 0 10px 0;
font-size:20px;
font-family:'Trebuchet MS',arial,helvetica,sans-serif;
font-weight:bold;
color:#CC3300;
line-height:normal;
}
Example 4: Changing Font Family, Font Style and Color
.post .title {
margin:0 0 10px 0;
font-size:20px;
font-family:'Georgia',times,'Book Antiqua',serif;
font-style:italic;
color:#336600;
line-height:normal;
}
This time, we switched to serif (scripty) fonts, which always look nice italicized. Again, the color can be abbreviated to #360.
NOTE: Also, make sure to check .post .title a:hover in main.css to change the color of the hover effect if you like. You can also experiment changing the background as well for an interesting effect.
Sticky Post
Here is the relevant portion of the stylesheet (main.css) that affects the styling of the sticky post indicator. We'll explain it line by line now.
.post .sticky {
float:right;
margin:0;
font-size:10px;
color:#3b649c;
background:#e7ecf3 url(/community/graphics/users/1/sticky.gif) top right no-repeat;
padding:0 28px 0 4px;
}
- float:right;
- The image or text moves to the right in the parent element.
- margin:0;
- The CSS margin properties define the space around elements. In this case, the margin is 0.
- font-size:10px;
- Font-size sets the size of a font and is expressed as pixels (px), ems or percentages. In this case, the font size is set to 10px.
- color:#3b649c;
- The color property sets the foreground color (usually the text color). Notice that this color cannot be abbreviated.
- background:#e7ecf3 url(/community/graphics/users/1/sticky.gif) top right no-repeat;
- The CSS background properties define the background effects of an element. This is actually shorthand background properties. Each of the properties can be expressed individually as well. For example, the long form of the above background properties would be:
.post .sticky {
background-color:#e7ecf3;
background-image: url(/community/graphics/users/1/sticky.gif);
background-position: top right;
background-repeat: no-repeat;
}
- padding:0 28px 0 4px;
- The padding properties define the space between the element border and the element content. Since we learned that both margin and padding order is top, right, bottom, left, we now know that the padding is 28px on the right and 4 px on the left. There is no padding on the top or bottom.
So what can I do?
We'll give you several examples from now on so that you can see exactly how each change in the stylesheet affects the overall design.
Example 1: Changing Font Size, Font Weight, Font Family and Background Color
.post .sticky {
float:right;
margin:0;
font-size:10px;
font-family:'Trebuchet MS',arial,helvetica,sans-serif;
font-weight:bold;
background:#DBDCD1 url(/community/graphics/users/1/sticky.gif) top right no-repeat;
padding:0 28px 0 4px;
}
Example 2: Changing Font Size, Font Family, Font Style and Background Color
.post .sticky {
float:right;
margin:0;
font-size:10px;
font-family:'Georgia',arial,helvetica,sans-serif;
font-style:italic;
background:#FFC9AE url(/community/graphics/users/1/sticky.gif) top right no-repeat;
padding:0 28px 0 4px;
}
Example 3: Changing Font Size, Font Family, Color and Background Color
.post .sticky {
float:right;
margin:0;
font-size:10px;
font-family:'Verdana',arial,helvetica,sans-serif;
color:#666;
background:#FFE1FF url(/community/graphics/users/1/sticky.gif) top right no-repeat;
padding:0 28px 0 4px;
}
Example 4: Changing Font Size, Font Family, Color and Background Color
.post .sticky {
float:right;
margin:0;
font-size:10px;
font-family:'Impact',arial,helvetica,sans-serif;
color:#669;
background:#B5D6DD url(/community/graphics/users/1/sticky.gif) top right no-repeat;
padding:0 28px 0 4px;
}
NOTE: In this case we didn't change the original sticky post image, but you can do it easily if you read Step One. 
Post Date and Tags
If we take a look at main.css in most any of the default themes, we see that there is a part about the post date and tag properties:
.postdate, .post .tags {
margin:0 0 2px 0;
font-size:10px;
line-height:normal;
text-transform:uppercase;
}
And, here it is, deconstructed, line by line:
- margin:0 0 2px 0;
- The CSS margin properties define the space around elements. In this case margin is 0 0 2px 0. That means that bottom margin will be 2 pixels (first position is top, second right, third bottom and fourth left).
- font-size:10px;
- Font-size sets the size of a font and is expressed in pixels (px), ems or percentages. In this case font size is set to 10px.
- line-height:normal;
- The line-height property sets the distance between lines. Value "normal" sets a reasonable distance between lines. Line-height is useful to be changed if you have an enlarged font size, and can be loosely likened to "kerning" in print media.
- text-transform:uppercase;
- The text-transform property controls the letters in an element. The choices are "uppercase," "lowercase," "capitalize," and "none." This is a new text property for us. Uppercase means that all text, no matter how you type it, will be displayed in all capital letters, LIKE THIS. Conversely, choosing "lowercase" will make the text display in all lowercase letters, even if you typed them in uppercase. The poet e.e. cummings would have loved this feature of CSS!
So what can I do?
We'll give you several examples from now on so that you can see exactly how each change in the stylesheet affects the overall design.
Example 1: Changing the Font Family
.postdate, .post .tags {
margin:0 0 2px 0;
font-size:10px;
font-family:'Verdana',arial,helvetica,sans-serif;
line-height:normal;
text-transform:uppercase;
}
Example 2: Changing the Font Size, Font Family and turning off Text Transform effects
.postdate, .post .tags {
margin:0 0 2px 0;
font-size:12px;
font-family:'Trebuchet MS',arial,helvetica,sans-serif;
line-height:normal;
}
Notice that text-transform:uppercase is gone. Because it was present in the main stylesheet, it would be prudent to actually turn it off here. How do you do that? Like this:
text-transform:none;
Example 3: Changing Font Size and Font Family
.postdate, .post .tags {
margin:0 0 2px 0;
font-size:20px;
font-family:'Georgia',arial,helvetica,sans-serif;
line-height:normal;
text-transform:uppercase;
}
Note in the example above that the font size has been increased significantly, from 10px to 20px. It might be a good idea, therefore, to also adjust the line-height from "normal" to 140%, which approximates 1.5 linespacing. This gives the larger font some room to "breathe" and makes the text more legible and pleasing to the eye.
Example 4: Changing Font Size and Font Family
.postdate, .post .tags {
margin:0 0 2px 0;
font-size:10px;
font-family:'Verdana',arial,helvetica,sans-serif;
line-height:normal;
}
NOTE: We will not explain in this series how to modify .poster css code, since it is related only to group blogs where different people can post, but you can see in the main.css stylesheet of almost any of the default themes that there is nothing spectacular about changing it and nothing we didn't already cover in these two steps. . Also, you might want to take a look at .whisper and blockquote.bbquote, .post blockquote, since many people seem to like to modify those aspects of their blog's design as well.
WIDGETIZE