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