565-897 a 3 columnas

Añadir una menubar a esta plantilla

2010-01-01T17:12:00.004+01:00

Como ves he añadido la menubar a esta plantilla y lo he hecho de forma que siga manteniendo las proporciones que la caracterizan.

Para empezar he aprovechado la zona del crosscol, como vengo haciendo en todos los blogs.
El crosscol es una zona vacía que blogger deja preparada para añadir publicidad.
Como no está definida en el CSS, si no se utiliza no ocupa espacio. Pero podemos definirla y aprovecharla para la barra de menús.

Así que lo primero es añadirle las definiciones.

Entra en tu blog, Diseño/Edición de HTML y NO EXPANDAS ARTILUGIOS.

Si quieres que siga un orden lógico, debajo de las definiciones de la cabecera, o sea, justo encima de /* Posts, añadimos las definiciones del crosscol así:

/*Crosscol
----------------------------------------------*/
#crosscol-wrapper {
background: #ff9900 url("http://www2.blogblog.com/no565/bg_desc_top_$startSide.gif") no-repeat $startSide top;
height:auto;
margin-top:0;
margin-$endSide:0;
margin-bottom:10px;
margin-$startSide:0;
padding-$endSide:0;
padding-bottom:0;
}

Como ves ya he añadido parte del fondo que le dará el mismo aspecto que a la zona de descripción del blog. La otra mitad se la añadiremos en las definiones de la menubar.

¡IMPORTANTE!: Si tu plantilla es la otra, que tiene otros colores, cambia las cifras que hay en las dos direcciónes, en ésta y en la que pondremos luego, o saldría esta barra de ese color.
Has de cambiar la cifra del color, la que empieza con la almohadilla # y la de la dirección, el 565, por la otra el 897.

(Un inciso: Si no vas a usar la zona de descripción de tu blog, ya sea porqué no tiene descripción, ya sea porqué la has añadido a la cabecera en una imagen, puedes eliminar directamente toda la zona de la descripción del blog, eliminando los bloques que hay bajo esto
/* Description ----
hasta el principio de las entradas, o del crosscol. De esta forma evitarás duplicar estas barras de colores.)

Sigamos con la menubar.

Ahora añadiremos dos variables para que los enlaces tengan unos colores propios, añadiendo ésto:

<Variable name="menubarLinkColor" description="Menubar Link Color"
type="color" default="#ffffff" value="#002E3F">
<Variable name="menubarHoverColor" description="Menubar Hover Color"
type="color" default="#ffffff" value="#002E3F">

entre las variables de color ya existentes, por ejemplo: bajo la última que se ve que lleva la palabra color en el name.

Ya definidas las dos variables que van a permitir cambiar el color de los enlaces, tanto en su aspecto normal, como al poner el ratón encima, vamos a definir el estilo de la menubar, añadiendo ésto:

.menubar {
background:url("http://www.blogblog.com/no565/bg_desc_bot_$startSide.gif") no-repeat $startSide bottom;
}
#menubar h2 {
display:none;
}
#menubar ul {
list-style: none;
padding-top: 5px;
padding-$startSide: 150px;
padding-bottom: 5px;
padding-$endSide: 0;
}
#menubar li {
float: left;
}
#menubar a:link, #menubar a:visited {
padding: 5px;
display: block;
color: $menubarLinkColor;
}
#menubar a:hover {
color: $menubarHoverColor;
}

debajo de las del Crosscol.

Como puedes ver, en la primera de las definiciones ya le he añadido la parte de abajo de la imagen que enmarcará los enlaces.

También puedes ver que los enlaces empiezan en la zona naranja, quedando vacía la zona gris.

Esto lo he hecho para evitar que algún enlace quedara a caballo entre las dos zonas, ya que es bastante difícil hacer que encajen perfectamente, pues no puedes separar el primer enlace del segundo con una distancia distinta a la de los demás y si el primero fuera muy largo se saldría del espacio ocupado por la parte más oscura de la izquierda, pues es una sola imagen.

(Si eres un manitas del photoshop y puedes modificar esta zona para dejar solo la franja naranja, podrías hacer que los enlaces empezaran justo al principio. En este caso tendrás que cambiar el padding-$startSide, de #menubar ul, reduciendo el 150 hasta la cantidad que necesites.
Para hacerlo selecciona las direcciones, pégalas en tu navegador, una a una y antes de darle a enter bórrale _$startSide a ambas o te dirá que no se pueden mostrar.)

¡Bien! Colocadas las definiciones de estilo, vamos a añadir el código HTML necesario para que ahí haya una barra de menús.

Para eso baja hasta encontrar ésto:

Debajo verás el código del crosscol. Ha de quedar así:

<div id='crosscol-wrapper' showaddelement='no' style='text-align:center'>
<b:section class='menubar' id='menubar' maxwidgets='1' showaddelement='yes'>
<b:widget id='LinkList10' locked='true' title='Menubar' type='LinkList'/>
</b:section>
</div>

¡ATENCION!

Fíjate que he colocado un 10 remarcado. Es una cifra alta, por si ya tienes listas de enlaces en tu blog, para que no te de error de id duplicada. Pero si sabes o piensas que en tu blog hay ya más de 10 listas de enlaces, cambia ese 10 por un 20 o lo que haga falta.

Llegados a este punto ya podrás hacer vista previa.

Si has seguido mis indicaciones, el blog debería cargar sin ningún problema.

No verás nada, solo la barra naranja vacía. Es normal. Para ver los enlaces tendrás que añadirlos, así que, de momento guarda plantilla y cuando te diga que los cambios se han guardado ya podrás ir a Elementos de la página.
Allí verás la Menubar bajo la cabecera.
Pincha en Editar y añadéle los enlaces que quieras que se vean ahí.
Guarda y los verás.

Una vez colocados podrás modificar el color de los enlaces, si no te gusta el que le he puesto yo.

Recuerda que el color del hover (el que se ve al poner ratón encima del enlace), no se ve en la vista que hay bajo la paleta de colores.
Para ver ese color has de guardar cambios, ver el blog de forma "normal" y si no te convence, volver a cambiárselo.

Una última cosa a tener en cuenta:

Las medidas que he dejado a la menubar, márgenes de los enlaces, etc. puedes verlos distintos al estar en tu blog como administrador/a. Eso es debido a las herramientas de edición del gadget, que ocupan un espacio bajo los enlaces, aunque ahí no haya ningún enlace.
No te preocupes por ello, quien entre a ver tu blog lo verá igual que tu estás viendo éste.

Quitar el número que sale a la izquierda.

2009-11-10T15:39:00.002+01:00

En la cabecera hay 4 módulos.
En el de abajo a la izquierda se ve el número del modelo.

Si quieres quitarlo busca en el código esta parte:

#header .description span {

Verás que en la línea del background hay una dirección entre paréntesis. Bórrala y se eliminará este número.

Vamos a modificarle los colores.

2009-07-26T19:55:00.005+02:00

Esta plantilla tiene algunas dificultades para modificar los colores. Por ejemplo, el blanco del fondo de la zona útil, no se puede dejar completamente de otro color, a menos que dejes en blanco las líneas que separan los 4 espacios que forman la cabecera.

El motivo es que esos 4 espacios están formados por imágenes.
Estas:

Como podeis ver, si os fijais, las dos últimas incluyen una sutil línea naranja que es la que le da el margen redondeado a la línea de ese color, que es donde va la descripción del blog.

Por este motivo, las líneas verticales que separan estas zonas no cambian de color, ya que están incluidas en la imagen.

Por otro lado, los bordes redondeados de las dos columnas laterales también son una imagen, ésta:

Que como podeis comprobar, ya que el fondo de las entradas no es blanco, incluye el marco y un pedacito blanco. Por eso, si le damos un color diferente al fondo blanco, se ve el ángulo blanco en los bordes redondeados.

Pero, como podreis apreciar en este blog, si se pueden cambiar otros colores, e incluso añadir una imagen en ese fondo blanco que alegre un poco la zona.

Para añadir una imagen (te recomiendo que sea una imagen con fondo blanco, del estilo de la que ves aquí), busca esto en el código:

#content-wrapper {

Y modifica la línea del background dejándola así, (fíjate que no solo añades la url, sinó que también has de borrar -color que hay detrás de la palabra background):

background: #fff url(aqui la dirección de la imagen);

En cuanto a colores, aquí he modificado las siguientes zonas:

El fondo de todo del blog, la sombra alrededor de la zona útil, y el borde de dicha zona.

Pero como el código no incluye las variables para hacerlo, las he creado yo misma.

¿Quieres hacerlo? Es muy fácil.

Para empezar añade estas variables, justo encima de todas las que hay:

<Variable name="bgColor" description="Background Color"
type="color" default="#ccddbb" value="#333333">
<Variable name="blogBgColor" description="Blog Background Color"
type="color" default="#ccddbb" value="#e1771e">
<Variable name="borderColor" description="Border Color"
type="color" default="#ccddbb" value="#78B749">

Con la primera cambiaremos el color del fondo del todo.
Con la segunda cambiaremos el color de la sombra.
Con la tercera cambiaremos el color del borde.

(Cuando las añadas, si copias los codigos que te dejo, te saldrán los colores que hay aquí, pero no será problema porqué con ellas podrás modificarlo en fuentes y colores.)

Y ahora vamos a darle las órdenes pertinentes para poder modificarlos en Fuentes y Colores.
Para ello cambiaremos los códigos hexagesimales por códigos de variables, borrando lo que haya del estilo #fff y poniendo la definición correspondiente.
Esto lo haremos en estos sitios: (en rojo lo que añades en lugar del código hexa.)

En body {
background-color: $bgColor;

En #outer-wrapper {
background: $blogBgColor;

En #wrap2 {
border: 1px solid $borderColor;

Con estos cambios podrás cambiar los colores del blog a tu gusto.

Recuerda: Vista previa antes de guardar.

El Layout de estas plantillas

2009-07-26T18:32:00.000+02:00

El Layout es la trasera del blog. Lo que vemos al pinchar en Diseño, en Elementos de la página.

Al ensancharlas, la parte de atrás se descoloca un poco y podemos ver la columna de la derecha bajo las entradas.

Para evitarlo podemos modificar un poco la definición del layout dejándolo así:
(remarco las modificaciones en negrita)

/** Page structure tweaks for layout editor wireframe */
body#layout #outer-wrapper {
margin-top: 0;
width:900px;
}
body#layout #main-wrapper {
width: 400px;
}
body#layout #main-wrapper,
body#layout #sidebar-wrapper,
body#layout #newsidebar-wrapper {
height: auto;
margin-top:0;
padding-top: 10px;
}

Al aumentar su anchura a 900 pixels y decirle que la parte de las entradas, (main), solo tenga 400 píxels de ancho, las 3 columnas caben bien en el espaco disponible.

El padding-top que le he añadido al final, es para que no se monten las 3 columnas en la menubar, si la incluyes.

Como ponerle una segunda sidebar a estos modelos

2009-07-26T16:10:00.001+02:00

¿Quieres hacerlo? ¡Vamos allá! Sigue mis instrucciones paso a paso y saldrá bien.

En esta ocasión te explico los motivos de las modificaciones, en cursiva, para que sepas el porqué de cada paso que darás.

Diseño/Edición de HTML. Asegúrate de que NO está marcado Expandir plantillas de artilugios. Désmarcalo si lo estuviera.

Motivo: Resulta más fácil ver los códigos de la zona del HTML y una vez que empieces a hacer cambios, no podrás desmarcarlo sin guardar o perderías todo lo que hubieses hecho.

Empezaremos la modificación por la zona del CSS. (Negro lo que has de ver, tanto si lo dejarás igual como si lo has de modificar, rojo la modificación que harás, azul lo que añadirás).

1º.- Cambia el ancho (width) de #outer-wrapper { y pon 1020 en lugar de 744

Motivo: Ensanchar el blog para dejar espacio a la segunda sidebar.

2º.- En #main wrapper{
Deja el background así: background: $mainBgColor; borrando todo lo demás pero cuidando de NO borrar el punto y coma del final.

Motivo: Quitar la esquina redondeada de la zona de las entradas, para que el blog tenga un aspecto mejor.

3º.- En #main { modifica la linea de padding para que quede así:
padding:15px 10px 0 10px;

Motivo: que la separación del texto a los laterales sea uniforme.

Modifica el width y déjalo en 475 en lugar de los 460.

Motivo: Que el espacio del blog se reparta equitativamente.

Añade esta línea debajo del float

margin-$startSide: 11px;

Motivo: Que la separación entre columnas sea uniforme.

4º.- Copia enteras estas dos zonas (solo remarco en negrita los encabezados, pero has de copiarlo entero):

#sidebar-wrapper {
background:$sidebarBgColor url("http://www2.blogblog.com/no897/corner_sidebar_$startSide.gif") no-repeat $startSide top;
width:254px;
float:$endSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar {
margin:0;
padding:2px 20px 10px;
}

y pega lo copiado justo debajo mismo.

Motivo: Definir las propiedades de la nueva columna lateral.

5º.- Modifica lo que has pegado para que quede así (remarco en rojo las modificaciones):

#newsidebar-wrapper {
background:$sidebarBgColor url("http://www2.blogblog.com/no897/corner_sidebar_$startSide.gif") no-repeat $startSide top;
width:250px;
float:$startSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#newsidebar {
margin:0;
padding:2px 20px 10px;
}

Motivo: Se añade new para que estas definiciones realmente sean para la nueva columna, cambias la posición del float para que la columna salga al otro lado y cambias el ancho para repartir el espacio.

6º.- En #sidebar-wrapper {

Modifica la dirección del background. El original es así:

background:$sidebarBgColor url("http://www2.blogblog.com/no897/corner_sidebar_$startSide.gif") no-repeat $startSide top;

(El numero variará dependiendo de si se trata de la 897 o de la 565, pero no es importante).

Ha de quedar así:

background:$sidebarBgColor url("http://www2.blogblog.com/no897/corner_sidebar_$endSide.gif") no-repeat $endSide top;

Motivo: Que la esquina redondeada se vea en el otro lado.

Deja el width en 250

Motivo: Que las dos columnas tengan el mismo ancho.

NOTA: Estas 3 medidas que os doy, y que son las que tiene la plantilla que he dejado para que os descargueis son modificables. Podeis hacer más estrechas las columnas laterales y sumarle a la zona de las entradas (main) lo que le hayais restado. Aquí lo he hecho, dejando las dos columnas a 220 y el main a 515.

7º.- En Links

Copia esto

#sidebar a {
color: $sidebarLinkColor;
}
#sidebar a:visited {
color: $sidebarVisitedLinkColor;
}
#sidebar a:hover {
color: $sidebarVisitedLinkColor;
}

Y pégalo justo debajo, modificando lo que acabas de pegar para que quede así:

#newsidebar a {
color: $sidebarLinkColor;
}
#newsidebar a:visited {
color: $sidebarVisitedLinkColor;
}
#newsidebar a:hover {
color: $sidebarVisitedLinkColor;
}

Motivo: Que los enlaces de la nueva sidebar tengan las mismas propiedades que los de la ya existente.

Una vez hecho esto, baja a la zona del HTML y haz lo siguiente.

1º.- Pega esto:

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/>
</b:section>
</div>

Justo encima de esta línea: <div id='main-wrapper'>

Motivo: Crear la nueva sidebar.

2º.- Mira unas lineas más abajo de ésto: <div id='sidebar-wrapper'>

si hay esta línea:

<b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/>

Si está elimínala. (Si le has dado un título distinto al gadget en title pondrá lo que tú hayas puesto).

Motivo: Este widget es el gadget del perfil. En el código que te digo que pegues, este widget ya está. Si no lo eliminaras de la antigua sidebar, te daría error de id repetida.

En este momento ya se puede hacer vista previa y si todo ha ido bien, ya podrás guardar plantilla.