Temas de GeoNode¶

Ya hemos explicado en Tematización sencilla cómo cambiar el tema del GeoNode directamente desde la Interfaz de administración.Esta es una forma sencilla de personalizar la apariencia del GeoNode pero, en algunos casos, es posible que desee tener más control sobre él.

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

Tematiza tu proyecto GeoNode¶

Hay una variedad de opciones disponibles para usted si desea cambiar la apariencia y comportamiento predeterminados de su 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 la página al mínimo y crea una interfaz más receptiva.Dicho esto, eres libre de personalizar la interfaz de tu GeoNode simplemente cambiando el logotipo predeterminado o agregando tus propias imágenes y gráficos para brindar una experiencia de GeoNode de la manera que la imaginas.

Su proyecto GeoNode ya tiene un directorio configurado para almacenar sus propias imágenes en <my_geonode>/static/img.Debe colocar cualquier archivo de imagen que desee utilizar para su proyecto en este directorio.

Veamos un ejemplo de los pasos necesarios para cambiar el logotipo predeterminado.

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

Si aún no lo has hecho, obtén la imagen de tu logo.La siguiente URL es solo un ejemplo, por lo que deberá cambiar esta URL para que coincida con la ubicación de su archivo o copiarla en 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

Crear directorio de fragmentos:

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

Cree 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 %}

Reinicie su proyecto GeoNode y mire la página en su 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 carpeta_estática y la caché del navegador antes de recargar para asegurarse de que los cambios se hayan realizado y mostrado correctamente en la pantalla.

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

Logotipo personalizado¶

En las siguientes secciones aprenderá cómo personalizar este encabezado para que quede como desee.

Nota

Debes confirmar estos cambios en tu repositorio a medida que avanzas en esta sección y acostumbrarte a realizarlos temprano y con frecuencia para que tú y otros puedan realizar un seguimiento de tu proyecto en GitHub.Realizar muchas confirmaciones atómicas y mantenerse sincronizado con un repositorio remoto facilita la colaboración con otros en su proyecto.

Hojas de estilo en cascada¶

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

Primero, seguiremos los pasos necesarios para desplazarlo hacia abajo para que ya no esté oculto, luego cambiaremos el color de fondo del encabezado para que coincida con el color del gráfico de nuestro logotipo.

Vuelva a abrir <my_geonode>/static/css/brand_navbar.html en su 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;
}

Crea un nuevo archivo para manipular la sección héroe:

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

Agregue el siguiente código para cambiar la imagen de fondo y la fuente de la sección héroe:

{% 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¶

Puede continuar agregando reglas a este archivo para anular los estilos que se encuentran en el archivo CSS base de GeoNode que se crea a partir de base.less.

Nota

Puede resultarle útil utilizar las herramientas de desarrollo de su navegador para inspeccionar los elementos de su sitio que desea anular para determinar qué reglas ya se aplican.Vea la captura de pantalla a continuación.

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

Modificar la página de inicio de GeoNode¶

Hasta ahora hemos aprendido cómo modificar algunas secciones de plantilla de su página principal de GeoNode.Puede hacerlo individualmente por plantilla de sección, 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 puede agregar diferentes configuraciones de tema en un solo lugar.

Elimine la sección hero anterior: archivo: archivo hero.html:

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

Cree un nuevo archivo custom_theme.html:

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

Agregue 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 %}

Reiniciar el servidor httpd

$ python manage.py collectstatic
$ sudo service apache2 restart

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

Editar título y mensaje de introducción

Inicie sesión como administrador en GeoNode y vaya a la página Admin:

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

Agregue un Nombre, Descripción y active la opción Está habilitado.En la parte inferior, agregue un título de Jumbotron y un contenido de Jumbotron.Esto anulará el título y mensaje de bienvenida predeterminados de GeoNode.Haga clic en Guardar en la parte inferior al final.

Después de esto, recarga tu página de inicio de GeoNode.El resultado debería ser similar a este: