Sidebar Width

If we take a look into the stylesheet of most of the Opera default themes we will spot that there is a part that controls the sidebar and its contents:

#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, and can be expressed in pixels (px), ems or percentages. In this case width of the title is 190px.

float:right;

The image or text moves to the right in the parent element.

font-size:11px;

Font-size sets the size of a font, and can be expressed in pixels (px), ems or percentages. In this case the font size is set to 11px.

overflow:hidden;

The overflow property sets what happens if the content of an element overflow its area. The value "hidden" means that the content is clipped, but the browser does not display a scroll-bar to see the rest of the content.

So what can I do?

We will have four examples so that you can see how minor changes in the stylesheet can dramatically affect the look of the sidebar.

Example 1: Changing Font Size, Adding Color

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

NOTE: Again, you can abbreviate color by declaring #669 rather than #666699.

Example 2: Changing Float, Font Family

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

Example 3: Changing Font Family

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

Example 4: Changing Font Family, Adding Font Style

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

Note: Notice we changed to a serif (scripty) font, which lends itself nicely to being italicized as well.

Sidebar Captions

And there's also a section that styles the sidebar captions.

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

Let's deconstruct it now.

color:#fff;

The color property sets the color of text. It is best to use colors from the color safe pallette. It is also best to express colors as hex values (e.g., #rrggbb). In this case color used is #fff (white).

background:#3b649c;

The CSS background properties define the background effects of an element. Elements are already explained above.

font-size:10px;

Font-size sets the size of a font and is expressed in pixels (px), ems and percentages. In this case font size is 10px.

font-weight:normal;

There are only certain instances where this is needed at all because font weight is usually normal by default, except headers (H1, H2, etc.). These are, by default, bold. So if you do not want your headings to be bold, you'd declare font-weight:normal in that case. Also, if earlier in your stylesheet, you have this element declared as font-weight:bold and you want to turn it off for this instance, you'd then use font-weight:normal.

text-transform:uppercase;

The text-transform property controls the letters in an element.

text-align:left;

The text-align property affects how the text is arranged, left, center, right or justify (not recommended as Very Bad Things sometimes ensue in uncooperative browsers).

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

padding:2px 0 2px 5px;

The CSS padding properties define the space between the element border and the element content. In this case padding is 2px 0 2px 5px; (order is top, right, bottom, left).

So what can I do?

Example 1: Changing Color, Background and Font Size

#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: Changing the Background Color and Font Size

#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: Changing the Background Color

#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: Changing the Background Color, Font Size, Font Family and Font Style

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

Additional Information and Other Things You Can Try

1. With this element, if you want to experiment, you can make graphical header; however that might need tweaking (padding and margins) 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 by altering .sidebox .pad</l> element from main.css of default theme.

Other Sidebar Elements

In main.css, you will find other sidebar elements, for example, .calendar and .countdown. In this case, we won't explain these elements in great detail, because most of the elements have been covered exhaustively elsewhere here. But we will try to clear things up that are unique to these two divisions.

Calendar

All important css elements that style the calendar can eaasily be changed:

#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. Experiment with changing not only the color but the background as well!

Album slideshow

All important css elements controlling the album slideshow are:

#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