Hi gerald,
ich habe zwar nicht genau das gleiche umgesetzt, aber etwas Ähnliches – vielleicht hilft dir das als Ansatz weiter.
Ich habe den Redakteuren die Möglichkeit gegeben, die Farbe einzelner Menüelemente selbst zu wählen.
Dazu habe ich die pages-Tabelle erweitert und ein zusätzliches Feld registriert.
<?php
use TYPO3\CMS\Core\Utility\ExtensionManagementUtility;
defined('TYPO3') or die('Access denied.');
ExtensionManagementUtility::registerPageTSConfigFile(
'sitepackage',
'Configuration/TsConfig/Page/backend_layouts.tsconfig',
'Default Backendlayouts'
);
ExtensionManagementUtility::registerPageTSConfigFile(
'sitepackage',
'Configuration/TsConfig/Page/general.tsconfig',
'General Page TSConfig'
);
$tempColumns = [
'tx_sitepackage_menucolor' => [
'label' => 'LLL:EXT:sitepackage/Resources/Private/Language/locallang_db.xlf:pages.tx_sitepackage_menucolor.label',
'description' => 'LLL:EXT:sitepackage/Resources/Private/Language/locallang_db.xlf:pages.tx_sitepackage_menucolor.description',
'config' => [
'type' => 'select',
'renderType' => 'selectSingle',
'items' => [
[
'label' => '-',
'value' => '',
'icon' => ''
],
[
'label' => 'Marine 100',
'value' => '#002C50FF',
'icon' => 'EXT:sitepackage/Resources/Public/Icons/Backend/marine.svg'
],
[
'label' => 'Marine 70',
'value' => '#002c50b3',
'icon' => 'EXT:sitepackage/Resources/Public/Icons/Backend/marine-70.svg'
],
[
'label' => 'Marine 50',
'value' => '#002C5080',
'icon' => 'EXT:sitepackage/Resources/Public/Icons/Backend/marine-50.svg'
],
],
'fieldWizard' => [
'selectIcons' => [
'disabled' => false,
],
],
],
],
];
ExtensionManagementUtility::addTCAcolumns('pages', $tempColumns);
ExtensionManagementUtility::addFieldsToPalette(
'pages',
'layout',
'--linebreak--,tx_sitepackage_menucolor',
'after:backend_layout_next_level'
);
Und in der ext_tables.sql habe ich das Feld ergänzt:
CREATE TABLE pages (
tx_sitepackage_menucolor varchar(9) DEFAULT '' NOT NULL,
);
Im Frontend prüfe ich dann über {item.data.tx_sitepackage_menucolor}, ob ein Wert gesetzt ist, und dementsprechend füge eine zusätzliche CSS-Klasse oder Inline-Styles hinzu.
Z. B. in deinem Menü-Template:
<f:variable name="menuColor">{item.data.tx_sitepackage_menucolor}</f:variable>
<div class="svg-container"{f:if(condition:menuColor,then:' style="background-color:{menuColor}"')}>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
<path class="arrow-svg" d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10z"/>
</svg>
</div>
Ich denke dieses Prinzip lässt sich auch für deinen Fall anwenden.
VG
Johannes