My 0.02$ on Opera Community development

So... This would be lesson number 2 ... If someone missed lesson number 1 he should be able to find it here.
I'm really out of time today, so I will try to go over this small (but important) section.

[Repeating the usual stuff]

Important: All tweaks and changes here are made on default template. Should work ok with any other, but will work 100% ok with default theme.
Definitions: All definitions used here are from W3schools CSS guide
Examples: All I show here is there just to represent variety of possible options. It is not intended to look good, just too look as different from the other ones as possible.

Where do I start?

1. Go to Preferences (http://my.opera.com/Username/account/)
2. Then go to Web page layout (http://my.opera.com/Username/account/layout.dml)
3. Then go to custom style sheet (http://my.opera.com/Username/account/usercss.dml)

Ok, I'm there... Now?

In Enter CSS: field enter some of the values I will explain below, and make sure you select Use my custom style sheet together with the current theme before clicking Save

[Repeating ends here]

Blog on My.Opera

Post titles, Tags, Comments...


Post title
If we take a look into main.css of default theme we will spot that there is a part about post title. I'm copying it and explaining it:

.post .title {
margin:0 0 10px 0;
font-size:20px;
line-height:normal;
}

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;
font-family:'Impact',arial,helvetica,sans-serif;
color:#666699;
line-height:normal;
}

Example 2:

.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 3:

.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;
}

Example 4:

.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;
}

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 .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;
}

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. 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;
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 2:

.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:

.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;
}

Example 4:

.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;
}

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 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:

.postdate, .post .tags {
margin:0 0 2px 0;
font-size:10px;
line-height:normal;
text-transform:uppercase;
}

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;
font-family:'Verdana',arial,helvetica,sans-serif;
line-height:normal;
text-transform:uppercase;
}

Example 2:

.postdate, .post .tags {
margin:0 0 2px 0;
font-size:12px;
font-family:'Trebuchet MS',arial,helvetica,sans-serif;
line-height:normal;
}

Example 3:

.postdate, .post .tags {
margin:0 0 2px 0;
font-size:20px;
font-family:'Georgia',arial,helvetica,sans-serif;
line-height:normal;
text-transform:uppercase;
}

Example 4:

.postdate, .post .tags {
margin:0 0 2px 0;
font-size:10px;
font-family:'Verdana',arial,helvetica,sans-serif;
line-height:normal;
}

+ 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 . 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

End of Part 2

Useful links

• Styling My Opera profile pages by Jere Purmonen
  
• W3schools CSS guide
  
• CSS is not hard to learn – if you recognise it for what it is
  
• CSS Toolshed
  
• CSS Beauty
  
• CSS Creator
  
• CSS Discuss Wiki
  
• CSS Zen Garden
  
• Andy Budd's CSS Links