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 1: Elementos del cuerpo (Body)
Body, Font-Size, Font-Family, Color

En realidad esto es bastante breve como para ser un paso, pero lo deje aparte para que los que no tengan mucha experiencia se acostumbren un poco.

Si ven el main.css, la parte del body esta después del comentario que dice MAIN LAYOUT (Nota aparte: los comentarios son de la forma /* Texto */)

/* :: MAIN LAYOUT :: */

body {
background:#cdcdcd url(/community/graphics/users/1/body.gif);
margin:0;
padding:0;
font-family:arial,'trebuchet ms',helvetica,sans-serif;
font-size:12px;
line-height:145%;
text-align:center;
color:#111;
}

Algunas cosas importantes:

background:
Aquí puedes cambiar el color de fondo y la imagen. Asegurate de elegir un color de fondo que concuerde con la imagen. En el caso del tema 1 se esta usando la siguiente imagen como fondo http://my.opera.com/community/graphics/users/1/body.gif

font-family:
Esto controla el tipo de letra que usas.

font-size:
Esto controla el tamaño de la letra, escge un tamaño de por lo menos unos 12px o mas para que sea legible

color:
Adivinaron, controla el color de la letra

Ahora lo modificaremos un poco:

Ejemplo 1:

body {
background:#FFFF99;
margin:0;
padding:0;
font-family:arial,'trebuchet ms',sans-serif;
font-size:12px;
line-height:145%;
text-align:center;
color:#0099FF;
}

Explicación:
** background:#FFFF99; En este caso le damos al fondo un color (Este #FFFF99).
** font-family:arial,'trebuchet ms',sans-serif; Es la fuente que se van utilizar, la primera prioridad la tiene la arial y después las demás siguiendo el orden de la lista .
** font-size:16px; es el tamaño de la letra en este caso 16 pixeles.
** color:#0099FF; se le da a las letras un color especifico (Este #0099FF)

El ejemplo 1 se vería así.


Hagamos otro ejemplo, esta vez pondremos una imagen de fondo:

Ejemplo 2:

body {
background:#FFCC66 url(http://files.myopera.com/cyborgzero/albums/110801/body.jpg);
margin:0;
padding:0;
font-family:arial,'trebuchet ms',sans-serif;
font-size:16px;
line-height:145%;
text-align:center;
color:#33CC33;
}

Explicación:
** background:#FFCC66 url(http://files.myopera.com/cyborgzero/albums/110801/body.jpg); En este caso se ocupa un color parecido a la imagen (Este #FFCC66) y luego se da la dirección donde se encuentra la imagen a utilizar. (vamos a usar esta imagen)
** font-family:arial,'trebuchet ms',sans-serif; Es la fuente que se van utilizar, la primera prioridad la tiene la arial y después las demás siguiendo el orden de la lista .
** font-size:16px; es el tamaño de la letra en este caso 16 pixeles.
** color:#33CC33; se le da a las letras un color especifico (Este #33CC33)

El ejemplo 2 se vería así.


Fin de este paso

---

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)