Bati2 de chocolate

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 3: Elementos del Blog
Post title, Sticky post, Post date

De nuevo como son cosas pequeñas, los ejemplos estarán al final combinando varias cosas.

Titulo de los post (Post title)

Busquen el comentario /* :: BLOG :: */ un poco más abajo aparecerá lo siguiente:

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

Explicación

margin:0 0 10px 0;
Controla el margen de los elementos, en este caso es 0 0 10px 0 (Nota: Las propiedades del margen y relleno se enumeran en este orden: superior (top), derecha (right), inferior (bottom), izquierda (left)).
Siguiendo con la explicación, en este caso los márgenes superior, derecho e izquierdo son de 0px y el inferior se de 10px

font-size:20px;
El tamaño de la letra, en este caso 20px

line-height:normal;
Controla la distancia entre líneas, en este caso es normal

Al igual que los elementos anteriores que manejaban texto se pueden agregar cosas como color, font-family, font-style, etc.


Sticky post

Pasemos a este punto, un poco más abajo se encuentra lo siguiente

.post .sticky {
float:right;
margin:0;
font-size:10px;
color:#999;
background:#fff url(/community/graphics/users/1/sticky.gif) top right no-repeat;
padding:0 25px 0 4px;
height:26px;
line-height:20px;
}

Explicación

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

margin:0
Controla el margen del elemento, en este caso un margen de 0 para el elemento

font-size:10px
Controla el tamaño de la fuente, en este caso una fuentes de 10 píxeles

color:#999
Controla el color, en este caso es el #999999

background:#fff url(/community/graphics/users/1/sticky.gif) top right no-repeat;
Esto controla el fondo del elemento, en este caso es la imagen sticky.gif que no se repite (véase el paso anterior). Una cosa que se me olvidaba es que podemos separarlo así:

.post .sticky {
    background-color:#fff;
    background-image: url(/community/graphics/users/1/sticky.gif);
    background-position: top right;
    background-repeat: no-repeat;

padding:0 25px 0 4px
Controla el espacio entre el borde del elemento y el contenido del elemento (el espacio), en este caso es de 25px en la derecha y 4 px en la izquierda (el orden es superior, derecha, fondo, izquierda).

Y la ultima parte antes de los ejemplos

Post date (fecha) y tags

Hay que devolverse un poco en el main.css y encontraras:

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

Explicación

margin:0 0 2px 0;
Creo que ya esta claro lo del margen, en este caso es 2 px en el fondo (nuevamente el orden es arriba, derecha, fondo, izquierda)

font-size:10px;
Otra cosa súper vista anteriormente, en este caso la letra se de tamaño de 10px

line-height:normal;
En este caso la distancia entre líneas es normal

text-transform:uppercase;
Al fin algo novedoso, esto controla las letras de un elemento, puede tomar los valores de "uppercase" "lowercase" "capitalize" y "none". En este caso uppercase tiene el efecto de que todo el texto, sin importar como este escrito, se transforma en mayúsculas. De manera análoga el lowercase transforma las letras a minúsculas. En el caso que esto no aparezca en el código significa que toma el valor none.


Al fin comenzamos con los ejemplitos:

Ejemplo 1

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

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

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

Y el ejemplo se vería así:


Ejemplo 2

.post .title {
margin:0 0 10px 0;
font-size:20px;
font-family:'Impact',arial,helvetica,sans-serif;
color:#666699;
line-height:normal;
}

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

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

Fijense que en este caso no esta el text-transform, por lo que toma el valor none.

Y el ejemplo se vería así:


Nota Final: Como esto es solo una guía, no mencione (ni explique) varias propiedades sobre el .poster ya que este esta relacionado con la parte del blog en dónde diferentes personas pueden escribir (postear), así que si les interesa revisen el main.css en los puntos de whisper y blockquote.bbquote, .post blockquote

Pasemos a lo siguiente

---

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)