1.32. Как настроить внешний вид Веб ГИС¶
Примечание
Эта функциональность доступна только для пользователей плана Premium с правами администратора.
Веб ГИС поддерживает настройку своего внешнего вида. Внешний вид включает: логотипы, цвета шапки, фона, кнопок и других элементов.
1.32.1. Загрузка логотипа¶
Вы можете поставить свой логотип вместо логотипа NextGIS в верхнем левом углу. Изменить/убрать логотип NextGIS на самой Веб карте - нельзя.
Чтобы загрузить логотип, в панели управления (см. Рис. 5.5., п.1) необходимо выбрать пункт Логотип и в открывшемся окне загрузить файл в формате PNG, высотой до 45 px, ширина до 200 px. После этого требуется нажать на кнопку «Сохранить».
1.32.2. Изменение стиля элементов интерфейса¶
Войдите в свою Веб ГИС с правами администратора, откройте раздел Панель управления и выберите пункт Пользовательские стили CSS.
В открывшейся вкладке можно задать собственные стили CSS. Они будут использованы для оформления всех страниц вашей Веб ГИС.
Изменить цвет шапки¶
.header{background-color: #F44336; color: #fff;}
Скрыть пункт Войти¶
Пункт будет скрыт с Веб-карт и со всех остальных страниц.
.header-nav {
display: none;
}
Скрыть кнопки Поделиться, Печать с Веб-карт¶
.navigation-menu__item[data-item-value=sharePanel],
.navigation-menu__item[data-item-value=printMapPanel]{
display: none;
}
Скрыть кнопки Увеличения и Уменьшения зума, кнопки Домой¶
.control-pane.control-pane--top.control-pane--left {
display: none;
}
Скрыть заголовок окна идентификации объекта на веб-карте¶
div.ngwPopup__content div div.dijitAlignTop,
div.ngwPopup__features span.ngwWebmapToolIdentify-controller {
display: none;
}
Скрыть иконки у слоёв на веб-карте¶
.dijitIcon.dijitTreeIcon.dijitLeaf {
display: none;
}
.dijitIcon.dijitTreeIcon.dijitFolderOpened {
display: none;
}
.dijitIcon.dijitTreeIcon.dijitFolderClosed {
display: none;
}
Сделать фон веб карты другим цветом¶
.ol-viewport {
background-color: #000;
}
Расширенный пример настройки внешнего вида Веб ГИС¶
Этот пример показывает, как настроить большинство изменяемых элементов внешнего вида вашей Веб ГИС. Вы можете использовать фрагменты приведенных ниже стилей в своей Веб ГИС как есть или с нужными вам изменениями. Увидеть эти стили в действии можно тут.
/* 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;
}