Ein individuelles Contao-Backend Design umsetzen, schnell und einfach
Das Contao Backend ist optisch eigentlich recht schön, zumindest ist dies meine persönliche Meinung. Es ist aber meistens sehr praktisch, wenn das Backend zumindest zu einem gewissen Teil auf die Optik des Frontend angepasst wird. Gerade wenn man viele Contao-Webprojekt im Support parallel bearbeitet, ist es wichtig auch optisch das Feedback zu haben, in welchem Backend man sich gerade befindet.
Auch für den Kunden selbst ist es toll, wenn er die eigene Optik im Backend vorfindet. Es kann die Pflege der eigenen Webseite dann noch "schöner" machen. Als Webdesigner sollte man ja auch die Motivation des Kunden im Auge behalten.
Natürlich kann man das Backend komplett anpassen und auf den Kopf stellen, oder mit Zusatzmodulen und Templates extreme Designänderungen vornehmen. Dies ist aber an dieser Stelle nicht gewünscht. Es geht um kleine, gezielte Eingriffe, die einfach mit geringem Zeitaufwand machbar sind und das "Contao-Feeling" erhalten sollen. Es sind Vorschläge, die auch zum weiteren experimentieren einladen. Wichtig, das Beispiel hier bezieht sich auf Contao 4.9
1.) Im Ersten Schritt erstellt man im Contao-Backend das Template
be_main.html5
benennt es nicht um, und editiert dieses Template. Hier wird nun ein link zu einer CSS-Datei ergänzt mit der man das Backend beeinflussen möchte, z.B. backend.css
Den Pfad kann man natürlich je nach Wunschziel anpassen:
<link rel="stylesheet" href="<?= TL_ASSETS_URL ?>assets/css/backend.css">Eine guter Platz diesen link-tag im Template einzufügen ist direkt unter:
<?= $this->stylesheets ?>Unsere gewünschte Vorgabe ist es, eine Position für das Logo einzufügen und einen Link zu einem Supportportal in der oberen Navigation zu ergänzen. Dazu wird dieser Baustein nun im Template ergänzt und zwar im header, direkt nach der H1 Headline, also dem schließenden </h1>:
<div id="kundenlogo"></div>Um die Navigationspunkte oben anzupassen, konnte man dies bis Contao 4.4 auch gut direkt im Template tun. Nun bei Contao 4.9 ist dies im Template aber ausgelagert. Einen neuen Link vorne dran zu ergänzen geht aber immer noch direkt im Template. Das sieht dann an der passenden Stelle so aus:
<div id="kundenlogo"></div>
<ul id="custommenubackend">
<li><a href="https://www.liquid-artwork.de/support.html" class="linksupport" title="LIQUID-ARTWORK Supportportal"target="_blank">Support</a></li>
</ul>
<?= $this->headerMenu ?>2.) Nun folgt der nächste Schritt. Die CSS-Datei, die im Template verknüpft wurde, kann nun angelegt und an passender Stelle platziert werden. In diesem Fall im integrierten CSS-Editor (oder eben im Ordner /assets/css), wenn man den Pfad anpasst kann man diese aber auch je nach Handhabung an anderer Stelle, z.B. in den Files ablegen. Wichtig ist nur, dass die Verknüpfung stimmt:
backend.css
mit folgenden Beispiel-Inhalten:
#header .inner {
position:relative;
background-color:#a30000;
}
@media only screen and (min-width: 798px) {
#kundenlogo {
width:201px;
height:36px;
left:120px;
top:2px;
position:absolute;
display:inline-block;
background-image:url("files/backend_logo.png");
background-repeat:no-repeat;
}
}
#tmenu li.submenu span.h2:hover {
background-color:#df343a;
}
ul#custommenubackend {
right:434px;
top:13px;
position:absolute;
}
#header a:hover {
color:#fc6a6f;
}
#tl_navigation .menu_level_1 li.current {
border-color:#df343a;
}Im Großen und Ganzen wird im Backend ein Logo der Webseite gezeigt, der Hintergrund des oberen Balkens neu eingefärbt, der Sonderlink wird platziert, die hover neu definiert und die kleine Rahmen in der linken Navigation in der Farbe angepasst.
Wie erwähnt ist das oben beschriebene nur ein Beispiel und kann auf Wunsch ausgebaut oder komplett anders umgesetzt werden. Es ist ein Ansatz der vielleicht hilft, das Thema Backend-Designanpassungen schnell und einfach anzugehen.
Nachtrag: Sollten sich die Änderungen im CSS nicht im Backend zeigen (auch nicht mit F5, Aktualisieren der Browsers), dann öffnet im Browser (Firefox) die Konsole (F12) und aktualisiert die Webseite (F5). In der Regel wird dann der Cache so geleert dass die Änderungen angezeigt werden.
Kein Erfolg mit den hier beschriebenen Contao-Lösungen? Klappt es nicht mit dem gewünschten Contao-Update oder dem Umzug auf einen neuen Hostingserver?
Wenn die Frustration zu groß wird, einfach bei mir melden:
info@liquid-artwork.de - Ansprechpartner: Lars Scheumann
oder per Telefon: 07223 / 91 59 372
Fragen Sie den Contao Spezialisten
Manchmal ist es besser solche umfangreichen Aufgaben dem Profi zu überlassen, der schneller und sorgfältiger damit umgehen kann. Kostet seinen Preis, aber lohnt sich schnell, bevor man sich tagelang damit herum ärgert. LIQUID-ARTWORK betreut auch Kunden die ihre Webseite selbst erstellt haben, oder durch Dritte erstellt wurden. Kurze Anfrage bei mir und nach einer ersten Prüfung kann ich meist einen groben Preis nennen. Die Anfrage bei mir als alleine kostet dabei nichts!
