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 5: Otras cosas de My.Opera
Profile, Friends, Links, etc.

A estas alturas ¿qué no he explicado?, las declaraciones son las mismas mencionadas anteriormente (width, font-size, background, padding, margin, color, etc.), por lo que con una mirada al main.css se darán cuenta de lo que se hace, así que va una explicación rápida de las partes mas importantes (o sino terminaría cundo los cerdos vuelen ), algunos comentarios y el resto es tarea para la casa (o sea prueben ustedes mismos como se verían haciendo algunos cambios) :

Perfil (Profile)

Como se habrán imaginado se encuentran luego del comentario /* :: PROFILE :: */, ahora lo más importante es:

#profile
Controla el ancho de esa página.

#profile h2
Controla los bloques de los subtítulos en tu página del perfil.

#profile-top
controla las propiedades básicas de los campos o bloques en tú perfil.

#userinfo
Controla el primer bloque grande en el perfil en donde se almacenan los datos del usuario.

#userpic
Controla la imagen en el bloque mencionado anteriormente.

#myspots li
Esto controla la lista de tus spotlights. Nótese que aquí se puede cambiar el icono de la estrellita que aparece en los spotlights.

#friendlist li
Esto controla la lista de tus amigos (en la página del perfil no la de los amigos), también se puede cambiar el icono (el monito que sale al lado de tus amigos)


Amigos (Friends)

Nuevamente se encuentran luego del comentario /* :: FRIENDS :: */, ahora lo más importante es:

.myfriend
Controla la apariencia de la celda en donde se encuentra la información de cada uno de tus amigos.

.myfriend h3
Controla la apariencia de los nombres de tus amigos.

.mypic
Controla la apariencia del campo en donde se muestran la imagen de tus amigos.

.myloc, .friendof
Controla la apariencia de la ubicación de tus amigos (locación).

.myfriend blockquote
Controla la apariencia de las citas (quote) de tus amigos (esas frases que algunos de tus amigos escriben y que aparecen a continuación de su ubicación generalmente).

#fnet h3
#fnet2 h3
#fnet3 h3
Controla la apariencia de las celda que muestra la pagina de la red de amigos (friendly network)

.fpic
Contrloa la apariencia de las imagen de tus amigos en la red de amigos (Friendly network).


Vínculos (Links)

Finalmente los vínculos. Luego del comentario /* :: LINKS :: */ se encuentra lo siguiente:

#mylinks
Controla el ancho de la pagina.

#mylinks h2
Controla los subtítulos de los bloques en tu pagina de vínculos.

#mylinks p
Principalmente controla le tamaño de la letra (font-size)usada en la página.

.newsfeed span, .newsfeed a
Controla las fuentes de noticias (newsfeeds).

.url
Controla el color de los vínculos (links).

.linkdesc
Controla la apariencia de la descripción de los vínculos (links description).


Creo que eso sería, ahora analicemos algunas cosas interesantes

Quizás han visto por allí que algunos blogs tienen en el menú en donde aparece Blog, Archive, Friends, Links, etc. con otros nombres y se han preguntado como se hace, la respuesta es simple, esto se puede hacer agregando el siguiente código:

#menu_blog a
{
content: "Escribir aquí el nuevo nombre del menú";
}

Análogamente se hace para los demás menú (de paso compactemos un poco el código):

#menu_archive a
{content: " Escribir aquí el nuevo nombre del menú ";}

#menu_albums a
{content: "Escribir aquí el nuevo nombre del menú";}

#menu_links a
{content: " Escribir aquí el nuevo nombre del menú ";}

#menu_friends a
{content: "Escribir aquí el nuevo nombre del menú";}

#menu_about a
{content: "Escribir aquí el nuevo nombre del menú";}

Como esto es interesante, hagamos un ejemplito:) :

Ejemplo 1: De paso compactemos un poco más y agreguemos algunas cosas.

#menu_blog a { content: "Mi Blog"; font-family:Bitstream Vera Sans; }
#menu_archive a { content: "Anteriores"; font-family:Bitstream Vera Sans; }
#menu_albums a { content: "Fotitos"; font-family:Bitstream Vera Sans; }
#menu_links a { content: "URLs"; font-family:Bitstream Vera Sans; }
#menu_friends a { content: "Amigos"; font-family:Bitstream Vera Sans; }
#menu_about a { content: "Mmm…"; font-family:Bitstream Vera Sans; }

Ahora solo hay un problema con esto, el cual es que ni firefox, ni el súper compatible con los estándar de IE (eso fue una ironía por si alguien no se dio cuenta) muestra los cambios sino que deja los menús como vienen por defecto (o sea blog, archive, Photos, links, friends, about) en cambio opera si los muestra.

Gráficamente se vería así:


Otra cosa interesante es que si bien no podemos modificar completamente el Html de la página, sino sólo el de las entradas del blog (o por lo menos no que yo sepa) podemos hacer cosas interesantes con contenido generado, como podría ser el reemplazar el titulo de "Photo Albums" por "Mis Fotos", claro que esto no lo muestra ni IE ni fierfox pero si Opera

Ejemplo 2:

#albumsheader {
content: " Mis Fotos ";
}

Se vería así:


Lo curioso es que si agregamos los pseudoelementos :before o :after (antes o después respectivamente) los que hacen que se muestre un texto antes o después del texto original, en este caso si los muestra firefox (mejor ni hablar de IE)

Ejemplo 3:

#albumsheader:before {
content: "Mis Fotos / ";
}

Se vería así:


Mejor dejo de desvariar

---

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)