UI Customization

In this section, we will change the look and feel of GeoNode. In particular, we will do some customization to help understand how the template inheritance works and how to add new stuff to your GeoNode. The changes will include the home page, the top menu, the footer, and a generic GeoNode page.

Create a Custom GeoNode Theme

Log in as admin and navigate to http://localhost:8000/en-us/admin/geonode_themes/

Create a new custom theme named test and ensure the is enabled checkbox is ticked.

image

Provide a jumbotron title and a jumbotron text, and click on save

image

Refresh the page to see the changes.

image

Main Theme

To change the main theme of GeoNode we can act on the Custom CSS Rules of the currently active theme.

Navigate to the current web location: http://geonode.org/geonode-mapstore-client/master/tutorial-theme.html

Change the theme colors to your preferences and click on the Get themes variables snippet button.

image

Copy the contents of the snippet and paste it into the Custom CSS rules textbox; then save. Here a sample of dark theme created with the tool.

image

Once we refresh the page in the browser (you may need to remove the page cache), we should see the change as follows.

image

Move the theme to the GeoNode project templates (optional)

The theme could also be included inside the templates of the GeoNode project. The advantage of this operation is that it keeps all the changes versioned in the GeoNode project repository.

Disable the current theme from the admin page and save

Disable theme in use from admin page

Copy the hero image and logo image inside the static img folder of the my_geonode project

/opt/geonode-project/my_geonode/src/my_geonode/
|-- ...
|-- static/
|    |-- ...
|    +-- img/
|         |-- ...
|         |-- hero.jpeg
|         +-- logo.png
|-- ...

Create a new snippet template to override the custom theme

touch /opt/geonode-project/my_geonode/src/my_geonode/templates/geonode-mapstore-client/snippets/custom_theme.html

Edit the custom_theme.html template

vim /opt/geonode-project/my_geonode/src/my_geonode/templates/geonode-mapstore-client/snippets/custom_theme.html

Copy the dark theme variables inside the custom_theme.html template

{% extends "geonode-mapstore-client/snippets/custom_theme.html" %}
{% block content %}
<style>
    /* copy here the rules provided in dark theme variables file */
</style>
{% endblock %}

Create a new snippet template to override the jumbotron/hero image

touch /opt/geonode-project/my_geonode/src/my_geonode/templates/geonode-mapstore-client/snippets/hero.html

Edit the hero.html template

vim /opt/geonode-project/my_geonode/src/my_geonode/templates/geonode-mapstore-client/snippets/hero.html

Copy this snippet inside the hero.html template

{% load static %}
<style>
    #gn-hero {
        background-image: url("{% static 'img/hero.jpeg' %}");
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        background-color: rgb(156, 156, 156);
        background-blend-mode: multiply;
    }
</style>
<div id="gn-hero" class="gn-hero">
    <div class="jumbotron">
        <div class="gn-hero-description">
            <h1>My Geonode</h1>
            <p>sharing my geospatial data, my maps and my apps</p>
        </div>
        <p class="gn-hero-tools">
        </p>
    </div>
</div>

Replace the logo inside the brand_navbar.html template by adding the logo_src block

{% extends "geonode-mapstore-client/snippets/brand_navbar.html" %}
+ {% load static %}
{% block extra_style %}
<style>
    #gn-brand-navbar {
        /* example from https://css-tricks.com/a-few-background-patterns-sites/ */
        --stripe: #2a3034;
        --bg: #040404;
        background: linear-gradient(135deg, var(--bg) 25%, transparent 25%) -50px 0,
            linear-gradient(225deg, var(--bg) 25%, transparent 25%) -50px 0,
            linear-gradient(315deg, var(--bg) 25%, transparent 25%),
            linear-gradient(45deg, var(--bg) 25%, transparent 25%);
        background-size: 32px 32px;
        background-color: var(--stripe);
    }
</style>
{% endblock %}
+ {% block logo_src %}
+ {% static 'img/logo.png' %}
+ {% endblock %}

The final structure of the snippets folder of the my_geonode project should look like this:

/opt/geonode-project/my_geonode/src/my_geonode/
|-- ...
|-- static/
|    |-- ...
|    +-- img/
|         |-- ...
|         |-- hero.jpeg
|         +-- logo.png
|-- templates/
|    |-- ...
|    +-- geonode-mapstore-client/
|         |-- ...
|         +-- snippets/
|              |-- ...
|              |-- brand_navbar.html
|              |-- custom_theme.html
|              |-- footer.html
|              +-- hero.html
|-- ...

Finally, refresh the page to see the theme applied via templates.

Next Section: Add Translations to GeoNode Project