Wednesday, 2. August 2006, 16:20:00
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 tituloEsto 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:hiddenLa 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: 30pxEsto 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:normalEsta propiedad controla la distancia entre líneas, que en este caso en normal.
padding-top:22pxEsta propiedad controla el relleno en el espacio superior (top padding) de un elemento.
Pasemos a lo siguiente:
Texto del subtituloEs bastante similar el texto del titulo, esta controlado por:
#subtitle {
margin:0;
font-size:12px;
width:100%;
overflow:hidden;
}
Explicación:margin:0Tal como deben pensar esto le da un margen alrededor del elemento de 0
font-size:12pxpor 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:hiddenNuevamente 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:116pxControla la altura del elemento. En este caso la altura es de 116 píxeles.
padding-left:15pxControla 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-xControla 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:bothNingun 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.gifSuficientes explicaciones, pasemos a los ejemplitos:Ejemplo 1Usaremos 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 puenteY se veria asi.
Como es costumbre, el segundo ejemplo
Ejemplo 2Usaremos 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 palmeraY 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 previasPaso 1: Elementos del cuerpo (Body)Body, Font-Size, Font-Family, Color
Paso 2: Elementos del tituloTitle, Subtitle, Header picture, Menu background, etc.
Paso 3: Elementos del BlogPost title, Sticky post, Post date
Paso 4: Barra lateral (Sidebar)Sidebar, Album slideshow, Calendar, etc.
Paso 5: Otras cosas de My.OperaProfile, Friends, Links, etc.
Paso 6: Las ultimas cosas que nos quedanEl 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 HTMLcolor schemer(Para ver y generar colores y su código, En Inglés)
Introducción al CSSCSS in Action (En Inglés)
¡CSS en acción! y tutorialManual de Hojas de Estilo CSSManual de CSS, hojas de estiloDefinición del estándar CSS en W3C.org (En Inglés)
Traducción especificación CSS1 al castellanoTraducción especificación CSS2 al castellano y los
cambios del CSS2 con respecto a CSS1Servicio de Validación de CSSPimp My Blog: Reloaded! (En Inglés)
Redesigning My.Opera space tutorial (En Inglés)
) 
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
los ejemplitos:
WIDGETIZE