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

A estas alturas ya se manejan un poco en el tema y nos quedan varias cosas por hacer (aunque nuevamente la mayoría de las cosas son similares), por lo que siguiendo el ejemplo de Ivan sólo daré la lista y de vez en cuando un comentario a la pasada, asi que a jugar o investigar según sea el caso y/o preferencias personales:


El menú superior y el vinculo de “Opera community”

#topbar, #topbar p , #topbar a , #topbar a:hover , a.toplink , a.toplink:hover , #meta , #meta a , #oc , #oc span , #top

Sobre todo los mas novatos, fíjense en el #oc span, si se dan cuenta esta la imagen que esta al lado del vinculo “Opera community” (el globo) que es de 22 x 22 píxeles,

#oc span {
display:block;
height:24px;
background:#fff url(ubicacion de la imagen) top left no-repeat;
padding-left:26px;
}

sigamos con la lista

Fondo de la página y envolturas (wraps) a cada lado

body (creo que ya lo vi en el paso 1), #wrap1 , #wrap2, #wrap3, #content (el fondo de los posts del blog)

Tags

#content .tags a:link, #content .tags a:visited, #content .tags a:active, .tag , #content .tags a:hover , .tagged

Footer

#footer , #footer p , #footer a:link, #footer a:visited, #footer a:active , #footer img , #footer #get , #footer #get:hover

Vinculos en cada página

a:link, a:active , a:visited , a:hover , a.username:link, a.username:visited, a.username:active

Comentarios

.comments h2 , .comments , .comment1 , .comment1 .bot , .comment2 , .comment2 .bot
, .comments .c-avatar , .c-avatar img , .comments .text , .comment-by .edited , .comment-by , .editcomment , .editcomment a:link, .editcomment a:visited, .editcomment a:active , .del , #addcomment , #description, #writecomment , #message , #msubject

Perfil rápido

#qp dl , #qp dt , #qp dd , #myphoto , #myphoto img


Fin del 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)