Design the back cover of you paged HTML document
Take the last step to complete your template.
🇪🇸 Este post está escrito en inglés y español. Puedes encontrar el texto en español más abajo.
🇺🇸 Let’s finish your template! By adding a back cover, you will have a solid template you can reuse across projects. Along the way, you will learn what works best for you to communicate findings and contribute to decision-making, which will give you plenty of ideas to improve the template.
The first step in designing a back cover is to create a new page. On this new page, you’ll only add the content (text, images) that is supposed to go in your back cover. There are strong opinions out there regarding what a good back cover is, but we’ll keep it simple here. We’ll only add a company or team name:
\pagebreak
compañero
Now that we have a dedicated page to the back cover, we can add a background image that will take care of most of the design challenge:
@page:nth(8) {
background-image: url("images/compa_back.png");
background-size: 100%;
@bottom-left-corner {
content: none;
}
}
Here, I recycled the CSS code I used for the front page. The only differences are:
@page:nth(8)targets the eight page in the document. You can usenth()as a counter to target the last page in your document.I am using a different background image (
compa_back.png)
Styling the content in your back cover
Even though using a background image solves most of the problem, you may still want to give a unique style to the content. In this case, I just added a single word, but you may want to add more text, images, etc.
To style your content, you need a container or block that wraps your content:
\pagebreak
::: {.last-page-title}
compañero
:::
The two lines of three consecutive colons create a block. So now the word “compañero” is inside the block and will follow any instructions given by the block. In this case, the instructions are given by {.last-page-title} , which is a new style in the CSS file. For simplicity, I’ll use a similar style to the title on the front cover:
.last-page-title {
font-family: Helvetica;
font-size: 70pt;
font-weight: lighter;
}
Now all you have to do is save, knit, and admire your awesome template 🤩.
Have you tried any of the tricks you learned throughout this series? If you haven’t, let me know what obstacles are on your way.
I’d love to know what’s keeping you from designing your own awesome templates to share your research and findings. Send me a message by clicking the button below 👇.
🇪🇸 ¡Terminemos tu plantilla! Al agregar una contraportada, tendrás una plantilla sólida que puedes reutilizar en diferentes proyectos. En el camino, aprenderás lo que mejor te funciona para comunicar los hallazgos y contribuir a la toma de decisiones, lo que te dará muchas ideas para mejorar la plantilla.
El primer paso para diseñar una contraportada es crear una nueva página. En esta nueva página, solo añadirás el contenido (texto, imágenes) que se supone debe ir en tu contraportada. Hay opiniones fuertes al respecto de qué es una buena contraportada, pero lo mantendremos simple aquí. Solo añadiremos un nombre de empresa o equipo:
\pagebreak
compañero
Ahora que tenemos una página dedicada a la contraportada, podemos agregar una imagen de fondo que se encargará de la mayor parte del desafío de diseño:
@page:nth(8) {
background-image: url("images/compa_back.png");
background-size: 100%;
@bottom-left-corner {
content: none;
}
}
Aquí, reciclé el código CSS que usé para la portada. Las únicas diferencias son:
@page:nth(8)apunta a la octava página en el documento. Puedes usarnth()como un contador para apuntar a la última página en tu documento.Estoy usando una imagen de fondo diferente (
compa_back.png)
Estilizando el contenido de tu contraportada
Aunque usar una imagen de fondo resuelve la mayor parte del problema, es posible que aún quieras darle un estilo único al contenido. En este caso, solo agregué una sola palabra, pero es posible que quieras agregar más texto, imágenes, etc.
Para estilizar tu contenido, necesitas un contenedor o bloque que envuelva tu contenido:
\pagebreak
::: {.last-page-title}
compañero
:::
Las dos líneas de tres dos puntos consecutivos definen el bloque. Así que ahora la palabra “compañero” está dentro del bloque y seguirá cualquier instrucción dada por el bloque. En este caso, las instrucciones son dadas por {.last-page-title}, que es un nuevo estilo en el archivo CSS. Por simplicidad, usaré un estilo similar al del título en la portada:
.last-page-title {
font-family: Helvetica;
font-size: 70pt;
font-weight: lighter;
}
Ahora todo lo que tienes que hacer es guardar, tejer y admirar tu increíble plantilla 🤩.
¿Has probado alguno de los trucos que aprendiste a lo largo de esta serie? Si no lo has hecho, déjame saber qué obstáculos están en tu camino.
Me encantaría saber qué te impide diseñar tus propias increíbles plantillas para compartir tus investigaciones y hallazgos. Envíame un mensaje haciendo clic en el botón de abajo 👇.