Gibt es von einer TYPO3-Website nicht nur eine Instanz, sondern mehrere (lokal, Development, Staging, Production) kann man sich leicht im Browsertab vertun – oder man färbt einfach das Backend context-abhängig um.
Application Context
Was ein Application Context ist, darauf wird hier nicht mehr eingegangen. Unter Links am Ende des Artikels finden sich weitergehende Erklärungen hierzu.
Eigenes Skin zum Überschreiben des Layouts
Ein neues Skin lässt sich schnell mit ein paar Zeilen in der ext_tables.php definieren:
if (!\TYPO3\CMS\Core\Utility\GeneralUtility::getApplicationContext()->isProduction()
) {
$GLOBALS['TBE_STYLES']['skins']['my_website'] = [
'name' => 'My Skin',
'stylesheetDirectories' => [
'css' => 'EXT:my_website/Resources/Public/Css/Backend/'
]
];
}
In diesem Fall wird also stets das Skin angewandt, falls sich die TYPO3-Instanz nicht im Production-Context befindet. Weitere Unterscheidungen, (z.B. Staging) können analogbehandelt werden.
CSS zum Umfärben
Eine Änderung der Hintergrundfarbe war mir stets zu auffällig – oder zu unauffällig. Daher entschied ich mich für ein Hintergrundbild, dass zurückhaltend, aber dennoch markant anders aussieht:
/* v8 */
.typo3-topbar-site-logo {
box-shadow: none;
}
.typo3-topbar-container {
background: #999 url('../../Images/Backend/backend-bg-dev.gif') repeat-x;
}
[id="typo3-topbar"],
.typo3-topbar-site-logo,
.typo3-topbar-navigation,
.typo3-topbar-navigation-search .form-control {
background: unset;
}
/* v9 */
.scaffold-topbar{
background-image: url('../../Images/Backend/backend-bg-dev.gif');
background-repeat: repeat-x;
background-color: inherit;
}
.topbar-header-site::before,
.topbar-header-site::after,
.toolbar {
background: unset;
}
Diese Lösung wurde ausprobiert unter TYPO3 v7-9.