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 4: Barra lateral (Sidebar)
Sidebar, Album slideshow, Calendar, etc

Otra cosa común que tienen la mayoría de los temas es esa barra lateral que contiene cosas como calendario, eso trataremos ahora. Como es costumbre los ejemplitos van al final.


Ancho de la barra lateral (Sidebar Width)

Nuevamente en el main.css hay un comentario que dice: /* :: SIDEBAR :: */ allí esta lo siguiente:

#sidewrap {
width:190px;
float:right;
font-size:11px;
overflow:hidden;
}

Explicación

width:190px;
Controla el ancho en este caso 190 px.

float:right;
La imagen o el texto se mueve a la derecha en el elemento padre.

font-size:11px;
El tamaño de la letra es de 11 px.

overflow:hidden;
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 elemento.

Subtítulos de la barra lateral (Sidebar captions)

#side h2, #side caption {
color:#fff;
background:#3b649c;
font-size:10px;
font-weight:normal;
text-transform:uppercase;
text-align:left;
margin:0 0 1px 0;
padding:2px 0 2px 5px;
}

Explicación
Estas propiedades ya la hemos visto anteriormente, o son obvias, por lo que los revisaremos rápidamente

color:#fff;
Le da al texto el color blanco

background:#3b649c;
Es el color del fondo

font-size:10px;
Le da a las letras el tamaño de 10px.

font-weight:normal;
Fija cómo los caracteres gruesos o finos en el texto deben ser exhibidos. En este caso normal

text-transform:uppercase;
Cambia el texto a mayúsculas (revisen el paso anterior)

text-align:left;
Alinea el texto a la izquierda

margin:0 0 1px 0;
Un margen de 1px en el fondo (El orden es arriba, derecha, fondo, izquierda)

padding:2px 0 2px 5px;
Controla el espacio entre el borde del elemento y el contenido del elemento, en este caso 2 px arriba y abajo, 0 px a la derecha y 5 px a la izquierda (el orden es arriba, derecha, fondo, izquierda)


Otros elementos (Calendar, Album slideshow, Countdowns)

De estos elementos no voy a mencionar ejemplos, pero rápidamente mencionare que hacen los principales ya que las declaraciones son similares a los mencionados anteriormente (line-height, border, padding, text-align, font-size, etc.) y porque tomaría mucho tiempo, así que a ustedes les queda el trabajo de probar con ellos (en otras palabras queda de tarea para la casa), así que búsquenlos en el main.css:


Calendario (Calendar)

Estos elementos están después del comentario /* :: CALENDAR :: */ en el main.css (quizás introduzca un poco del calendario en los ejemplos, pero seria algo muy básico). Los elementos importantes son:

#calendar
Esto controla las preferencias generales cono el ancho, tipo de letra, fondo, etc.

#calendar th
Esto controla los días en la lista de semanas.

#calendar td
Esto controla los números 1 al 31 y los meses

#calendar td a
Esto controla el color de los elementos que tienen vínculos (links).

#calendar td#today
Esto controla las propiedades de la celda en donde se encuentran los números de los días.

#side a#calendarmonth:hover
Esto controla el efecto de cambio de mes en el calendario.


Fotografiás deslizantes(Album slideshow)

Esto se refiere a los álbum de fotos que aparecen en la barra y en donde van cambiando la imagen cada cierto tiempo, como ya habrán adivinado esta luego del comentario /* :: ALBUM SLIDESHOW :: */. Lo mas importante es:

#albumslides
Controla las preferencias generales.

#side #albnav
Esto controla los bordes, fondo y similares .

#control_left, #control_right
Esto controla los elementos que se ubican debajo de las miniaturas.

.albname
Esto controla elementos relacionados con la lista que álbumes que has hecho


Cuentas regresivas (Countdowns)

Se refiere a esas cuentas regresivas que señalan que faltan tantos días para algo.

#side .cdwn
Controla los elementos con respecto a cuentas regresivas


Al fin los ejemplitos:

Ejemplo 1:

#sidewrap {
width:190px;
float:right;
font-size:14px;
color:#666699;
overflow:hidden;
}

#side h2, #side caption {
color:#CC3300;
background:#1811A8;
font-size:12px;
font-weight:normal;
text-align:left;
margin:0 0 1px 0;
padding:2px 0 2px 5px;
}

#calendar {
border-spacing:1px;
clear:both;
margin-bottom:15px;
width:190px;
font-size:20px;
background:#efefed url(/community/graphics/users/1/calendar.gif);
border-bottom:1px solid #dbdbd5;
}

#calendar th {
font-size:20px;
line-height:18px;
height:18px;
text-align:center;
}

Se vería así


Ejemplo2:

#sidewrap {
width:190px;
float:right;
font-size:14px;
color:#666699;
overflow:hidden;
}

#side h2, #side caption {
color:#fff;
background:#CC3300;
font-size:20px;
font-weight:normal;
text-transform:uppercase;
text-align:left;
margin:0 0 1px 0;
padding:2px 0 2px 5px;
}

#calendar {
color:#666666;
border-spacing:1px;
clear:both;
margin-bottom:15px;
width:190px;
font-size:10px;
font-family:'Georgia',arial,helvetica,sans-serif;
background:#efefed url(/community/graphics/users/1/calendar.gif);
border-bottom:1px solid #dbdbd5;
}

#calendar th {
font-size:20px;
line-height:18px;
height:18px;
text-align:center;
}

Se vería así:

---

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)