Supongamos que tenemos un blog compartido y queremos distinguir una entrada de otra, según el autor que la publique.
Podemos hacerlo con el color del texto, es decir, depende de quien publique la entrada, el texto del post se verá de un color u otro y con el background (imagen o color de fondo), que será distinto según sea el autor del post.
Para entender mejor el ejemplo, usaremos dos autores ficticios, a los que vamos a llamar Zipi y Zape.
Distinguir cada autor por el color del texto de sus entradas
En este ejemplo, los post que escriba Zipi, se verán con el texto en rojo y los que escriba Zape en azul.
[1] Vamos a la plantilla edición - HTML y expandimos artilugios.
En la parte del CSS, es decir, antes de ]]></b:skin> añadimos estas líneas de código:
.post-body-Zipi {
color:#ff0000;
}
.post-body-Zape {
color:#0000ff;
}
[2] Bajamos por nuestra plantilla hasta encontrar esto:
<b:includable id='post' var='post'>
Unas líneas más abajo, veremos algo así:
<div class='post-header-line-1'/>
<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<div class='post-footer'>
[3] Cambiaremos esta parte para darle a cada autor la distinción para el uso de su color personal.
Quedará así:
<div class='post-header-line-1'/>
<b:if cond='data:post.author == "Zipi"'>
<div class='post-body-Zipi'><p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<b:else/>
<div class='post-body-Zape'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if>
<div class='post-footer'>
[4] Guardamos cambios.
Nota
* Cambiará automáticamente el color del texto de las entradas antiguas.
* Cuando usemos el "truco" hemos de escribir los nombres de cada autor exactamente igual a como aparece en la firma del blog.
* Si tenemos más de dos autores, simplemente hemos de repetir el código anterior para cada autor en el CSS, y dentro del código html, antes del último </b:if> el código necesario para los demás autores.
Por ejemplo, si tenemos un nuevo autor "Mortadelo", en el CSS, debajo de las otras líneas, añadiríamos:
.post-body-Mortadelo {
color:#0000ff;
}
y en el código html añadiríamos esto:
<b:else/>
<div class='post-body-Mortadelo'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Distinguir cada autor por el color de fondo en sus entradas
[1] Los pasos a seguir serán los mismos que para el color del texto explicados anteriormente, con la diferencia de que en el código del CSS, lo que tendremos que añadir será esto:
.post-body-Zipi {
background:#ddd;
}
.post-body-Zape {
background:#000;
}
En este caso cada vez que Zipi publique una entrada, esta tendrá su fondo de color gris clarito (#ddd;) y cuando sea Zape quien lo haga, el fondo de su entrada se verá de color negro (#000;).
Distinguir cada autor por la imagen de fondo en sus entradas
[1] Al igual que antes solo cambiamos el código del CSS, que quedará así:
.post-body-Zipi {
background: url(Direccion_de_la_imagen);
}
.post-body-Zape {
background: url(Direccion_de_la_imagen);
}
