Header AD

Cambio de columna


Es decir: que he quitado la columna "sidebar2" que se veía a la izquierda de las Entradas, al lado de los "Links" y demás... y he creado una nueva columna "newsidebar" a la derecha, donde he colocado el contenido de la otra: los comentarios y el archivo del blog.
Y ya cuento mañana cómo, porque ha sido facilísimo... hasta que me he tenido que poner a cambiar anchos y paddings y gaitas... "vista previa" va... "vista previa" viene... qué mareo...



...

Sigo:

1º.- Fuí a Edición de Plantilla, la expandí y comencé por el CSS (cada quien tiene sus manías), añadiendo mi nueva sidebar. Y como era nueva y las plantillas no "entienden" el español, pues le puse de nombre "newsidebar" y la hice flotar a la derecha, que es donde quería que se viera:



#newsidebar-wrapper {

width: ¿?px;
text-align: right;
float: right;
background:lightblue;
border-right: solid 4px darkblue;
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 */

}



Es decir: la configuración general, la misma que otras sidebar... sólo que cambiando el nombre y el "float"... si la hubiera querido a la izquierda, habría sido float: left;. En cuanto al ancho, pongo unas interrogaciones, porque ésto ha de cambiarlo cada quien a la medida de su plantilla.

También le añadí color de fondo: background: lightblue;
y márgen a la derecha: border-right : solid 4 px darkblue.
Podéis cambiar el borde contínuo, por uno discontínuo- de puntitos-, como el que tengo "encerrando" las entradas, con sólo cambiar "solid" por "dotted". En cuanto a los píxeles, dependiendo de si lo queréis más o menos grueso, cambiáis el número.
Y el color, claro, cada quien elige el suyo.

2º.- Crear la sidebar y elegir el sitio donde insertarla.
He escogido ponerla en la cima del blog, bajo el título y al lado de las entradas. De forma que, para que saliera justo ahí donde quería, inserté el "div" entre el "content-wrapper" y el "main-wrapper. Así:





<div id='content-wrapper'>

<div id='newsidebar-wrapper'>



<b:section class='sidebar' id='newsidebar' maxwidgets='20' showaddelement='yes'>

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

<b:includable id='main'>



</b:includable>

</b:widget>

</b:section>

</div>





<div id='main-wrapper'>



Poned los "maxiwidgets" al número que os venga bien... yo suelo poner unos cuantos de más siempre, jajajaaa...por que no sé la de chismes que voy a andar metiendo en la plantilla de mi blog. Total, en cualquier momento podéis cambiarlo, aumentando o suprimiendo.

Y ahora viene lo bueno... echad una mirada a vuestro blog desde "vista previa" y ya podéis salir corriendo al CSS para cambiar los anchos. Lo más fácil es acudir al "outer-wrapper", bajo las "Variable definitions", y darle la suma del ancho de todas las sidebar, widebar y "main" del blog. Pero... a veces no funciona así... y no queda otro remedio que andar quitando y poniendo anchos "a ojo" hasta que todo se ve más o menos en su sitio desde "Vista Previa".
Esta es la parte tediosa y de verdadero trabajo, pues.

Cuando terminéis de ajustar la plantilla y la veais estupenda en "Vista Previa", podéis guardar y mirar en Diseño de Plantilla: os habrá "aparecido" a la derecha de las Entradas del Blog una preciosísima sidebar con su "Añadir Elemento de Página".

Si queréis la sidebar en otro sitio... pues cambiadla de nombre y lugar. Podéis ponerle de nombre, p.e. "sidebar2" y darle el estilo CSS, para luego colocarla donde más os guste...
Si queréis que aparezca bajo una sidebar que ya tenéis en el blog, pues insertad el "div" justo debajo del fín de esa sidebar ... en fín: la imaginación es libre.

post-Firma

Cambio de columna Cambio de columna Reviewed by Pilar Lozano Santos on 4:49:00 Rating: 5

No hay comentarios

Post AD