mod{less} Contao Theme

[InitArt]

Ich arbeite an einem neutralen Theme ab Contao 3.0, welches auch als Grundlage für weitere Themes dienen soll.
Dabei verwende ich zum Teil eigene Templates und verzichte auf das Holy Grail Framework.
Veröffentlicht wird das ganze unter einer Creative Commons Lizenz ().

Demo Installation

[matuweb]

Super Idee !

Hätte auf jeden Fall Interesse.

Ich finde es auch sehr wichtig, verschiedene Hover-Effekte/Techniken für Bild, Navi und Formular (einblenden, Text auf Bild einfaden, autom. smooth-Scroll am Ende des Browsers, Inhaltselemente/News nacheinander einfaden bei Seitenaufruf bzw. Scroll) direkt mit einzubauen bzw. vorzubereiten.
Dadurch wird die Seite viel interessanter und moderner.

Grüße
Matu

[InitArt]

Direkt einbinden wollte ich derartige JS Features nicht, diese können jedoch einfach eingebunden werden.

[DaBu]

ich finde die idee und dein engagement auch super!

[InitArt]

http://preview.initart.com/contao/
Laufende Arbeiten, it's done when it's done.

Edit: Heute bin ich zwecks 1. Mai nicht großartig voran gekommen, ich habe jedoch Test-weise eine Erweiterung gebastelt, welche das jQuery Smooth Scroll Plugin von Karl Swedberg integriert. Es kann wie die anderen jQuery Plugins im Layout de- / aktiviert werden. Ansprechen tut es aktuell sämtliche Links.

Ich habe es nur im Layout mit der Seitenleiste auf der linken Seite aktiviert:
http://preview.initart.com/contao/en/news.html

Sollte auch mit den Standard-Templates funktionieren und wird veröffentlicht, sobald ich mir den Aufbau von Contao Erweiterungen genauer angeschaut & ggf. die Erweiterung angepasst habe.

Edit #2:
https://contao.org/de/extension-list...th-scroll.html

ggf. können auch gerne Wünsche an das Theme gepostet werden.

[netnite]

Super Initiative. Könnte ich sicher auch gebrauchen.

[InitArt]

Aktuelle Informationen sind nun auf der Startseite meiner Testinstallation zu finden.
InitArt Contao Preview

[andreasisaak]

Wird es das Theme auch nochmal in schön geben? Neutral muss ja nicht immer einfallslos und trist bedeuten

[InitArt]

Das Theme ist nur eine Grundlage, alles weitere werde ich kostenpflichtig anbieten.
Was du z.B. aus dem Theme machst ist dir überlassen.

[andreasisaak]

Was wäre in dem kostenpflichtigen Paket drin?

[InitArt]

Die Features bleiben im Grunde genommen gleich, lediglich das Design sowie ein paar Gimmicks ändern sich.
Außerdem wird sich in den kostenlosen Themes ein Copyright Hinweis befinden.

[andreasisaak]

Und das Theme bleibt so wie es jetzt ist? Also vom Grundaufbau und dem Design?

[InitArt]

Vom Grundaufbau wird das kostenlose Theme so bleiben, es fehlt natürlich noch einiges (forms, module, feinarbeiten).

[InitArt]

Meine Projekte sind jetzt auch auf GitHub und im Extension Repository verfügbar.

Es geht langsam voran, abgesehen von ein paar Kleinigkeiten habe ich weitere Layouts (Variationen der Spalten) hinzugefügt.

Das Theme wird wahrscheinlich auch für Burning Board 4 (nach release), Magento und Wordpress erscheinen.
Die Seitenleisten werde ich für die responsiven Layouts wohl noch einmal ändern, damit diese Wahlweise über oder unter dem Inhaltsbereich angezeigt werden.

Das Copyright im Basic Theme wird u.U. gegen eine beliebige Spende pro Installation entfernbar sein.

[andreasisaak]

Ich find das Design nicht ganz so ansprechend. Ich weiß Design ist sehr subjektiv, aber wäre es nicht besser wenn man für das Grunddesign ein schlichtes aber trotzdem universell einsetzbares nimmt? Ohne viele Bilder aber mit einem korrekten Gestaltungssatz. Wie z.B. das Twenty Twelve.

Das würde eventuell auch rechtfertigen wenn man das Theme verkaufen möchte.

[InitArt]

Das Theme ist aktuell noch im Alpha-Status, es wird sich dem entsprechend noch einiges ändern.
Die Templates sind im groben und ganzen fertig, die Grundlayouts (Header, Spalten, Footer) ebenso, an anderen Stellen ist bisher wenig bis nichts fertig, um nur einige aufzuzählen:

• Typografie
• Formulare
• Module
• Feinschliff der Navigationen
• Font Awesome

Natürlich freut es mich dennoch, dass bereits Vorschläge / Kritik zum Theme vorhanden sind.
Schon jetzt kann das ganze mit minimalen Veränderungen ganz anders aussehen (siehe Anhang).

[InitArt]

Die Preview Seite zeigt nun nur noch Inhalte an, welche ich als "vorführbar" ansehe.

Änderungen

• * Überschriften überarbeitet
• + Zitate
• + Initialen
• + Bilder und Galerien
• + Nachrichten Boxen (tinyMCE Formate)

Ich find das Design nicht ganz so ansprechend. Ich weiß Design ist sehr subjektiv, aber wäre es nicht besser wenn man für das Grunddesign ein schlichtes aber trotzdem universell einsetzbares nimmt? Ohne viele Bilder aber mit einem korrekten Gestaltungssatz. Wie z.B. das Twenty Twelve.

Das würde eventuell auch rechtfertigen wenn man das Theme verkaufen möchte.

Geht es nun mehr in die Richtung?

[InitArt]

Die Demoinstallation ist nun unter "http://demo.initart.com/contao/" zu finden, läuft jedoch noch mit client-seitigem LESS.
Zwecks Zeitmangel hat sich die letzten 2 Wochen nicht allzu viel getan, die Grundlagen stehen jedoch soweit.
Als nächstes folgen die Module.

[InitArt]

Ich habe die Demoinstallation gerade auf Contao 3.1.0 stable aktualisiert.

Außerdem suche ich noch zwei bis drei Personen welche das Theme ein wenig testen (gerne auch in einer eigenen Installation).
Bei Interesse einfach eine PM an mich senden.

Natürlich nicht ganz umsonst, ich biete als Gegenleistung eine Branding-Free Lizenz für 1 Installation sowie eine geringfügige Anpassungen am Theme (z.B. der Farben & Formen, wobei auch Verläufe und Schatten möglich sind).
Bedingung ist jedoch das auch tatsächlich Fehler und / oder Vorschläge genannt werden.

[magicsepp]

Ala,

ich melde mich dann mal als Tester

bei mir kommt immer zuerst die Seite ohne css und dann dauert es noch Sekunden bis die gesamte Seite gerendert wird...
Sehr unschönes Zeitverhalten...das im IE7 erst garnicht funktioniert da wird das css garnicht geladen.
FEHLER

SCRIPT1028: Bezeichner, Zeichenfolge oder Zahl erwartet 
en, Zeile 1 Zeichen 94881188
SCRIPT5022: Couldn't load http://demo.initart.com/contao/en/files/basic/less/basic.less (404) 
less-1.3.3.min.js, Zeile 8 Zeichen 2499

event. update auf less 1.4

[Fkhm]

Den gleichen Fehler mit dem langen laden des css habe ich auch bei mir unter Mac. Nur falls es relevant ist.

Außerdem hast du den Text im Accordion nicht mit einem Padding versehen, es hängt direkt am Rand, genau wie die Überschriften der Accordionabschnitte. Ich weiß nicht, ob es beabsichtigt ist, dass der Titel beim Accordion unter dem Pfeil steht, oder ob er eigentlich neben dem Pfeil stehen sollte. Nur als Hinweis, falls es so nicht gewünscht ist.

Das gleiche mit dem Abstand zum Rand auch beim Slider, sieht immer so aus als ob da ein mikrometer von der schrift abgeschnitten ist, kann aber auch an meiner auflösung liegen. Außerdem springt der Slider extrem schnell zwischen den 2 Beiträgen hin und her. Das ist vermutlich nur einstellungssache.

Finde es auch nicht so schön, dass das Subscribe beim Newsletter nicht links gefloated ist, aber das ist wohl eher eine Subjektive Sache.

Wenn ich beim Kommentar schreiben die Sicherheitsfrage falsch beantworte sieht das ganze bei mir so aus: Bildschirmfoto 2013-05-24 um 20.06.37.png

Vorschlag:
Ich würde in der linken Spalte der Navigation entweder nur die 2. Ebene anzeigen, oder es mit einem ausklappenden Menü machen, so sieht das ganze sehr unübersichtlich aus wie ich finde.

Nachtrag: Das Video wird nicht richtig angezeigt, das ganze sieht so aus:
Bildschirmfoto 2013-05-24 um 20.37.58.png

[magicsepp]

da fehlt ein

.ui-state-default .ui-icon {
        float: left;

[InitArt]

Allem voran möchte ich euch schon einmal für die ersten Tests danken!

LESS
Die langen Ladezeiten sollten behoben sein.
Warum die Dateien im IE 7 nicht laden, kann ich nicht sagen.
In einer produktiven Umgebung sollten jedoch ohnehin lessphp oder bereits kompilierte CSS Dateien verwendet werden.

Sidebar Navigation
Da hast du wohl recht, werde mir etwas einfallen lassen, damit es auch ohne Hard Limit gut aussieht.

Videos
Trat das Problem im Firefox auf? Insofern ist es behoben, der FF mochte das CSS wohl nur als Inline-Style und somit leider einem angepassten Template.

Kommentare
Die unschöne Fehlermeldung müsste nun besser aussehen.
Speziell die Formulare der Kommentare muss ich wohl noch ändern, dass die Beschriftung unter dem Formularfeld angezeigt wird ist imho ein no go.

Accordion
Das Stylesheet kam aus einem anderen Projekt von mir (Theme Roller), scheint jedoch nicht mit Contao kompatibel zu sein.
Daher werde ich das manuell aufsetzen.

Buttons
Es gibt im Design einige Buttons welche nicht gefloatet werden, insbesondere für kleine Bildschirme wird sich das nicht vermeiden lassen.
Es ist jedoch nicht auszuschließen dass ich das für größere Bildschirme noch ändere.

Edit
Die Browser Unterstützung liegt nun fest, das Theme kann zwar in älteren Browsern funktionieren, wird aber weder getestet noch werden Hacks für diese eingebaut:

• IE 9+
• Firefox 5+
• Safari 5+
• Opera 11+
• Chrome 14+

[magicsepp]

auf IE7 kann man verzichten aber 8 ist noch bis April 2014 offizell aktuell.

[InitArt]

Da dass Langzeit Ziel ein komplettes Framework vorsieht, welches jQuery 2 nutzt, möchte ich den IE 8 eigentlich nicht unterstützen, auch wenn der Rest vom Team nichts mit dem Contao Theme selbst zu tun hat.

Sollte genügend Interesse bestehen kann ich das immer noch einbauen.

[Fkhm]

Allem voran möchte ich euch schon einmal für die ersten Tests danken!

LESS
Die langen Ladezeiten sollten behoben sein.
Warum die Dateien im IE 7 nicht laden, kann ich nicht sagen.
In einer produktiven Umgebung sollten jedoch ohnehin lessphp oder bereits kompilierte CSS Dateien verwendet werden.

Ja sind auch bei mir behoben worden.

Sidebar Navigation
Da hast du wohl recht, werde mir etwas einfallen lassen, damit es auch ohne Hard Limit gut aussieht.

Videos
Trat das Problem im Firefox auf? Insofern ist es behoben, der FF mochte das CSS wohl nur als Inline-Style und somit leider einem angepassten Template.

Ja war im Firefox, jetzt funktioniert es auch bei mir.

Kommentare
Die unschöne Fehlermeldung müsste nun besser aussehen.
Speziell die Formulare der Kommentare muss ich wohl noch ändern, dass die Beschriftung unter dem Formularfeld angezeigt wird ist imho ein no go.

Sieht gut aus, aber die Radio-Buttons sind auch Checkboxen. Ich meine unter diesem Link: http://demo.initart.com/contao/en/modules/forms.html

Accordion
Das Stylesheet kam aus einem anderen Projekt von mir (Theme Roller), scheint jedoch nicht mit Contao kompatibel zu sein.
Daher werde ich das manuell aufsetzen.

Hast du noch nichts gemacht vermute ich. Sieht zumindest so aus ;-)

Ich werde weiterhin immer mal wieder reinschauen.

[InitArt]

Da hatte ich beim kopieren vergessen auch den Typ zu ändern, es sind nun Radio Buttons.

Das Accordion müsste eigentlich garkein Theme mehr haben.

Edit:
Das Framework entwickelt sich langsam aber sicher in eine modulare Richtung, z.B. können Tabellen mit der Vergabe von Klassen unterschiedlich dargestellt werden. Möchtet ihr dies auch im Contao Theme haben? Je nach Bedarf können in der Hauptdatei (import) auch einzelne Teile auskommentiert / auf false gesetzt werden, damit sie nicht im CSS landen.

Beispiele:
table.narrow = Weniger Innenabstand
table.border = Altbekannter Rahmen um alle Zellen
table.head = Hintergrund im Tabellenkopf
table.striped = Gestreifte statt einfarbige Tabellen
table.hover = Anderer Hintergrund einer Zeile beim Mouseover

[Fkhm]

Ja das meinte ich, das Akkordion hat keine Formation. Tabellen sehen soweit gut aus, kleinigkeit bei den sortierbaren Tabellen. Die Pfeile (hoch/runter) sind so weit entfernt von der Überschrift. Also die Möglichkeit aufsteigend nach Spalte 1 zu sortieren, ist sehr viel näher vor Spalte 2.
Bildschirmfoto 2013-05-27 um 19.00.36.png

Ob modular gelöst oder nicht ist mir relativ gleich, da müssen andere ihre Präferenzen aufzeigen.

Werd mir das Theme heute abend nochmal ansehen.

Edit:
Das ist mir noch auf die schnelle aufgefallen, hier sind die Abstände zwischen den Labels nicht so hoch wie bei den Inputfields. Bildschirmfoto 2013-05-27 um 19.06.23.png

[InitArt]

Bei den Tabellen kann ich nicht viel machen, wenn ich dich richtig verstehe. Die Breite der einzelnen Spalten richtet sich nach dem Inhalt, während die Icons sich immer rechts befinden.

Die Formulare bei den Kommentaren sind mehr oder weniger behoben, die Templates von Contao 3.x sind leider etwas inkonsistent daher steht die Beschriftung bei den Standard Templates wieder unter den Feldern.

Werde dafür mal einen pull request auf GitHub einreichen.

Edit: Ich habe mal die modularen Tabellen eingebaut, funktioniert sowohl über die Inhalts Elemente (Klassen im Inhalts Element angeben) als auch über HTML Code (Klassen dem Table Tag zuweisen, z.B. <table class="hover">).

[Fkhm]

Vielleicht ist es ja möglich die Sortierpfeile nach links zu floaten, also vor den jeweiligen Punkt, oder eine deutlichere Abgrenzung zwischen den spalten.

[InitArt]

Eine klare Trennung der Spalten ist mit der Klasse "border" möglich.

Edit: Man könnte die Pfeile auch direkt rechts von der Schrift anzeigen lassen, anstatt ganz rechts in der Zelle, dazu wären allerdings Template Änderungen notwendig.

[Fkhm]

Dann ist das eben so. ;-)

http://demo.initart.com/contao/en/modules/events.html

Hier ist mir aufgefallen, dass der Monat + Jahr nicht Mittig über dem Kalender stehen und der neue Monat nicht ganz rechts.

[InitArt]

Die falsche Darstellung des Kalenderkopfes habe ich behoben.
Aktuell arbeite ich an den responsiven Styles, wie genau diese am Ende aussehen, kann ich jedoch noch nicht zu 100% sagen. So sind die Seitenleisten nun unter dem Content, wenn die Browserfläche zu klein ist oder dreispaltige Layouts werden zweispaltig (linke Seitenleiste oben, rechte darunter).

Damit sollten dann auch weitere Probleme mit zu breiten Tabellen (insbesondere dem Kalender) gelöst sein, wobei diese noch immer über das Design hinaus schießen, wenn ihnen der Platz nicht ausreicht. Hier habe ich lediglich Lösungsansätze im Hinterkopf, wie z.B. einen horizontalen Scrollbalken.

[joe]

Du solltest dir mal folgendes durchlesen: https://contao.org/de/logo.html

Bitte nimm doch das Contao Logo aus deiner Demo, nachher denkt noch wer das wäre eine offizielle contao Demo...

[InitArt]

Das offizielle Logo darf grundsätzlich verwendet werden, wenn Contao als Produkt vorgestellt, getestet, rezensiert oder beworben wird.

Wie auch immer, habe es mal mit dem Fanpage Logo ersetzt, wird im Endeffekt ohnehin rausfliegen.

[joe]

Ein einfaches Danke hätte es sicher auch getan

Nur zur Ergänzung:

Es darf jedoch nicht dazu verwendet werden, eigene Produkte oder Dienstleistungen im Zusammenhang mit Contao zu bewerben oder zu vertreiben, da sonst der falsche Eindruck entstünde, dass es sich um offizielle, zum Contao-Projekt gehörende Angebote handle.

Quelle: https://contao.org/de/logo.html

So nun ist es aber gut Wünsche dir viel erfolg mit dem Theme!

Viele Grüße
Joe

[InitArt]

Ein einfaches Danke hätte es sicher auch getan

War nicht böse gemeint.

Wünsche dir viel erfolg mit dem Theme!

Zumindest dafür bedanke ich mich!

Changelog

• Das Three Column Layout steht soweit, was haltet ihr davon?
  Je nach Größe des Browserfensters werden eine, zwei oder drei Spalten angezeigt.
  Zudem heben sich die Seitenleisten wieder vom Inhalt ab.
• Verbesserung der Formulare und Buttons, unter anderem auch CSS Formular Validation.
• Optionale Erweiterung: Colors
  http://codepen.io/InitArt/pen/nHkEm
• Die Syndikations-Icons durch Font Awesome Icons ersetzt
• Einige Fehlerbehebungen

Edit (06.06.2013 - 14:20)
Die anderen Layouts sind nun auch drin, wobei die Innenabstände noch nicht ganz stimmen, werde ich mich nach der Arbeit dransetzen.

[aadursun]

Ist es schon zugänglich; wo kann man es testen?

Grüßle
aadursun

[InitArt]

Ist es schon zugänglich; wo kann man es testen?

Grüßle
aadursun

Testen kannst du das Theme hier: InitArt Contao Demo
Bei Bedarf kann ich auch das Theme selbst via PM verschicken, es sollte jedoch nicht in produktiven Systemen verwendet werden.

Edit 09.06.2013
Die bestehenden Navigationen (Navbar, List, Breadcrumbs, Dropdown) werden aufgeräumt, hinzu gekommen sind Tabs und Pills: http://codepen.io/InitArt/pen/lgnkj

[InitArt]

Ich habe die aktuelle Version mal ins ER gepackt:
https://contao.org/de/extension-list...000000.de.html

Die Module stehen noch immer auf der ToDo, es geht jedoch voran.

Fehler können hier gemeldet werden:
https://github.com/InitArt/Contao-Th...ues?state=open