# 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](img/custom_theme_001.png)

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

![image](img/custom_theme_002.png)

Refresh the page to see the changes.

![image](img/custom_theme_003.png)

### 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](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](img/custom_theme_004.png)

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](src/101_dark_theme_sample_css.md). 

![image](img/custom_theme_005.png)

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

![image](img/custom_theme_006.png)

### Jumbotron Background Image and Logo

The admin page allows the changing of two additional fields: the jumbotron background image and the logo.

Download this sample image or create a new image suitable for the jumbotron with a suggested size of 1920px x 300px.
![Hero image sample](img/hero.jpeg)
*Image source: https://unsplash.com/photos/AQ9-jKmebjM*

Select `choose file` for the jumbotron background field

![Select choose file from admin page for jumbotron background](img/custom_theme_008.png)

Select the background image from the file navigation window

![Select file for the jumbotron background](img/custom_theme_009.png)

Download this sample logo or create a new one suitable for your GeoNode

![Logo image sample](img/logo.png)

Select `choose file` for the logo field

![Select choose file from admin page for logo](img/custom_theme_010.png)

Select the logo image from the file navigation window

![Select file for the logo](img/custom_theme_011.png)

Now, save the theme and refresh the browser page to see the applied changes

![Homepage with new jumbotron image and logo](img/custom_theme_012.png)

## Custom Header and Footer

GeoNode provides template snippets that can be extended/overridden to display different content.
The aim of this section is to customize the header background and the footer content.

Create a folder called `snippets` inside the `templates/geonode-mapstore-client/` folder of the geonode project my geonode

```cmd
mkdir /opt/geonode-project/my_geonode/src/my_geonode/templates/geonode-mapstore-client/snippets/
```

Create an HTML template for the brand header

```cmd
touch /opt/geonode-project/my_geonode/src/my_geonode/templates/geonode-mapstore-client/snippets/brand_navbar.html
```

Include the following HTML inside the `brand_navbar.html` file to extend the default one

```cmd
vim /opt/geonode-project/my_geonode/src/my_geonode/templates/geonode-mapstore-client/snippets/brand_navbar.html
```

Copy this content into `brand_navbar.html`

```html
{% extends "geonode-mapstore-client/snippets/brand_navbar.html" %}
{% 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 %}
```

Create an HTML template for the footer

```cmd
touch /opt/geonode-project/my_geonode/src/my_geonode/templates/geonode-mapstore-client/snippets/footer.html
```

Include the following HTML inside the `footer.html` file to override the default one

```cmd
vim /opt/geonode-project/my_geonode/src/my_geonode/templates/geonode-mapstore-client/snippets/footer.html
```

Copy this content in `footer.html`

```html
<footer class="gn-footer">
    <ul>
        <li>
            <a href="http://localhost:8000/" class="nav-link" target='_blank'>
                <span>my_geonode</span>
            </a>
        </li>
        <li>
            <a href="/about/" class="nav-link">
                <span>About</span>
            </a>
        </li>
    </ul>
</footer>
```

The structure of the folder with the new HTML templates should be

```
/opt/geonode-project/my_geonode/src/my_geonode/
|-- ...
|-- templates/
|    |-- ...
|    +-- geonode-mapstore-client/
|    |    |-- ...
|    |    +-- snippets/
|    |         |-- ...
|    |         |-- brand_navbar.html
|    |         +-- footer.html
|-- ...
```

Now refresh the page to see the result in the browser, the header now has a pattern, and the footer only shows two links.

![Custom header and footer](img/custom_theme_007.png)

## 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](img/custom_theme_013.png)

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

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

Edit the `custom_theme.html` template

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

Copy the [dark theme variables](src/101_dark_theme_sample_css.md) inside the `custom_theme.html` template

```html
{% 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

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

Edit the `hero.html` template

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

Copy this snippet inside the `hero.html` template

```html
{% 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

```diff
{% 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](102_TRANSLATIONS.md)