Jul 18 2023 at 01:19

Как изменить тему оформления в SOGo v.5.8.4

DesignInterfaces*Development for Linux*Server Administration*

Invite pending

После настройки почтового сервера и установки web-морды SOGo передо мной встал вопрос кастомизации интерфейса. В русскоязычном сегменте интернета мне не удалось найти информации по данному вопросу и пришлось обращаться к официальной документации SOGo. Может, для опытных пользователей эта информация будет неинтересна, но для начинающих будет полезна.

Для начала нам нужно изменить конфигурацию SOGo в файле sogo.conf. В моём случае путь к этому файлу лежит по пути /etc/sogo/sogo.conf. В этот файл нужно вставить строки:

SOGoUIAdditionalJSFiles = (js/theme.js);
SOGoUIxDebugEnabled = YES;

После этого перезапускаем сервис SOGo, написав в консоли service sogo restart.

Пол дела сделано. Теперь необходимо перейти к файлу js/theme.js. В этом файле можно изменить цветовую схему. SOGo использует цветовую схему Angular Material. Поэтому в файле мы можем заменить цвета на необходимые нам.

(function() {
  'use strict';

  angular.module('SOGo.Common')
    .config(configure)

  /**
   * @ngInject
   */
  configure.$inject = ['$mdThemingProvider'];
  function configure($mdThemingProvider) {

    /**
     * The SOGo palettes are defined in js/Common/Common.app.js:
     *
     * - sogo-green
     * - sogo-blue
     * - sogo-grey
     *
     * The Material palettes are also available:
     *
     * - red
     * - pink
     * - purple
     * - deep-purple
     * - indigo
     * - blue
     * - light-blue
     * - cyan
     * - teal
     * - green
     * - light-green
     * - lime
     * - yellow
     * - amber
     * - orange
     * - deep-orange
     * - brown
     * - grey
     * - blue-grey
     *
     * See https://material.angularjs.org/latest/Theming/01_introduction
     * and https://material.io/archive/guidelines/style/color.html#color-color-palette
     *
     * You can also define your own palettes. See js/Common/Common.app.js.
     */

    // Create new background palette from grey palette
    var greyMap = $mdThemingProvider.extendPalette('grey', {
      // background color of sidebar selected item,
      // background color of right panel,
      // background color of menus (autocomplete and contextual menus)
      '200': 'ECEFF4',
      // background color of sidebar
      '300': 'D8DEE9',
       // background color of the busy periods of the attendees editor
      '1000': '4C566A'
    });
    $mdThemingProvider.definePalette('frost-grey', greyMap);

    // Apply new palettes to the default theme, remap some of the hues
    $mdThemingProvider.theme('default')
      .primaryPalette('indigo', { // Здесь можно изменить непосредственно цвет почтовой морды
        'default': '400',  // background color of top toolbars
        'hue-1': '400',
        'hue-2': '600',    // background color of sidebar toolbar
        'hue-3': 'A700'
      })
      .accentPalette('pink', { // Здесь можно изменить цвет страницы входа.
        'default': '600',  // background color of fab buttons
        'hue-1': '300',    // background color of center list toolbar
        'hue-2': '300',
        'hue-3': 'A700'
      })
      .backgroundPalette('frost-grey');

    $mdThemingProvider.generateThemesOnDemand(false);
  }
})();

После изменения снова перезагружаем SOGo.

Теперь переходим в браузере к web-морде SOGo https://<ВАШ ДОМЕН>/SOGo.

И теперь мы увидим изменённые цвета. Далее мы может через "Просмотр кода" изменить нужные нам цвета. Когда всё, что нам нужно изменено, переходим в консоль и пишем:

copy([].slice.call(document.styleSheets)
  .map(e => e.ownerNode)
  .filter(e => e.hasAttribute('md-theme-style'))
  .map(e => e.textContent)
  .join('\n')
)
// Исправленный css скопируется в буфер обмена.

Вставляем скопированный css в файл css/theme-default.css. Меняем в /etc/sogo/sogo.conf SOGoUIxDebugEnabled на NO.

Перезапускаем службу SOGo. И всё готово!

PS. После этого вы можете задать своё название SOGo, добавив в /etc/sogo/sogo.conf значение SOGoPageTitle = "<ВАШЕ НАЗВАНИЕ>";

Hubs: