Redesigning My.Opera space, blog and photo gallery in X easy steps [Part 2]
By Ivan MinicSerbianFighter. Wednesday, November 16, 2005 5:17:42 AM
Ok. Now, as you all can see, this is text element, so any proprety we used in last lesson for similar elements, can also be used here. For example, you can add color, font-family, font-style and so on. Now lets see this 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. That means that bottom margin will be 10 pixels (first position is top, second right, third bottom and fourth left). You can see examples of margin usage here and get detailed info on CSS margin here font-size:20px - Font-size sets the size of a font. In this case font size is set in pixels, and to be exact 20pixels. More about fonts and font size here. line-height:normal - The line-height property sets the distance between lines. Value normal sets a reasonable distance between lines. More about line-height here. So what can I do? I will from now on make 4 examples for you and at the end you will be able to see how each of them looks: Example 1: :.post .title { margin:0 0 10px 0; font-size:20px; line-height:normal; }
Example 2:.post .title { margin:0 0 10px 0; font-size:20px; font-family:'Impact',arial,helvetica,sans-serif; color:#666699; line-height:normal; }
Example 3:.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; }
Example 4:.post .title { margin:0 0 10px 0; font-size:20px; font-family:'Trebuchet MS',arial,helvetica,sans-serif; font-style: bold; color:#CC3300; line-height:normal; }
p.s. Also, make sure to check on .post .title a:hover in main.css of default theme to change the color of hover effect. Sticky post mark If we take a look into main.css of default theme we will spot that there is a part about sticky post mark. I'm copying it and explaining it:.post .title { margin:0 0 10px 0; font-size:20px; font-family:'Georgia',arial,helvetica,sans-serif; font-style: italic; color:#336600; line-height:normal; }
Now lets see this line by line: float:right; - The image or text moves to the right in the parent element. You can read more about CSS float property here. margin:0 - The CSS margin properties define the space around elements. In this case margin is 0. You can see examples of margin usage here and get detailed info on CSS margin here font-size:10px - Font-size sets the size of a font. In this case font size is set in pixels, and to be exact 10 pixels. More about fonts and font size here. color:#3b649c; - The color property sets the color of a text.. In this case color used is this[/url]. More about color proprety you can read here background:#e7ecf3 url(/community/graphics/users/1/sticky.gif) top right no-repeat; - The CSS background properties define the background effects of an element. Elements are already explained above. More on this topic here.. You can also see, couple of examples in part 1. padding:0 28px 0 4px; - The CSS padding properties define the space between the element border and the element content.. In this case space is 28px on the right and 4 px on the left (order is top, right, bottom, left). More about CSS padding here So what can I do? I will from now on make 4 examples for you and at the end you will be able to see how each of them looks: Example 1: :.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; }
Example 2:.post .sticky { float:right; margin:0; font-size:10px; font-family:'Trebuchet MS',arial,helvetica,sans-serif; font-style: bold; background:#DBDCD1 url(/community/graphics/users/1/sticky.gif) top right no-repeat; padding:0 28px 0 4px; }
Example 3:.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 4:.post .sticky { float:right; margin:0; font-size:10px; font-family:'Verdana',arial,helvetica,sans-serif; color:#666666; background:#FFE1FF url(/community/graphics/users/1/sticky.gif) top right no-repeat; padding:0 28px 0 4px; }
P.s. In this case we didn't change original sticky post image, but you can do it easily if you read lesson 1.post .sticky { float:right; margin:0; font-size:10px; font-family:'Impact',arial,helvetica,sans-serif; color:#666699; background:#B5D6DD url(/community/graphics/users/1/sticky.gif) top right no-repeat; padding:0 28px 0 4px; }
Post date and tags
If we take a look into main.css of default theme we will spot that there is a part about post date and tags propreties. I'm copying it and explaining it:
Now lets see this 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). You can see examples of margin usage here and get detailed info on CSS margin here font-size:10px - Font-size sets the size of a font. In this case font size is set in pixels, and to be exact 10pixels. More about fonts and font size here. line-height:normal - The line-height property sets the distance between lines. Value normal sets a reasonable distance between lines. More about line-height here. text-transform:uppercase; - The text-transform property controls the letters in an element.. This is new text property for us. Uppercase means that all text no matter how you type it will be shown in ALLCAPS. More about text-transform usage here. So what can I do? I will from now on make 4 examples for you and at the end you will be able to see how each of them looks: Example 1: :.postdate, .post .tags { margin:0 0 2px 0; font-size:10px; line-height:normal; text-transform:uppercase; }
Example 2:.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 3:.postdate, .post .tags { margin:0 0 2px 0; font-size:12px; font-family:'Trebuchet MS',arial,helvetica,sans-serif; line-height:normal; }
Example 4:.postdate, .post .tags { margin:0 0 2px 0; font-size:20px; font-family:'Georgia',arial,helvetica,sans-serif; line-height:normal; text-transform:uppercase; }
+ One small tip. I will not explain in this post about .poster css code, since it is related only to group blogs where different people can post, but you can see in main.css of default theme that there is nothing spectacular about changing it and nothing we didn't already cover in this 2 lessons.postdate, .post .tags { margin:0 0 2px 0; font-size:10px; font-family:'Verdana',arial,helvetica,sans-serif; line-height:normal; }
. Also, you might want to take a look at .whisper and blockquote.bbquote, .post blockquote since many people wanted to modify something about those elements.
How examples look?
Example 1:
/SerbianFighter/homes/blog/example1look2.png
Example 2:
/SerbianFighter/homes/blog/example2look2.png
Example 3:
/SerbianFighter/homes/blog/example3look2.png
Example 4:
/SerbianFighter/homes/blog/example4look2.png
| example1-part2.txt | example2-part2.txt | example3-part2.txt | example4-part2.txt |














neonlinux # Friday, November 18, 2005 4:08:04 AM
How do I do this on my Opera Blog?
Do I need to type and input a lot of HTML code?
Ivan MinicSerbianFighter # Friday, November 18, 2005 4:27:04 AM
lulando # Thursday, December 8, 2005 12:30:22 AM
michaelfreeplay # Tuesday, January 31, 2006 8:31:30 PM
Ivan MinicSerbianFighter # Tuesday, January 31, 2006 8:48:23 PM