En esta entrada les voy a explicar como hacer responsive de forma sencilla y fácilmente una plantilla de las viejas de blogger, aunque en el panel de plantillas vienen siete diferentes estos cambios son validos para cualquiera de éllas, en primer lugar nos vamos a la plantilla y en editar HTML vamos a localizar justo después del <head> las siguientes lineas y vamos a modificarlas.
Si el blog no es nuevo ¡hacer copia de seguridad de la plantilla!
Lo que esta en verde lo vamos a dejar así:
En el widget Header1 localizaremos lo siguiente, y ponemos lo que esta en rojo, esto es para que la imagen de cabecera se vea correctamente, si no ponemos imagen podemos omitir este paso.
<img expr:src='data:sourceUrl' style='visibility:hidden;width: 100%;height: auto;'/>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
Con esto el HTML no haría falta tocar mas, ahora toca la parte del CSS pero solo lo que esta dentro de las etiquetas <b:template-skin>.......</b:template:skin> como esta tarea es un poco compleja lo dejo todo modificado listo para insertar, vamos allá, copiáis todo el siguiente bloque de CSS de una vez y lo pegáis en la plantilla del vuestro.
body {
_width: $(content.width);
max-width:100%;
}
.content-outer, .content-fauxcolumn-outer, .region-inner {
_width: $(content.width);
width: 1500px;
max-width:100%;
}
.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');
max-width:100%;
}
.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: auto;
}
#layout .region-inner {
min-width: 0;
width: auto;
}
body#layout div.add_widget {
padding: 8px;
}
body#layout div.add_widget a {
margin-left: 32px;
}
#header-inner{
width: 100% !important;
height: auto;
min-height: 0 !important;
background-position: center !important;
margin-left: auto;
margin-right: auto;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
}
#header img {
width: 100% !important;
height: auto;
margin-left: auto;
margin-right: auto;
}
.titlewrapper {
position: absolute;
top: 10px;
left: 0;
right: 0;
margin: auto;
}
.post-footer {
overflow: hidden;
}
]]>
Para especificar un poco lo anterior téngase en cuenta lo siguiente
- El de fondo rosa es lo que hay que añadir para una correcta visualización de la cabecera, si no se pone imagen hay que cambiar .titlewrapper {position: absolute; a relative
- Los trozos con fondo amarillo son los que están modificados
Con esto nuestra plantilla se ajustará a todos los anchos de pantalla, pero con esto no es suficiente, en pantallas pequeñas necesitamos hacer una recolocación de los contenidos para facilitar su lectura, cuando tengamos una pantalla menor de 1000 px las columnas laterales pasaran a la parte de abajo situándose una al lado de otra ocupando el 50% del espacio cada una (Valor azul en el siguiente código, si solo es una columna ponerlo al 100%), cuando el ancho es menor de 500 px si tenemos dos columnas se nos quedarían muy pequeñas y necesitamos recolocar de nuevo los contenidos, y quien nos va a hacer todo eso es el CSS siguiente que ira colocado a continuación del anterior justo por encima de ]]>
@media screen and (max-width:1000px){
.main-inner .columns {
width: 70%;
padding-right: 15%;
padding-left: 15%;
}
.main-inner .column-left-outer{
right: 0;
width: 50%;
float: right;
clear: both;
padding-top: 20px;
}
.main-inner .column-right-outer {
width: 50%;
padding-top: 20px;
}
}
@media screen and (max-width:800px) {
.content-outer, .content-fauxcolumn-outer, .region-inner{
margin: 0;
}
.main-inner .columns {
width: 100%;
padding:0;
}
.titlewrapper h1{
font-size: 250%;
}
}
@media screen and (max-width:650px){
.post-body img{
width: 85%;
float: none !important;
}
}
@media screen and (max-width:600px) {
table.columns-3 td.columns-cell, table.columns-2 td.columns-cell{
width: 100%;
float: left;
}
}
@media screen and (max-width:500px) {
.content-outer, .content-fauxcolumn-outer, .region-inner{
margin: 0;
clear: both;
right: 0;
}
.main-inner .column-left-outer, .main-inner .column-right-outer {
width: 100%;
clear: both;
}
.column-center-outer{
width: 100%;
right: 0;
}
.main-inner .column-center-inner{
margin-top: 0;
}
.main-inner .widget .widget-content {
margin: 0;
padding: 0;
}
.reactions-iframe{
height: 70px;
}
#blog-pager{
display: flex;
}
}
Después de hacer todo esto ya tendremos nuestra plantilla adaptable a todos los dispositivos , la plantilla de móviles tiene que estar deshabilitada no se necesita.
A veces las imágenes que estén en las entradas anteriormente por los estilos que tengan puede que se ajusten a lo ancho y a alto no tomen la medida correcta, en este caso antes del cierre de </body> ponemos este trozo de CSS
.post-body img{
height : auto;
}
</style>
Si no quieres complicarte puedes descargarla aqui la plantilla completa ya modificada.
Comentarios
Publicar un comentario