Temas de GeoNode¶

Ya hemos explicado en Personalización de Temas cómo cambiar el tema de GeoNode directamente desde la Interfaz de administración. Esta es una manera fácil de personalizar la apariencia de GeoNode pero, en algunos casos, es posible que desees tener más control sobre ella.

En esos casos, es necesario adentrarse en el código y se recomienda encarecidamente utilizar un proyecto de GeoNode personalizado en lugar del código HTML/CSS predeterminado de GeoNode. Consulta las siguientes secciones para obtener más información al respecto.

Personalización del tema de tu Proyecto GeoNode¶

Hay una variedad de opciones disponibles si deseas cambiar la apariencia predeterminada de tu Proyecto GeoNode.

Logotipos y gráficos¶

GeoNode intencionalmente no incluye una gran cantidad de archivos gráficos en su interfaz. Esto mantiene el tiempo de carga de las páginas al mínimo y ofrece una interfaz más receptiva. Dicho esto, tienes la libertad de personalizar la interfaz de tu GeoNode simplemente cambiando el logo predeterminado o añadiendo tus propias imágenes y gráficos para ofrecer una experiencia de GeoNode tal como la imaginas.

Tu proyecto GeoNode ya tiene un directorio configurado para almacenar tus propias imágenes en <my_geonode>/static/img. Debes colocar cualquier archivo de imagen que planees usar para tu proyecto en este directorio.

Vamos a recorrer un ejemplo de los pasos necesarios para cambiar el logo predeterminado.

Cambie al directorio img:
```
$ cd <my_geonode>/static/img
```

Si aún no lo has hecho, obtén la imagen de tu logo. La URL a continuación es solo un ejemplo, por lo que deberás cambiar esta URL para que coincida con la ubicación de tu archivo o copiarlo a esta ubicación:

$ wget https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Service_mark.svg/500px-Service_mark.svg.png
$ wget https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Wikimapia_logo_without_label.svg/426px-Wikimapia_logo_without_label.svg.png -O logo.png

Crea el directorio de fragmentos snippets:

$ cd ../../..
$ mkdir <my_geonode>/templates/geonode-mapstore-client/snippets
$ cd <my_geonode>/templates/geonode-mapstore-client/snippets

Crea un nuevo archivo HTML llamado brand_navbar.html

$ sudo vi brand_navbar.html

{% extends "geonode-mapstore-client/snippets/brand_navbar.html" %}
{% load static %}
{% block extra_style %}
<style>
 #gn-brand-navbar {
   background: transparent url("/static/img/500px-Service_mark.svg.png") no-repeat;
   background-size: 300px 70px;
   background-position: left center;
   background-position-x: 100px;
 }
</style>
{% endblock %}
{% block logo_src %}
{% static 'img/logo.png' %}
{% endblock %}

Reinicia tu proyecto GeoNode y observa la página en tu navegador:
```
$ cd /home/geonode
$ sudo rm -Rf geonode/geonode/static_root/*
$ cd my_geonode
$ python manage.py collectstatic
$ sudo service apache2 restart
```
Nota

Es una buena práctica limpiar la static_folder y la caché del navegador antes de recargar para asegurarte de que los cambios se han aplicado y se muestran correctamente en la pantalla.

Visite tu sitio en http://localhost/ o la URL remota de tu sitio.

Logotipo personalizado¶

En las siguientes secciones aprenderás a personalizar este encabezado para dejarlo como quieras.

Nota

Debes comprometer estos cambios en tu repositorio a medida que avances en esta sección, y adquirir el hábito de hacer commits frecuentes para que tú y otros puedan seguir el progreso de tu proyecto en GitHub. Realizar muchos commits atómicos y mantener la sincronización con un repositorio remoto facilita la colaboración con otros en tu proyecto.

Hojas de estilo en cascada¶

En la sección anterior ya aprendiste cómo sobrescribir las reglas CSS predeterminadas de GeoNode para incluir tu propio logo. De esta manera, puedes personalizar cualquier aspecto de la apariencia de GeoNode. En la última captura de pantalla, viste que el área principal en la página de inicio está cubierta por el encabezado expandido.

Primero, revisaremos los pasos necesarios para desplazar el encabezado hacia abajo para que ya no quede oculto, y luego cambiaremos el color de fondo del encabezado para que coincida con el color de nuestro gráfico de logo.

Vuelve a abrir el archivo <my_geonode>/static/css/brand_navbar.html en tu editor:

$ cd <my_geonode>/templates/geonode-mapstore-client/snippets
$ sudo vi brand_navbar.html

Agregue una regla para cambiar el color de fondo del encabezado para que coincida con el gráfico del logotipo:

#gn-brand-navbar {
    background-color: #ff0000 !important;
}

Crear nuevo archivo para manipular la sección hero:

$ cd <my_geonode>/templates/geonode-mapstore-client/snippets
$ sudo vi hero.html

Agrega el siguiente código para cambiar la imagen de fondo y la fuente de la sección hero:

{% extends "geonode-mapstore-client/snippets/hero.html" %}
{% block extra_style %}
  <style>
    #gn-hero {
      background-image: url('https://cdn.pixabay.com/photo/2017/09/16/16/09/sea-2755908_960_720.jpg');
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
      background-color: rgb(156, 156, 156);
      background-blend-mode: multiply;
      background-size: 100%;
    }
    .msgapi .gn-hero .jumbotron .gn-hero-description h1 {
      font-weight: lighter;
      word-break: break-word;
      font-style: oblique;
      font-family: orbitron;
      font-size: 3.4rem;
    }
  </style>
{% endblock %}

Recopile los archivos estáticos en STATIC_ROOT, reinicie el servidor de desarrollo y vuelva a cargar la página:
$ python manage.py collectstatic $ sudo service apache2 restart
Anulación de CSS¶

Puedes seguir añadiendo reglas a este archivo para sobrescribir los estilos que están en el archivo CSS base de GeoNode, el cual se construye a partir de base.less.

Nota

Puede ser útil utilizar las herramientas de desarrollo de tu navegador para inspeccionar los elementos de tu sitio que deseas modificar y determinar qué reglas ya están aplicadas. Consulta la captura de pantalla a continuación.

Captura de pantalla del uso del depurador del navegador para inspeccionar las modificaciones de CSS¶

Modificar la página de inicio de GeoNode¶

Hasta ahora hemos aprendido cómo modificar algunas secciones de la plantilla de la página principal de tu GeoNode. Puedes hacerlo individualmente por sección de la plantilla, agregando una nueva página en la carpeta <my_geonode>/templates/geonode-mapstore-client/snippets con el nombre de la sección (por ejemplo, brand_navbar.html), o extendiendo el archivo de plantilla base custom_theme.html, donde puedes agregar diferentes configuraciones de tema en un solo lugar.

Elimina el archivo de la sección hero anterior :file:archivo`hero.html`:

$ rm <my_geonode>/templates/geonode-mapstore-client/snippets/hero.html

Crea un nuevo archivo custom_theme.html:

$ cd <my_geonode>/templates/geonode-mapstore-client/snippets
$ sudo vi custom_theme.html

Añade el siguiente contenido a esta página:

{% load static %}
{% block content %}
<style>
    .msgapi .gn-theme {
        --gn-primary: #df7656;
        --gn-primary-contrast: #e3dcdc;
        --gn-link-color: #fcd823;
        --gn-focus-color: rgba(57, 122, 171, 0.4);
        --gn-footer-bg: #dbb051;
    }

    #gn-hero {
      background: url('https://cdn.pixabay.com/photo/2017/09/16/16/09/sea-2755908_960_720.jpg');
      background-position: center center;
      background-repeat: no-repeat;
      background-blend-mode: multiply;
      background-size: 100%;
    }

    .msgapi .gn-hero .jumbotron .gn-hero-description h1 {
      font-weight: bolder;
      word-break: break-word;
      font-style: oblique;
      font-family: orbitron;
      font-size: 3.4rem;
    }

    .msgapi .gn-hero .jumbotron .gn-hero-description p {
      font-weight: lighter;
      word-break: break-word;
      font-style: oblique;
      font-family: orbitron;
      font-size: 2.2rem;
    }

</style>
{% endblock %}

Reinicia el servidor httpd

$ python manage.py collectstatic
$ sudo service apache2 restart

Tu diseño personalizado debe ser similar a la siguiente imagen:

Edita el título y mensaje de introducción

Inicia sesión como administrador en GeoNode y ve a la página «Administrador»:

Crea un nuevo tema en Biblioteca de temas de GeoNode y Temas:

Agrega un Name (Nombre), Description (Descripción) y activa la opción Is enabled (Esta habilitado). En la parte inferior, agregue un Jumbotron title y un Jumbotron content. Esto anulará el título y el mensaje de bienvenida predeterminados de GeoNode. Haga clic en Guardar en la parte inferior al final.

Después de esto, vuelva a cargar la página de inicio de GeoNode. El resultado debería ser similar a esto: