Pimcore Custom Admin Styles/Themes

dergab Source

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

Answers

comments powered by Disqus