HOW TO CUSTOMISE GEONODE TO GET PROFESSIONAL LOOK

As you must be aware, GeoNode is one of the most powerful tool combined with GeoServer to create Enterprise-wide GIS portal, which could begin from creation of Spatial Data Infrastructure (SDI) to any kind of GIS platform something like  Asset Management System.

Some of unique capabilities like in built Document Management System and User Management apart from typical GIS functionalities makes it more appealing.

Default interface of GeoNode looks something like below screen:

GeoNode_Default

This looks great but many a times user may need to customise the web interface to make it more application oriented rather data driven.

Geonode uses Django for the backend and bootstrap for the front end . The default interface of geonode is quite minimal and we can extend it by overriding the template files and css. base.html and index.html are the two main template files and base.css is the main css file required for this exercise. We follow the Django template inheritance to maintain the flexibility.

To change the layout open base.html and add the following source code:


{% block header %}

<nav class=”navbar navbar-default navbar-doublerow navbar-fixed-top”>

<!– top nav –>

<nav class=”navbar navbar-top hidden-xs”>

<div class=”container”>

<div align=”center” style=”text-align:center;background-color: white; width: 108%; height: 50px; background:url(/static/geonode/img/header.png) 0 10px no-repeat”>

<div class=”ams-header”><strong>ASSET MANAGEMENT SYSTEM</strong></div>

<!– right nav top –>

<ul class=”nav navbar-nav pull-right”>

{% if not user.is_authenticated and REGISTRATION_OPEN %}

<li><a href=”{% url “account_signup” %}”>{% trans “Register” %}</a></li>

{% endif %}

{% if user.is_authenticated %}

<li><a href=”#” class=”dropdown-toggle avatar” data-toggle=”dropdown” role=”button” aria-haspopup=”true” aria-expanded=”false”>{% avatar user 42 %} {{ user.username }}<i class=”fa fa-angle-down fa-lg”></i></a>

<ul class=”dropdown-menu”>

<li><a href=”{{ user.get_absolute_url }}”>{% trans “Profile” %}</a></li>

<li><a href=”{% url “recent-activity” %}”>{% trans “Recent Activity” %}</a></li>

<li><a href=”{% url “messages_inbox” %}”>{% trans “Inbox” %}</a></li>

<li role=”separator” class=”divider”></li>

<li><a href=”{% url “admin:index” %}”>Admin</a></li>

<li><a href=”{{ GEOSERVER_BASE_URL }}”>GeoServer</a></li>

<li role=”separator” class=”divider”></li>

<li><a href=”{% url “help” %}”>{% trans “Help” %}</li>

<li role=”separator” class=”divider”></li>

<li><a href=”/account/logout/”>Logout</a></li>

</ul>

</li>

{% else %}

<li><a href=”#” data-toggle=”modal” data-target=”#SigninModal” role=”button” >{% trans “Sign in” %} </a></li>

{% endif %}

<ul class=”nav navbar-nav pull-left”>

<li>

<div class=”search”>

<form id=”search” action=”{% url “search” %}” >

<span class=”fa fa-search”></span>

{% if HAYSTACK_SEARCH %}

<nav class=”navbar navbar-down”>

<div class=”container”>

<div class=”flex-container”>

<!–  <div class=”navbar-header flex-item”>

<div class=”navbar-brand” href=”#”>EAMS</div>

</div> –>

<ul class=”nav navbar-nav navbar-down-color”>

{% block maintabs %}

<li> <a href=”{% url “home” %}”>{% trans “Home” %}</a></li>

<li id=”nav_assets”>

<a href=”#” class=”dropdown-toggle” data-toggle=”dropdown” role=”button” aria-haspopup=”true” aria-expanded=”true”>{% trans “Asset Inventory” %}<i class=”fa fa-angle-down fa-lg”></i></a>

<ul class=”dropdown-menu”>

<li><a href=”{% url “assetinfo” %}”>{% trans “View Assets” %}</a></li>

<li><a href=”http://localhost:8081″ target=”_blank”>{% trans “Add/Edit Assets” %}</a></li>

<li><a href=”{% url “csprofile” %}”>{% trans “Cross Section Profile” %}</a></li>

</ul>

</li>

{% block extra_maintab %}

{% endblock %}

{% endblock %}

</ul>

<ul class=”nav navbar-nav flex-item hidden-xs pull-right”>

</ul>

<!– dropdown only moblie –>

<div class=”dropdown visible-xs pull-right”>

<button class=”btn btn-default dropdown-toggle ” type=”button” id=”dropdownmenu” data-toggle=”dropdown”>

<span class=”glyphicon glyphicon-align-justify”></span>

</button>

<ul class=”dropdown-menu”>

<li> <a href=”{% url “home” %}”>{% trans “Home” %}</a></li>

<li role=”separator” class=”divider”></li>

<li> <a href=”{% url “about” %}”>{% trans “About Us” %}</a></li>

</ul>

</div>

</div>

</div>

</nav>

</nav>


Open site_base.css and  add the following source code.Give the reference of site_base.css after base.css


home #wrap {    margin-top: -20px;    padding-bottom: 0; }

/*scroll effect*/

.navbar-trans {   background-color: transparent; border: none;  transition: top 1s ease; }

.eams-header {  float: left;  font-size: 20px;  line-height: 50px;  color: #fff;  margin-left:200px;

}

/*double row*/

.navbar-doublerow > .navbar{

display: block;

padding: 0px auto;

margin: 0px auto;

min-height: 32px;

height: 52px;

}

.navbar-doublerow .nav{

padding: 0px auto;

}

.navbar-doublerow .dividline{

margin: 5px 5px;

padding-top: 1px;

background-color: inherit;

}

/*top nav*/

.navbar-doublerow .navbar-top ul>li>a {

padding: 10px auto;

font-size: 12px;

top: 15px;

color:#fff;

/*down nav*/

.navbar-doublerow .navbar-down .navbar-brand {

padding: 0px auto;

float: right;

color: #fff;

<!– font-size: 16px; –>

}

.navbar-down-color {

color: #fff;

}

.navbar-doublerow .navbar-down ul>li>a{

<!– font-size: 16px; –>

color: #fff;

font:bold;

transition: border-bottom .2s ease-in , transform .2s ease-in-out;

}

.navbar-doublerow .navbar-down ul>li>a:hover{

color: #000;

}

.navbar-doublerow .navbar-down .dropdown{

padding: 5px;

color: #000;

}

.navbar-doublerow .navbar-down .dropdown ul>li>a,

.navbar-doublerow .navbar-down .dropdown ul>li>a:hover{

color: #000;

border-bottom: none;

}

.navbar-doublerow.navbar-trans.afterscroll {

}

.navbar-doublerow.navbar-trans.afterscroll {

top:-50px;

}

 

.flex-container {

display: flex;

justify-content: space-between;

}


Now edit the index.html file and add the following code


{% extends “site_base.html” %}

{% load i18n %}

{% load staticfiles %}

{% load base_tags %}

 

{% block title %} {% trans “Welcome!” %} – {{ block.super }} {% endblock %}

 

{% block body_class %}home{% endblock %}

{% block mainbody %}

<div class=”container-fluid”>

</br></br>

<div class=”row”>

<div class=”col-sm-3 col-sm-offset-1 blog-sidebar” style=”overflow-y:scroll”>

<div class=”sidebar-module sidebar-module-inset”>

<h4 class=”h4″><strong>About AMS</strong></h4>

<p>AMS being a web based platform with GIS based information systems will consist of all sort of hydro-meteorological, physical, spatial and legacy data concerning the river Embankment Infrastructure in the Indian territory of Rapti Basin. </p>

<p><a class=”btn btn-primary” href=”{% url “about” %}” role=”button”>View More &raquo;</a></p>

</div>

<!–  <div class=”sidebar-module”>

<h4 class=”h4″><strong>Flood Forecast</strong></h4>

<div class=”sidebar-module-inset”>

</div>

</div> –>

<div class=”sidebar-module”>

<h4 class=”h4″><strong>Alerts</strong></h4>

<div class=”sidebar-module-inset”>

<iframe src=”/static/geonode/Alerts.html” width=”100%”></iframe>

</div>

</div>

<div class


Save the changes and reload the browser to see the updated template. Your interface should look like below.

EAMS_GeoNode_1

In the next blog we will write, how to extend geonode by creating apps to add your custom functionality.

One can reach out to us support@geoithub.com for any further support required on GeoNode.

Related Posts

About The Author

Leave a Reply

Be the First to Comment!

Notify of
avatar

wpDiscuz
Sign Up
Fields with (*) are required
Account Info
Password must be at least 7 characters long. To make it stronger, use upper and lower case letters, numbers and symbols.
Type your password again.
 
Profile Info
 
 
Prove you're not a robot