Contao 3 Theme "Tapestry" - Vorschau

[BugBuster]

Hallo.
Es heißt ja immer von einigen Theme-Suchenden, es sei so schwer ein vorhandenes fertiges Template an Contao anzupassen.
Ich bin nun auch kein Profi und habe mich mal selber dran probiert.

Ich habe dieses Template hier genommen: html5templates.com tapestry
und es in Contao übertragen. Dazu habe ich ca. 2 Nachmittage gebraucht. Und ja, es ist noch nicht fertig.
Die Inhalte sind bis auf wenige Außnahmen von der Music Academy Demo übernommen.

So sieht es aus bis jetzt: tapestry-theme.glen-langer.de


Besonderheiten:

• ein eigener Layoutbereich, wird nur auf der Home Seite eingesetzt
• keine externen originalen CSS Dateien, alles über in den internen CSS Editor

Offen sind noch folgende Anpassungen:

• Responsive Anpassung des eigenen Layoutbereiches und des HTML Moduls im Footer
• sämtliche Contao original "mobile.." Layouts anpassen
• Eliminierung des files/music_academy Ordners

Viel Spaß beim "Vorschauen"....

[Mag....]

Also das sieht wirklich sehr gut aus

"Gefällt mir"

VG

Marco

[Speed010]

Ja, ist wirklich schwierig Themes zu finden und dann auch noch qualitative! Also auch von mir ein dickes "Gefällt mir"!

Hier gibt es übrings eine Auflistung von Themes für Contao, gerne erweitern, solltest du noch weitere Quellen kennen?!

Viele Grüße

[BugBuster]

Hi Fans.
Einige Fragen will ich mal hier beantworten.
a) Ja, ich werde das zum Download anbeiten, als Webtemplate, also so wie die MA-Demo. Eventuell auch als reinen Theme, dabei gibts dann aber einges zu beachten.
b) Wie ich das gemacht habe? Reverse-Engineering

Das gut an den HTML5 Templates ist, das die meistens in der Struktur ähnlich sind wie Contao. Header, Left, Main, Right und Footer haben die alle.
Die Homepage hat 2 besondere Teile. Einer unter dem Header, (das Teil mit den 4 Bildern), da habe ich zum Spaß und zum Test mal einen eigenen Layout Bereich definiert und darin ein HTML Modul gepackt.
Diesen dann unter dem Header platziert.
Der zweite Teil ist über dem Header (der Teil mit den 3 Bildern), hier habe ich wieder ein HTML Modul genommen und dieses in den Footer platziert.
Natürlich könnte man das auch über ein Artikel machen und darin dann eine Bildergalerie, jeder wo wie ich mag.

Ansonsten bin ich einfach von Oben nach Untern durchgegangen, habe mit Firebug mir angesehen wie die Dinge die man sieht erreicht wurden und mit diesem Wissen habe ich das dann Stück für Stück in Contao nachgebaut.
Mein Ziel war es ja, nicht mit externen CSS Dateien zu arbeiten und nicht Contao anpassen zu müssen.

Wer so etwas auch mal probieren will, der sollte sich in Contao + CSS gut auskennen. (und in 3.0 auch mit Holy Grail)
Profis werden sicher bei 0 anfangen (leere Contao Installation), ich habe nicht nur wegen den Inhalten mit der Music Academy angefangen und diese Stück für Stück umgebaut.
Es sind halt darin schon einige CSS Dinge drin, die ich gern als Leie übernehme.

Einiges habe ich mit Absicht nicht übernommen:
a) jquery Zeugs
b) das 100% Layout, meines ist auf maximal 1140 Pixel begrenzt.
c) nicht alle Inhalte, es sollte ja eine Conta Demo werden.

[Typogold]

Ein schönes Theme und tolle Arbeit soweit.

2 Verbesserungsvorschläge?

- Breiten der Spalten #left und #right an die Breite der Bilder unterhalb des Hauptbildes auf der Startseite anpassen.
- Den Kontrast der Schrift vielleicht ein wenig erhöhen (oder den Hintergrund stärker absoften). Liest sich aktuell etwas schwer

Und dann hätte ich noch eine optische Überlegung: Das Highlighting der Mainnavigation finde ich auf der Startseite okay - auf den Unterseiten wirkt es aber sehr blockig. Das ist so ein schwarzer großer Klotz rechts oben. Versuch doch mal eine Variante in weiß oder diesem Braunton, der auch für den Tabellenkopf verwendet wird (z.B. #887644 - ist aber noch nicht optimal). Bei Weiß könntest man dann auch mal ausprobieren, wie die Bildunterschriften auf der Startseite wirken, wenn Du die Farben tauschst - also schwarz auf weiß. Beigefügt zwei schnelle Screenshots, damit man besser versteht, was ich meine …

Ansonsten top und ich bin schon gespannt, wie es fertig aussehen wird.

Gruß
Typo

[Typogold]

Screenshots Rechte Spalte und Textfarbe …

[BugBuster]

Das mit den Spalten sehe ich anders. Vor allem wenn man mal, was noch nicht überall geht, mit einer kleineren Auflösung ankommt, dann verschiebt sich der Bilder Teil sowieso.
Mit den Schriften und Farben werde ich noch ein bischen probieren, da stimmt auch noch nicht alles wie das Original.
Da das Ziel ist das Original weitestgehend nachzubauen, werde ich davon was Farben betrifft nicht stark abweichen.

Anpassen kann es dann ja jeder selber.

[Typogold]

Das mit den Spalten sehe ich anders. Vor allem wenn man mal, was noch nicht überall geht, mit einer kleineren Auflösung ankommt, dann verschiebt sich der Bilder Teil sowieso.
Mit den Schriften und Farben werde ich noch ein bischen probieren, da stimmt auch noch nicht alles wie das Original.
Da das Ziel ist das Original weitestgehend nachzubauen, werde ich davon was Farben betrifft nicht stark abweichen.

Anpassen kann es dann ja jeder selber.

Naja …

Was die Farben angeht - okay. Aber das Demotemplate ist doch von den Proportionen stimmiger angelegt als Dein Entwurf jetzt. Ich weiß nicht, wie weit Dein Anspruch geht, aber die Abstände und Spalten in dem Demoentwurf erscheinen mir „ausgewogener“. Frage ist natürlich, wie weit man denen folgen will …

Top-Pluspunkt für Deine Arbeit aber: Dein Template sieht im Hochformat auf dem iPad deutlich besser aus als die Vorlage. Einzig das Logo links oben verschwindet zum Teil und die Überschriften über den Fotos verdrängen teilweise die Fotos nach unten.

Lustigerweise ist die rechte Spalte im Hochformat auf dem iPad genauso breit wie eines der kleinen Fotos und das sieht richtig gut aus. Im Querformat wird sie aber schmaler und rutscht dann wieder aus dem Spaltenraster …

Also: Weiter so!

Gruß
Typo

[BugBuster]

Ja was responsive angeht habe ich noch nichts getan. Wenn da was funkt, dann sind das alles noch default Angaben aus der MA Demo.
Die Schriftgrößen passe ich auch noch mal an, warscheinlich sogar die Grundgröße, damit weiche ich dann zwar vom Original etwas ab, ist aber besser lesbar.

Es soll ja auch gar nicht perfekt werden, dann würde ich es verkaufen
Schließlich passt es jeder ja hoffentlich eh nochmal an nach seinen Bedürfnissen.

[Typogold]

Die Schriftgrößen passe ich auch noch mal an, warscheinlich sogar die Grundgröße, damit weiche ich dann zwar vom Original etwas ab, ist aber besser lesbar.

Ich glaube, dass es schon reichen würde, wenn Du die Schriftfarbe ein klein wenig kontrastiger einstellst. Lesen kann man es eigentlich ganz gut.

Am iPAD bekommt die Schrift zudem einen seltsamen white-shadow effekt gezeichnet, wird daher noch zusätzlich schlechter lesbar.

Aber trotz aller Kritik: Top Arbeit

Gruß
Christian

[BugBuster]

Am iPAD bekommt die Schrift zudem einen seltsamen white-shadow effekt gezeichnet, wird daher noch zusätzlich schlechter lesbar.

Das ist auch auf dem PC so, nur sieht man es da kaum, das ist eine Angabe per CSS aus dem Original übernommen, damit wirkt die Schrift wie gestanzt.
Wobei ich hier auch noch mal mit dem Original vergleichen muss, ob das dort nur bei den Überschriften oder auch bei den Texten gesetzt ist.

Bei Retinadisplays könnte sich dieser Effekt verstärkt auswirken.
Das sind dann Feinheiten, die man per Media Query wieder abschalten könnte.

[BugBuster]

So, Kleinigkeiten angepasst, Überschriften der Module, Schriftfarbe, mobile Layouts, und James durch Jamie ersetzt
Und, macht nur kein Test mit IE7, das geht mir nichts mehr an , wer das braucht später muss noch Hand anlegen. Eine IE7 Fix CSS gibt es schon, aber nur für 2 Stellen, noch nicht für alles.

Nun mach ich mir mal Gedanken über den Export.

[BugBuster]

Hi Fans,

das Theme Tapestry ist nun als Website-Template zum Downlaod freigegeben. (so wie die Music Academy Demo)
Nähere Infos auf meiner Seite: Contao 3.0.1 Theme Tapestry

Fröhliche Weihnachten

Danke an Hagen (do_while) für seine BackupDB Erweiterung.

[planepix]

Danke Glen!!
Schöne Weihnachten.

[do_while]

Sieht super aus, es lohnt also, bei "fremden" freien Templates zu schauen, eine Portierung auf Contao ist meist möglich, wenn man sich etwas mit Contao auskennt.

Wenn Du noch einen drauf setzen möchtest, bietest Du noch Deine Demo als Contao2Go-Paket an

Danke an Hagen (do_while) für seine BackupDB Erweiterung.

Gern doch.

[manfred]

Vielen Dank BugBuster,

habs grad mal runtergeladen und werde über die Feiertage testen. Wenn ich mit der CSS-Geschichte klar komme, dann werde ich mich auch mal an einem dieser Themes versuchen und das Ergebnis dann zeigen und zur Verfügung stellen.

Gruß Manfred

[BugBuster]

Von der selben original Seite will ich auch noch eines machen, dass "citrusy". Nicht das wir doppelt arbeiten, wäre ja Schade um die Zeit.

[ciaobello]

Von der selben original Seite will ich auch noch eines machen, dass "citrusy". Nicht das wir doppelt arbeiten, wäre ja Schade um die Zeit.

Das Theme sieht gut aus ... aber irgendwie zeigt es mir dieses "Citrusy" nicht an im FF 13 und in Chrome 23 hingegen mit Safari 4.0.4 kann ich es sehen ?
Also genaugenommen zeigt es die html5templates.com nicht an. Die Demo zumindest. Wenn ich es runter lade geht es.

[manfred]

Ich habe mir das "Skylined" ausgesucht. Dann passt das ja. Ich kann die Demos übrigens auch nicht sehen, erst wenn ich das Theme runtergeladen habe.....seltsam.

Gruß Manfred.

[swinde]

Hallo,

hier hätte ich mal eine Frage. Wie ist die rechtliche Seite, darf man die Templates für eigene Zwecke benutzen?
Ich habe da immer etwas Bauchweh.

Frohe Weihnachten
Steffen

[do_while]

Gugst Du hier (ganz unten die blaue Box):
http://html5templates.com/

Das ist natürlich bei jedem Anbieter erneut zu prüfen, weil es bei jedem anders sein kann.
Du hast Recht, grundsätzlich sollte man solche Rechte immer erst prüfen, bevor man Fremdes einsetzt.

[swinde]

Hallo do_while,

na dann werde ich mich mal frisch ans Werk machen und "Iridium" ins Contao übersetzen!


Ein geruhsames Weihnachtsfest

wünscht Steffen Winde

[BugBuster]

hehe, deshalb habe ich in meinem Template eine Lizenz Seite mit eingebaut.
Auf meiner Webseite ist dort auch direkt der Link auf die deutsche Erklärung zu der CCA Lizenz.
In diesem Falle heißt das, du darfst machen was du willst damit, solange ein Link zum Designer (html5templates.com) und zum Contao Theme Ersteller (meine Wenigkeit) irgendwo auf deiner Seite ist, das muss beim CCA nicht im Footer sein, reicht zum Beispiel auch auf der Impressums Seite.

Es gibt andere Lizenzen, wo meist der Backlink im Footer sein muss.

[BugBuster]

Hi Leute,
wer sein Contao2Go unter Windows schon gepatcht hat bzw. die aktuelle Version von c2admin darin installiert hat, kann nun auch von meiner Seite ein Contao2Go Paket runterladen.
http://www.contao.glen-langer.de/Con..._Tapestry.html
(ganz unten)

@lindesbs: Kannst du mal ein Contao2Go_1-0-1.exe auf den Markt bringen wo die aktuelle Version von c2admin enthalten ist? Oder haste das darin doch schon eingeschmuggelt?
(muss zugeben, habe nicht geprüft nur anhand der 1.0.0 Version angenommen)

[ciaobello]

(muss zugeben, habe nicht geprüft nur anhand der 1.0.0 Version angenommen)

Ich habe es geprüft, angepasst und weitergegeben. Er hatte wohl noch nicht Zeit es selber zu testen und zu veröffentlichen. Hab Dir eine Einladung geschickt um die Version runter zu laden und zu testen.

[BugBuster]

OK, habe ich geladen, schaue ich mir in den nächsten Tagen mal an.
Danke.

[Tastaturberuf]

Sieht richtig toll aus, Danke fürs Teilen! Melde mich wenn's fertig verbaut ist.

[matthes81]

Läuft das ohne weiteren Probleme auf 3.1?

[ciaobello]

Läuft das ohne weiteren Probleme auf 3.1?

Dafür gibt es keine Garantie. Aber wenn Auf nummer sicher gehen willst, lade dir contao2go und die contao2go Version runter. Wenn dann die Version 3.0.1 einwandfrei läuft kannst Du die Contao 3.1 Version reinkopieren. Dann siehst Du sofort ob es geht (Datenbank aktualisieren nicht vergessen).

Contao 3.1 hat ja neuerdings auch ein Slider. Für diesen und andere neuen Funktionnen fehlen ja wohl dann die Klassen/ID's im CSS.

[BugBuster]

Es steht schon auf meiner ToDo Liste eine Version für Contao 3.1 fertig zu stellen.
Jedoch haben Bugfixe in anderen Erweiterungen erstmal vorrang.

Falls jemand sich da schon ranwagt das zu testen und Probleme feststellt, gern hier eintragen
https://github.com/BugBuster1701/Con...estry/issues/1

[BugBuster]

Hi Leute,
da ich heute meine Tapestry Demo Seite auf Contao 3.0.6 gehoben habe, habe ich bei der Gelegenheit gleich ein neues Contao2Go Paket generiert.
Es gibt also nun zwei Versionen, also Contao 3.0.1 und als Contao 3.0.6.
http://contao.ninja/contao-3-theme-tapestry.html
(ganz unten)

Für 3.1 steht noch in den Sternen wann ich das tue, ich würde gern auf die Version 3.1.2 von Contao warten, aber das dauert wohl noch eine Weile.

[BugBuster]

Hi Leute,
da ich heute meine Tapestry Demo Seite auf Contao 3.5.6 gehoben habe, habe ich bei der Gelegenheit gleich ein neues Contao2Go Paket generiert.
Zu finden auf http://contao.ninja/contao-3-theme-tapestry.html
(ganz unten)