Colocar 3 columnas bajo la cabecera 【header】 - Crosscol

ESTA PUBLICACIÓN HA SIDO CERRADA, PASE POR FAVOR A LA ACTUALIZACIÓN DE ESTA → {X}

Si deseas colocar 3 columnas debajo de la cabecera, osea la sección crosscol, sigue los siguientes pasos.

Descarga una copia de tu plantilla, sólo por precaución.

PRIMERO: Vamos a 'Diseño → Plantilla → Edición de HTML → Continuar' y buscamos (Ctrl + F):
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
Nos aparecerá esto:

---

<div id='crosscol-wrapper' style='text-align:center'>

<b:section class='crosscol' id='crosscol' showaddelement='no'/>

</div>

---

SEGUNDO: Sustituimos todo el código en color rosado por:

---

<div id='crosscol-wrapper' style='text-align:center'>

<div style='clear:both;'/>

<div id='crosscol-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>

<b:section class='crosscol' id='crosscol-bottom' preferred='yes'>

<b:widget id='Text3' locked='false' title='' type='Text'/>

</b:section>

</div>

       <div id='crosscol-columna-contenedor'>

<div id='crosscol2' style='width: 30%; float: left; margin:0; text-align: center;'>

<b:section class='crosscol-column' id='crol1' preferred='yes' style='float:left;'/>

</div>

<div id='crosscol3' style='width: 40%; float: left; margin:0; text-align: center;'>

<b:section class='crosscol-column' id='crol2' preferred='yes' style='float:left;'/>

</div>

<div id='crosscol4' style='width: 30%; float: right; margin:0; text-align: center;'>

<b:section class='crosscol-column' id='crol3' preferred='yes' style='float:right;'/>

</div>

<div style='clear:both;'/>

</div>

      </div>

---

TERCERO: Ahora buscamos: ]]></b:skin> y antes de este pegaremos el siguiente código:

---

#crol1{

background:#fff;

margin: 5px;

padding: 5px;

border: 1px solid #60A9D1;

}

#crol2{

background:#fff;

margin: 5px;

padding: 5px;

border: 1px solid #60A9D1;

}

#crol3{

background:#fff;

margin: 5px;

padding: 5px;

border: 1px solid #60A9D1;

}

#crosscol-columna-contenedor {

clear:both;

}

.crosscol-columna {

padding: 10px;

}

---

Le damos clic en 'Vista previa' y, si abre sin problemas le damos clic a 'Guarda plantilla'.

CUARTO Y ULTIMO: Vamos a 'Diseño' y listo! Se han agregado 3 columnas nuevas debajo del header.

Nota:

- Para modificar el color del fondo solo debemos sustituir el códígo '#fff' de background:#fff; por otro código HTML. #fff ó #ffffff es color blanco.

- Para modificr los bordes, dos cosas. Primero, si no quieres los bordes sustituyes el código '1px' de border: 1px solid #60A9D1; por '0'. Segundo, si lo que gustas es quedarte con los bordes y solo cambiarles el color; cambia el código '#60A9D1' de border: 1px solid #60A9D1; por otro.

- Una última cosa MUY IMPORTANTE! No todas las plantillas poseen el código crosscol, si la tuya es una de ellas has lo siguiente. Olvida el paso (1) e iniciemos por el (2), copia el código del SEGUNDO paso y pégalo antes de <div id='main-wrapper'> Y seguimos con el proceso, TERCERO Y CUARTO paso.

Es todo ＼(・｀(ｪ)・)/  muy fácil ¿Verdad?

Cualquier duda házmela saber. Espero que les sirva.

*Créditos de tutorial: El escaparate de Rosa