Стилизация панели управления в зависимости от окружения

Иногда полезно изменить визуальное оформление интерфейса Pimcore в зависимости от текущего окружения (APP_ENV). Это помогает пользователям и редакторам быстро отличить, например, тестовый сервер (Staging/Testing) от рабочего (Production) и убедиться, что они вносят изменения в нужном месте.

Представьте себе, что у вас есть дополнительные среды для постановки и тестирования, и вы хотите дать редакторам намек на то, что они работают в правильной среде.

Начиная с версии Pimcore 10.1.0 (#9794), эта задача решается очень просто: элемент body в административной панели содержит атрибут data-app-env с названием текущего окружения (например, <body class="pimcore_version_11" data-app-env="dev">). Это позволяет применять стили через обычные CSS-селекторы.

переопределение стиля пользовательского интерфейса

Создание Event Subscriber

services:  
    # Регистрация подписчиков событий  
    App\EventSubscriber\:  
        resource: '../src/EventSubscriber/*'  
        tags: [ 'kernel.event_subscriber' ]  

Подпишитесь на событие \Pimcore\Bundle\AdminBundle\Event\BundleManagerEvents::CSS_PATHS, чтобы добавить путь к вашему файлу стилей (в примере: /css/env.css).

<?php  
  
namespace App\EventSubscriber;  
  
class AdminAssetsSubscriber implements \Symfony\Component\EventDispatcher\EventSubscriberInterface  
{  
    public static function getSubscribedEvents(): array  
    {  
        return [  
            \Pimcore\Bundle\AdminBundle\Event\BundleManagerEvents::CSS_PATHS => 'onCssPaths',  
        ];  
    }  
  
    public function onCssPaths(\Pimcore\Event\BundleManager\PathsEvent $event): void  
    {  
        $event->addPaths(['/css/env.css']);  
    }  
}  

Создайте CSS файл по пути /css/env.css. В данном примере мы задаем для фона интерфейса заметный градиент, если окружение не является рабочим (prod).

body:not([data-app-env='prod']) #pimcore_body {  
    background: repeating-linear-gradient(  
        -45deg,  
        #005baa,  
        #005baa 5px,  
        #0c0f12 30px,  
        #0c0f12 10px  
    );  
}  

Вы можете предложить улучшение документации или задать вопрос в комментариях.
Если вам нужна полноценная консультация — вы можете заказать её на нашем сайте.