1.21. How to change the look of your Web GIS

Note

This functionality is available only to nextgis.com Premium users for users with administrative privileges.

You can customize the look of your Web GIS, including logos, backgrounds, header and buttons colors etc with a little bit of CSS magic:

  1. Sign in as the user with administrative privileges and open Control panel, then select Custom CSS.
  2. Enter your own CSS rules. They will be used throughout your Web GIS on all its pages.

1.21.1. Custom CSS examples

1.21.1.1. Change header color:

.header{background-color: #F44336; color: #fff;}

1.21.1.3. Hide Print, Share buttons from Web maps:

.navigation-menu__item[data-item-value=sharePanel],
.navigation-menu__item[data-item-value=printMapPanel]{
        display: none;
}

1.21.1.4. Hide header of the Web map feature identification popup window:

div.ngwPopup__content div div.dijitAlignTop,
div.ngwPopup__features span.ngwWebmapToolIdentify-controller {
    display: none;
}

1.21.1.5. Hide layer icons on Web map:

.dijitIcon.dijitTreeIcon.dijitLeaf {
    display: none;
}
.dijitIcon.dijitTreeIcon.dijitFolderOpened  {
    display: none;
}

.dijitIcon.dijitTreeIcon.dijitFolderClosed {
    display: none;
}

Note

At the moment you can’t upload a new logo by yourself, but we can do it for you. If you want us to do it simply send your logo to support@nextgis.com. Format: PNG, height: up to 45 px, width - any.

1.21.1.6. Advanced example

This example shows how to change the look of pretty much all changeable elements of your Web GIS. You can try these examples as is or change it to your liking. You can also see them in action here.

/* Base background */

body{
  background-color: #fff;
  background-image:url("https://nextgis.ru/img/hypnotize_transparent.png");
}

/* Header text and background color */

.header{
  background-color: #F44336;
  color: #fff;
}

/* Separator color between logo and title */

.header__title-logo{
  border-right: 1px solid rgba(255,255,255,.48) !important;
}

/* User info color in header */

.user-avatar__label{
  background-color: #fff !important;
  color: #F44336 !important;
}

.user-avatar .user-avatar__icon{
  color: rgba(255,255,255,.82) !important;
}

/* Primary button */

.dijitButton--primary{
  background-color: #fff !important;
  color:#f44336 !important;
  font-weight: bold !important;
  border: 2px solid #f44336 !important;
}

.dijitButton--primary:hover{
  background-color: #f44336 !important;
  color: #fff !important;
}

/* Default button */

.dijitButton--default{
  background-color: #fff !important;
  color:#999 !important;
  font-weight: bold !important;
  border: 2px solid #999 !important;
}

.dijitButton--default:hover{
  background-color: #999 !important;
  color: #fff !important;
}

/* Tabs color */

.dijitTabContainerTop-tabs .dijitTabChecked{
  border-top-color: #f44336 !important;
}

/* Left navigation panel on the map */

.navigation-menu{
  background-color: #fff !important;
  border-right: 1px solid rgba(0,0,0,.12) !important;
  color: #000 !important;
}