Darstellung der Inhaltselemente im Backend anpassen

Hallo Leute!

Habe schon sehr lange im Netz recherchiert, leider keine Lösung gefunden.
Einige Artikel sind für Laien (meinen Kunden) etwas unübersichtlich.
Ich würde ihm das Bearbeiten der Inhaltselemente gerne etwas übersichtlicher gestalten, indem ich die Darstellung anpasse.
Beispielsweise sollen Elementtypen "Modul" farblich etwas anders als die Elementtypen "Text" sein.
Ist das irgendwie möglich?

Theoretisch kannst du das über css machen, also die Gestaltung.
Umbauten der Gesamtdarstellung allerdings über tmeplates

Also ich habe gesehen, das Contao für die unterschiedlichen Elementtypen keine extra klassen vergibt, deshalb müsste ich das erstmal im Template realisieren.

Kann ich die backend Templates auch über das Template-Modul anpassen? Wenn ja, welches Template ist für die Darstellung der Inhaltselemente zuständig?
Ich hatte mal so eine Erweiterung bei eins meiner vergangenen Projekte. Diese hieß Subcolumns oder so....also ein Spaltenset. Dort konnte man sogar die Backend-farbe auswählen, wäre cool, wenn so etwas in jedem Element zu verfügung stehen würde.

Ich mache das für Kunden so, dass ich einfach überflüssige Elementypen für ihn ausblende. Dafür git es das Modul: https://contao.org/de/erweiterungsli...access.de.html

Damit kriegst du shcon mal etwas Luft in die Liste, denn nicht alles verwendet der Kunde dann.

Die Tmeplates selbst stecken im admin Ordner

Ok, danke dir. Schau ich mir mal an.

Du kannst eine Datei anlegen system/config/initconfig.php. Über diese Datei kannst du dein eigenes CSS und JS mit ins BE bringen.

PHP-Code:

---

<?php

/**
 * Here you can add custom initialization routines that are executed
 * on every back end and front end request.
 */

/** Some extra BE CSS and JS */
if(TL_MODE == 'BE')
{
  $GLOBALS['TL_CSS'][]        = 'files/css/_my_be.css';
  $GLOBALS['TL_JAVASCRIPT'][] = 'files/js/_my_be.js';
}

---

Im BE läuft MooTools, damit kannst du den Elementtyp ermitteln und eine Klasse in z.B. den Listenpunkt bringen.

HTML-Code:

---

/**
 * files/js/_my_be.js
 */

(function($) {
  window.addEvent('domready', function() {

    // Individual preview of different CE types
    var ceTypes = $$('.tl_content .cte_type');

    Array.each(ceTypes, function(ce) {
      ce.getParent('li').set('data-cetype', ce.get('text'));

    });

  });
})(document.id);

---

HTML-Code:

---

/**
 * files/css/_my_be.css
 */

/** Individual preview of different CE types */
li[data-cetype="Text"] {
  background: red;
}
li[data-cetype="HTML"] {
  background: blue;
}

---