HTML/CSS Prototyp mit TL umsetzen

[Kristina]

Hallo,
ich möchte TL als CMS verwenden und versuche mich an meinem ersten TL Projekt.
Hier ist der Link zu dem Prototypen, den ich nun gerne in TL umsetzen möchte:

http://www.roock-design.de/webdesign/parkway/index.html

Was ich gemacht habe:
1. auf Grundlage meines HTML ein Template erstellt:
http://www.roock-design.de/webdesign...arkway_new.tpl

2. meines CSS importiert, sie liegen tl_files Verzeichnis
http://www.roock-design.de/webdesign...t_n_colors.css
http://www.roock-design.de/webdesign...nues_class.css
http://www.roock-design.de/webdesign...readcrumbs.css
http://www.roock-design.de/webdesign...col_liquid.css

3. die images in das tl_files Verzeichnis kopiert und in den importierten CSS den Pfad geändert.

4. Module angelegt und die Klassen bzw. ID meiner CSS Definitionen vergeben z.Bs. "multi_drop_menues" für die Hauptnavigation
Breadcrumbs
Footer
Hauptnavigation
Header
Subnavigation

5. Seitenlayout angelegt und die Stylesheets ausgewählt
Ich habe das zweispaltige Layout gewählt.
Header -> main
Hauptnavigation -->
Breadcrumbs --> main
Artikel --> main
Subnavigation --> right
Footer --> footer

6. Seitenstruktur (zwei Seiten)
7. Artikel für die Startseite

Das Ergebnis sieht jetzt so aus und ist noch nicht ganz was ich erwarte:
Leider nur ein Bild, weil ich noch lokal arbeite


Das Auffälligste ist, dass die Subnavigation nicht rechts steht.

Ich benötige mal prinzipielle Hilfe, wie ich da vorgehen soll. Ich habe ja bereits ein fertiges Spaltenlayout diese CSS Datei benötige ich ja nun wahrscheinlich nicht mehr, wenn ich das TL 2-Spaltige Layout nehme.
Wie sieht es mit den anderen CSS aus. Kann ich die einfach dem jeweiligen Modul zuweisen? was gibt es zu beachten?
Die Hauptnavigation hat zwar meine Styles, aber es steht auch "skip link" drin, was über den Navigationsitems einen grauen hoverbaren Streifen verursacht. Wie gehe ich da vor?

Dann verwende ich in meinem ürsprünglichen CSS Definitionen wie diese:
#content p {} diese werden von TL nicht angezogen, weil es ja kein #content gibt. Aber auch auf #main lies es sich nicht anwenden.
Darum die Definitionen in das übergeifende p {} geschrieben, mit dem Effekt, dass es auch im Footer angezogen wird und die Footer Definition #footer p {} wird nicht angezogen ...
Was gibt es hier zu beachten?

Ich hoffe, dass war jetzt einigermaßen verständlich erklärt was ich machen möchte.
Ich freue mich sehr über einen Hinweis.
Ich arbeite gerne mit meinen eigenen CSS, da ich es erstens schon ausgetüftelt habe und zweitens es bei bestehenden Websites schon läuft.
Eventuell ist aber dieser Ansatz verkehrt und ich sollte eher die TL Styles anpassen...

Für einen Tip zur prinzipiellen Vorgehensweise wäre ich sehr dankbar.
Ich habe auch das Typolight Handbuch, aber nichts gefunden. Eventuell habe ich es aber auch überlesen, weil ich nicht wusste wie ich die Informationen einordnen soll...

Vielen Dank
Kristina

[Antipitch]

Hi Kristina,
ohne jetzt alle deine Fragen zeitlich beantworten zu können:

Zu Beginn eines TL-Projekts sollte sich u.a. immer die Frage gestellt werden, wie updatefähig das System am Ende sein soll oder muss (gibt es eine Update-Lizenz, wer pflegt die Seite weiter etc.). Je updatefähiger eine Seite sein soll, desto weniger sollte an Templates oder anderen TL Dateien gedreht werden. Das TL Framework ist natürlich auch für die einfache Bedienung ohne tiefergehende Kenntnisse entwickelt und hat auch Nachteile, in den meisten Fällen lohnt es sich aber auch für "Profis", es zu nutzen. D.h. die fe_page.tpl so zu lassen wie sie ist, sich sein(e) Seitenlayout(s) im Backend zusammenzuklicken und darauf dann zusätzliche CSS-Angaben anzuwenden. Das gilt dann auch für einzelne Module (News etc.). Insofern hast du also das Pferd von hinten aufgezäumt...

...und dir damit auch Probleme geschaffen: Seiten-Templates müssen immer mit fe_ beginnen, deine arkway_new.tpl solltest du also eigentlich gar nicht als Seitentemplate ausgewählt haben können. Selbst wenn gibt es darin weder ein #main noch ein #content, da kann also gar nichts "angezogen" (?) werden. Und ein #subnav hätte darin auch nichts zu suchen (alle Module kriegen von TL automatisch CSS-Klassen verpasst, die man dann ansprechen kann).

Versuchs einfach mal mit der standardmäßigen fe_page.tpl, nutz die Einstellungsmöglichkeiten unter "Seitenlayouts" im BE und guck dir den Frontend-Output an. Was du da im Quelltext siehst, bringst du dann mit deinem eigenen, zusätzlichen CSS weiter in Form.


cheers
Antipitch

[MacKP]

Hallo Kristina,
ansonsten findest du hier eine gute Anleitung wie man eigene Templates in TL einbringt: http://de.contaowiki.org/TutorialsEi...eitentemplates

Ein paar Anpassungen am eigenen CSS muss man natürlich machen...
Aber in der Regel geht das eigentlich alles schnell von der Hand.

Viele Grüße

[Kristina]

Vielen Dank für Eure Antworten und Hilfe.

Ein Tutorial zum Anlegen eines eigenen TL hatte ich schon gesehen und mir auch ein Template (auch mit dem Namen fe_xxx.tpl) erzeugt und konnte sie auch in TL auswählen. Trotzdem habe ich damit so meine Probleme.

Nun bin ich aber dabei der "Music Academy" mein Design zu verpassen. Ich denke, dass ich da viel lernen werde um es dann auf mein Projekt vollständig neu anzuwenden.
Ich tüftle also weiter und werde sicher noch die eine oder andere Frage haben.
Also vielen Dank erst mal und bis bald
Kristina

[christian]

Hi Kristina,

ich denke, die besten Ergebnisse mit TL bekommst Du, wenn Du nach Möglichkeit am Anfang kein Template veränderst.

In 90% aller Fälle brauche ich keinerlei Veränderungen am HTML der fe_page.tpl, oft auch nicht am HTML der Sub-Templates. Der Begriff "Template" wird bei TL anders gebraucht als bei vielen anderen Systemen. "Layout" würde eher passen.

Am effektivsten ist es wohl, wenn Du Dir die HTML-Ausgabe anguckst und CSS für genau Dein Design passend zu den generierten Klassen erstellst.

Wenn dabei Fragen auftauchen, kann Dir das Forum auch prima helfen.

Grüße,


Christian

[Budman]

Und wenn es ein bisschen Zeit hat, dann kannst Du Dich langsam einarbeiten, und den Rest hier persönlich fragen:

https://community.contao.org/de/show...4&postcount=15

[Kristina]

Vielen Dank für Eure Antworten.
ja, ich werde nun mit den Vorgaben arbeiten.
Habe leider nur nicht so viel Zeit wie ich gerne dafür hätte ...
Darum gab es noch keine weiteren Fragen von mir ;-)
Viele Grüße
Kristina

[fantasmo]

Hallo,

ich komme ursprünglich von Typo3 und bin somit "TemplaVoila" gewöhnt. Da kann man ja echt das GANZE Layout komplett selbst Formen und die Anzeigebereiche zuweisen.

Im Screencast auf der https://contao.org-Saite wird zwar ein eigenes HTML-Template gemacht, aber sich doch auf eine vorgegebene Spaltenvorgabe beschränkt... Aber wie ich im Forum gelesen habe, kann man selbst das umgehen und ein tatsächlich KOMPLETT eigenes HTML-Gerüst verwenden?!

Meine zusätzliche Frage aber:
Gilt das auch für Inhaltselemente?
Im oben angesprochenen Screencast verwendet der Sprecher doch nur vorgegebene Inhaltselemente und weitere Infos z.B. Tutorials habe ich dazu nicht gefunden.
Ist es aber möglich auch KOMPLETT EIGENE Inhaltselemente zu erstellen (so wie man es von Typo3, "Flexible Inhaltselemente" her kennt) oder ist man doch auf ein von Typolight vorgebenes Grundlayout/Grundgerüst der einzelnen Inhaltselemente beschränkt?

[Antipitch]

Hi fantasmo,
wenn du unbedingt willst/ musst, kannst du dir dein komplett eigenes HTML Gerüst/ Template basteln (fe_irgendwas.tpl im Ordner root/templates). Dasselbe gilt für Inhaltselemente und Module. Warum das nicht unbedingt ratsam ist, sollte in diesem Thread allerdings klar geworden sein.

Das Zusammenstellen von neuen Elementen/ Kombinationen übers Backend a la TemplaVoila gibt es in TL bisher nicht. Das heißt, neue Elemente musst du als eigene Module programmieren. Wenn es sich aber "nur" um Inhaltselemente handelt, ist das relativ schnell gemacht. Erfordert natürlich mehr oder weniger gute PHP-Kenntnisse, aber ich empfinde das trotzdem als besser im Vergleich zum TemplaVoila-Herumgeklicke...


cheers
Antipitch