Neues Contao Backend Theme

**ro-a-fi** · 16.12.2013, 01:20

Hallo Contao Community,
erstmal: Ich bin neu hier, also "Hallo an alle!"
Ich arbeite nun schon länger mit Contao und überlege mir derzeit, ob ich ein Backend Theme in diese Richtung realisieren soll.

Update: Download
Das Projekt wurde bereits umgesetzt und ist ab jetzt auf GitHub verfügbar. Einfach das ZIP laden und den Ordner in der Contao Installation in "system/themes/" legen. Danach kann es für den Benutzer ausgewählt werden.
https://github.com/ro-a-fi/ConFlatao

Vorschau
Bearbeiten eines Artikels

Was haltet Ihr davon?
Freue mich über Feedback!

Liebe Grüße

**webstar** · 16.12.2013, 06:28

Erst einmal willkommen im Forum.

Ich mag die linke Navigation sehr, sieht edel aus, lenkt nicht ab.

Mich stört allerdings der Header. Für mich sind da das Aktionen, die ich beim Arbeiten selten benötige. Dafür sind sie mit mit dem orange zu auffallend gestaltet.

Wenn man die Submit-Buttons in der Farbe gestaltet, das kann ich mit gut vorstellen.

**Sven_nrw** · 16.12.2013, 08:07

Hallo und herzlich Willkommen im Contao-Universum. ;-)

Die linke Navigation gefällt mir auch sehr gut. Sie ist ist ein sehr schöner Kontrast zu dem werkseitig ausgelieferten Backendtheme. Nicht jeder mag ein helles Theme.

**ro-a-fi** · 16.12.2013, 08:08

Danke für das schnelle Feedback!

Dass der Header durch seine Farbe sehr hervorsticht – da hast du vollkommen Recht. Mal sehen ob ich das iregdnwie anders hinbekomme.
Mir war an dieser Stelle wichtig, dass der Kopfbereich visuell gefühlt ein gutes "Gegengewicht" zu dem restlichen vielen Inhalt bietet und sich farblich am Contao Orange orientiert, um für Wiedererkennung zu sorgen.

Beim Gestalten der Seite war mir insgesamt vorallem Klarheit, Einfachheit und Konsistenz wichtig. Dabei spielt für mich auch gute Lesbarkeit eine große Rolle.

Das Orange für Submit Buttons zu verwenden ist darüber hinaus meiner Meinung nach eine ziemlich gute Idee :-)
Habe es direkt mal so gemacht, kann es mir auch gut in Verwendung des Sticky-Footer vorstellen.
https://www.dropbox.com/s/q7yhxlijkw...CSS-Footer.png

Für weiteres Feedback wäre ich sehr dankbar ;-)

Grüße

**Dexter Paris** · 16.12.2013, 08:15

Zitat von ro-a-fi

Beim Gestalten der Seite war mir insgesamt vorallem Klarheit, Einfachheit und Konsistenz wichtig. Dabei spielt für mich auch gute Lesbarkeit eine große Rolle.

Ist Dir sehr gut gelungen, gefällt mir! Würde ich sehr als standardmäßiges UI begrüßen …

**ro-a-fi** · 16.12.2013, 09:24

Zitat von Dexter Paris

Ist Dir sehr gut gelungen, gefällt mir! Würde ich sehr als standardmäßiges UI begrüßen …

Danke fürs Lob!

Ich würde das Theme auch veröffentlichen. Allerdings habe ich noch Fragen bezüglich Lizenzen...

Und zwar habe ich beispielsweise die Adobes Open Source Schrift "Source Sans Pro" über Font Face eingebunden.
Und oben im Kopf jeder CSS Datei steht der Kommentar
/* Contao Open Source CMS, (c) 2005-2013 Leo Feyer, LGPL license */

Kann ich das alles so lassen, falls ich veröffentliche, oder muss ich da noch etwas ändern?

Danke im Vorraus,
Gruß

**ciaobello** · 16.12.2013, 13:11

Lizenzen ... ich bin auch kein Experte ... desshalb guck da in der Übersicht. Requrements zeigt an was nötig ist ... dazu gibt es den Lizenztext in voller Länge (separater Link).
http://choosealicense.com/licenses/

Guck doch mal bei guthub wie es die anderen mit den Backend Themen gemacht haben (betreffs Lizenzen)

Mir gefällt das Theme auch sehr gut. Falls es ein offizielles Theme werden sollte (rein hypotetisch), müsste die Lesbarkeit angepasst werden. Das Linke menu sieht toll aus, doch kann ich ohne Lesebrille, die aufgeklappten Unterpunkte, nicht entziffern. Der Kontrast ist zu schwach zum Hintergrund. Contao ist seit den Anfängen auf Barrierefreiheit aus. Dies wäre also noch eine (kleine) Barriere die ausgemerzt werden sollte

.

Vorschlag zu Header, da könntest doch nur den Hintergrund bei der Überschrift "Contao Opensource CMS 3.1.2" anzeigen. Die Links dann so wie im Footer (weisser hintergrund). Dann wirkt das ganze schon weniger hervorstechend.

Veröffentliche das ganze doch einfach mal bei Github, dann kann man Dir PullRequest schicken von den hier gemachten Vorschlägen. Alles was dann Deinem Wille entspricht nimmst an, den rest verwirfst einfach

Community Teamwork eben.

**ro-a-fi** · 16.12.2013, 14:11

Lizenzen ... ich bin auch kein Experte ... desshalb guck da in der Übersicht. Requrements zeigt an was nötig ist ... dazu gibt es den Lizenztext in voller Länge (separater Link). http://choosealicense.com/licenses/

Danke für die Tipps, hab mich auch direkt mal umgeguckt. Die Lesbarkeit anzupassen für Barrierefreiheit ist auf jeden Fall auch in meinem Sinne... Form follows Function ;-) In der Tat sind die Submenü Punkte etwas schlecht zu lesen, da werde ich mich mal dran begeben – ebenso an den Vorschlag bezüglich des Headers.

Veröffentliche das ganze doch einfach mal bei Github, dann kann man Dir PullRequest schicken von den hier gemachten Vorschlägen.

Mit Github kenne ich mich leider kein Stück aus... aber wenn das Sinn macht, mache ich das.
Muss nur ersteinmal rausfinden wie ;-)

**planepix** · 16.12.2013, 14:16

Da kann geholfen werden

Schau dir mal Yanicks Session zu GithHub von der diesjährigen Konferenz an:
http://www.youtube.com/watch?v=c6zPB9Q7gis

**ro-a-fi** · 16.12.2013, 20:40

Danke sehr! Habe mir das Video angesehen – ist schon sehr aufschlussreich und gut erklärt, was der Guter Kerl über VCS erzählt.
Werde eventuell die Tage mal versuchen, das Ganze in ein Repository zu laden.

Bis hierher vielleicht noch weiteres Feedback? ;-)

Grüße!

**ro-a-fi** · 18.12.2013, 12:54

Hallo!

Ich habe die Tage noch etwas weiter an dem Theme gearbeitet.

Hier ein kleines Update:
- Der Header besitzt weniger Sättigung und ist etwas geschrumpft
- Die Menüpunkte sind jetzt komplett klickbar, nicht nur das Wort
- Die Buttons zum Bearbeiten, Verschieben, Löschen, etc. habe ich von der Fläche her etwas vergrößert, um sie leichter klickbar zu machen
- Info Popups und die Dateiverwaltung sind jetzt auch an das Design angepasst
- Allgemein habe ich für Konsistenz im Theme gesorgt und einige Darstellungsfehler behoben

Hier die Artikel Ansicht:
https://www.dropbox.com/s/nuinwff4ad...e-5Artikel.png

Und die Dateiverwaltung im Popup:
https://www.dropbox.com/s/qwhavacmx7...verwaltung.png

Gibt es weitere Vorschläge für Verbesserungen?

Grüße,
Raphael

**Sven_nrw** · 18.12.2013, 15:07

Ich fände es toll, wenn der gerade aktive Bereich in der linken Navigation hervorgehoben ist. In diesem Falle der Screenshots also der Bereich "Artikel". Dies ist für vielleicht ungeübte Kunden ganz hilfreich.

**webstar** · 18.12.2013, 15:59

Entwickelt sich sehr gut! mir gefällt die großflächige Darstellung der Zeilen. Im Artikel-Baum. Was mich selber stört sind die leicht abgerundeten Ecken der Schaltflächen. Das bricht meines Erachtens das gradlinige Design.

Außerdem stören mich die Icons, die sehen sehr altbackend aus und passen nicht zum Design. Aber das ist wohl ein generelles Problem von Contao.

**ro-a-fi** · 19.12.2013, 12:44

Ich fände es toll, wenn der gerade aktive Bereich in der linken Navigation hervorgehoben ist.

Außerdem stören mich die Icons, die sehen sehr altbackend aus und passen nicht zum Design. Aber das ist wohl ein generelles Problem von Contao.

Ich habe mich um beides gekümmert!
- Der aktive Bereich in der Navigation wird jetzt hervorgehoben (ist etwas dunkler als der :hover)
- Die Icons habe ich durch etwas modernere flache Icons ausgetauscht

Beides sieht man auf diesem Screenshot
https://www.dropbox.com/s/78irfhvlo7...e-7Artikel.png

Grüße!

**fabil** · 19.12.2013, 13:36

Ich muss echt sagen, dass die Entwürfe richtig gut aussehen:-)
Nur sollten noch die Input-Felder etc verschönert werden.

Aber im Allgemeinen bin ich dafür, dass dieses Theme das alte ersetzt.

Super Arbeit!:-)

**ro-a-fi** · 23.12.2013, 15:38

Hallo!

Ich habe jetzt einmal alle Dateien des Themes in einen Ordner gepackt.
Wer möchte kann sich das Theme laden und einmal ausprobieren.

Der Entpackte Ordner muss lediglich in der Contao Installation unter "system/themes/" abgelegt werden.
Danach kann es im Contao Backend unter den Benutzer Einstellungen ausgewählt werden.

Download
https://www.dropbox.com/s/u2j2crrqk090usx/ConFlatao.zip

Feedback wird natürlich begrüßt! ;-)

Grüße

**andreasisaak** · 23.12.2013, 15:53

Mit welcher Contao Version hast du das Theme erstellt?

**andreasisaak** · 23.12.2013, 15:58

Mir gefällt das Thema grundsätzlich, was ich aber schade finde ist der verschwendete Platz rechts. Ich arbeite mittlerweile nur noch mit Bildschirmen die eine minimale Auflösung von 1920px in der Breite haben und da ist rechts extrem viel Platz. Perfekt wäre es aber ein mittig ausgerichtetes Theme zu verwenden. Vllt wäre das noch eine Option.

**lionel** · 23.12.2013, 16:49

Hallo,

Dieses Theme gefällt mir auch gut.

Vielleicht können Sie den Kontrast im Menü verbessern? (http://leaverou.github.io/contrast-r...2-on-%23313245)

**folkfreund** · 23.12.2013, 23:05

Vielen Dank für die gelungene Arbeit!

Zitat von andreasisaak

Mir gefällt das Thema grundsätzlich, was ich aber schade finde ist der verschwendete Platz rechts. Ich arbeite mittlerweile nur noch mit Bildschirmen die eine minimale Auflösung von 1920px in der Breite haben und da ist rechts extrem viel Platz. Perfekt wäre es aber ein mittig ausgerichtetes Theme zu verwenden. Vllt wäre das noch eine Option.

Durch mittiges Ausrichten wird aber kein Platz gewonnen... Man könnte doch einfach die Begrenzung auf eine maximale Breite (hier 940px) entfernen. Stattdessen vielleicht

Code:

#header, #container, #footer {
    float: left;
    margin: 0 100px 0 240px;
    position: relative;    width: calc(100% - 340px);
    z-index: 10;
}

Dann würde vielleicht auch genügend Platz sein, um z.B. die Beschriftung in den Selects der Filter vollständig anzuzeigen - das konnte das default-Theme auch nicht

.

Noch ein paar weitere Anmerkungen/Beobachtungen:

Bei den gestylten Selects läuft jetzt allerdings der Text hinter den transparenten Pfeil und macht das Formular hier unleserlich (Version aus dem geposteten ZIP).
Die Schrift in den Tooltips, z.B. im linken Menü, erscheint mir sehr klein (weiß auf schwarzem Grund - Linux, FF 26.0). Ist das durch das Theme gestyled oder durch das Betriebssystem bestimmt?
h1 ist mit font-size:48px recht groß geraten
Die beiden Orange-Töne der Fieldsets und der Buttons wirken uneinheitlich
Im Header möchte ich den Vorschlag von ciaobello unterstützen:

Vorschlag zu Header, da könntest doch nur den Hintergrund bei der Überschrift "Contao Opensource CMS 3.1.2" anzeigen. Die Links dann so wie im Footer (weisser hintergrund). Dann wirkt das ganze schon weniger hervorstechend.

Viele Grüße,
folkfreund

**andreasisaak** · 23.12.2013, 23:44

Mehr Platz war im ersten Moment auch nicht meine Intention. Das schrieb ich auch nirgends. Es ist nur mittlerweile so das Menschen eher mit zentrierten Websites klarkommen weil sie diese gewohnt sind und die Mauspfade nicht so lang sind. Wenn dann das Theme noch etwas breiter ist - perfekt.

**ciaobello** · 24.12.2013, 02:47

Vielen Danke für das Theme. Es ist wirklich gelungen.

Ich habe gesehen dass Du Dich auf Github registriert hast. Anscheinend hast noch keine Zeit gehabt das ausgiebig zu testen?!

Mir ist aufgefallen das Du ein Ellen langen Namen gewählt hast mit Groß/Kleinschreibung. Wenn Du mit der Kommandozeile arbeiten willst, wirst Du sehen das dies wohl nicht der Beste Name ist. Kurz und Kleinschreibung vereinfacht das arbeiten am Terminal.
Falls Du das ändern willst, kannst das auf Github wenn im Repo bist, unter Settings tun (rechts im Menu ganz unten). Der Pfad zum clonen findest übrigens grad unten dran.

Mit welchem OS arbeitest Du denn? (installier dir GIT für Kommandozeile dann ist das OS egal)

Habe hier mal was zusammengestellt wie man mit Git / Github schnell starten kann: http://ciaobello.github.io/

Du hast richtig angefangen, zuerst ein Repo auf Github und dann auf dem Computer via GIT das selbe erstellen und dann auf Github clonen.

Du kannst das übrigens direkt aus der Contao Installation machen (ins system/themes wechseln und mit den Ausführungen von ciaobello.github.io starten).
Nicht vergessen, mit git add "Verzeichnis des Themes" die Daten mit hinzuzufügen. Ansonsten hast nur eine README.md im Repo und Du fragst Dich wo die Daten sind. Es ging bei mir einen Moment bis ich das raus gefunden habe.

Mit dem Nachteil (wenn es aus system/themes machst), das ein verstecktes .git Verzeichnis erstellt wir aber mit dem Vorteil das nach jeder Programmier Session grad wieder abgleichen kannst.

Falls Du den Pull Request noch testen möchtest (darf übrigens jeder der dass hier liest), kannst mir Vorschläge oder Korrekturen fürs Git Tutorial auf diese Weise schicken. Denn Pull Request ist im Menu rechts an 3.ter stelle zu finden (von oben).

***lucina*** · 24.12.2013, 08:47

Moin,

erstmal vielen Dank, habs grad mal in eine 3.2.2 eingespielt.

Breite sehe ich ähnlich, das klebt für mich sehr ungewohnt am rechten Rand, und das war schon etwas was mir an WP nie gefallen hat. Ich empfinde die Orientierung als etwas schwierig, weil ich auf den ersten Blick in der rechten Navigation kaum einen Unterschied wahrnehme, was jetzt der Bereich und was die Überschrift dazu ist. Orange käme für mich besser und klarer.

Icons: jahaaa - einerseits ist das Theme angenehm kontrastreicher als das Original, andererseits schwummern die Icons so vor sich hin. Das ist doch so noch keine Verbesserung, oder? Da fände ich vermutlich "Fontawesome" angenehmer als die "dripicons". Insgesamt finde ich den Einsatz eines Icon-Fonts aber eine sehr schöne Idee.

**tblumrich** · 24.12.2013, 10:46

Ich finde das auch einen sehr interessanten und CI-näheren Ansatz für das Contao Backend. Danke für die schöne Arbeit.

Was noch nicht so funktioniert, ist das Zusammenspiel mit Erweiterungen a'la "directentries", die ich per default benutze. keine Ahnung ob das z.B. mit "EasyThemes" auch so ist, ich nehme es aber an.
Vielleicht kannst du dir das bei Gelegenheit mal ansehen.

Schöne Feiertage!

**folkfreund** · 24.12.2013, 14:54

Hallo,

ich habe ein paar kleine Änderungen vorgenommen:

volle Fensterbreite wird verwendet
Tooltips funktionieren wieder
im linken Menü Unterpunkte eingerückt
Footer transparent, damit der Schatten nicht überdeckt wird
h1 etwas kleiner
Orange-Töne angepasst

Die angehängten Dateien ersetzen die gleichnamigen im Ordner system/themes/ConFlatao.

Ein frohes Fest,
folkfreund

***lucina*** · 24.12.2013, 16:44

Zitat von tblumrich

keine Ahnung ob das z.B. mit "EasyThemes" auch so ist, ich nehme es aber an.

Macht bei mir keine Probleme (Funktion 'als Backend-Module)

**designpilot** · 26.12.2013, 12:02

Hallo ro-a-fi

Ich bin zwar auch noch Neuling (arbeite erst seit gut 3 Monaten mit Contao), aber das Backend Theme ist ja der
Wahnsinn echt. Ich hab es auf meiner Contao 3.2.3 im Einsatz und es funktioniert prima keine Probleme.

**BugBuster** · 26.12.2013, 13:14

Hat das schon mal jemand unter Linux getestet? Sieht bei mir unbrauchbar aus, mit Chrom und Firefox probiert, unterschiedliche wie auch teilweise dieselben Problem.
Falsche oder gar keine Icons, kein Scrollbalken links. Im Opera noch schlimmer, da überdeckt der Main Teil teilweise die linke Navigation, alle Icons fehlen.
Irgendwas muss da mächtig falsch laufen unter Linux.

**ciaobello** · 26.12.2013, 13:43

Habe auch Linux Mint Debian, habs mit Firefox und Chrome getestet ... hier der FF screen:

Links gibt es meiner Ansicht nach keine Icons mehr?! Oder ist das nur in Linux so?

**folkfreund** · 26.12.2013, 14:50

Ich habe es ebenfalls unter Linux (Mint 13) mit FF probiert.

Es scheint aber kein Linux-Problem zu sein:

der fehlende Scrollbalken in der Navigation wird extra per CSS so eingestellt. Ich vermute, dass ro-a-fi das Design nicht durch einen Scrollbar stören wollte...
Bei mir kann aber die Navi links per Mausrad gescrollt werden - separat vom Content.
Die fehlenden Icons in den Listen stammen aus der Ersetzung der Icons durch Zeichen aus dem Vector-Font. Einige Icons werden nicht ersetzt (z.B. das 'Auge'). Dabei passieren manchmal wohl Fehler. Vielleicht sollte zunächst die Verwendung des Vecor-Font wieder entfernt werden. Das sollte man dann lieber später durchgängig, also auch an anderen Stellen im Backend durchführen.

Gruß, folkfreund

**BugBuster** · 26.12.2013, 15:19

So sieht es bei mir aus, Linux Mint 14, FF26:

Nachtrag: Gelöst, siehe weiter unten.

**bizon** · 26.12.2013, 16:03

Unter Manjaro Linux funktioniert es in allen aktuellen Browsern.
Die Navigation hab ich meinen Wünschen angepasst.

**ciaobello** · 26.12.2013, 17:48

Zitat von bizon

Unter Manjaro Linux funktioniert es in allen aktuellen Browsern.
Die Navigation hab ich meinen Wünschen angepasst.

Könntest die .css auch posten? Ich finde es orange in der Navi übersichtlicher

**bizon** · 26.12.2013, 18:11

Zitat von ciaobello

Könntest die .css auch posten? Ich finde es orange in der Navi übersichtlicher

Klar hier bitte.

Ich hab ein paar Farbanpassungen, hauptsächlich wegen des Kontrastes vorgenommen und die Links in der Höhe angepasst, um in der Navi weniger scrollen zu müssen.

**bizon** · 26.12.2013, 18:19

@ro-a-fi
Danke für das tolle Backend-Theme, diese etwas modernere Interpretation kommt auch bereits bei einem Kunden sehr gut an.

Ich vermisse in der Artikelbearbeitung - bei den Content-Elementen - das 'Auge' zum schnellen An- und Abschalten der Inhaltselemente. War das so beabsichtigt?

**ciaobello** · 26.12.2013, 18:28

Danke @bizon hab noch mal die alte css eingespielt und gesehen dass es Dein Kredit ist

... ~~jetzt weiss ich zwar nicht genau ob das orange nicht auch schon Folkfreund drin hatte?~~

Habe aber festgestellt dass erst nach dem Bereinigen der Daten in den Einstellungen die änderungen sichtbar waren. Dass habe ich beim einspielen von Folkfreunds css nicht gemacht.

@Bugbuster .. hast schon mal die Daten bereinigt ?

**bizon** · 26.12.2013, 18:36

Die Änderungen von Folkfreund sind darin enthalten, das Orange bei den Navi-Gruppen(level_1) habe ich hinzugefügt.
Und ja, bei jeder Änderung der Theme-CSS muß in der Systemwartung assets/css bereinigt werden.

**BugBuster** · 26.12.2013, 19:27

Zitat von ciaobello

@Bugbuster .. hast schon mal die Daten bereinigt ?

Ja, bringt gar nichts, habe den Cache auch gar nicht eingeschaltet.

**BugBuster** · 26.12.2013, 19:56

Aja, habe die ZIP ausgepackt aber vergessen die Rechte anzupassen.
Jetzt sieht es besser aus.

Warum sind die Überschriften so riesig?

Code:

h1.main_headline {
    color: #4D555B;
    font-size: 48px;
    font-weight: 200;
    margin: 0;
    padding: 14px 14px 0;
}

48 Pixel ? Da passt keine Headline/Breadcrumb auf eine einzige Zeile mehr...
Auch andere CSS Angaben die für Überschriften oder Labels verwendet werden finde ich viel zu groß.
Keine meiner Erweiterungen sieht so noch vernünftig aus. Da muss man sich schon am Original dran halten und alles im richtigem Verhältnis anpassen.

**folkfreund** · 26.12.2013, 20:14

Hallo BugBuster,

die große Schrift hatte ich bereits verkleinert. Sollte ja auch in den Änderungen von bizon schon drin sein.

Ich schlage allerdings vor, die Ersetzung der Icons vorerst auszukommentieren (ist an vorhandenen Kommentaren leicht zu erkennen) - die teilweise ist das wohl für die verschwundenen Icons verantwortlich.
Wenn wir im BE-Theme durchgängig den Vector-Font einsetzen wollen, dann ist es wohl besser, das schon direkt beim Generieren des BE (Template?) zu verwenden, anstatt nachträglich mühsam per CSS die Images auszublenden und durch Icons zu ersetzen.

Gruß, folkfreund