Novedad

2008-05-12T14:03:00.003+02:00

Como puedes ver en este modelo, le he cambiado un par de cosas. Por un lado le he añadido una nueva variable para diferenciar los bordes internos de los externos en los elementos de las columnas laterales y en las entradas.

Los modelos anteriores no disponían de esta variable, así que si te gusta alguno de aquellos modelos pero quieres que tenga los bordes distintos, puedes añadírsela.

En el blog de muestras de bordes puedes ver como hacerlo y donde colocar cada orden para que salga bien.

También puedes ver que la zona de las entradas está al mismo nivel que las dos sidebars.
Esto se consigue añadiendo a #main { esta línea:
margin-top: 0; debajo o encima de la que dice margin: 10px;

Si usas Firefox, verás que las tres columnas quedan pegadas a la menubar.
Si no te gusta así, en lugar de 0 pones 2px o 3 px o la cantidad que quieras, pero no te pases o en Explorer se verá mucha distancia entre ellos.

Y también le añades esta línea: margin-top: 2px; (o la cantidad que le hayas puesto a main) en
#sidebar { y en #newsidebar{
y verás como las tres columnas bajan a la vez.

Vista previa para asegurarte de que todo es correcto y ya puedes guardar.

Plantilla scribe de 3 columnas

2008-03-16T17:00:00.006+01:00

Esta es la plantilla scribe con 3 columnas que has podido ver en Ideas para plantillas.
Como ves tiene bastantes modificaciones.
Si quieres convertir tu propia plantilla en algo semejante a esta solo has de seguir estas instrucciones (en rojo lo que existe, en azul lo que agregas, en verde los datos que puedes cambiar a tu gusto).
A tener en cuenta:
He añadido algunas variables para poder hacer algunos cambios desde Fuentes y colores. Remarco en violeta las órdenes basadas en ellas.
Otra cosa a tener en cuenta: Si tu plantilla no usa lo de $startSide y $endSide, en su lugar has de poner left o right.
---
Ante todo has de modificar la plantilla para añadirle la nueva sidebar.
Ayer ya dejé las instrucciones para hacerlo en Tuneando la scribe, así que no voy a repetirlas aquí. Si pinchas en este enlace verás como hacer esta modificación.
Una vez modificada, si quieres que tu blog se parezca a este, o quieres aprovechar alguna de las instrucciones de aquí, adelante, como diría alguien: "¡Barra libre!" así que vamos a ver qué cambios he hecho una vez modificadas las columnas.
---
La cabecera.
Agregándole un background a .Header { puedes ponerle un color o una imagen de fondo, agregándole un border puedes enmarcarla.
Para centrar los títulos agregas text-aling:center; a h1 { para el título y a .Header .description { para el subtítulo.
En ambos sitios deja el margin en 10px para separarlo del borde.
---
Para enmarcar las entradas:
Si en #main { añades border se enmarca toda la columna de las entradas.
Has de variar un poco las medidas para que las entradas no se vean pegadas al borde y dejar estos datos así:
border: 6px ridge $borderColor;
float:$startSide;
padding:8px 0;
padding-$startSide: 10px;
margin:10px;

Si la añades a .post { se enmarca solo la entrada (sin la fecha) pero también has de variar un poco las medidas y dejarlo así:
border: 3px ridge $borderColor;
margin-top:8px;
margin-$endSide:8px;
margin-bottom:24px;
margin-$startSide:0;
padding: 5px;
---
Si los dejas los dos quedan las entradas enmarcadas dentro del marco general como ves aquí.
El mismo sistema sirve para enmarcar las columnas laterales.
Poniendo marco y fondo (background) en #sidebar-wrapper y #newsidebar-wrapper.
aunque para que la columna de la derecha no se caiga has de poner el ancho (width) de main en 400px.
---
Los fondos.
En esta puedes ver que he logrado que los elementos parezcan estar sobre el fondo, separados de su contenedor.
El fondo del todo:
En body { he cambiado la dirección existente por la de mi imagen, he añadido fixed para que no se mueva y he eliminado el color.
El fondo de la zona útil:
He borrado el background que hay en estos tres bloques: #main-top { #main-bot { y #wrap2 {
En #outer-wrapper { he cambiado la línea del background por esta:
background: url("la direccion de la imagen");
y le he añadido el borde
border:9px ridge $borderColor;
después de borrar las dos líneas de borde que hay, para que el mio enmarque la zona por los cuatro costados, pues al haber escondido la navbar queda mejor.
La zona de las entradas:
Como ya había enmarcado esta zona en #main { he añadido background:url("direccion") repeat; para que aparezca la imagen del fondo .
Después en .post { he añadido el background, para el que he creado la variable correspondiente (bgColor) y he modificado las medidas para despegar las letras del borde. Con todo esto el blogue ha quedado así:
background:$bgColor;
border: 3px ridge $borderColor;
margin-top:8px;
margin-$endSide:8px;
margin-bottom:24px;
margin-$startSide:0;
padding: 5px;
---
El pie del post
Al añadir la variable para el color del borde, puedes cambiar también el color de la línea que separa la entrada del pie del post.
Por otro lado el post footer tiene un defecto, su fuente es fija. Así que si le creas una variable, el sistema es tan sencillo como copiar y pegar una cualquiera de las Variable name tipo Font y cambiarle el nombre que tenga por postFooterFont/Post Footer Font (fíjate que está en dos sitios y luego dejar el post footer así
font:$postFooterFont;
border-top:1px solid $borderColor;
padding-top:6px;
le he añadido el padding-top porqué quedaba muy pegado a la línea de separación.
Para ponerle iconos al pie del post, has de añadir esto en la zona del post footer, justo encima de .post ul {
.post-labels {
padding-left:20px;
padding-top:5px;
background:transparent url(dirección del icono) center left no-repeat;
}
.post-author {
padding-left:20px;
padding-top:5px;
background: url(dirección del icono) center left no-repeat;
}
---
Los elementos de las columnas laterales.
Aquí has de añadir el background-color: $bgColor; y el borde en .sidebar .widget { y poner el padding en 4px para despegar del borde el contenido del elemento.
---
El pie de página
Le he quitado el divisor al #footer { borrando la línea de la dirección y añadido fondo y borde.
Si pones una dirección de otra imagen en su lugar, se verá como aquí, pero cuidado, porqué se repite.
Código sin imagen
background-color: $bgColor;
border: 10px ridge $borderColor;
Con imagen
background: url("direccion de la imagen");
border: 10px ridge $borderColor;
---
También le he puesto una menubar, y las variables para modificarla desde Fuentes y colores.
En Tuneando la scribe está el código y la forma de colocarla.
---
Variables añadidas
Boton Menubar Color, Boton Menubar Background Color, Hover Link Color, Post Footer Color, Border Color y Background Color.
---

scribe 3 columnas

Novedad

Plantilla scribe de 3 columnas