- Desde
- 27 Nov 2013
- Mensajes
- 26
Hola. Tengo un blog (geogebra-bloga.blogspot.com.es) desde hace más de un año y no ha sido hasta hace poco cuando me he animado a meterle mano a la plantilla, editar el HTML, etc. Mi blog tiene un ancho de 1600px y la barra lateral tiene 250px. Lo que quiero es que el blog se adapte automaticamente a la resolución de la pantalla del usurio. He mirado tutoriales para saber qué parte del código he de editar y sé que hay que hacerlo por porcentajes pero parece que todos los tutoriales que ví hacen referencia a plantillas antiguas de blogger. La parte del código que creo que tengo que editar es la siguiente:
<b:template-skin>
<b:variable default='960px' name='content.width' type='length' value='1600px'/>
<b:variable default='0' name='main.column.left.width' type='length' value='0px'/>
<b:variable default='310px' name='main.column.right.width' type='length' value='250px'/>
<![CDATA[
body {
min-width: $(content.width);
}
.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: $(content.width);
max-width: $(content.width);
_width: $(content.width);
}
.main-inner .columns {
padding-left: $(main.column.left.width);
padding-right: $(main.column.right.width);
}
.main-inner .fauxcolumn-center-outer {
left: $(main.column.left.width);
right: $(main.column.right.width);
/* IE6 does not respect left and right together */
_width: expression(this.parentNode.offsetWidth -
parseInt("$(main.column.left.width)") -
parseInt("$(main.column.right.width)") + 'px');
}
.main-inner .fauxcolumn-left-outer {
width: $(main.column.left.width);
}
.main-inner .fauxcolumn-right-outer {
width: $(main.column.right.width);
}
.main-inner .column-left-outer {
width: $(main.column.left.width);
right: 100%;
margin-left: -$(main.column.left.width);
}
.main-inner .column-right-outer {
width: $(main.column.right.width);
margin-right: -$(main.column.right.width);
}
#layout {
min-width: 0;
}
#layout .content-outer {
min-width: 0;
width: 800px;
}
#layout .region-inner {
min-width: 0;
width: auto;
}
]]>
Donde pone $(content.width) escribo 100%
Donde pone $(main.column.right.width) escribo 15%
¿Hasta aquí voy bien?
No sé qué más he de cambiar. He hecho varias pruebas y en una casi queda como yo quiero: ocupando toda la pantalla y sin un gran espacio libre a la derecha (ver blog)
Me va a reventar la cabeza. ¿Me puede alguien, por favor, ayudar? Gracias de antemano.
<b:template-skin>
<b:variable default='960px' name='content.width' type='length' value='1600px'/>
<b:variable default='0' name='main.column.left.width' type='length' value='0px'/>
<b:variable default='310px' name='main.column.right.width' type='length' value='250px'/>
<![CDATA[
body {
min-width: $(content.width);
}
.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: $(content.width);
max-width: $(content.width);
_width: $(content.width);
}
.main-inner .columns {
padding-left: $(main.column.left.width);
padding-right: $(main.column.right.width);
}
.main-inner .fauxcolumn-center-outer {
left: $(main.column.left.width);
right: $(main.column.right.width);
/* IE6 does not respect left and right together */
_width: expression(this.parentNode.offsetWidth -
parseInt("$(main.column.left.width)") -
parseInt("$(main.column.right.width)") + 'px');
}
.main-inner .fauxcolumn-left-outer {
width: $(main.column.left.width);
}
.main-inner .fauxcolumn-right-outer {
width: $(main.column.right.width);
}
.main-inner .column-left-outer {
width: $(main.column.left.width);
right: 100%;
margin-left: -$(main.column.left.width);
}
.main-inner .column-right-outer {
width: $(main.column.right.width);
margin-right: -$(main.column.right.width);
}
#layout {
min-width: 0;
}
#layout .content-outer {
min-width: 0;
width: 800px;
}
#layout .region-inner {
min-width: 0;
width: auto;
}
]]>
Donde pone $(content.width) escribo 100%
Donde pone $(main.column.right.width) escribo 15%
¿Hasta aquí voy bien?
No sé qué más he de cambiar. He hecho varias pruebas y en una casi queda como yo quiero: ocupando toda la pantalla y sin un gran espacio libre a la derecha (ver blog)
Me va a reventar la cabeza. ¿Me puede alguien, por favor, ayudar? Gracias de antemano.
Última edición:
