[theme_ab_optimized] BE-Theme mit optimiertem CSS

[Andreas]

Infos gibt es auf der Erweiterungsliste ab_optimized

Probleme und Anregungen können hier in diesem Thread gepostet werden.

Gruß Andreas

[Russe]

Gefällt mir, danke für die Erweiterung.

Hier das Feedback in Kurzform (habe wenig Zeit), getestet mit Safari:

1. Kleiner Versatz vom DIV id="main" (siehe Screenshot)
2. Manche Tabellen gehen nicht bis an den rechten Rand (siehe Screenshot)
3. Manche Listen gehen nicht bis an den rechten Rand, z.B: <ul class="tl_listing tl_tree_xtnd"> bei der Artikelübersicht
4. Wenn man das Browserfenster in der Breite verkleinert dann wird der Text in der linken Spalte "abgeschnitten".
5. Kannst du evtl. noch den Container mit den Buttons zum Sichern etc. (class="tl_submit_container") fixieren damit er immer sichtbar ist, das würde ne Menge Scrollerei ersparen.
6. Der dunkle Hintergrund ist in Safari nicht sichtbar.

[Andreas]

Hallo russe,

danke für dein Feedback.

1. Kleiner Versatz vom DIV id="main" (siehe Screenshot)
   
   Geändert, so dass im FF jetzt kein Versatz mehr ist. Safari nicht getestet.
   
   
2. Manche Tabellen gehen nicht bis an den rechten Rand (siehe Screenshot)
   
   Fehler aus dem Screenshot behoben.
   
   
3. Manche Listen gehen nicht bis an den rechten Rand, z.B: <ul class="tl_listing tl_tree_xtnd"> bei der Artikelübersicht
   
   Das hatte ich erstmal so gelassen, weil ich dachte, sonst ist der Mausweg zu den Buttons sehr weit..
   
   
4. Wenn man das Browserfenster in der Breite verkleinert dann wird der Text in der linken Spalte "abgeschnitten".
   
   Ich denke das lass ich so. Mit 1024px Breite hab ich ja schon einen kleinen Monitor. Die Links sind immer noch zu erreichen und der Mausovertext zeigt den ganzen Namen.
   
   
5. Kannst du evtl. noch den Container mit den Buttons zum Sichern etc. (class="tl_submit_container") fixieren damit er immer sichtbar ist, das würde ne Menge Scrollerei ersparen.
   
   Das muss ich mir nochmal in Ruhe ansehen. Daran gedacht hatte ich auch schon.
   
   
6. Der dunkle Hintergrund ist in Safari nicht sichtbar.
   
   Ja, das ist mit CSS3 background:-moz-linear-gradient(). Wenn du möchtest kannst du das Pendant für Safari erstellen, ich füge es dann ein.
   
   

Ein Selektor hatte einen Schreibfehler - behoben.

Lade gleich alles hoch.

Gruß

[Russe]

1. ok
2. ok
3. ok
4. habe mir das nochmal angesehen.
   #left hat momentan "width: 20%", % finde ich hier etwas ungünstig, da bei breiteren Fenstern die linke Spalte auch breiter wird obwohl das gar nicht nötig wäre. Außerdem funktioniert das nicht sauber wenn man einen Zoom eingestellt hat.
   Wie wäre es hier mit "width: 20em", dann sieht das auch bei einem Zoom noch gut aus - man müsste dann aber auch #main, einen "margin-left: 22em" verpassen, und dem header und footer ebenfalls.
5. Wäre cool wenn du das bei Gelegenheit mal probieren würdest.
6. Eigentlich gefällt mir der Verlauf um Hintergrund doch nicht so, habe es gerade im FF noch mal angeschaut, aber falls du das doch für die WebKit-Browser anpassen willst findest du hier die entsprechende Syntax:
   http://developer.apple.com/library/s...Gradients.html

[Andreas]

Werde ich mal ausprobieren mit EM statt %.

Ja, der Verlauf ist natürlich Geschmacksache, kann man sich ja leicht ändern. Das ganze ist ja im Prinzip auch als Beispiel dafür gedacht, wie man sich sehr leicht, mit nur einer CSS-Datei ein eigenes BE-Theme erstellen kann. Ich wollte auch einfach mal CSS3 ausprobiert haben. Und den Hintergrund wollte ich auch unbedingt dunkler um Strom zu sparen

Wahrscheinlich ist der Satz 'nur gestestet im FF' irreführend, wollte sagen, dass ich es nur für Firefox entwickeln werde. Deswegen die Frage an dich, mir das Pendant für Safari auszuarbeiten. Wie das geht weiß ich selber

Gruß

Hatte die Tabellen- und Listenbreite im letzten Build übrigens doch auf 100% gesetzt.

[xchs]

Und den Hintergrund wollte ich auch unbedingt dunkler um Strom zu sparen

Bei CRT vielleicht - bei LCD wohl kaum!

Auf der Backend-Startseite wird bei mir die Überschrift "Backend-Tastaturkürzel" anstatt mit "#5C7B3B" noch als "#666966" eingefärbt.

[Andreas]

Ich hab ja noch einen CRT, ein LCD ist aber geplant, brauche noch eine Empfehlung, weiß nicht, was ich mir kaufen soll, Größe, Marke, Preisklasse?

Ich hab das Konzept des BE-Themes jetzt geändert. Die Auszeichnungen mit !important in der main.css unterbrachen an einigen Stellen die CSS-Kaskade. Ich habe jetzt die Farbwerte (3 Stück) in allen CSS-Dateien direkt gegen die Farbwerte mit dem besseren Kontrast ausgetauscht.

Die anderen Änderungen nehme ich in der default main.css unterhalb des originalen Codes vor.

Version 1.0.1 stable

Gruß

[xchs]

Aja, hab grad gesehen, dass Du diesbezüglich einiges wieder geändert hast. Darunter u.a. auch das von Russe vorgeschlagene Fixieren des Containers mit den Buttons...

[complanar]

Hi,

wenn ich dich richtig verstanden habe, liegt der Fokus vor allem auf der besseren Bedienbarkeit. Ich finde aber, dass durch die seltsamen Farbverläufe das Auge so irritiert wird, dass die kürzeren Mauswege ihren Vorteil gar nicht ausspielen können.

Also: Weg mit den Farbverläufen, vor allem den horizontalen! Insgesamt ist zwar jetzt der Kontrast mit s/w sehr hoch, das Theme aber alles andere als eine Augenweide. Hohe Kontraste kann man auch mit dezenteren Farbkombinationen erreichen.
(Es gab mal eine nette Firefox-Erweiterung namens Contrast-Analyzer, mit der man sowas überprüfen und bewerten konnte, die wird aber nicht mehr weiterentwickelt und ist mit den aktuellen FF-Versionen nicht kompatibel.
Alternative ist WCAG Contrast checker - ist leider nur auf französisch verfügbar.

complanar

[MacKP]

Hallo complanar,
gute News für dich -> https://addons.mozilla.org/en-US/firefox/addon/7313/

Viele Grüße

[xchs]

Hallo Andreas,

wäre es möglich, die Textfarbe für das <pre>-Element noch etwas anzupassen? Ausgegebene Debug-Meldungen sind momentan kaum lesbar.

[Andreas]

Hab ich geändert. Guck mal, ob du damit klar kommst. Ich benutze den Debug-Modus so gut wie nie. Demnächst mache ich die Layoutbereiche auch nochmal neu, dann erstreckt sich die Kopfzeile z.B. wieder über beide Spalten.

Gruß

[xchs]

Hmm, noch nicht so ganz.

Welche Farbe hast Du denn für diese mit <pre> formatierten Debug-Meldungen vorgesehen? Ich seh im Firebug eine Textfarbe "#666966". Da die Meldungen aber am Seitenende ausgegeben werden und dort (aufgrund des Farbverlaufes) die Hintergrundfarbe "#707270" zum Tragen kommt, kann man diese Textstellen nur sehr schwer lesen bzw. erkennen (siehe Screenshot anbei).

[Andreas]

Ach Mist, hab ich mal wieder die Dateien verwechselt, sorry. Ist jetzt aber oben in dem letzten Build. Ich hatte die Hintergrundfarbe verändert.

Gruß

[xchs]

Ach Mist, hab ich mal wieder die Dateien verwechselt, sorry. Ist jetzt aber oben in dem letzten Build. Ich hatte die Hintergrundfarbe verändert.

Super, jetzt schaut's gut aus!

[Klaus69]

Hallo Andreas,

ich habe die Extension am 7.12.2010 mit FF3.6 und FF4beta getestet - bei FF4beta funktionierte sie leider nicht (wie übrigens auch einige Erweiterungen, die direkt in FF installiert werden.)

Ich habe neben dieser Feststellung noch zwei Fragen:

1. Wie können mit Contao ein Fixierter Header und eine Fixierte Linke (bzw. Rechte) Spalte im Frontend realisiert werden?
2. Welche Auswirkungen hat das evtl. auf die Suchmaschinenfreundlichkeit?

Ein technisches Beispiel: Hier
Der Seitenquelltext ist recht kurz und enthält keine für Suchmaschinen relevanten Informationen. Mich interessiert allerdings eher eine Fixierte rechte Spalte.

[Andreas]

Hallo Klaus,

meinst du mit 'Erweiterungen direkt im FF' Add-ons für Firefox? Contao-Erweiterungen, welche ihr eigenes CSS mitbringen und nicht auf dem von Contao aufbauen, funktionieren dann evtl. an einigen Stellen natürlich nicht. Wenn mir solch eine Erweiterung dazwischen kommt, werde ichs gerne implementieren.

Ein paar unwesentliche Kleinigkeiten habe ich nochmal verändert, ein Update lohnt aber noch nicht, deswegen ist es noch nicht oben.

Mit FF4 schau ich dann mal, wenn er raus ist.

Deine Frage am Ende passt nicht hier in den Thread, ich geb dir trotzdem mal ein paar Denkanstöße, aber führe es nicht hier weiter fort. Mach dann einen neuen Thread auf.

Auf der Beispielseite, das ist mit Frames gemacht. Altmodisch und nicht SEO-tauglich. Sowas macht man heute nicht mehr.

Schaff dir mit Firebug und PSpad eine Spielwiese für CSS und probier mal ein wenig rum mit position:absolute;, position:fixed;, overflow:hidden;, overflow:scroll; usw. Es ist nur mit CSS machbar, bringt aber diverse Nachteile mit sich, die du beim ausprobieren schnell feststellen wirst. Auf Suchmaschinen hat das keinen negativen Einfluss.

[Klaus69]

Danke, Andreas,
für die schnelle Info.

Bei den Erweiterungen für FF meinte ich keine Contao-spezifischen, sondern FF-Erweiterungen; speziell einige zur Web-Entwicklung. Manche sind jedoch dort unter "Web-Entwickler" versteckt und m.E. unpraktisch zu handhaben.

Dass diese Beispielseite SEO-untauglich ist, habe ich mir wegen des Quelltextes schon gedacht - es ging mir ja nur um diese Funktionsweise mit fixiertem Header und fixierter Spalte.

Danke auch für den Hinweis auf die Notwendigkeit der CSS-Programmierung - da bin ich noch ziemlicher Anfänger. Welche Nachteile es da gibt, kann ich mir deshalb auch nicht so vorstellen.

Werde mir überlegen, wo ich den Thread eröffne; vielleicht gibt es ja auch mal eine Contao-Erweiterung dafür.

Beste Grüße
Klaus

[bubblez]

Verwende contao ab und zu auch im Chrome und habe da noch einen kleinen CSS Bug gefunden, der einfach zu beheben ist. Im Chrome verdeckt die Speichern-Liste in der rechten Bildhäflte den Scrollbaren Formularinhalt. Mit der Ergänzung:

margin-bottom: 60px; in .tl_xpl,.tl_formbody_edit in der main.css ist dieses Problem einfach behoben. Vielleicht könntest du dies ja nachführen, obwohl mir bewusst ist, dass ab_optimized nicht für Chrome optimiert ist...

[Andreas]

In welcher Ansicht kann ich das kontrollieren, damit das meinem Firefox nicht in die Quere kommt?

[bubblez]

Habs bei den Gruppeneinstellungen bemerkt, Systemeinstellungen müsst es auch sein. Einfach überall dort wo du normalerweise scrollen musst, weil der rechte Bereich zu lang ist.

[Andreas]

Das verändert das Aussehen im FF ungünstig, kann ich deshalb nicht machen, sorry. Kannste dir ja mit eigenem CSS überschreiben.

Gruß Andreas

[Sascha39]

Hallo Andreas,

vielen Dank für dieses Backend-Theme!
Du hast damit genau das entworfen, wonach ich gesucht hatte.

Ich empfinde es schon jetzt als enorme Arbeitserleichterung und das obwohl ich die Erweiterung erst seit einer halben Stunde getestet habe.
Mich hat das scrollen zum Speicherbutton schon immer genervt!

Auf den ersten und zweiten Blick läuft alles perfekt. Sollte mir etwas anderes auffallen, werde ich dir das natürlich mitteilen.

Mich wundert eigentlich, dass es nicht standardmäßig so ist - vielleicht, weil ich noch mit meinem alten Röhrenmonitor einer der wenigen mit Platzproblemen bin?!

Gruß,
Sascha

[Andreas]

Hallo Sascha,

danke, freut mich das zu hören. Ist vielleicht nicht die schönste Theme, aber ich kann mittlerweile kaum mehr drauf verzichten, da man sich so viel an Scrollerei erspart. Ist immer das erste, was ich mache, wenn ich in nem fremden BE arbeiten muss.

Gruß Andreas

[Sascha39]

Hallo Andreas,

ich habe auch das backlight_theme ausprobiert - wirklich sehr schön, aber mir ist es arbeitstechnisch gesehen wichtiger, dass der linke Bereich und Kopf und Fuss des rechten Bereichs fixed sind.

Aufgefallen ist mir nur, dass gleich auf der Seite, wo das Backendtheme ausgewählt wird, das linke mit dem rechten Auswahlfeld kollidiert, wenn man die Breite kleiner macht. Das ist kein wirkliches Manko und fällt in meinem Opera-Browser nur auf, wenn ich die linke Seitenleiste öffne, in der ich meinen Emailclient habe. Hier ist das backlight_theme etwas flexibler.

Vielleicht könnte man ja die Stärken beider themes kombinieren?! ...nur eine Anregung.

Die Optik ist schließlich sowieso Geschmacksache und ich bin so auf jeden Fall mit deinem theme bestens zufrieden!

Gruß,
Sascha

[Andreas]

Hallo Sascha,

gerade das backlight gefällt mir nicht so. Ich hab ein paar kleine Änderungen an meinem vorgenommen, jetzt überlappen die Inputs auch nicht mehr.

Gruß Andreas

[Sascha39]

Hallo Andreas,

du bist wohl auch ein Nachtmensch?!
Da hast du an der Optik aber wirklich die Feinpolitur angesetzt - gefällt mir sehr gut!

Danke dafür und viele Grüße,
Sascha

[mizoko]

Hallo Andreas,
das neue Layout ist gewöhnungsbedürftig. Wenn der Browser nicht auf Bildschirmbreite gestellt ist, werden nicht alle Inhalte im mittleren Arbeitsfenster dynamisch verkleinert. Dann schauen diese Daten in den dunkelgrauen Hintergrund und werden schwer lesbar. Passiert bei Besucherstatistiken (Modul Besucher), oder bei anderen Elementen.

[Andreas]

Hallo mizoko,

danke für den Hinweis. Ich habe eine Version reingestellt (2.0.1 beta1), bei der das Problem mit dem Table-Wizard schon mal behoben sein sollte. Das Problem entsteht durch die dynamischen Breiten, also die Prozentwerte im Gegensatz zu den festen Pixel-Werten im default BE-Theme. Und das nur im Firefox und Safari, wenn man die Breite des Viewports recht klein setzt. Dort werde die Breiten von übergroßen Elementen einfach nicht mehr erkannt, bzw. umgesetzt, wenn das Elternelement eine Breite in Prozenten erhält. Ich habe aber eine Lösung gefunden. Sobald ich dazu komme, werde ich auch die anderen Elemente innerhalb der Fieldsets auf dynamische Werte setzen.

Das Layout ist wohl eher für Widescreen-Monitore gedacht. Dort war mir der Inhaltscontainer einfach zu breit, d.h. der Abstand von den Beschriftungen links zu den Icons rechts in den Listviews war mir einfach zu groß. Ich gebe dir recht, dass die Buttons jetzt rechts sind ist gewöhnungsbedürftig, man sucht sie immer noch unten :-).

Gruß Andreas

[tl_mipro_user]

Hi ich habe mir mal erlaubt das Grau ein wenig an manchen Stellen mit Orange zu ersetzten. Klar Farben sind Geschmackssache, aber das soll nicht der Haupt Grund meines Postings sein. Ich benutze zu 99 % diese Theme und ich meine mich zu Erinnern das mal eher blau gehalten war. Aber egal, ich mag ebnend orange ;-). Grau in Grau macht mich Depressiv ;-) Ich schiebe die CSS-Dateien mal als zip hier rein.
Meine Änderungen betreffen nicht nur die Farbe, sondern auch die Breite des Hover Effektes über den Menüpunkten auf der linken Spalte, es hatte mich immer gestört das beim Hover im linken Bereich immer rechts über den Rand hinaus guckte das habe ich dann mal auf 168px angepasst. Dann war das Problem das, wenn ich bestimmte Farbverläufe eingebaut habe für den ":hover" und den ":active" Effekt dann widerholte ich das kleine Hintegrund Icon ständig auf manchen Menüpunkten. Um mir schnell Abhilfe zu schaffen, hab ich in der main.css noch folgendes hinzugefügt:

div#left div#tl_navigation ul.tl_level_1 li.tl_parent ul.tl_level_2 li a.navigation {
    background-repeat: no-repeat !important;
    background-position: left center;
}

Somit wiederholte sich das Bildchen nicht mehr. Ich versuche aber immer ohne die !importent- Anweisung auszukommen, naja aber manchmal geht s nicht ohne. Woran das nun genau lag weis sich leider nicht.
Mir fehlt schlicht die Zeit. eine Sache gefällt mir auch nicht so ganz, das die Bildchen per inline CSS geladen werden, und nicht ausschließlich über CSS. Aber das ist wohl eher dem PHP-Code geschuldet, als dem Designer.
Vielleicht sollte man grundsätzlich eine CSS Datei für jede Erweiterungen anlegen die dann das System beim Installieren zusammenführt führt.

Ich würd gerne noch eine Anregung loswerden:
Könnte man nicht eine CSS Datei bauen die nur die Farben enthält? Das hätte den Vorteil das man noch leichter die Farben nach seinem Geschmack anpassen kann.
Die Zip Datei enthält alle CSS Dateien aus dem Source Code Ordner: "[contao_root_verzeichniss]/system/themes/ab_optimized/src/" mit meinen Änderungen.
Ich habe Leider kein Tool gefunden mit dem ich die CSS-Code in einzige Zeile machen kann. Aber so lässt sich sicherlich auch schneller sehen was ich geändert habe.
Wie gesagt sich habe nur die Buttons und ein Paar Menüpunkte umgestylt. So long ....

Liebe Grüße

tl_mipro_user
Bielefeld

[monachus]

Hallo,

ich arbeite sehr gerne mit diesem Theme.

Leider fällt etwas sehr sehr ins gewicht. Wenn man innerhalb eines Artikels bspw. ein Bild hinzufügen will, kann man ja auch dort direkt den Dateimanager öffen.

Dieser wird ja dann in einer Lightbox geöffnet, man kann sich Ort und die Datei aussuchen, aber wo ist die Schaltfläche "Datei hochladen" bzw. "Date hochladen und zurück"? Die feheln dann komplett.
Dies bedeutet ich muss dann über die Dateiverwaltung erst die Datei hochladen und kann danach erst wieder ind en Artikel.

Kann man dass nicht beheben?

Gruß