Buen día de jueves lavanderos!!!
Poco a poco volvemos a la normalidad en el blog, qué contenta estoy. Hoy vamos a ver una cosa que a mí me resulta muy útil y que es perfecto para darle un toque diferente a nuestro blog; vamos a aprender a cambiar el estilo de nuestras páginas estáticas.
Es un tutorial muy sencillo y rápido, y si además sabéis algo de programación seguro que le sacáis un montón de partido. Así que vamos a por ello!
Para este tutorial va a ser necesario tocar nuestra plantilla HTML (recordad hacer copia de seguridad!), así que vamos a Plantilla → Editar HTML y buscamos lo siguiente:
</head>
Entonces justo arriba pegamos el siguiente código:
<!----------- ESTILO PÁGINAS ESTÁTICAS -------------><b:if cond='data:blog.pageType == "static_page"'><style type='text/css'>Aquí escribiremos nuestro nuevo estilo</style></b:if>
<!-------- FIN ESTILO PÁGINAS ESTÁTICAS ---------->
Esto significa que todo lo que pongamos dentro de la etiqueta style sólo va a afectar a las páginas estáticas y que no nos tenemos que preocupar de que los cambios afecten a cualquier otra zona de nuestro blog.
Lo que está en verdecito es un comentario, para que luego nos sea más fácil localizar esa parte del código en el plantilla.
PARA OCULTAR COSASOcultar cosas usando CSS es ultra fácil, sólo tenemos que conocer el identificador (o clase) del elemento. Yo os voy a dejar lo que considero que os puede ser más útil, aunque como ya he dicho, si conocéis un poco la programación de blogger podréis hacer cualquier cambio. Cualquiera de estos cambios se hace sustituyendo lo que está en azul.
OCULTAR EL TÍTULO
.post-title{ /*Hacemos referencia al título*/
display:none; /*Usamos esta línea para ocultarlo*/
}
OCULTAR EL PIE DE POST
.post-footer{ /*Hacemos referencia al título*/
display:none; /*Usamos esta línea para ocultarlo*/
}
OCULTAR LOS COMENTARIOS
Y de esta forma no tener que andar haciéndolo en cada página.
.comments{ /*Hacemos referencia al título*/
display:none; /*Usamos esta línea para ocultarlo*/
}
Por tanto todo reunido nos quedaría tal que así:
<!----------- ESTILO PÁGINAS ESTÁTICAS ------------->
<b:if cond='data:blog.pageType == "static_page"'><style type='text/css'>
.post-title{
display:none;
}
.post-footer{
display:none;
}
.comments{
display:none;
}
</style></b:if>
<!-------- FIN ESTILO PÁGINAS ESTÁTICAS ---------->
PARA OCULTAR EL SIDEBAROcultar el sidebar no es tan sencillo como poner .sidebar{display:none;} Si hiciéramos esto, el sidebar no se vería pero la página estática no ocuparía todo el ancho del blog. Por eso es que debemos poner esto:
.main-inner .columns {
padding-left: 0px !important;
padding-right: 0px !important;
}
.main-inner .fauxcolumn-center-outer {
left: 0px !important;
right: 0px !important;
}
.main-inner .fauxcolumn-left-outer, .main-inner .fauxcolumn-right-outer, .main-inner .column-left-outer, .main-inner .column-right-outer {
display: none !important;
}
De forma que el código quedaría de la siguiente forma:
<!----------- ESTILO PÁGINAS ESTÁTICAS ------------->
<b:if cond='data:blog.pageType == "static_page"'><style type='text/css'>
.main-inner .columns {
padding-left: 0px !important;
padding-right: 0px !important;
}
.main-inner .fauxcolumn-center-outer {
left: 0px !important;
right: 0px !important;
}
.main-inner .fauxcolumn-left-outer, .main-inner .fauxcolumn-right-outer, .main-inner .column-left-outer, .main-inner .column-right-outer {
display: none !important;
}
</style></b:if>
<!-------- FIN ESTILO PÁGINAS ESTÁTICAS ---------->
PARA MODIFICAR COSASAquí tenemos un sin fin de posibilidades, os voy a dejar un montón de ejemplos y luego vosotros cacharread para dejar vuestras páginas estáticas bien bonitas ;) Ya sabéis que todo lo que os marco con color es lo que podéis modificar y que si algún cambio no queréis hacer, borráis esa línea y pista ;)
MODIFICAR EL CONTENIDO EN GENERAL
.post{
font: normal normal 13px Cambria; /*Tamaño y tipografía del texto*/
background-color: #eeeeee; /*Color de fondo de la página*/
border: 1px solid #333333; /*Estilo del borde de la página*/
padding:7px; /*Si ponéis color de fondo o borde es conveniente usar esta línea para que el texto no quede pegado al margen*/
}
MODIFICAR EL TÍTULO
h3.post-title{
font: normal normal 20px Arial; /*Tamaño y tipografía del título*/
text-transform:uppercase; /*Para que esté en mayúsculas*/
text-align:center; /*Para que quede en el centro; si lo queréis a la derecha → right y a la izquierda → left*/
letter-spacing:2px; /*Espaciado entre caracteres*/
border:1px solid #333333; /*Estilo del borde del título*/
background-color:#eeeeee; /*Color de fondo del título*/
}
MODIFICAR EL PIE DE POST
.post-footer{
font: normal normal 13px Cambria; /*Tamaño y tipografía del texto del pie de post*/
text-transform:uppercase; /*Para que esté en mayúsculas*/
border:none; /*Si ya teníais un borde y lo queréis cambiar poned esto antes de definir el nuevo estilo para el borde*/
border:1px solid #333333; /*Estilo del borde del pie de post*/
background-color:#eeeeee; /*Color de fondo del pie de post*/
}
Y todo esto llevado a nuestro código sería tal que así:
<!----------- ESTILO PÁGINAS ESTÁTICAS ------------->
<b:if cond='data:blog.pageType == "static_page"'><style type='text/css'>
.post{
font: normal normal 13px Cambria;
background-color: #eeeeee;
border: 1px solid #333333;
padding:7px;
}
h3.post-title{
font: normal normal 20px Arial;
text-transform:uppercase;
text-align:center;
letter-spacing:2px;
border:1px solid #333333;
background-color:#eeeeee;
}
.post-footer{
font: normal normal 13px Cambria;
text-transform:uppercase;
border:none;
border:1px solid #333333;
background-color:#eeeeee;
}
</style></b:if><!-------- FIN ESTILO PÁGINAS ESTÁTICAS ---------->
* NOTA: como sabéis, el estilo para definir un borde (border:1px solid #333333;) se puede dividir en 4, por si sólo queréis que aparezcan uno, dos o tres bordes:
border-top:1px solid #333333; /*Superior*/
border-bottom:1px solid #333333; /*Inferior*/
border-left:1px solid #333333; /*Izquierdo*/
border-right:1px solid #333333; /*Derecho*/
Y por supuesto podemos mezclar cosas :D Si yo quiero ocultar el sidebar, el pie de post y cambiar el título escribo:
<!----------- ESTILO PÁGINAS ESTÁTICAS ------------->
<b:if cond='data:blog.pageType == "static_page"'><style type='text/css'>
h3.post-title{
font: normal normal 20px Arial;
text-transform:uppercase;
text-align:center;
letter-spacing:2px;
border:1px solid #333333;
background-color:#eeeeee;
}
.post-footer{
display:none;
}
.main-inner .columns {
padding-left: 0px !important;
padding-right: 0px !important;
}
.main-inner .fauxcolumn-center-outer {
left: 0px !important;
right: 0px !important;
}
.main-inner .fauxcolumn-left-outer, .main-inner .fauxcolumn-right-outer, .main-inner .column-left-outer, .main-inner .column-right-outer {
display: none !important;
}
</style></b:if><!-------- FIN ESTILO PÁGINAS ESTÁTICAS ---------->
Como veis, es una cosica que en nada tenemos hecha y que le da un aire más profesional a nuestro blog ;) Espero que os sea muy muy útil y que os haya gustado mucho ;) Si es así, no olvidéis compartirlo :D:D
Mañana nos vemos de nuevo (estas semanas vais a tenerme hasta en la sopa :P). Mil gracias por estar ahí!!
Pasad un jueves muy chachi!! Besotes muy fuertes!! Laura.