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)