1.32. 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.

1.32.2. Custom CSS examples

  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.32.2.1. Change header color

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

1.32.2.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.32.2.4. Hide Zoom In, Zoom Out Buttons, Home Buttons

.control-pane.control-pane--top.control-pane--left {
        display: none;
}

1.32.2.5. 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.32.2.6. Hide layer icons on Web map

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

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

1.32.2.7. Change Web map background color

.ol-viewport {
        background-color: #000;
}

1.32.2.8. 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;
}