1. Despejamos cualquier gadget que tengamos en el footer y lo colocamos en la sidebar temporalmente mientras trabajamos con la plantilla.
2. Diseño>Edición de HTML>sin expandir artilugios
3. Control+F y buscamos hacia el final...
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
Atención:
El código a modificar podría ser también algo similar a...
<b:section class='footer' id='footer'>
</b:section>
4. Dependiendo de la plantilla usamos, podría cambiar el código a buscar ("footer" o "footer-wrapper"). Se ha de cambiar la línea en negrita por el código:
<div id='footer-columna-contenedor'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
<p>
<hr align='center' color='#6633FF' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text20' locked='false' title='' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>
5. Añadimos unas líneas de CSS para controlar la separación de las columnas. Pegamos estas líneas antes de ]]></b:skin>
#footer-columna-contenedor {
clear:both;
}
.footer-columna {
padding: 10px;
}
6. Guardar.
7. Volver a colocar los elementos cambiados anteriormente en la sidebar al footer.
8. En el código anterior se incluye una línea de separación entre las tres columnas y el footer "antiguo" de color azul.
El código que la muestra es:
<hr align='center' color='#5d5d54' width='90%'/>
Nota:
Se puede modificar el color de la línea o eliminar directamente del código.
Diseño de las columnas
Se añade CSS para personalizar las columnas...
1. Si nos fijamos en el código añadido para mostrar las columnas, veremos que cada una de ellas tiene una id propia: id='col1', id='col2',id='col3'
Usaremos esa id para modificar su aspecto.
- Diseño>Edición de HTML>sin expandir artilugios
- Control+F y buscamos ]]></b:skin>
- Encima de ]]></b:skin> colocamos:
#col1{
background:#fff;
margin: 5px;
padding: 5px;
border: 2px outset #b2b2ff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
#col1 h2{
margin: 0.0em 0 .5em;
padding: 4px 3px;
border: 0px outset #236C95;
background: #a6c4e1 ;
text-align: center;
font-size: 90%;
color:#fff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
#col2{
background:#fff;
margin: 5px;
padding: 5px;
border: 2px outset #b2b2ff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
#col2 h2{
margin: 0.0em 0 .5em;
padding: 4px 3px;
border: 0px outset #236C95;
background: #a6c4e1 ;
text-align: center;
font-size: 90%;
color:#fff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
#col3{
background:#fff;
margin: 5px;
padding: 5px;
border: 2px outset #b2b2ff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
#col3 h2{
margin: 0.0em 0 .5em;
padding: 4px 3px;
border: 0px outset #236C95;
background: #a6c4e1 ;
text-align: center;
font-size: 90%;
color:#fff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
2. #col1, #col2 y #col3 controla el aspecto de cada columna.
#col1 h2, #col2 h2 y #col3 h2 se controla el título de los elementos que se coloquen en las columnas.
Los CSS hay que adecuarlos a cada cual poco a poco... border, text-aling, font-size; prueba y error.
