'Pimcore Custom Admin Styles/Themes

I'm trying to "skin" the admin interface of Pimcore 5. Based on Pimcore 5 documentation regarding Plugin Backend UI (and other googling which I currently can't reproduce) I understand that I might create a plugin (extension) which overwrites CSS styles when loaded, with the ones I define in the plugin's .css files.

So I've generated a simple bundle (using ./console pimcore:generate:bundle) which looks like the following:

<?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'
        ];
    }
}

The CSS file AdminStylesOverwrites.css looks like:

.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;
}

The extension/bundle is loaded without errors, but after "Clear cache and reload" no styles seem to be affected (admin looks the same and via "inspect element" the related style information doesn't e.g. contain the color #daf5ff.

Did I understand something wrong? Does someone ever successfully styled/skinned a Pimcore 5 system?

Thanks a lot in advance! Gabriel

csscustomizationpimcorepimcore-v5


Solution 1:[1]

I realise I'm also late to this but the following might help someone. Pimcore's event API can be used to add in css/js to customize the admin interface. This example uses an event subscriber to listen for the bundle CSS_PATHS event then adds in a custom css file.

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'
        ]));
    }
    
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Alasdair Shields

Related Questions