My 0.02$ on Opera Community development

[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]

Sidebar on My.Opera Blog

Sidebar, Album slideshow, Calendar, etc

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

#sidewrap {
width:190px;
float:right;
font-size:11px;
overflow:hidden;
}

And to explain it line by line:
width:190px - The width property sets the width of an element. In this case width of title is 190px, and that means that it will be. You can see examples of width usage here, and learn more on CSS dimensions here.
float:right; - The image or text moves to the right in the parent element. You can read more about CSS float property here.
font-size:11px - Font-size sets the size of a font. In this case font size is set in pixels, and to be exact 11pixels. More about fonts and font size here.
overflow:hidden - The overflow property sets what happens if the content of an element overflow its area. Hidden means that the content is clipped, but the browser does not display a scroll-bar to see the rest of the content. You can see examples of overflow 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: :

#sidewrap {
width:190px;
float:right;
font-size:14px;
color:#666699;
overflow:hidden;
}

Example 2:

#sidewrap {
width:190px;
float:center;
font-family:'Trebuchet MS',arial,helvetica,sans-serif;
font-size:11px;
overflow:hidden;
}

Example 3:

#sidewrap {
width:190px;
float:left;
font-family:'Impact',arial,helvetica,sans-serif;
font-size:11px;
overflow:hidden;
}

Example 4:

#sidewrap {
width:190px;
float:right;
font-size:11px;
font-family:'Georgia',arial,helvetica,sans-serif;
font-style: italic;
overflow:hidden;
}

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

#side h2, #side caption {
color:#fff;
background:#3b649c;
font-size:10px;
font-weight:normal;
text-transform:uppercase;
text-align:left;
margin:0 0 1px 0;
padding:2px 0 2px 5px;
}

And to explain it line by line:
color:#fff; - 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:#3b649c; - The CSS background properties define the background effects of an element. Elements are already explained above. More on this topic 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. You can read more about font-weight here.
font-weight:normal;- The font-weight property sets how thick or thin characters in text should be displayed.
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.
text-align:left;- The text-align property aligns the text in an element.. Read more about text-align here
margin:0 0 1px 0- The CSS margin properties define the space around elements. In this case margin is 0 0 1px 0 (top, right, bottom, left). You can see examples of margin usage here and get detailed info on CSS margin here
padding:2px 0 2px 5px; - The CSS padding properties define the space between the element border and the element content.. In this case space is 2px 0 2px 5px; (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: :

#side h2, #side caption {
color:#CC3300;
background:#008000;
font-size:12px;
font-weight:normal;
text-align:left;
margin:0 0 1px 0;
padding:2px 0 2px 5px;
}

Example 2:

#side h2, #side caption {
color:#fff;
background:#CC3300;
font-size:20px;
font-weight:normal;
text-transform:uppercase;
text-align:left;
margin:0 0 1px 0;
padding:2px 0 2px 5px;
}

Example 3:

#side h2, #side caption {
color:#fff;
background:#CC6600;
font-size:10px;
font-weight:normal;
text-transform:uppercase;
text-align:left;
margin:0 0 1px 0;
padding:2px 0 2px 5px;
}

Example 4:

#side h2, #side caption {
color:#fff;
background:#f5f5f5;
font-size:20px;
font-family:'Georgia',arial,helvetica,sans-serif;
font-weight:italic;
text-transform:lowercase;
text-align:left;
margin:0 0 1px 0;
padding:2px 0 2px 5px;
}

Aditional info:
1. With this element, if you want to experiment, you can make graphical header, however that might need tweaking padding and margin too. This might be explained later in tips and tricks
2. Feed blocks background is changed with #side h2.feedheader element from main.css of default theme.
3. Background of sidebar blocks, gray gradient can be changed thru .sidebox .pad element from main.css of default theme.

Other sidebar elements
If we take a look into main.css of default theme we will spot that there is a part about other sidebar elements, for example calendar and album slideshow, and countdown

In this case I won't explain these elements line by because pretty much all elements have already been explained, but I will try to clear things up for you

Calendar
All important calendar css elements you might want to change:
#calendar - This controls all general preferences. For example, width, font size, background, border and similar.
#calendar th - This controls days in the week list.
#calendar td - This controls 1 - 31 and months
#calendar td a - This controls color of linked elements.
#calendar td#today - This controls properties of cell in which today's number is located.
#side a#calendarmonth:hover - This controls color of hover efect in calendar.

Album slideshow
All important albums slideshow css elements you might want to change:
#albumslides - This controls all general preferences for slides.
#side #albnav - This controls border and similar stuff of element described below this one.
#control_left, #control_right - This controls control elements that are located below thumbnails.
.albname - This controls elements related to list of albums you made.

Countdowns
#side .cdwn - All elements regarding countdowns .

Example codes won't be posted here, but below with other codes and picture examples

How examples look?
Example 1:
/SerbianFighter/homes/blog/example1look3.png
Example 2:
/SerbianFighter/homes/blog/example2look3.png
Example 3:
/SerbianFighter/homes/blog/example3look3.png
Example 4:
/SerbianFighter/homes/blog/example4look3.png

example1-part3.txt

example2-part3.txt

example3-part3.txt

example4-part3.txt

End of Part 3

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