Para establecer estilos diferenciados en cierto tipo de páginas, en Blogger podemos usar los códigos condicionales ya que todo aquello que se encuentre dentro de esa condición, sólo se ejecutará si esta se cumple. Por ejemplo, si quisiéramos que el color de fondo del blog fuera rojo cuando se muestra una página estática, pondríamos algo así:<b:if cond='data:blog.pageType != &:quot;static_page&:quot;'>
<style>
body {background-color:red;}
</style>
</b:if>
Pero hay cierto tipo de páginas un poco más complejas de diferenciar ya que no hay condiciones exactas. Por ejemplo, las páginas de etiquetas que son de tipo index al igual que muchos otros tipo de páginas incluyendo el home.
Una alternativa para reconocer este tipo de páginas es usar los selectores condicionales de CSS que nos permiten detectar el contenido de cualquier atributo que tenga una etiqueta y, de ese modo, definir reglas de estilo especiales para ellas.
¿Un poco confuso? En realidad es bastante simple. Supongamos que los enlaces de nuestro sitio son de color verde:
Una alternativa para reconocer este tipo de páginas es usar los selectores condicionales de CSS que nos permiten detectar el contenido de cualquier atributo que tenga una etiqueta y, de ese modo, definir reglas de estilo especiales para ellas.
¿Un poco confuso? En realidad es bastante simple. Supongamos que los enlaces de nuestro sitio son de color verde:
a {color:green:}y quisiéramos que aquellos tienen el atributo target="_blank" fueran de color amarillo; agregaríamos lo siguiente, con o sin la palabra !important:
a[target="_blank"] { {color: yellow !important;}¿Y si quisiéramos algo más genérico como diferenciar el color de los enlaces internos de los enlaces externos? En ese caso podríamos usar el atributo href que es el que contiene la dirección url y un "comodín" (el caracter asterisco) para que la regla se aplique a cualquier enlace que contenga parte de nuestra dirección. En el caso de este blog, podría ser algo así:
a[href*="vagabundia.blogspot.com"] { {color: yellow !important;}la sintaxis en general es:
[atributo*="dato"]
Donde el comodín hace que se aplique a cualquier atributo cuyo contenido contenga el dato total o parcialmente.
Entonces, para establecer reglas de estilo diferentes en ciertas páginas como las etiquetas, podríamos utilizar este sistema pero debemos tener algo en donde mirar, debe haber alguna etiqueta que tenga algún atributo que podamos leer y actuar en consecuencia.
Se me ocurre que lo más sencillo es colocarlo en la etiqueta body que normalmente dice esto:
Entonces, para establecer reglas de estilo diferentes en ciertas páginas como las etiquetas, podríamos utilizar este sistema pero debemos tener algo en donde mirar, debe haber alguna etiqueta que tenga algún atributo que podamos leer y actuar en consecuencia.
Se me ocurre que lo más sencillo es colocarlo en la etiqueta body que normalmente dice esto:
<body>
o esto:
<body expr:class='"loading" + data:blog.mobileClass'>o cualquier cosa similar, no tiene importancia, basta que allí agreguemos un atributo extra como rel y la url de la página que obtenemos de los datos del mismo Blogger:
<body expr:rel='data:blog.canonicalUrl' .......
Hecho eso, nada cambiará así que ahora crearemos las reglas que se nos ocurran ya que sabemos que ese atributo contendrá algo así cuando estemos en una página de etiquetas:
rel="http://miblog.com/search/label/nombre_etiqueta"Suponiendo que quisiera que las páginas de etiquetas Google de este blog tuvieran un color de fondo rojo, la regla sería:
body[rel*="label/Google"] {background: red;}Y si quisiera cambiar el título de los posts:
body[rel*="label/Google"] .post-title { ....... acá las propiedades ....... }y el header:
body[rel*="label/Google"] #header-wrapper { ....... acá las propiedades ....... }Aplicando after y before también podemos agregar "contenido".
Si pusiera esta regla, cuando se abre una página de etiquetas Google, se vería una imagen a la derecha del header:
Si pusiera esta regla, cuando se abre una página de etiquetas Google, se vería una imagen a la derecha del header:
body[rel*="label/Google"] #header-wrapper {position: relative;}
body[rel*="label/Google"] #header-wrapper:after {
content: url(url_imagen);
position: absolute;
right: 20rpx;
top: 20px;
}En resumen, a partir del primer selector, puedo acceder a cualquier etiqueta, id o clase interna y definir reglas exactas que se apliquen en ciertas condiciones.
Obviamente, alguien preguntará si podríamos hacer lo mismo para diferenciar los posts según su etiqueta y ahí las cosas se complican porque, hasta donde sé, no hay ningún dato al que podamos acceder para conocer la etiqueta de una entrada hasta que esta es cargada en el includable post lo que significa que cualquier cambio que hagamos podría tardar en verse ya que puede haber otras partes de nuestra página que se mostrarían antes y si estas tardan, primero se mostrará el estilo general y luego el modificado.
El segundo problema es que allí podemos leer las etiquetas del post pero esto se debe hacer en un bucle y usar JavaScript para agregar el dato extra que necesitamos (el nombre de la etiqueta).
Entonces, haremos eso, buscaremos:
Obviamente, alguien preguntará si podríamos hacer lo mismo para diferenciar los posts según su etiqueta y ahí las cosas se complican porque, hasta donde sé, no hay ningún dato al que podamos acceder para conocer la etiqueta de una entrada hasta que esta es cargada en el includable post lo que significa que cualquier cambio que hagamos podría tardar en verse ya que puede haber otras partes de nuestra página que se mostrarían antes y si estas tardan, primero se mostrará el estilo general y luego el modificado.
El segundo problema es que allí podemos leer las etiquetas del post pero esto se debe hacer en un bucle y usar JavaScript para agregar el dato extra que necesitamos (el nombre de la etiqueta).
Entonces, haremos eso, buscaremos:
<b:includable id='post' var='post'>
y veremos que la siguiente linea dice algo como esto o similar:
<div class='post hentry uncustomized-post-template'>
Debajo, pondremos lo siguiente:
<b:if cond='data:blog.pageType != "item"'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<script type='text/javascript'>
var postetiqueta='<data:label.name/>';
</script>
</b:if>
</b:loop>
<!-- con eso, tenemos el nombre de la última etiqueta (si es que el post tiene varias) guardada en una variable -->
<script type='text/javascript'>
// agregamos el atributo rel con el nombre en la etiqueta body
document.body.setAttribute('rel',postetiqueta);
</script>
</b:if>
Y si usamos jQuery podemos reemplazar document.body.setAttribute() por:
$('body').attr('rel',postetiqueta);
De acá en más, en las páginas individuales, la etiqueta body tendrá un atributo rel cuyo valor es el nombre de la etiqueta de la entrada así que, con un criterio similar al comentado inicialmente, podemos usar selectores y definir estilos particulares para esas entradas aunque, en este caso, no necesitamos el comodín.
En el blog de pruebas hay dos entradas armadas de este modo, en una, la etiqueta es rojo y algunas de sus reglas son estas:
En el blog de pruebas hay dos entradas armadas de este modo, en una, la etiqueta es rojo y algunas de sus reglas son estas:
<style>
body[rel="rojo"] #header-wrapper {display: none;}
body[rel="rojo"] #sidebar-wrapper {display: none;}
body[rel="rojo"] #main-wrapper {width: 100%;}
body[rel="rojo"] {background: #800;}
body[rel="rojo"] .post-title a { ....... propiedades ....... }
body[rel="rojo"] .post-body { ....... propiedades ....... }
</style>
Lo mismo ocurre con otra entrada del demo cuya etiqueta es azul; simplemente, cambian las reglas:
body[rel="azul"] {background: #79B;}
Una variante para mostrar los últimos comentarios nos permitiría agregar la imagen con el avatar de cada comentarista.