Pimcore 自定义管理样式/主题

Question

我正在尝试“剥皮”Pimcore 5 的管理界面。基于 Pimcore 5 有关插件后端 UI 的文档（以及我目前无法重现的其他谷歌搜索）我了解我可能会创建一个插件（扩展）加载时会使用我在插件的 .css 文件中定义的样式覆盖 CSS 样式。

所以我生成了一个简单的包（使用

./console pimcore:generate:bundle

），如下所示：

<?php

namespace CustomBundles\AdminStyleBundle;

use Pimcore\Extension\Bundle\AbstractPimcoreBundle;

class CustomBundlesAdminStyleBundle extends AbstractPimcoreBundle
{
    public function getJsPaths()
    {
        return [
            '/bundles/custombundlesadminstyle/js/pimcore/startup.js'
        ];
    }

    public function getCssPaths()
    {
        return [
            '/bundles/custombundlesadminstyle/css/pimcore/AdminStyleOverwrites.css'
        ];
    }

    public function getEditmodeCssPaths()
    {
        return [
            '/bundles/custombundlesadminstyle/css/pimcore/AdminStyleOverwrites.css'
        ];
    }
}

CSS 文件

AdminStylesOverwrites.css

看起来像：

.x-panel-header, .x-header, .x-header-noborder, .x-docked, .x-unselectable, .x-panel-header-default, .x-horizontal, .x-panel-header-horizontal, .x-panel-header-default-horizontal, .x-top, .x-panel-header-top, .x-panel-header-default-top, .x-docked-top, .x-panel-header-docked-top, .x-panel-header-default-docked-top, .x-box-layout-ct, .x-noborder-trl {
    background-color: #daf5ff;
    padding-top: 2px;
    padding-bottom: 2px;
}

.x-panel, .x-autowidth-table, .x-grid-header-hidden, .x-box-item, .x-accordion-item, .x-panel-default, .x-tree-panel, .x-tree-lines, .x-grid, .x-collapsed, .x-panel-collapsed, .x-panel-default-collapsed {
    background-color: #daf5ff;
    padding-top: 2px;
    padding-bottom: 2px;
}

.x-panel-header-title-default, .x-accordion-hd, .x-panel-header-title {
    background-color: #daf5ff;
    padding-top: 2px;
    padding-bottom: 2px;
}

扩展/包加载时没有错误，但在“清除缓存并重新加载”之后，样式似乎没有受到影响（管理看起来相同，并且通过“检查元素”，相关样式信息不包含颜色

#daf5ff

）。

我是不是理解错了什么？有人成功设计过 Pimcore 5 系统的样式/皮肤吗？

提前非常感谢！ 加布里埃尔

Answer 1

我意识到我也迟到了，但以下内容可能会对某人有所帮助。 Pimcore 的事件 API 可用于添加 css/js 来自定义管理界面。 此示例使用事件订阅者来侦听捆绑包 CSS_PATHS 事件，然后添加自定义 css 文件。

namespace App\EventListener;

use Symfony\Component\EventDispatcher\EventSubscriberInterface;
use Pimcore\Event\BundleManagerEvents;
use Pimcore\Event\BundleManager\PathsEvent;

class PimcoreAdminListener implements EventSubscriberInterface
{
    public static function getSubscribedEvents()
    {
        return [
            BundleManagerEvents::CSS_PATHS => 'onCssPaths',
        ];
    }
    
    public function onCssPaths(PathsEvent $event)
    {
        $event->setPaths(array_merge($event->getPaths(), [
            '/assets/css/my-pimcore-admin-customizations.css'
        ]));
    }
    
}