Skip navigation.

My 0.02$ on Opera Community development

published by Ivan Minic

Redesigning My.Opera space, blog and photo gallery in X easy steps [Part 2]

, ,

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

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

Redesigning My.Opera space, blog and photo gallery in X easy steps Redesigning My.Opera space, blog and photo gallery in X easy steps

Comments

neonlinux 18. November 2005, 04:08

Your format here on this page looks like a website page.
How do I do this on my Opera Blog?
Do I need to type and input a lot of HTML code?

SerbianFighter 18. November 2005, 04:27

Some elements are bb code some are html... For example these 4 inline attachments are html tables.. But most stuff are just proper usage of bb code.

lulando 8. December 2005, 00:30

Peace, brother, I'm getting an idea, of what's going on (slowly :D) Again - great work. Thank you very much!

freeplay 31. January 2006, 20:31

I wont work for me no matter what. Idk what i am doing wrong. Can some one help me please???

SerbianFighter 31. January 2006, 20:48

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
July 2009
S M T W T F S
June 2009August 2009
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31