Кастомизация с использованием css файла

Так как в окне кастомизации возможно настроить не все стили для ZuluGIS Online, то для этого используют «ручной» метод с CSS файлом. Чтобы это сделать, в папку где установлен сервер (по умолчанию для 32-битной версии C:\Program Files (x86)\ZuluGIS для 64-битной версии C:\Program Files\ZuluGIS) нужно добавить файл ZuluGISOnlineCustom.css в который вручную дописываются те изменения интерфейса, которые невозможно настроить через окно кастомизации.

[Примечание]Примечание

Пример можно скачать с нашего сайта: zip архив, с файлами кастомизации.

[Предупреждение]Предупреждение

В том случае, если настройка производится и с помощью окна кастомизации (ZuluGISOnlineCustom.css) и в «ручную» с использованием файла ZuluGISOnlineCustom.css, то необходимо обратить внимание на следующее. Последовательность загрузки этих файлов при загрузке клиента: сначала загружается ZuluGISOnlineCustomTheme.css и затем ZuluGISOnlineCustom.css. Следовательно настройки заданные вручную могут перекрывать настройки, заданные в окне кастомизации.

При наличии лицензии возможно:

Фрагмент css файла с примерами кастомизации и комментариями:

/* Цветовая схема по умолчанию */

/* Основной цвет */
:root {
    --global-background: 255, 255, 255;
    --map-background: 255, 255, 255;

    --color-primary: 55, 128, 99;
    --color-primary-light: 214, 233, 198;
}

/*=== Экран логина ===*/

/* Цвет фона карточки логина */
:root {
    --login-background-color: 241, 241, 241;
}

/*=== Экран карты ===*/
/* Цвет кнопок инструментов на экране карты */
:root {
	--tool-button-bg-color: 0, 60, 136;
	--tool-button-fg-color: 255, 255, 255;
}

/*=== Геометрия объектов ===*/
/* Цвет текущего выделенного элемента на карте */
:root {
    --color-highlight-element: 255, 0, 0;
}

/* Цвет элемента в группе */
:root {
    --color-selection-element: 255, 204, 51;
}

/* Цвет включенного элемента в инструментах анализа */
:root {
    --color-on-element: 0, 200, 0;
}

/* Цвет выключенного элемента в инструментах анализа */
:root {
    --color-off-element: 200, 0, 0;
}

/* Цвет "резиновых" линий при перемещении элемента */
:root {
    --color-rubber-element: 255, 255, 51;
}

/*=== Список слоёв ===*/

/* Иконка показа направления */
:root {
    --showdir-btn-color-inactive: 0, 0, 0;
    --showdir-btn-color-active: 0, 0, 255;
}

/*=========== Изменение функциональности ===========*/

/* Скрытие поля Sys в карточке элемента*/
div.zws-info > div.tab-content > div.tab-pane > table.zws-info-table > tbody > tr:nth-child(1) {
    display: none;
}

/* Изменение текста "ZuluGIS Online" -> "Ваш текст" на экране логина*/
div.login-card > h2 > span {
/*убираем старый текст*/
    display: none;
}
div.login-card > h2:after {
/*показываем новый*/
    content: "Ваш текст";
}

/* Скрыть приветствие на главной странице */
.welcome-container {
display: none;
}

/* Просмотр PDF файлов без скачивания */
:root { --open-pdf-in-separate-window: true; 
}

/* Скрыть название неймспейса */
div.title-selected-layer {
   display: none;
}

/* Сортировка шаблонов быстрого поиска по имени*/
:root {
--layer-quick-search-sort-by-name: true;
}

Обработка событий

Текущая версия позволяет обрабатывать такие события как клик в карту и выделение объекта на карте. Для управления интерактивностью поведения элементов необходимо создать свой javascript скрипт c названием ZuluGISOnlineCustom.js и разместить его в папке где установлен сервер (по умолчанию для 32-битной версии C:\Program Files (x86)\ZuluGIS для 64-битной версии C:\Program Files\ZuluGIS) ZuluServer.

[Примечание]Примечание

Файл можно скачать с нашего сайта: ZuluGISOnlineCustom.js.