Bati2 de chocolate

Este martes 10 de Octubre estará dada de baja Opera Comunity (el sitio como tal, los grupos, los foros, los blog, etc.) el motivo de esto es que se haran algunas mejoras y arreglos, la baja sera por unas 4 a 5 horas comenzando a las 6AM UTC (08:00CET)

Pueden ver con un poco más de detalle la noticia en
my.opera.com estará fuera de servicio por unas horas (escrito por mi en el grupo de Chile)
Upcoming Opera Community Downtime (noticia original en inglés)

A) ¿Qué es el CSS?

El CSS (Cascading Style Sheets o en español hojas de estilo en cascada) es un lenguaje formal usado para definir la presentación de un documento estructurado escrito en HTML o XML. El W3C (World Wide Web Consortium) es el encargado de formular la especificación de las hojas de estilo que servirá de estándar para los agentes de usuario o navegadores.

La idea detrás del CSS es que se pueda separar la estructura del documento de su presentación, o sea se separa el contenido del estilo de este. Por lo que se puede cambiar la apariencia de un documento de una manera relativamente fácil sin afectar el contenido, lo cual es útil para cambiar el estilo y el formato de múltiples páginas Web al mismo tiempo.

Aquí tienen un par de ejemplos Ejemplo 1, Ejemplo 2


B) Familiarizarse en donde se ingresa el código CSS del usuario

Primero hay que saber donde se ingresa el código CSS del usuario, o sea, ¿Dónde esta la hoja CSS del usuario?, ya que allí vamos a trabajar la mayor parte del tiempo y vamos a hacer los cambios. Aunque por ahora sólo la visitaremos para saber en donde se encuentra.

La respuesta es sencilla, hay que ir a tu pagina (Obviamente hay que ingresar el usuario y contraseña), una vez en tu pagina hay que ir a las preferencias (“Preferences”) una vez allí en el menú hay que ir al “Web Page Layout” y finalmente ir a la hoja de estilo del usuario (“custom style sheet”), es un vinculo que aparece arriba de los temas.

Allí aparece un cuadro con el titulo “Enter CSS:” y a continuación un en donde se ingresa el código del CSS. Más abajo hay tres opciones la primera es para usar en conjunto el CSS del tema actual con el CSS personalizado del usuario (la opción es: “Use my custom style sheet together with the current theme”), esta es la opción que vamos a usar para realizar los cambios a la página.

Aunque no las usemos igual, les voy a explicar las otras 2, con la segunda “Only use my custom style sheet” lo que se hace es solo cargar el CSS personalizado del usuario sin el del tema que se este utilizando y 2 CSS que son account_white.css (solo se carga cuando ingresa el usuario y contiene estilos para la página de account) y el common.css (que contiene estilos usados para los ratings, spotlights, login, etc.). Por ultimo la opción “Do not use my custom style sheet” sirve para usar sólo el CSS del tema elegido sin cargar el CSS del ususario.


C) Sobre el tipo de letras y colores

Cuando se usen letras, traten de usar letras comunes, como Arial, Times New Roman, Verdana no sacan nada con usar una letra que solo la tengas tú y tu amigo, ya que el resto no la vera. En cuanto al texto se puede usar norma l(normal), negrita (bold), cursiva o itálica (italic) y oblicua (oblique) aunque la mayoria de las letras no diferencias la oblicua de la cursiva.

Cuando usen un color, si bien se puede usar los nombres (ejemplo: white, black, green, red, etc. ) no todos los browsers (navegadores) reconocen los nombres de colores, por lo que mejor asegúrense de usar la forma hexadecimal (Hex para los amigos) de este color que es de la forma # RRGGBB por ejemplo (véase esta página), a continuación algunos colores:

Blanco : codigo color #FFFFFF
Negro: codigo color #000000
Rojo : codigo color #FF0000
Verde : codigo color #00FF00
Azul : codigo color #0000FF
Amarillo : codigo color #FFFF00
Magenta : codigo color #FF00FF
Cian : codigo color #00FFFF

Pueden visitar la siguiente página para ver más colores
Y en esta página se puede generar el código hex de distintos colores

Nota: Se puede abreviar los colores de la forma hex como por ejemplo #666699 a #669 o #FFFFFF a #FFF

D) Sobre la hojas de estilo (The Stylesheet) de los temas.

Esta compuesto por el common.css (la misma para cada tema) y el main.css, el cual varia en cada tema y se encuentra en my.opera.com/community/css/users/NUMERO DEL TEMA/main.css, así la del tema 1 es http://my.opera.com/community/css/users/1/main.css, la del tema 2 es http://my.opera.com/community/css/users/2/main.css, la del tema 3 es http://my.opera.com/community/css/users/3/main.css y así sucesivamente. Es bueno que le den una mirada antes de comenzar

Los ejemplos que vendrán mas adelante se refieren en su mayoría al tema por defecto (tema 1) por lo que trabajan en un 100% en ese tema, pero por supuesto que se pueden aplicar a los demás temas con unos pocos cambios.

E) Sobre la Guia.

Cuando este citando una parte del CSS original del tema 
aparecerá en un cuadro como este.

En cambio si estoy modificando el código original (como es el caso de los ejemplos) aparecerá el texto de esta manera y probablemente se destacara con colores los cambios hechos

Hay un álbum de fotos (Este) en donde están las imágenes usadas en los ejemplos y otro con las capturas de como se ven los ejemplos(Este).


Fin de las Informaciones previas

---

Guía:
Previo: Informaciones previas
Paso 1: Elementos del cuerpo (Body)
Body, Font-Size, Font-Family, Color
Paso 2: Elementos del titulo
Title, Subtitle, Header picture, Menu background, etc.
Paso 3: Elementos del Blog
Post title, Sticky post, Post date
Paso 4: Barra lateral (Sidebar)
Sidebar, Album slideshow, Calendar, etc.
Paso 5: Otras cosas de My.Opera
Profile, Friends, Links, etc.
Paso 6: Las ultimas cosas que nos quedan
El fondo de la pagina, el menú superior y el vinculo de “Opera community”, los vínculos de cada página, comentarios, etc.
Las ultimas consideraciones (y despedida)

---

Algunos Vinculos interesantes:

Colores seguros en HTML
color schemer(Para ver y generar colores y su código, En Inglés)
Introducción al CSS
CSS in Action (En Inglés)
¡CSS en acción! y tutorial
Manual de Hojas de Estilo CSS
Manual de CSS, hojas de estilo
Definición del estándar CSS en W3C.org (En Inglés)
Traducción especificación CSS1 al castellano
Traducción especificación CSS2 al castellano y los cambios del CSS2 con respecto a CSS1
Servicio de Validación de CSS
Pimp My Blog: Reloaded! (En Inglés)
Redesigning My.Opera space tutorial(En Inglés)

Importante:

1) Todos los cambios y referencias están hechos en el tema por defecto (El tema 1) por lo que los ejemplos funcionan en un 100% en ese tema. Pero se pueden adaptar a los otros.

2) Las CSS de los temas son: el common.css y el main.css, el cual varia en cada tema y se encuentra en my.opera.com/community/css/users/NUMERO DEL TEMA/main.css, así la del tema 1 es http://my.opera.com/community/css/users/1/main.css , la del tema 2 es http://my.opera.com/community/css/users/2/main.css y así sucesivamente.

3) Tu CSS se ingresa en: Hay que ir a tu pagina (hay que ingresar el usuario y contraseña), luego en preferencias (“Preferences”) de allí a “Web Page Layout” y finalmente ir a la hoja de estilo del usuario (“custom style sheet”), es un vinculo que aparece arriba de los temas. Allí aparece un cuadro con el titulo “Enter CSS:” en donde se ingresa el código del CSS.

Más abajo hay tres opciones, usaremos la primera es para usar en conjunto el CSS del tema actual con el CSS personalizado del usuario (“Use my custom style sheet together with the current theme”).

---

Paso 2: Elementos del titulo
Title, Subtitle, Header picture, Menu background, etc.

Lo primero es ubicar la parte que vamos a modificar, de nuevo esta en el /* :: MAIN LAYOUT :: */ pero esta vez un poco más abajo y seria lo siguiente:

#top2 {
height:116px;
padding-left:15px;
background:#2f569b url(/community/graphics/users/1/top.gif) top left repeat-x;
border-bottom:1px solid #fff;
}

#top h1 {
margin:0;
width:100%;
overflow:hidden;
font-size:30px;
font-family:'trebuchet ms',arial,helvetica,sans-serif;
line-height:normal;
padding-top:22px;
}

#subtitle {
margin:0;
font-size:12px;
width:100%;
overflow:hidden;
}

#menu {
clear:both;
background:#e9e9e9 url(/community/graphics/users/1/menu.gif);
}

Como son varias cosas que al final dependen una de otras para la presentación, los explicare por separado partiendo por los textos del titulo, subtitulo, etc y terminare con la imagen del fondo, pero los ejemplos se harán al final usando varias cosas a la vez.

Texto del titulo

Esto es controlado por lo siguiente:

#top h1 {
margin:0;
width:100%;
overflow:hidden;
font-size:30px;
font-family:'trebuchet ms',arial,helvetica,sans-serif;
line-height:normal;
padding-top:22px;
}

Explicación:

margin:0
Esto controla el espacio alrededor del elemento (el margen), en este caso es 0

width:100%
Esto controla en ancho de un elemento, en este caso el ancho del titulo es del 100% lo que permite que el usuario pueda escribir en todo el ancho del header (cabecera)

overflow:hidden
La propiedad de overflow (desbordamiento) controla que sucede si un elemento sobrepasa su área. En este caso Hidden significa que el contenido será recortado pero el navegador (browser) no mostrara la barra para desplazarse por el resto del texto.

font-size: 30px
Esto controla el tamaño de la letra, en este caso es de unos 30px (píxeles)

font-family:'trebuchet ms',arial,helvetica,sans-serif;
Esto controla el tipo de letra que usas, la primera prioridad la tiene la 'trebuchet ms' luego la arial y después las demás siguiendo el orden de la lista .

line-height:normal
Esta propiedad controla la distancia entre líneas, que en este caso en normal.

padding-top:22px
Esta propiedad controla el relleno en el espacio superior (top padding) de un elemento.


Pasemos a lo siguiente:

Texto del subtitulo

Es bastante similar el texto del titulo, esta controlado por:

#subtitle {
margin:0;
font-size:12px;
width:100%;
overflow:hidden;
}

Explicación:

margin:0
Tal como deben pensar esto le da un margen alrededor del elemento de 0

font-size:12px
por enésima vez es el tamaño de la letra (12px)

width:100%
Al igual que en el titulo esto controla en ancho de un elemento, en este caso el ancho es del 100%

overflow:hidden
Nuevamente al igual que la vez anterior, esto controla lo que sucede si un elemento sobrepasa su área. En este caso Hidden significa que el contenido será recortado pero no se mostrara la barra para desplazarse por el resto del texto.

Como comentario aparte, se pueden agregar mas propiedades como serian font-size, font-family, font-style, color, etc. Más adelante en los ejemplos lo haremos.


la imagen de la cabecera (Header image) y el fondo del menú (menu background)

La imagen sería :

#top2 {
height:116px;
padding-left:15px;
background:#2f569b url(/community/graphics/users/1/top.gif) top left repeat-x;
border-bottom:1px solid #fff;
}

Y el menú:

#menu {
clear:both;
background:#e9e9e9 url(/community/graphics/users/1/menu.gif);
}

Explicación:

height:116px
Controla la altura del elemento. En este caso la altura es de 116 píxeles.

padding-left:15px
Controla el relleno (el espacio) a la izquierda del elemento, en este caso de 15 píxeles.

background:#2f569b url(/community/graphics/users/1/top.gif) top left repeat-x
Controla el fondo en donde se muestra el titulo, como es un poco grande vamos por partes:
1) #2f569b, es el color de fondo (Es este color)
2) url(/community/graphics/users/1/top.gif se rerfiere a la imagen del fondo, es la siguiente http://my.opera.com/community/graphics/users/1/top.gif fíjense que es una imagen de apenas 1x116px (más abajo se explica el motivo)
3)top left, establece la posicion del elemeto
4) repeat-x, la imagen se repite horizontalmente (es por eso la imagen tiene un ancho tan pequeño, ya que se repite)
Casi se me olvidaba que podemos separarlo asi (al fin y al cabo es lo mismo):

background-color:#2f569b;
background-image: url(/community/graphics/users/1/top.gif);
background-position: top left;
background-repeat: repeat-x;

border-bottom:1px solid #fff
Con esta propiedad se establecen de una sola vez el borde y el fondo, en este caso ambos de 1px de tamaño y color #FFF (Es este color)

Por el lado del menu background;

clear:both
Ningun elemento flotante se permiten en el lado derecho o izquierdo

background:#e9e9e9 url(/community/graphics/users/1/menu.gif)
Creo que ya esta claro con las explicaciones anteriores, en todo caso se le da al fondo el color #e9e9e9 y la imagen http://my.opera.com/community/graphics/users/1/menu.gif



Suficientes explicaciones, pasemos a los ejemplitos:

Ejemplo 1

Usaremos la siguiente imagen para el ejemplo: http://files.myopera.com/cyborgzero/albums/110801/parte2ejemplo1top.JPG

#top h1 {
margin:top;
width:100%;
overflow:hidden;
font-size:36px;
font-family:'Impact',arial,helvetica,sans-serif;
font-style: bold;
color:#30FF00;
line-height:normal;
padding-top:22px;
}

#subtitle {
margin:top;
width:100%;
overflow:hidden;
font-size:10px;
font-family:'Verdana',arial,helvetica,sans-serif;
font-style:bold;
color:#C0C0C0;
}

#top2 {
height:116px;
padding-left:15px;
background:#000000 url(http://files.myopera.com/cyborgzero/albums/110801/parte2ejemplo1top.JPG) top left repeat-x;
border-bottom:1px solid #fff;
}

#menu {
clear:both;
background:#e9e9e9 url(/community/graphics/users/1/menu.gif);
}

Después de todo lo que he escrito, creo que queda claro, así que una explicación rápida:

- Titulo, se utiliza una letra Impact de tamaño 36 píxeles y color :#30FF00, lo de “font-style: bold” deja el texto en negrita.
- Subtitulo, se utiliza una letra Verdana de tamaño 10 píxeles, en negrita y de color #C0C0C0
- Imagen: ya dije que su uso la imagen del puente

Y se veria asi.


Como es costumbre, el segundo ejemplo

Ejemplo 2

Usaremos la siguiente imagen: http://files.myopera.com/cyborgzero/albums/110801/parte2ejemlpo2top.jpg

#top h1 {
margin:top;
width:100%;
overflow:hidden;
font-size:40px;
font-family:'GothicE',arial,helvetica,sans-serif;
font-style:italic;
color:#FFFFFF;
line-height:normal;
padding-top:22px;
color:
}

#subtitle {
margin:top;
width:100%;
overflow:hidden;
font-size:20px;
font-family:'GothicI',arial,helvetica,sans-serif;
font-style:italic;
color:#C0C0C0;
}

#top2 {
height:116px;
padding-left:15px;
background:#2f569b url(http://files.myopera.com/cyborgzero/albums/110801/parte2ejemlpo2top.jpg) top left repeat-x;
border-bottom:1px solid #fff;
}

#menu {
clear:both;
background:#000000 url(/community/graphics/users/1/menu.gif);
}

La explicación rápida:
- Titulo, se utiliza una letra GothicE de tamaño 40 píxeles y color blanco, lo de “font-style: italic” deja el texto en cursiva.
- Subtitulo, se utiliza una letra GothicI de tamaño 20 píxeles, en cursiva y de color #C0C0C0
- Imagen: ya dije que su uso la imagen de la palmera

Y se veria asi.



Y ¿qué pasa con los otros temas?

Excepcionalmente por ser de interés voy a dar una pequeña explicación. Lo mas fácil (y lo que recomiendo) seria modificar la imagen para que quedara del tamaño que se utiliza en el tema que se esta trabajando, aunque muchas veces los que diseñan banners los hacen de 852 x 130 px los cuales de adaptan bien a la mayoría de los temas, ya que en el peor de los casos lo que sobra no se muestra. Obviamente si ocupas repeat-x no importa mucho el ancho, solo el alto. Vamos por temas (voy a revisar algunos ya que son muchos y donde hay que cmbiar cosas va a estar marcado con color):

Tema 1:

#top2 {
height:116px;
padding-left:15px;
background:#2f569b url(/community/graphics/users/1/top.gif) top left repeat-x;
border-bottom:1px solid #fff;
}

En este caso es apenas una imagen 1 x 116 píxeles que se repite, en este caso si van a utilizar una imagen más grande podría ser del tamaño de 852 x 116 px (la altura no importa mucho, si es mayor, ya que si sobra un poco no se muestra lo que sobra), el codigo seria el siguiente:


Tema 2

#top2 {
height:146px;
padding-left:15px;
background:#527fbf url(/community/graphics/users/2/top.jpg) top right;
border-top:1px solid #555;
}

Es una imagen de 852 x 146 píxeles nuevamente la altura no importa mucho, si es mayor por lo mencionado anteriormente

Tema 3

#top {
font-size:11px;
max-width:872px;
min-width:739px;
margin:0 -10px;
text-align:left;
background:#ab0b1e url(/community/graphics/users/3/top1.gif) top left repeat-x;
border-top:1px solid #ce0d23;
color:#fff;
}

#top2 {
height:112px;
padding-left:15px;
background:transparent url(/community/graphics/users/3/top2.gif) top right no-repeat;
border-bottom:1px solid #fff;
}

Esta es un poco mas interesante se utiliza una imagen roja de 1 x 112 píxeles que se repite y a esta se le agrega una O roja de 438 x 112 píxeles, ya habrán adivinado que seria una imagen 852 x 112 píxeles. Nota: Pueden dejar el top sin imagen y poner la imagen en el top2, asi:

#top2 {
height:112px;
padding-left:15px;
background:#COLOR url(URL imagen) top right no-repeat;
}

Tema 4

#top2 {
height:152px;
padding-left:15px;
background:#177822 url(/community/graphics/users/4/top.jpg) top right;
}

La imagen de la ranita es de 852 x 152 píxeles , ya sabrán que el tamaño de la nueva imagen sería de 852 x 152 píxeles


Tema 5

.twocol #top {
background:#4a3679 url(/community/graphics/users/5/top1.jpg) top right no-repeat;
}

.onecol #top {
background:#4a3679 url(/community/graphics/users/5/top1single.jpg) top right no-repeat;
}

#top2 {
height:163px;
padding:0 40px;
background:transparent url(/community/graphics/users/5/top2.gif) top left no-repeat;
color:#fff;
}

Otro con varias imágenes, si se fijan las mas grandes tienen 892 x 204 píxeles

Tema 6

#top {
font-size:11px;
max-width:892px;
min-width:739px;
height:204px;
margin:0 auto;
text-align:left;
}

.twocol #top {
background:#407bb5 url(/community/graphics/users/6/top1.jpg) top right no-repeat;
}

.onecol #top {
background:#407bb5 url(/community/graphics/users/6/top1single.jpg) top right no-repeat;
}

#top2 {
height:163px;
padding:0 40px;
background:transparent url(/community/graphics/users/6/top2.gif) top left no-repeat;
color:#fff;
}

Similar al anterior, las imágenes mas grandes tienen 892 x 204 píxeles

Tema 7

#top {
font-size:11px;
width:852px;
margin:0 -10px;
text-align:left;
background:#c1ccd9 url(/community/graphics/users/7/top.jpg) top left;
height:195px;
color:#516b92;
}

Este esta más facilito, la imagen es de 852 x 182 píxeles


Tema 8

#top {
font-size:11px;
max-width:867px;
min-width:758px;
margin:0 -10px;
text-align:left;
background:#40712b url(/community/graphics/users/8/top.jpg) bottom right no-repeat;
height:183px;
color:#fff;
}

En este caso la imagen es de 867 x 183 píxeles

Tema 9

#top {
font-size:11px;
max-width:867px;
min-width:758px;
margin:0 -10px;
text-align:left;
background:#e5bd0d url(/community/graphics/users/9/top.jpg) bottom right no-repeat;
height:183px;
color:#782200;
}

Esta vez es una imagen 867 x 183 píxeles (al igual que la anterior)


El resto de los temas queda como tarea para la casa....


Fin de este paso. Salio más largo de lo que esperaba

---

Guía:
Previo: Informaciones previas
Paso 1: Elementos del cuerpo (Body)
Body, Font-Size, Font-Family, Color
Paso 2: Elementos del titulo
Title, Subtitle, Header picture, Menu background, etc.
Paso 3: Elementos del Blog
Post title, Sticky post, Post date
Paso 4: Barra lateral (Sidebar)
Sidebar, Album slideshow, Calendar, etc.
Paso 5: Otras cosas de My.Opera
Profile, Friends, Links, etc.
Paso 6: Las ultimas cosas que nos quedan
El fondo de la pagina, el menú superior y el vinculo de “Opera community”, los vínculos de cada página, comentarios, etc.
Las ultimas consideraciones (y despedida)

---

Algunos Vinculos interesantes:

Colores seguros en HTML
color schemer(Para ver y generar colores y su código, En Inglés)
Introducción al CSS
CSS in Action (En Inglés)
¡CSS en acción! y tutorial
Manual de Hojas de Estilo CSS
Manual de CSS, hojas de estilo
Definición del estándar CSS en W3C.org (En Inglés)
Traducción especificación CSS1 al castellano
Traducción especificación CSS2 al castellano y los cambios del CSS2 con respecto a CSS1
Servicio de Validación de CSS
Pimp My Blog: Reloaded! (En Inglés)
Redesigning My.Opera space tutorial (En Inglés)

Importante:

1) Todos los cambios y referencias están hechos en el tema por defecto (El tema 1) por lo que los ejemplos funcionan en un 100% en ese tema. Pero se pueden adaptar a los otros.

2) Las CSS de los temas son: el common.css y el main.css, el cual varia en cada tema y se encuentra en my.opera.com/community/css/users/NUMERO DEL TEMA/main.css, así la del tema 1 es http://my.opera.com/community/css/users/1/main.css, la del tema 2 es http://my.opera.com/community/css/users/2/main.css y así sucesivamente.

3) Tu CSS se ingresa en: Hay que ir a tu pagina (hay que ingresar el usuario y contraseña), luego en preferencias (“Preferences”) de allí a “Web Page Layout” y finalmente ir a la hoja de estilo del usuario (“custom style sheet”), es un vinculo que aparece arriba de los temas. Allí aparece un cuadro con el titulo “Enter CSS:” en donde se ingresa el código del CSS.

Más abajo hay tres opciones, usaremos la primera es para usar en conjunto el CSS del tema actual con el CSS personalizado del usuario (“Use my custom style sheet together with the current theme”).

---

Paso 4: Barra lateral (Sidebar)
Sidebar, Album slideshow, Calendar, etc

Otra cosa común que tienen la mayoría de los temas es esa barra lateral que contiene cosas como calendario, eso trataremos ahora. Como es costumbre los ejemplitos van al final.


Ancho de la barra lateral (Sidebar Width)

Nuevamente en el main.css hay un comentario que dice: /* :: SIDEBAR :: */ allí esta lo siguiente:

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

Explicación

width:190px;
Controla el ancho en este caso 190 px.

float:right;
La imagen o el texto se mueve a la derecha en el elemento padre.

font-size:11px;
El tamaño de la letra es de 11 px.

overflow:hidden;
Controla lo que sucede si un elemento sobrepasa su área. En este caso hidden significa que el contenido será recortado pero no se mostrara la barra para desplazarse por el resto del elemento.

Subtítulos de la barra lateral (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;
}

Explicación
Estas propiedades ya la hemos visto anteriormente, o son obvias, por lo que los revisaremos rápidamente

color:#fff;
Le da al texto el color blanco

background:#3b649c;
Es el color del fondo

font-size:10px;
Le da a las letras el tamaño de 10px.

font-weight:normal;
Fija cómo los caracteres gruesos o finos en el texto deben ser exhibidos. En este caso normal

text-transform:uppercase;
Cambia el texto a mayúsculas (revisen el paso anterior)

text-align:left;
Alinea el texto a la izquierda

margin:0 0 1px 0;
Un margen de 1px en el fondo (El orden es arriba, derecha, fondo, izquierda)

padding:2px 0 2px 5px;
Controla el espacio entre el borde del elemento y el contenido del elemento, en este caso 2 px arriba y abajo, 0 px a la derecha y 5 px a la izquierda (el orden es arriba, derecha, fondo, izquierda)


Otros elementos (Calendar, Album slideshow, Countdowns)

De estos elementos no voy a mencionar ejemplos, pero rápidamente mencionare que hacen los principales ya que las declaraciones son similares a los mencionados anteriormente (line-height, border, padding, text-align, font-size, etc.) y porque tomaría mucho tiempo, así que a ustedes les queda el trabajo de probar con ellos (en otras palabras queda de tarea para la casa), así que búsquenlos en el main.css:


Calendario (Calendar)

Estos elementos están después del comentario /* :: CALENDAR :: */ en el main.css (quizás introduzca un poco del calendario en los ejemplos, pero seria algo muy básico). Los elementos importantes son:

#calendar
Esto controla las preferencias generales cono el ancho, tipo de letra, fondo, etc.

#calendar th
Esto controla los días en la lista de semanas.

#calendar td
Esto controla los números 1 al 31 y los meses

#calendar td a
Esto controla el color de los elementos que tienen vínculos (links).

#calendar td#today
Esto controla las propiedades de la celda en donde se encuentran los números de los días.

#side a#calendarmonth:hover
Esto controla el efecto de cambio de mes en el calendario.


Fotografiás deslizantes(Album slideshow)

Esto se refiere a los álbum de fotos que aparecen en la barra y en donde van cambiando la imagen cada cierto tiempo, como ya habrán adivinado esta luego del comentario /* :: ALBUM SLIDESHOW :: */. Lo mas importante es:

#albumslides
Controla las preferencias generales.

#side #albnav
Esto controla los bordes, fondo y similares .

#control_left, #control_right
Esto controla los elementos que se ubican debajo de las miniaturas.

.albname
Esto controla elementos relacionados con la lista que álbumes que has hecho


Cuentas regresivas (Countdowns)

Se refiere a esas cuentas regresivas que señalan que faltan tantos días para algo.

#side .cdwn
Controla los elementos con respecto a cuentas regresivas


Al fin los ejemplitos:

Ejemplo 1:

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

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

#calendar {
border-spacing:1px;
clear:both;
margin-bottom:15px;
width:190px;
font-size:20px;
background:#efefed url(/community/graphics/users/1/calendar.gif);
border-bottom:1px solid #dbdbd5;
}

#calendar th {
font-size:20px;
line-height:18px;
height:18px;
text-align:center;
}

Se vería así


Ejemplo2:

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

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

#calendar {
color:#666666;
border-spacing:1px;
clear:both;
margin-bottom:15px;
width:190px;
font-size:10px;
font-family:'Georgia',arial,helvetica,sans-serif;
background:#efefed url(/community/graphics/users/1/calendar.gif);
border-bottom:1px solid #dbdbd5;
}

#calendar th {
font-size:20px;
line-height:18px;
height:18px;
text-align:center;
}

Se vería así:

---

Guía:
Previo: Informaciones previas
Paso 1: Elementos del cuerpo (Body)
Body, Font-Size, Font-Family, Color
Paso 2: Elementos del titulo
Title, Subtitle, Header picture, Menu background, etc.
Paso 3: Elementos del Blog
Post title, Sticky post, Post date
Paso 4: Barra lateral (Sidebar)
Sidebar, Album slideshow, Calendar, etc.
Paso 5: Otras cosas de My.Opera
Profile, Friends, Links, etc.
Paso 6: Las ultimas cosas que nos quedan
El fondo de la pagina, el menú superior y el vinculo de “Opera community”, los vínculos de cada página, comentarios, etc.
Las ultimas consideraciones (y despedida)

---

Algunos Vinculos interesantes:

Colores seguros en HTML
color schemer(Para ver y generar colores y su código, En Inglés)
Introducción al CSS
CSS in Action (En Inglés)
¡CSS en acción! y tutorial
Manual de Hojas de Estilo CSS
Manual de CSS, hojas de estilo
Definición del estándar CSS en W3C.org (En Inglés)
Traducción especificación CSS1 al castellano
Traducción especificación CSS2 al castellano y los cambios del CSS2 con respecto a CSS1
Servicio de Validación de CSS
Pimp My Blog: Reloaded! (En Inglés)
Redesigning My.Opera space tutorial (En Inglés)