Пользовательские стили / темы администратора Pimcore

Я пытаюсь «скинуть» интерфейс администратора Pimcore 5. На основе Документация Pimcore 5 о пользовательском интерфейсе плагина (и других поисковых запросов, которые я в настоящее время не могу воспроизвести) я понимаю, что могу создать плагин (расширение), которое перезаписывает стили 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?

Заранее большое спасибо! Габриэль

Вы проверяли / bundles / custombundlesadminstyle / css / pimcore / AdminStyleOverw‌ rites.css, действительно ли файл загружается браузером? Расширение включено? Возможно, у вас просто проблемы со спецификой селектора CSS? Вы пробовали использовать! Important? Бэкэнд Pimcore на самом деле не предназначен для изменения скина. Это потенциально может вызвать проблемы при обновлении Pimcore - вам всегда нужно будет проверять, не нарушен ли стиль какими-либо изменениями ядра.

Igor Benko 20.03.2018 14:32

Довольно поздно, но, возможно, для кого-то актуально: попробуйте запустить bin/console assets:install --symlink. Кроме того, может помочь очистка кеша вашего браузера.

mcuenez 03.08.2020 12:58
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
1
2
1 157
0

Другие вопросы по теме