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.1. Upload a logo
You can change the upper-left logo (present on all pages), you can’t change the Web map logo (lower right).
To upload a logo choose Custom logo on control panel (see item 1 in Pic. 5.5.) and in opened window upload a file in PNG format with height up to 45 px, width up to 200 px. Then press “Save”.
1.32.2. Custom CSS examples
Sign in as the user with administrative privileges and open Control panel, then select Custom CSS.
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.2. Hide sign in link
This will hide sign in text from Web maps and all other pages. You’ll have to type sign in link manually to sign in.
.header-nav {
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;
}