Por fin vamos a terminar la serie de posts sobre el montaje de nuestro blog en ghost. Sólo nos queda darle un aspecto atractivo. El theme por defecto de ghost está muy bien, pero para diferenciarnos un poco vamos a darle otro aire al blog. Tampoco es que vaya a hacer maravillas, no soy diseñador y mi época de pinitos con blender, gimp, cinelerra y demás maquinaria libre se me queda un poco atrás.
Lo primero que quería conseguir era que el software libre siempre estuviera presente en el blog y qué mejor forma que poner de fondo el logo de mi distribución preferida. El logo de debian está disponible en la página web del proyecto, para poder hacer uso de él he colocado el link a su página en el footer del blog, aunque pienso que lo habría colocado igual ya que todo el mundo debería usar esta sólida distribución. No se ve mucho, pero ahí está.
Elegí el logo en svg y editándolo con inkscape le bajé la opacidad hasta un 5% para que no distraiga de lo realmente importante, el contenido del blog. Una vez que ya tenía el archivo creado lo copié a mi servidor para crearme un tema partiendo de casper, el tema por defecto. Para ello, lo primero que hice fue copiarme el directorio casper a otro diferente para modificarlo sin tocar el original:
# cd /var/www/content/themes
# cp -R casper casper_bbc
Lo de bbc viene de mi época de recreativas, no preguntéis. Editamos también el fichero que contiene el número de versión y el nombre del tema, package.json, con estos datos:
{
"name": "Casper Bbc",
"version": "1.0.1"
}
Para que el cambio tenga efecto debemos reiniciar ghost:
# cd /var/www
# forever list
info: Forever processes running
data: uid command script forever pid logfile uptime
data: [0] uuuj /usr/bin/nodejs index.js 2485 2487 /root/.forever/uuuj.log 12:22:38:45.417
# forever stop index.js
info: Forever stopped process:
data: uid command script forever pid logfile uptime
[0] uuuj /usr/bin/nodejs index.js 2485 2487 /root/.forever/uuuj.log 12:22:42:19.426
# ./starter.sh
Ahora, si vamos a la pantalla de administración del blog, en las preferencias ya podremos elegir el nuevo theme. Ahora editaremos el css para poner el logo de debian de background. El theme original no utiliza imágenes, por lo que lo primero que vamos a hacer es crear un directorio para ellas:
# cd /var/www/content/themes/casper_bbc/assets
# mkdir images
# cp ~/debian-transparent.svg .
# chown -R www-data:www-data images
El archivo que controla la generación del template que fija la apariencia de todo el blog es default.hbs. Para añadirle el background que hemos generado, cambiamos la línea que define el body por lo siguiente:
[...]
<body class="{{body_class}}" style="background-image: url({{asset "images/debian-transparent.svg"}}); background-repeat: no-repeat; background-size: contain;">
[...]
También podemos editar el css y cambiar sólo la clase body, pero esto ha sido lo primero que he pensado, igual en el futuro le damos una vuelta a todo esto. Las expresiones entre llaves dobles forman parte del lenguaje propio que usa ghost para sus templates. En este caso utilizando asset conseguimos la ruta completa al directorio en cuestión sin necesidad de saber dónde tenemos instalado el blog.
Si queremos ver los cambios realizados debemos irnos a la página de administración, cambiar el tema, salvar y volver a poner nuestro tema, no sé si se puede hacer de una forma más ágil, pero por ahora me vale.
Una cosa importante a tener en cuenta para cambiar el css principal es que si utilizamos el helper asset deberemos reiniciar ghost cada vez que hagamos un cambio, de lo contrario no se tomarán en cuenta. Este comportamiento está muy bien ya que tenemos cacheados los css en todo momento, pero a la hora de diseñar es un poco incómodo, de todas formas, en la documentación prometen que será fácil de recargar en versiones posteriores.
En el footer también quiero colocar el enlace hacia la licencia creative commons bajo la que está todo el blog. Para ello he creado una página estática en el blog con el código obtenido de la propia fundación pero adaptado al blog. En este enlace enseñan cómo crear la página estática.
Para distribuir el footer en cuatro partes he necesitado tocar el css, éste está situado en la carpeta assets/css y se llama screen.css, en la sección de footer he añadido un estilo y cambiado los otros dos, quedando como sigue:
[...]
/* ==========================================================================
9. Footer - The bottom of every page
========================================================================== */
[...]
.copyright {
display: inline-block;
width: 25%;
float: left;
text-align: left;
}
.linkdebian {
display: inline-block;
width: 25%;
text-align: center;
}
.licensecc {
display: inline-block;
width: 25%;
text-align: center;
}
.poweredby {
display: inline-block;
float: right;
text-align: right;
}
[...]
Como sabéis, el símbolo [...] indica que hemos omitido unas cuantas líneas de código.
En el archivo que coordina todo el blog, default.hbs también he añadido las nuevas secciones:
[...]
<footer class="site-footer clearfix">
<section class="copyright"><a href="{{@blog.url}}">{{@blog.title}}</a> © {{date format="YYYY"}}</section>
<section class="linkdebian"><a href="http://www.debian.org">Debian Project</a></section>
<section class="licensecc"><a href="http://salem.softether.net/creative-commons-license">Creative Commons License</a></section>
<section class="poweredby">Proudly published with <a href="https://ghost.org">Ghost</a></section>
</footer>
[...]
En los móviles, con tanto footer, en formato vertical queda un poco raro, pero como sólo se verá cuando se llegue al final de la página, obviaremos por ahora lo mal que queda.
Otra cosa que no me gustaba al poner la espiral de fondo es la capa de color que tiene el título del blog en la página principal, la decisión fue quitarla y marcar el fin de la cabecera con una línea de un píxel de grosor, al igual que se marca el inicio del footer. Para ello editamos el css y cambiamos los siguientes bloques:
[...]
/* Big cover image on the home page */
.main-header {
position: relative;
display: table;
width: 100%;
height: 100%;
margin-bottom: 5rem;
text-align: center;
background-size: cover;
overflow: hidden;
}
[...]
.no-cover.main-header {
border-bottom: 1px solid #EBF2F6;
min-height: 160px;
max-height: 25%;
}
[...]
En ambos casos hemos eliminado el background, en el segundo, hemos añadido el borde de separación y cambiado la altura máxima de un 40% a un 25%, con esto queda más limpio todo.
Por último tuve que arreglar un problema del tema por defecto que impedía su visualización en internet explorer, lo sé, algunos dirán que no les hagamos caso, pero si queremos llegar a más gente tendremos que predicar en los lugares más inhóspitos. El único problema parece ser el tipo de fuente elegida, por lo que en el archivo screen.css sólo tendremos que buscar la siguiente línea:
font-family: "Noto Serif", serif;
y sustituirla por ésta:
font-family: "PT Serif", serif;
Aparece tres veces sólamente. Si tenemos algún explorer a mano podremos comprobarlo fácilmente, si no, os aconsejo utilizar el servicio de browserstack, tienen todos los sistemas operativos y navegadores que nos puedan interesar, el servicio es de pago pero tenemos treinta minutos de uso para probarlo, en Mirai migramos de máquinas virtuales locales con windows a este servicio y estamos bastante satisfechos.
Y por ahora eso es todo, lo que estáis viendo es lo que se consigue con estos pequeños cambios. De vez en cuando, cuando actualicemos versiones de ghost revisaremos el tema por defecto para adaptarlo a los cambios que mejoren el theme, aunque no creo necesario realizar otros posts al respecto ya que cada uno debería encontrar su look propio.
La canción de hoy me hace rememorar la época dorada del Festimad, en el parque de El Soto, en Móstoles, tardes de vino y música. Si habéis estado en alguna de estas ediciones seguro que recordáis esos conciertos en el escenario del lago, ese rinconcito mágico por el que pasaron hasta los Muse. Pero hoy recuperamos a un trastornado de la vida, un tal Andrew W.K. que para la portada del disco I Get Wet se hizo dar una buena hostia, así la sangre que sale de su nariz era de lo más real. De este chute de adrenalina rescatamos It's Time To Party, como no podía ser de otra forma.