Neues Contao Backend Theme

[folkfreund]

So, hier mal meine aktuelle Version.

• die Original-Icons werden angezeigt
• die Komboboxen der Filter-Formulare u.ä. werden jetzt besser angezeigt (Pfeil-Element ist nicht mehr durchsichtig

Einfach die beiden Dateien wieder in das ausgepackte Original kopieren...

Gruß, folkfreund

[BugBuster]

Die Icons sind bei mir wieder da, war wie gesagt ein Rechte Problem.

Die Anpassungen von bizon habe ich grad mal rein getan. Schon besser. Aber bei externen Erweiterungen, die auch die Contao Klassen verwenden, passt nicht alles.

[folkfreund]

Aber bei externen Erweiterungen, die auch die Contao Klassen verwenden, passt nicht alles.

Sag mal ein Beispiel - dann wird vielleicht klarer, was nicht funktioniert.

folkfreund

[BugBuster]

Das betrifft bei mir Module, die im Backend als Callback Modul gestartet werden und das ganze Layout selbst generieren.
Dabei habe ich mich an die Contao Klassen gehalten und verwendet.
Hier mal ein Bild, wo ich die Tabellen Überschriften zu groß empfinde.(hier 22 px)

conflatao-botstat.jpg

das kommt von dieser Definition:

#tl_versions th, .tl_folder_list, .tl_folder_tlist {
    background: none repeat scroll 0 0 #F9FAFA;
    border-bottom: 1px solid #E5E5E5;
    font-size: 22px;
    font-weight: 200;
    padding: 7px 0;
}

Mit 16px sieht es besser aus, auch meine Visitor Statistik ist dann nicht mehr zweizeilig bei manchen Titeln.

conflatao-visitorstat-vorher-nachher.jpg

Vorher (22px) | Nachher (16px)

[tblumrich]

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

Ja, schade... dann ist das Theme vorerst nichts für mich. Da directentries noch einige weitere Vorteile für mich bietet (Einrückung Seitenbäume, News- und Eventarchive etc...) als EasyThemes.
Was mir übrigens noch fehlt ist die obere Leiste mit benutzer ***, Frontendvorschau, Startseite und Abmelden... Warum wurde die wegrationalisiert?

Aber wie schon gesagt... prinzipiell sehr sehr schöne Idee!

[bizon]

Was mir übrigens noch fehlt ist die obere Leiste mit benutzer ***, Frontendvorschau, Startseite und Abmelden... Warum wurde die wegrationalisiert?

Gut, dass der erste Teil der Feiertage vorbei ist, denn die Völlerei schlägt wohl auf die Augen.
Schau oben im orangefarbenen Header.

[tblumrich]

Gut, dass der erste Teil der Feiertage vorbei ist, denn die Völlerei schlägt wohl auf die Augen.
Schau oben im orangefarbenen Header.

Ohje. Ich geh dann mal eine Runde laufen... irgendwie brauch ich wohl Sauerstoff nach diesen Tagen...

Sorry. Keine Ahnung warum ich das nicht für voll genommen habe.

[folkfreund]

das kommt von dieser Definition:

#tl_versions th, .tl_folder_list, .tl_folder_tlist {
    background: none repeat scroll 0 0 #F9FAFA;
    border-bottom: 1px solid #E5E5E5;
    font-size: 22px;
    font-weight: 200;
    padding: 7px 0;
}

Mit 16px sieht es besser aus, auch meine Visitor Statistik ist dann nicht mehr zweizeilig bei manchen Titeln.

Super, dann tragen wir alles zusammen und insgesamt haben wir dann ein schönes neuen BE-Theme für's Neue Jahr!

@ro-a-fi: Wie sieht es eigentlich mit GitHub aus?

folkfreund

[ro-a-fi]

Hallo und frohe Weihnachten noch an alle!

Erstmal:
WOW, bin total überwältigt von der ganze Resonanz hier. War über die Feiertage jetzt kaum online und kam jetzt erst dazu mir mal das Feedback durchzulesen. Vielen vielen Dank dafür! Freut mich, dass es euch gefällt und Interesse besteht.

Jetzt zu den Änderungen:
Ich finde einiges sehr sinnvoll und habe es in meine Version übernommen. Danke an folkfreund, BugBuster, bizon, andreasisaak, ciaobello, tblumrich, lionel, lucina und all diejenigen, die sich damit Auseinander gesetzt haben und Ihre Änderungen hier zur Verfügung gestellt haben. Bin mir nur nicht sicher, ob ich alles mitbekommen hab. Bisher mit eingebaut ist Folgendes:

1. volle Fensterbreite wird verwendet (hier sollte man eventuell in Betracht ziehen, ob man das ganze Ding ab einer bestimmten Breite, anstatt auf 100% zu strecken, zentriert. Ich habe vorher bewusst das Ganze nicht auf 100% Breite gemacht, damit die Maus-Wege von der Linken Navigation bis zu den Bearbeitungs-Symbolen auf der Rechten Seite nicht zu weit werden.)
2. Tooltips funktionieren wieder
3. im linken Menü Unterpunkte eingerückt
4. h1 etwas kleiner (sehr gut, war wirklich etwas zu groß )
5. Orange-Töne angepasst (weiß nicht genau was hier passiert ist, aber mir ist selber irgendwann aufgefallen, dass ich für Header, Buttons und hovers irgendwann unterschiedliche Orangetöne verwendet habe – wurde das eventuell nun einheitlich gemacht?)
6. Verwendung der Standard Icons (Neue Icons auskommentiert – wäre auch sehr dafür das ganze im Quellcode irgendwie zu ändern. Die Lösung durch :before war eher ne Notlösung ;-) )
7. “#tl_versions th, ...” (Visitor Statistik?) hat jetzt "font-size: 16px;"

Das ganze steht nun auch auf Github. Da ich jedoch totaler Git Anfänger bin und auch sonst noch mit keinem VCS gearbeitet habe, seid mir nachsichtig, wenn das ganze etwas länger dauert ;-)
https://github.com/ro-a-fi/ConFlato
(Kann mir vielleicht jemand erklären, wie das mit Github jetzt weiter funktioniert?)

Danke nochmal fürs Feedback,
Raphael

[ciaobello]

Kann mir vielleicht jemand erklären, wie das mit Github jetzt weiter funktioniert?

Wie hast es denn jetzt auf github gebracht? Nach meiner Anleitung?

Wenn ja dann bevor weiter arbeitest wieder Clonen damit Server und Lokal gleich ist. Danach jede Änderung mit "git commit" dokumentieren und dann am ende wieder clonen ...

Fork einfach mal meine Anleitung und schreib da was rein (wirst sicher ein Typo finden oder so ) Danach machst ein PullRequest ... und ich nehme ihn wenn ich einverstanden bin an oder lehne ab ... kannst ja immer noch was dazu schreiben.


Apropos ... ich habe mal ein PullRequest an Dich gesendet.

[folkfreund]

volle Fensterbreite wird verwendet (hier sollte man eventuell in Betracht ziehen, ob man das ganze Ding ab einer bestimmten Breite, anstatt auf 100% zu strecken, zentriert. Ich habe vorher bewusst das Ganze nicht auf 100% Breite gemacht, damit die Maus-Wege von der Linken Navigation bis zu den Bearbeitungs-Symbolen auf der Rechten Seite nicht zu weit werden.)

Man muss ja auf einem großen Bildschirm das Browserfenster nicht fullscreen anzeigen, wenn einem der Inhalt dann zu breit wird .
Mit der aktuellen Lösung hat es jeder selbst in der Hand.

Und übrigens: das Theme ist auch responsive: unterhalb von 1024px Breite steht die Navigation über dem Inhalt - schön!
Erst unterhalb von 600px Breite kommen z.B. die Filter der Artikelbearbeitung durcheinander, da sie nicht umbrechen. Die übrige Bearbeitung geht aber sogar bei noch geringeren Breiten. Aber wer bearbeitet schon Webseiten mit dem Smartphone?

Gruß, folkfreund

[ro-a-fi]

Wie hast es denn jetzt auf github gebracht? Nach meiner Anleitung? [...] Apropos ... ich habe mal ein PullRequest an Dich gesendet.

Danke dafür, hat mir denke ich geholfen, mich etwas mit GitHub vertraut zu machen. Zum Glück gibt es ja eine Programmoberfläche und auch eine gute Dokumentation... und das Prinzip mit dem PullRequest habe ich denke ich jetzt auch verstanden ;-)

Man muss ja auf einem großen Bildschirm das Browserfenster nicht fullscreen anzeigen, wenn einem der Inhalt dann zu breit wird. Mit der aktuellen Lösung hat es jeder selbst in der Hand. [...] Und übrigens: das Theme ist auch responsive: unterhalb von 1024px Breite steht die Navigation über dem Inhalt [...]

Wo du Recht hast, hast du Recht. Aus diesem Grund habe ich mich jetzt doch auch dazu entschieden, dass Ganze wirklich auf 100% zu strecken. Und weg mit dem Schatten am rechten Rand, der hatte sowieso keinen Sinn ;-)

Und Ja, zu einem kleinen Teil ist es "responsive" Ich dachte mir, falls wirklich jemand unterwegs mal nen Artikel bearbeiten will, dann ist das mit der Navigation wenigstens etwas. Mit den Filtern hast du auch Recht, die werden irgendwie unbrauchbar, wenns zu klein wird.

Mal weiter gedacht: Wenn man wirklich davon ausgeht, mit dem Smartphone nutzt man Contao nur, um eventuell unterwegs etwas in Artikel Elementen wie Texten etc. zu ändern, könnte man dafür bestimmte Dinge auf dem Smartphone ausblenden (Filter und sonstiges) – was würdet ihr davon halten?

In Älteren Posts aus diesem Thread ging es darum, das Orange im Header eventuell zurück zunehmen, da die Funktionen dort eigentlich eher weniger prominent dargestellt werden müssten. Ich bin der Bitte mal nachgekommen und muss sagen, das ganze sieht jetzt meiner Meinung nach deutlich "erwachsener" aus. Ich habe auch ein paar andere Dinge wie Zeilenhöhen hier und da etc. geändert, und den Tooltip mehr ans Design angepasst.

Das ganze gibts natürlich auf GitHub
https://github.com/ro-a-fi/ConFlatao

... und sieht Momentan so aus (Screenshot)


Was haltet ihr davon?

Grüße

[Tim G]

Hey,
coole Arbeit. Generell gefällt es mir auch.
Da ja Lob weniger produktiv ist, als produktive Kritik, hier mein Feedback.

Erster Eindruck:
...ist gut, wenn gleich ich das Gefühl habe nicht mehr in Contao zu sein. Das ist aber erstmal ok. Soll ja neu sein. Schrift und Schriftproportion ist mir zu nah an dem aktuellen Windows CI.

Responsive:
Bei mir sprang das Layout sofort in den "responsive" Mode. Der muss raus bzw. darf nicht so früh feuern. Ich nutze oft nen geteilten Bildschirm für zwei offene Contao Fenster. Beide springen in den responsive Mode, obwohl gefühlt noch ne Menge Platz wäre.
Ich würde den komplett rausnehmen bzw. erst feuern, wenn der Bildschirm tatsätlich die Linke Spalte trifft bzw. ein Layout tatsächlich nur für Mobile-Geräte feuern. Klingt übertrieben, reicht aber völlig.
Persönlich finde ich diesen Responsive Kram sehr oft, sehr störend, gar rückschrittig. Von einem Moment auf den anderen wird dem User eine komplett andere Wahrnehmung gegeben.

Freier Raum:
Sehe ich voll wie Andreas. Sicher viel Luft überall wirkt erstmal befreiend, aber es macht die Wege extrem weit und hier ist vieeeelll Luft.
Die Linke Spalte muss bereits gescrollt werden bei ner x1050 Auflösung in Firefox, wenn die BE Module ausgeklappt sind. Für mich bereits ein Grund das CMS nicht zu nutzen, wäre ich auf der Suche. Das normale Theme braucht hier nur die Hälfte an Platz
Von den Widgets wie Seitenstruktur etc. abgesehen. Das ist alles zu luftig. Große Seiten sind bereits jetzt ne Pest zu navigieren.

Linke Spalte und Backend-Modul Icons:
Eines der wichtigsten Elemente: Icons. Die müssen rein. Für Neukunden, für alte Contao-User, alle. Eine der wichtigsten Navigationshilfen im Backend. Der Kontrast dann zu den Icons wäre mir zu viel. Der Kontrast zu aktiv, immer noch zu wenig, da muss ne Komplementärfarbe rein oder der Hintergrund der Linken Spalte muss weit weniger Farbstärke fahren.

Meine Wünsche an ein neues Theme wären, dass es sich weniger an den Gewohnheiten des Besuchens einer Webseite orientiert, sondern an dem Umgang mit einem Filesystem (siehe Mac Finder, ja meinetwegen auch den Explorer).
Ich hätte z.B. auch lieber eine Seitenstruktur bzw. Strukturen, die nicht aufklappen, sondern in Spalten präsentiert werden, die ich in der Breite steuern kann. Und nicht für jedes Element ne Button-Leiste, sondern ein allgemeines Buttonmenü, wo nur die aktiven Elemente berücksichtigt werden.

Das Theme hat bereits sehr sehr gut technische Ansätze. Ich denke aber, dass der "Contao-Stempel" noch fehlt. Also die wirkliche Alleinstellung. Als Alternative ok, als Ersatz wäre es so noch nicht aussagekräftig genug. Es ist zu allgemein. Das Backend muss so stark gebranded sein, dass oben nicht einfach das Wordpress Logo sitzen könnte und wir wären im Kopf bereits bei WP.

[sebi]

Hallo Raphael,

danke für das geniale Theme erst einmal!
Gefällt mir schon sehr gut.

1. Habe eben einen Fehler entdeckt: Wenn ich ein template erstelle und dieses dann im Editor bearbeite, wird die Navigation ausgeblendet und es wird folgendes angezeigt: template.png - habe jetzt nicht nachvollzogen, woran es liegt (wenig zeit) aber wollte es dir zumindest hier mitteilen.

2. Mir fehlen in der Navigation irgendwie noch Icons vor den Überschriften. Ich habe mich doch immer sehr an diesen orientiert (bin kein begeisteter Leser :-P )

Besten Gruß,
sebi

PS: Hätte es auch in GitHub als issue gepostet, aber finde mich da auch gerade erst rein. Wie du

[qhjsdjghqdsghg]

Hello,

Your template is interesting !

Can you post a screenshot showing the form of a module?

Is it possible to test the template directly online?

Thank you.

[ciaobello]

See the Github link. There you can download the Extension and install it manually.
You just have to copy the ConFlato folder in /system/themes (same level as default-theme folder)
After you can select the theme in the Backend under your BE User.

On github itself you can contribute with you proper ideas!