Personalizar la plantilla

Qué partes hay en la plantilla

Debemos identificar las partes de una plantilla. Independientemente de la plantilla utilizada podemos hablar de:

1. Logo
2. Colores usados en el estilo
3. Menú principal Identifiquemos esos elementos en nuestra plantilla y veamos cómo modificarlos para personalizarla a nuestro gusto.

En la imagen siguiente hemos identificado diferentes partes en la plantilla que vemos tras instalarla, sin ninguna modificación.

Partes de la plantilla

Logo

En esta plantilla, relearn, el logo se carga a patir de un partial. La carpeta partial , va a contener ficheros html que serán parte una página html, de forma que los podré invocar cuando los necesite. Por ejemplo un footer.html o un header.html

Fichero logo.html del partial en relearn

En este caso la ubicación es themes/layoout/partial/logo.html

Ahora lo que hay que hacer es copiar el fichero en el directorio layout y modificar incluyendo el logo que queremos que tenga, que irá ubicado en la carpeta static/images

Ficheros para establecer nuestro logo

Para ello hacemos un diseño de logo. (hay muchas web gratuitas para ello)

Luego modificamos el fichero logo.html y sustituimos el elemento svg por un elemento img

<!--Lo anterior no lo escribo ....-->
  <a id="logo"
            href="{{ .Site.Params.landingPageURL | default "/" | relLangURL }}"
            style="
              color: #3d414d;
              font-family: 'Novacento Sans Wide', 'Helvetica', 'Tahoma', 'Geneva', 'Arial', sans-serif;
              font-size: 30px;
              font-weight: bold;
              margin-top: -2px;
            ">
                <img src="/images/logo.png" alt="Logo del ciclo">
            Desarrollo Web
          </a>


Y nos quedará la página con el logo actualizado

Sitio web con el logo actualizado

Menú

El menú es una sección muy importante. En esta plantilla el menú va a estar ubicado en la parte izquierda de la plantilla. Para añadir/modificarlo, debemos especificarlo en el fichero config.toml , añádiendo los elementos [[menu.shortcuts]] , para cada item que queremos añadir. Por ejemplo, vamos a añadir 3 items

[[menu.shortcuts]]
name="<i class='fab fa-php'></i>   Lenguaje php"
identified=""
url="https://php.net"
weight=1

[[menu.shortcuts]]
name="<i class='fab fa-wikipedia-w'></i>   Wiki del curso"
identified=""
url="https://es.wikieducator.org/Usuario:ManuelRomero/ProgramacionWeb/Contenido"
weight=2

[[menu.shortcuts]]
name="<i class='far fa-question-circle'></i>   Ejercicios resueltos"
identified=""
url="http://manuel.infenlaces.com/dwes/ejercicios/"
weight=3

Y vemos cómo se genera el menú en la parte izquierda

Menú principal ubicado en la parte izquierda

El título del menú se coge del fichero de traducción ubicado en theme/relearn/i18n/xx.toml, donde xx es el idioma establecido. Posteriormente veremos el tema de traducción y abordaremos esta cuestión

El parámetro que establece la traducción para este título de menú es el siguiente que estableceremos en /i18n/es.toml

[Shortcuts-Title]
other = "Más opciones"

Debemos también establecer el idioma por defecto en el fichero de configuración config.toml

defaultContentLanguage="es"

Menú con título establecido

Estilo

Esta plantilla tiene hasta tres estilos de colores diferentes preparados. Para utilizarlos basta con establecer el valor correspondiente de la variable themeVariant en el fichero de configuración config.toml . Los valores permitidos son red, green, blue

[params]
  themeVariant = "blue" or "green" or "red"

Red	Blue	Green	Default
themeVariant = “red”	themeVariant = “blue”	themeVariant = “green”	themeVariant = ""

Modificar los colores de fondo El color se carga, ya que en realidad lo que hacemos es establecer los css concretos según el nombre. Los podemos ver en la carpeta de relearn como muestra la figura siguiente

Ficheros con diferentes temas

Si copiamos el fichero en nuestra ubicación static/css/themeTambién podemos crear nuestros propios ficheros css y cargarlos en nuestro proyecto, o modificar los valores de variables establecidos en el fichero de estilo css. Para ilustrar esta modificiación, copiamos en nuestro directiro ./static/css el fichero de variables css y modificamos el color de fondo donde se ubica el menú que estamos trabajando, colocando otro color. Vamos a copiar /themes/relearn/static/css/theme-relearn en /static/css/theme-dwes.css Ahora modificamos alguna de las variables de este tema y en el fichero de configuración especificamos que usamos este tema

[params]
  themeVariant = "dwes"

Por otro lado copiamos también el fichero theme.css por si queremos modificar algún elemento más. Tras modificar dos colores de fondo bg y el color de la letra del título queda así la página

**Nuevo estilo de la página **

Search

Para modificar este botón accedemos a nuestro nuevo theme-dwes.css y modificamos las variables que afectan a search, según nuestro gusto

Home

Para modificar el home, debemos hacerlo desde el fichero de configuración. En este caso, como tenemos configurado el idioma español, para el título del menú, debemos especificar estas variables dentro de una sección de lenguaje Los parámetros modificados son los siguientes

[Languages]
[Languages.es]
landingPageURL = "http://cpilosenlaces.com"
landingPageName = "<i class='fas fa-university'></i> CPI Los Enlaces"

Si no hubiéramos configurado el idioma, no sería necesaria la sección

Estilo de la página con el home modificado

footer

El footer es esta plantilla, corresponde a un partial, por lo que tendríamos que acceder a él, copiarlo en nuestro directorio y modificarlo. El fichero que muestra el footer en la parte del menú se llama menu-footer.html Una pequeña modificación y observamos la actualización en la página

Footer del menú modificado

Práctica