Druckbare Version
// Anmerkung Nina: Ich habe diese Beiträge aus dem Originalthread rausgelöst, da sie dort die eigentliche kurze Botschaft für Neulinge nur verwässern.
Dem kann man nur zustimmen. Ich versuche auch immer alles mit den eigenen Layoutbereichen und CSS zu machen. Einzig die Eigenen Layoutbereiche sind etwas starr. Da muss man dann doch leider etwas tricksen.
Ansonsten ist es gerade die Möglichkeit des Zusammenbauens, welches TL ausmacht.
Beschäftige mich zurzeit auch gerade mit diesem Thema: Was mich jedoch etwas stört, ist die Tatsache, dass TL die generierten Layoutangaben einfach intern im Dokument ablegt, anstatt das ganze sauber in einer externen CSS zu verpacken.
Gibt's dazu evtl. ein schöneres WorkAround? Ansonsten würd' ich einfach mal selbst Hand anlegen und die String-Ausgabe zerlegen.HTML-Code:<style type="text/css" media="screen">
<!--/*--><![CDATA[/*><!--*/
#wrapper { width:963px; margin:0 auto; }
#header { height:330px; }
#right { width:240px; }
#main { margin-right:240px; }
#footer { height:110px; }
/*]]>*/-->
</style>
Frustationsbremse ist gut! :D
Das sehe ich etwas anders, denn diese Dinge wachsen oft mit den Aufgaben.Zitat:
Das dürften nur sehr, sehr wenige sein, weil alle TL-Elemente in allen Bereichen einbindbar sind.
Ich gebe Recht, dass es zu 90% ausreicht. Dummer Weise habe ich da etwas abgehobenere Vorstellungen von Flexibilität und Aufteilung dann reicht es oft nicht mehr. Aber TL bietet mir dafür die Basis, die ich bei kaum einem Anderen System vorfinde. DAs gilt aber ja nur für mich persönlich. ;)
Prinzipiell sollte ein Unerfahrener aber erstmal mit dem leichten Stoff anfangen.
Allzuschnell wird aufgegeben, weil man es dann doch nicht umsetzen kann.
Ansichtssache. Es gibt hier schon genug Anfragen, warum denn die Änderungen in der externen CSS nicht wirken bzw. überschrieben werden.Zitat:
Zitat von IamManu
Wie Du schon richtig erkannt hast sind das dynamisch generierte Angaben generiert aus den Angaben die man im Backend unter Layout machen kann.
Und ich denke es ist auch ein Vorteil für die Browser, wenn für das Grundgerüst die Angaben gleich vorhanden sind und nicht erst in der x-ten CSS auftauchen.
Ich habe als TYPOlight-Neuling aus Neugierde eine bestehende einfache Testseite in TYPOlight ausschließlich mit selbstdefinierten Layoutbereichen (CustomSections) umgesetzt und ich hatte keinerlei Probleme damit.
Nachdem man ja jeder Seite, jedem Artikel und jedem Inhaltselement CSS Klassen und den Seiten und Artikeln auch CSS IDs zuzuweisen kann, hat man jede Freiheit, die man möchte.
Zu lernen hatte ich nur die von den Modulen stammenden CSS IDs und Klassen.
Zuvor hatte ich eine Mischform aus TL-Layoutbereichen und zusätzlichen eigenen Layoutbereichen getestet, da irritierte mich zunächst, dass beim Einbinden der Frontend-Module die Reihenfolge dieser Bereiche nicht beliebig zu bestimmen ist, sondern es stehen immer alle TL-Layoutbereiche voran, und danach folgen alle selbstdefinierten Bereiche, unabhängig von ihrer tatsächlichen Position auf der Seite.
Michael
Hallo zusammen, mein 1. Beitrag und hoffentlich nicht zu greenhornig:
Habe schon 2-3 Websites auf Grundlage des im Buch enthaltenen Templates "Webconsulting" umgesetzt.
Im Grunde ging das, nur frage ich mich, ob es nicht auch einfacher geht.
Grundlage bei mir ist immer ein Ps-Screendesign und das Konzept natürlich.
CSS IDS und Classes kann ich also gut an TL Vorgaben anpassen.
Fragen dazu:
1. Wäre es sinnvoller, das eigene Layout wie im Beitrag vorgeschlagen von Anfang an ohne so eine "Vorlage" zu machen? Ist das weniger Arbeit?
2. Darf ich das von mir geänderte "Webconsulting"-Template überhaupt so nutzen, d.h. umgestrickt und kommerziell?
3. Läuft dieses immerhin vor einem Jahr schon publizierte Template auch auf den aktuellen TL-Versionen (2.7.3)? Es hat sich ja in den letzten Monaten einiges getan, auch was Navigationsstyles angeht etc.
Danke für Eure Antwort.
Hallo Compadre,
herzlich Willkommen in der TYPOlight-Community.
Weniger Arbeit ist es vielleicht im Anfang nicht, aber alle Features, die TYPOlight für solche Fälle mitbringt, können voll ihre Leistung entfalten. Ich nutze in solchem Fall das vorgegebene Design als Grafikvorlage und baue sie in TYPOlight nach. Nach eingen Projekten sieht man schon mit ein / zwei Blicken, wie sich die Vorlage (meist sogar mit dem Standard-Template fe_page) umsetzen läßt. Sicherlich sind die ersten Implementierungen etwas langsamer, aber jedes System will erst erlernt werden.Zitat:
1. Wäre es sinnvoller, das eigene Layout wie im Beitrag vorgeschlagen von Anfang an ohne so eine "Vorlage" zu machen? Ist das weniger Arbeit?
Da schaust Du am Besten im Buch nach oder in diesem Thread oder stellst dort weitergehende Fragen zur kommerziellen Nutzung:Zitat:
2. Darf ich das von mir geänderte "Webconsulting"-Template überhaupt so nutzen, d.h. umgestrickt und kommerziell?
https://community.contao.org/de/showthread.php?t=195
http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html
Das Template läuft nicht in allen Punkten sofort in TYPOlight 2.7.x. Es lässt sich aber entsprechend anpassen. In Kürze wird die neue Auflage des Buchs herauskommen und dort soll eine aktualisierte Version enthalten sein.Zitat:
3. Läuft dieses immerhin vor einem Jahr schon publizierte Template auch auf den aktuellen TL-Versionen (2.7.3)? Es hat sich ja in den letzten Monaten einiges getan, auch was Navigationsstyles angeht etc.
Was sich zu 2.7 geändert hat, findest Du hier:
https://contao.org/board/message/71284.html
Eigentlich hätte man diesen Thread hier besser sperren sollen, denn durch die vielen Posts werden die Newbies ja jetzt doch wieder annimiert von Anfang an den TL Code mit ihrem eigenen zu ersetzen ;)Zitat:
Zitat von m.koell
Dass dieses STYLE oben im HEAD steht ist sehr gut, denn ohne dieses STYLE funktioniert das Framework nicht.
Andreas
(Pro-Tip: Gib keine Werte im Layout ein, dann wird dieses STYLE auch nicht generiert, dann kannst du die Werte in deine CSS setzen.)
Hallo Community,
Ich sehe gerade diesen Beitrag und muss deswegen mal mein erstes Posting hier schreiben :)
Ich habe das System zu schätzen gelernt (mehrere Projekte in den letzten Monaten), die Kunden kommen auch gut damit zurecht, allerdings nehme ich diesen Thread hier mal als Aufhänger für die Dinge, mit denen ich nicht einverstanden bin. Generell stösst mir die Durchmischung von Content-/Layoutadministration im Backend auf. Das System ist ein CONTENT Management System und kein LAYOUT Management System.
Der Anspruch ist zwar universell, allerdings ist dieser durch die komplexe und teilweise krude Technologie CSS und deren Browserunterstützung in Verbindung mit Javascript nicht umzusetzen. Hier mal ein paar konkrete Punkte, die ausschliesslich den eingebauten Template-/Layoutansatz betreffen und mir unter der Voraussetzung der Verwendung des eingebauten Templates nicht gut gefallen:
1. TL benutzt Positionsangaben für die Spaltenselektoren
Die Bezeichnungen für die id-Selektoren "left" & "right" sind m. E. nach unglücklich und überholt. Es bietet sich generell an, für Selektoren semantische Bezeichnungen zu wählen. Warum? Will mein Kunden alle Inhaltsmodule auf der rechte Seite auf die linke Seite verfrachten, habe ich 2 Möglichkeiten:
1) Entweder ich tausche im Backend bei allen Seitenlayouts alle Module aus -> viel unnötige Arbeit und fehlerträchtig
2) Oder ich positioniere per CSS die Spalte rechts/links um, allerdings befindet sich dann die DIVision "left" rechts im Layout und der DIV-Container "right" auf der linken Seite -> wenig Arbeit, aber verwirrend.
Würde man man einheitlich semantische Bezeichnungen für die Selektoren nehmen, wäre man das Problem los und ist nicht auf die Position festgelegt, sprich, die kann mit 2 Zeilen CSS geändert werden. Als Beispiel ist hier "main" zu nennen, das ist eine semantische Bezeichnung. Für weitere Spalten wäre z. B. "sub1" und "sub2" oder "sub_a" und "sub_b" in Ordnung (statt "left" und "right").
2. TL legt mich/sich auf ein JS-Framework fest
Die mootools möchte ich grundsätzlich nicht benutzen, deswegen möchte ich die auch nicht eingebunden haben. Sicherlich geht es nicht nur mir so. Die JS-Dateien sind aber fest in fe_page.tpl verdrahtet. Hier sehe ich das generelle Problem, dass es einfach unelegant ist, sich in der Fülle der Möglichkeiten auf eine Lösung von Herstellerseite aus festzulegen. Daneben spielt hier auch Punkt 4 eine Rolle, wenn ich kein eigenes Template benutze (mit entfernten mootools-Links), sondern einfach jQuery oder was weiss ich zusätzlich einbinde.
3. TL nutzt Inline-CSS
Hiermit erzeuge ich eine Spezifität in der Kaskade von 1,1,0,0. Dadurch lege ich mich sehr fest, da 1,n,n,n kaum zu überschreiben ist (nur durch spätere Inline-Anweisungen). Das ist zwar bei den Positionierungen für "gröbere" Strukturelemente kein so grosses praktisches Problem, allerdings kein eleganter Stil.HTML-Code:<style type="text/css" media="screen">
<!--/*--><![CDATA[/*><!--*/
#header { height:200px; }
#left { width:200px; }
#right { width:100px; }
#main { margin-left:200px; margin-right:100px; }
#footer { height:200px; }
/*]]>*/-->
</style>
4. TL macht mein Frontend langsam(er)
"Out of the box" bringt TL das folgende mit:
Binde ich nun über das "Head"-Feld z. B. noch jQuery ein (wie unter 2. schon ausgeführt) habe ich 6 (!!!) extern eingebundene Dateien, ohne überhaupt eine einzige eigene Stilangabe geschrieben zu haben. Mit meinem Stylesheet bin ich dann bei 7 Dateien. Mittlerweile sollte sich rumgesprochen habe, dass das Reduzieren von http-Requests Webseiten deutlich beschleunigen kann. Parallel kann ein Client von einer Domain 2 Sachen gleichzeitig anfordern: CSS-/JS-Dateien, Bilder, Hintergrundbilder. Mit jedem zusätzlichen Request erzeugt man eine Latenz von ca. 200 ms + Downloadzeit pro Request. Reduziere ich den ganzen Krimskrams auf das Notwendigste verbessert man durch den schnelleren Seitenaufbau die Nutzererfahrung und damit die Usability. Hier steht mehr darüber: http://developer.yahoo.com/performance/rules.htmlHTML-Code:<link rel="stylesheet" href="system/typolight.css" type="text/css" media="screen" />
<!--[if lte IE 7]><link rel="stylesheet" href="system/iefixes.css" type="text/css" media="screen" /><![endif]-->
<link rel="stylesheet" href="plugins/slimbox/css/slimbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="plugins/mootools/mootools.js"></script>
<script type="text/javascript" src="plugins/slimbox/js/slimbox.js"></script>
Wo wir gerade bei Beschleunigung sind: JS-Dateien sollten am Ende des HTML-Dokumentes eingebunden werden, auch das geht nur mit eigenem Template.
Ein unangenehmer Nebeneffekt ist es, dass ich auch erstmal nicht weiss, wass in typolight.css und iefixes.css drinsteht und ich mitunter Nebeneffekte habe, die nicht kalkulierbar im CSS zu beheben sind.
5. TL erfordert das Erlernen der systemeigenen Selektorbezeichnungen
Wenn man nur TL benutzt, ist es sicherlich möglich, sich mit den systemeigenen Bezeichnungen so auseinanderzusetzen, dass man diese blind runterbeten kann. Ich selbst arbeite jedoch regelmäßig mit 5-6 verschiedenen Content Management Systemen und da erwarte ich einfach, dass sich das System mir bzw. meinem CSS-Stil anpasst (Bezeichnungen, Arbeiten im Editor, Single-Line CSS). Zum Glück geht das mit wenigen Änderungen im Haupttemplate von TL (als Kopie) ganz gut.
Warum schreibe ich das alles? Das Ausgangsposting beschreibt, warum man (als TL-Newbie) keine eigenen Templates benutzen soll. Ich möchte jedoch dazu anregen, sich selbst Gedanken darüber zu machen, was "unter der Haube" des Frontends (m)einer Webseite steckt. Es ist eine sehr eigene und subjektive Philosophie, die diesbezüglich in TL verfolgt wird und die wie oben ausgeführt auch Schwachstellen hat. Der TL-Ansatz ist meiner Meinung nach nicht universell genug (geht das überhaupt mit dem derzeitigen Stand der Dinge CSS und XHTML betreffend?), bietet zum Glück aber genügend Freiraum, um eigene Arbeitsprozesse zu integrieren.
Das kann man so nicht sagen. Arbeitet man sauber über die Kaskade, habe ich gar keine Änderungen im Template.Zitat:
"Wie bekomme ich meine Klassennamen in das TL-Template?"
Antwort: Nur mit extrem viel Aufwand, da nicht 1, sondern X (Sub-)Templates angepasst werden müssten. Und dies ggf. auch nach einem Update. Die einfachste Lösung ist die, die eigenen Css-Anweisungen auf die TL-Klassenbenennungen anzupassen.
Beispielhaft für die eingebaute fe_page.tpl das CSS:
ohne Templateänderungen stattHTML-Code:#main h2 { ... }
#main p { ... }
und dem Ändern der vielen Templatesnippets für die ContentElements.HTML-Code:h2.hauptinhalt { ... }
p.hauptinhalt { ... }
Allerdings ist das wohl eher ein grundsätzliches Konzept der Arbeit mit Cascading Style Sheets, das in jedem Fall unabhängig vom System verfolgt werden sollte.
Danke für's Lesen und Eure Anmerkungen.
Ich kann Deinem Beitrag nur beipflichten.
Letztendlich ist es auch so, daß die Endkunden im Normalfall gar keine CSS-Kenntnisse haben, die sie aber brauchen um die CSS-Eigenschaften im Backend sinnvoll ändern zu können.
Der Webdesigner wünscht sich allerdings das Ändern der Styles direkt im Stylesheet.
Abhilfe wäre vielleicht, daß der Webdsigner bestimmte CSS-Klassen und ids vorgibt (z.B. für die Artkelüberschrift und den Artikeltext), die der Endkunde bearbeiten kann.
Alle anderen CSS-Eigenschaften haben ihn nicht zu interessieren.
Auch ich schliesse mich dieser Aussage an.
Es ist gut Anfängern die Möglichkeiten zu geben, die TL derzeit bietet, jedoch bin ich es als "Template-Bastler" gewohnt selbst alles Gestalten zu können wie ich es möchte und auch im CSS frei zu sein.
Hier wünsche ich mir noch etwas mehr Freiheit durch TL.
Irgendwie verstehe ich die Aussage nicht, TYPOlight bietet über CSS die Möglichkeit alle Inhalte frei zu gestalten.Zitat:
Zitat von Samuell
Wenn ich Template-Bastler lese (ich denke da immer an die J!-Tabellentemplates), dann ist natürlich die Frage J!-Template oder TL-Template? Da sind schon große Unterschiede, vor allem weil bei TL die Templates zu 95% nicht abgeändert werden müssen, da alles über die entsprechenden CSS-Klassen gestaltet werden kann.
Ich denke Samuell ist Neuling (1 Beitrag) - Willkommen im Forum - und hat noch nicht entdeckt, dass man 100% Freiheit in den Templates hat. :D
Hallo zusammen,
ich möchte gerne nochmal auf die Posts reagieren, die etwas fehlende Flexibilität bemängeln: Seid mir nicht böse, aber ich glaube, Ihr habt noch nicht alle Möglichkeiten erkannt.
Hast Du. Zu 99%. Es gibt einige wenige Dinge, wo aus dem Core - oder den Extensions - Klassen fix in den Code geschrieben werden. In praktisch allen Fällen kannst Du durch eine Modifikation der Templates Deine eigenen Klassen vergeben. Eine Schweine-Arbeit, klar. Unsinn, auch klar. Aber möglich - es kann "basteln", wer basteln möchte.Zitat:
Zitat von Samuell
Kann er, kann er. Wer den CSS-Editor nutzen möchte, kann das tun. Wer nicht, bindet eigene CSS-Dateien ein. TL ist es auch egal, ob die nun "basic.css" oder "mein-eigener-kram.css" heissen. Wer das Framework nutzen möchte, kann das machen. Wer nicht möchte ... Ihr wisst, wie's weitergeht, oder?Zitat:
Zitat von Bernd
Nee, wieso? Meinem Endkunden gebe ich ein paar (eigene) Klassen mit, die er anwenden kann. Beispiele? Gerne:Zitat:
Zitat von Bernd
- die Klasse "mitRahmen" macht einen Rahmen um Bilder oder Tabellen(zellen)
- die Klasse "rechts" floatet das Element/Bild rechts
- die Klasse "volleBreite" zieht Tabellen auf 100%
Bisher hatte ich keinen Kunden, der so "geschickt" war, diese Klassennamen nicht zu verstehen. Der sollte aber auch besser den PC ausgeschaltet lassen und seine Agentur für's Denken bezahlen.
Das Tolle ist: Dadurch, dass ich die Klassen in der basic.css ohne Inhalt/Spezifikationen unterbringe und später im CSS überschreibe, stehen die auch im TinyMCE zur Verfügung. A propos TinyMCE: Mit dessen (Mini)Vorlagen kann ich sehr viele weitere Bereiche "Endkundensicher" abdecken.
Man wird es sicherlich nie allen recht machen können. Ist aber auch nicht nötig. Für das, wofür TL gedacht ist, ist es klasse und nicht so leicht zu überbieten.
Kommen wir zum Schluß doch bitte nochmal auf den Titel des Thema: Kein eigenes Template für Anfänger, bitte. Es geht hier nicht darum, wer was denn noch gerne im Wunschkonzert hören möchte, sondern darum, dass auch Beginner schnell zu vernünftigen Ergebnissen kommen. Wenn Ihr über die Features oder die Architektur von TL diskutieren möchtet, dann macht doch bitte ein eigenes Thema dazu auf.
Grüße,
Christian
Edit : Erstmal gelöscht. Will noch was recherchieren. Aber ich denke mal, ich werd nochmal hier anfragen :-)
Moin Moin!
Ich bau ja nun auch meist eigene Templates ein, ich hab auch kein Problem damit. Das einzige was halt nicht so schön ist, das man denn nicht mehr alles in TL Backend ändern kann.
Gibt es irgendwo eine Liste mit den möglichen TL Klassen?
Hauptsächlich gehts darum eigene Menue Designs in der CSS zu machen. Denn an der Aufbaustruktur gibt es ja nichts zu meckern! Ausser jemand will was 4 spaltiges...
Viele Grüße
Frank
Ja, denn mach ich das über den Quelltext.
Dann muß ich mir nur mal eine Seite mit der CSS erstellen, und vor allen Dingen die CSS erst mal wieder suchen und integrieren...
Danke für die Hilfe!
Noch eine Frage:
Gibt es irgendwo ein Stylesheet in dem nur das absolt nötige drin ist. In das TL dann erst die Dinge einfügt die nötig sind?
Weil ich hab jetzt nur die Standard von music academy
Es wird auf der TYPOlight Homepage ein CSS-Framework bereitgestellt, das Du Dir ev. anschauen kannst. Darüberhinaus gäbe es auch noch dieses Thema, das Dir in dieser Hinsicht sicherlich auch hilfreich sein könnte...Zitat:
Zitat von obelixus
Vielen Dank für die Antwort!!! Da sind viele Interressante Dinge bei!!!
Hallo zusammen!
Hab mir Testweise mal Cantao runtergeladen und installiert.
Welches ist denn die empfohlene Herangehensweise? Ich kenn mich ein ganz wenig mit CSS und Webdesign aus (kein php).
Ziel ist es eine Webseite für meine eigene kleine Firma zu erstellen. Nichts grosses.
Hallo Meriana,
willkommen im Contao-Forum.
Dafür ist die Website contao.org gemacht. Die Downloadseite durchstöbern, die Handbücher zu Gemüte führen (haupts. Benutzerhandbuch), die Videos ansehen und in die FAQs (häufige Fragen) schauen. Findest du alles dort.
Gruß Andreas
Danke, da hab ich mich schon umgeschaut, allerdings ist vorallem das Benutzerhandbuch recht spärlich gehalten.
Soll ich denn einfqch ein vorhandenes Template nehmen und es für mich anpassen. Das einzige was ich eigentlich bräuchte ist eine rohes css file bzw template, wo schonmal vorgaben für alle wichtigen Details drinnen stehen, ev. mit Comments, dass ich dann anpassen kann.
Hallo,
auch ich bin neu hier. Also; erst mal: Hallo!
Nach dem Lesen dieses Threads, dem Durcharbeiten eines TL-Videotrainings sowie des Handbuches und dem Überfliegen des Contaowiki zum Thema erste Seite, muss ich sagen: Ich bin total zerrissen.
Einerseits scheint alles unglaublich einfach und nachvollziehbar. Module, Styles, Seitenlayout, Seitenstruktur --> fertig ist die Webseite. Aber beim eigenen Herumprobieren ist dann doch alles wieder recht schwierig.
Ich dachte, ich könnte das WebConsulting-Template auf meine BEdürfnisse anpassen. Doch leider gelingt mir das nicht wirklich. So finde ich zum Beispiel in den Styles nicht alle HIntergrundbilder (z.B. frontpage.*), die ich ersetzen würde....
Kann mir jemand weiterhelfen? Ich bräuchte eine Rat wie meine konkreten, nächsten Schritte beim eigenen Herumprobieren (Anpassen Template etc.) aussehen könnten.
Wie kann ich ein Template anpassen (eigentlich ist ja alles klar... Doch wer kennt nicht die kleinen Teufelchen ;-) )
Könnt Ihr was mit meiner Frage anfangen? HOffe, die Frage ist ok.
Vielen Dank.
Viele Grüsse, Tao
Hallo Tao,
willkommen im Contao-Forum.
Du hast wahrscheinlich das 1. TYPOlight Handbuch, da fehlen leider die Bilder. Du kannst sie hier herunterladen:
http://www.contao.org/neuigkeiten/it...-handbuch.html
Gruß Andreas
Hallo Andreas,
danke für die Beschäftigung mit meinem Problem.
Doch leider ist es nciht die Lösung. Ich habe das Handbuch mit Bildern.
Noch mal danke.
Beste Grüsse, Tao
Äh, in der webconsulting.css stehen doch die Angaben.
Was findest du nicht?
Mittels Firefox und Firebug kannst dich prima durchhangeln und suchen.
Da muss ich dir Recht geben beschäftige mich seit einigen Monaten mit Contao und habe mit einem Template begonnen, man kann ein Template einfach seinen Wünschen anpassen und erweitern find ich spitze.Zitat:
Zitat von christian
Grüße :)
ees
ja. Da hast Du recht. Als ich den Beitrag geschrieben habe, war ich noch etwas zuu grün hinter den Ohren. :o;)Zitat:
Zitat von BugBuster
Mittlerweile gehts und ich bin ganz zufrieden.
Von daher kann ich die Erfahrugnen von ees nur bestätigen.
Kein eigenes Template ist das beste Template. Und die Anpassungen sind wirklich leicht zu bewerkstelligen... Wenn mans erst mal raushat. ;)
// Anmerkung Nina: Ich habe diese Beiträge aus dem Originalthread rausgelöst, da sie dort die eigentliche kurze Botschaft für Neulinge nur verwässern.