Artikel wie in Word bearbeiten/Grenzen von Contao für Nicht-CSSler

[Vollmilch]

Hallo,

ich heiße Tobias, bin Schüler und neu hier im Forum...ein Bekannter von mir möchte einen Internet-Auftritt mit Hilfe eines CMS realisieren. Da er nicht so viel Ahnung von HTML/CSS hat, habe ich ihm TypoLight eingerichtet und die Homepage soweit vorbereitet(Layout/Menüs/etc.). Leider hat er trotzdem noch große Probleme damit, die Inhalte nach seinen Wünschen in TypoLight zu gestalten. Ein paar Beispiele bzw. Unklarheiten unsererseits...

- In einem Text-Element kann man ein Bild einbinden, welches dann vom Text umflossen werden kann. Müssen Bildunterschriften umständlich per CSS angepasst werden, wenn man z.B. die Bildunterschriften jeweils an die Schriftgröße im Artikel anpassen möchte?

- Ist es in TinyMCE möglich, eine Seite ähnlich wie in Word zu gestalten? Das ist übrigens der Hauptkritikpunkt von meinem Bekannten. Er ist technisch betrachtet nunmal ein Redakteur und kein Webmaster. Das er mit diesen Kentnissen nicht das gesamte Layout der Seite umprogrammieren kann, ist ihm klar. Zumindest bei den Artikeln möchte er aber die Möglichkeit haben, diese frei nach seinen Wünschen zu gestalten. Dabei kommt es immer wieder zu Problemen in Contao...auch mir gelingt es z.B. nicht so ohne weiteres, mehrere Bilder + Text mit TinyMCE frei zu gestalten. Sobald ich ein Bild mit TinyMCE einfüge, bin ich im Editor beschränkt, was die Positionierung der Texte angeht. Wenn ich mehrere Bilder symmetrisch versetzt einsetzen möchte, kann ich wohl nicht einfach das Bild nach Augenmaß unabhängig vom Text verschieben? Der Vorgang mutiert zu einer Mathe-Aufgabe, bei der Randeinstellungen, main-Abmessungen und Bildparameter miteinander verrechnet werden müssen. Wenn man darüber hinaus den Artikel wegen vieler Bilder im Text in viele Verschiedene Elemente aufteilen muss, wird das unserer Erfahrung nach ziemlich umständlich, unübersichtlich und zeitraubend.

Es muss ja nicht der gesamte Artikel per TinyMCE in einem einzigen Element gestaltet werden können. Aber ist es möglich, als Redakteur Bilder in den Hintergrund eines Artikels zu legen, um dann weitere Artikel-Elemente quasi über dem Bild zu gestalten? Ich kann zwar in TinyMCE in den CSS-Eigenschaften eines Text-Elements ein Hintergrundbild definieren, aber dann muss ich zwingend im gleichen Element auch einen Text eingeben. Zudem schaffe ich es nicht, im Eingabebereich von TinyMCE den Text unabhängig vom Hintergrundbild einzugeben. Die Eingabetaste führt z.B. dann nicht dazu, dass der Cursor über dem Bild eine Zeile nach unten geht, sondern dazu, dass ein zweites Hintergrundbild(Duplikat) direkt nach dem ersten erstellt wird, auf dem dann der Cursor blinkt. Kann uns geholfen werden?

Gruß,
Tobias

[Carino]

- In einem Text-Element kann man ein Bild einbinden, welches dann vom Text umflossen werden kann. Müssen Bildunterschriften umständlich per CSS angepasst werden, wenn man z.B. die Bildunterschriften jeweils an die Schriftgröße im Artikel anpassen möchte?

Hallo Tobias, wenn du die Bildunterschrift anpassen möchtest nutzt du dazu natürlich CSS (Klasse .caption). Der Vorteil bei Contao/TYPOlight ist, dass man eben vieles mit HTML und CSS anpassen kann, ohne "umständlich" in PHP Code zu wühlen. Die Unterschrift ist jedoch standardmäßig in derselben Schriftgröße wie der Artikel.

- Ist es in TinyMCE möglich, eine Seite ähnlich wie in Word zu gestalten? Das ist übrigens der Hauptkritikpunkt von meinem Bekannten. Er ist technisch betrachtet nunmal ein Redakteur und kein Webmaster. Das er mit diesen Kentnissen nicht das gesamte Layout der Seite umprogrammieren kann, ist ihm klar. Zumindest bei den Artikeln möchte er aber die Möglichkeit haben, diese frei nach seinen Wünschen zu gestalten. Dabei kommt es immer wieder zu Problemen in Contao...auch mir gelingt es z.B. nicht so ohne weiteres, mehrere Bilder + Text mit TinyMCE frei zu gestalten. Sobald ich ein Bild mit TinyMCE einfüge, bin ich im Editor beschränkt, was die Positionierung der Texte angeht. Wenn ich mehrere Bilder symmetrisch versetzt einsetzen möchte, kann ich wohl nicht einfach das Bild nach Augenmaß unabhängig vom Text verschieben? Der Vorgang mutiert zu einer Mathe-Aufgabe, bei der Randeinstellungen, main-Abmessungen und Bildparameter miteinander verrechnet werden müssen. Wenn man darüber hinaus den Artikel wegen vieler Bilder im Text in viele Verschiedene Elemente aufteilen muss, wird das unserer Erfahrung nach ziemlich umständlich, unübersichtlich und zeitraubend.

Du hast dich sicher bereits mit TinyMCE und den redaktionellen Möglichkeiten befasst. Man kann Tabellenlayouts darin erstellen, was jedoch nicht unbedingt redakteurenfreundlich ist (schau dir dazu auch den "dma elementgenerator" an). Völliges freigestalten ist immer mit gewissem Aufwand verbunden, ist aber auch wider der Natur von CMS.

Word arbeitet auch im Textfluss (solange man keine Bilder beispielsweise über den Text legt), sorgenfreie Positionierung funktioniert da auch nur mit Tabellen.

Alternativ kann man auch mit dem Gridmodell arbeiten, was den Artikelbereich in individuelle Spaltenbreiten zerteilt.

Es muss ja nicht der gesamte Artikel per TinyMCE in einem einzigen Element gestaltet werden können. Aber ist es möglich, als Redakteur Bilder in den Hintergrund eines Artikels zu legen, um dann weitere Artikel-Elemente quasi über dem Bild zu gestalten? Ich kann zwar in TinyMCE in den CSS-Eigenschaften eines Text-Elements ein Hintergrundbild definieren, aber dann muss ich zwingend im gleichen Element auch einen Text eingeben. Zudem schaffe ich es nicht, im Eingabebereich von TinyMCE den Text unabhängig vom Hintergrundbild einzugeben. Die Eingabetaste führt z.B. dann nicht dazu, dass der Cursor über dem Bild eine Zeile nach unten geht, sondern dazu, dass ein zweites Hintergrundbild(Duplikat) direkt nach dem ersten erstellt wird, auf dem dann der Cursor blinkt. Kann uns geholfen werden?

Puh, du kannst dem Artikel eine CSS Klasse zuweisen, der du in der CSS Datei einen Hintergrund zuweist, das sollte vermutlich jedoch flexibler sein. Hierzu solltest du dir vielleicht besser ein Modul programmieren (lassen), was einem Artikel einen Hintergrundbild zuweisen lässt, dies ließe sich dann auch einfacher durch den Redakteur einstellen.

Ich hoffe, dass ich etwas weiterhelfen konnte,
Lars

[Vollmilch]

Hallo Lars,

Hallo Tobias, wenn du die Bildunterschrift anpassen möchtest nutzt du dazu natürlich CSS (Klasse .caption).

Danke, das funktioniert. Demnach gibt es bei TypoLight wohl keinen einfacheren Weg. Solche Stolpersteine finde ich jedoch häufiger...z.B. bei Überschriften von Text-Elementen. Wenn man die Zentriert anstatt linksbündig haben möchte, gibt es vermutlich auch nur den Weg über h1 - h6 in den Stylesheets?

Du hast dich sicher bereits mit TinyMCE und den redaktionellen Möglichkeiten befasst. Man kann Tabellenlayouts darin erstellen, was jedoch nicht unbedingt redakteurenfreundlich ist (schau dir dazu auch den "dma elementgenerator" an). Völliges freigestalten ist immer mit gewissem Aufwand verbunden, ist aber auch wider der Natur von CMS.

Ich habe ehrlich gesagt Schwierigkeiten herauszufinden, was der TinyMCE redaktionell kann und was nicht. Mit dem Editor kann ich mich wirklich nur schwer anfreunden...Bei einer unsortierten Liste wechselt der TinyMCE bei mir z.B. von "Absatz" auf "Vorlage". Die Schriftgröße ist bei der Liste dann auch eine andere, als beim normalen Text. So etwas kann für einen Anfänger ziemlich anstrengend sein. Mit Tabellen habe ich natürlich auch schon experimentiert. Wenn ich in TinyMCE eine Tabelle erstelle, ignoriert er irgendwie die von mir eingegebenen Abmessungen. Also z.B. 2 x 2 Zellen, Tabelle soll 500 x 500 Pixel groß sein. Ergebnis: Eine winzige 2 x 2 Tabelle, die nicht viel mit dem zu tun hat, was ich sehen wollte. Dieses WYSIWYG ist meiner Meinung nach extrem wichtig für ein CMS und genau das bekomme ich mit dem TinyMCE irgendwie nicht zufriedenstellend hin!

Alternativ kann man auch mit dem Gridmodell arbeiten, was den Artikelbereich in individuelle Spaltenbreiten zerteilt.

Meinst Du damit jetzt diese .g1 - .g12 Geschichte? Da habe ich mir mal so ein PDF durchgelesen. Es bezog sich glaube ich jedoch auf 960 Pixel breite, meine Seite hat 900 Pixel abzüglich 160 Pixel für ein vertikales Menü, welches sich wegen nach rechts aufklappenden Ebenen nicht in einer eigenen Spalte befindet. Gibt es da ein Tutorial für, wie man das Grid-System verwendet? Oder reicht es schon die entsprechenden Stylesheets einzubinden und dann die Artikel durch Angabe der entsprechenden Klasse zu floaten?

Puh, du kannst dem Artikel eine CSS Klasse zuweisen, der du in der CSS Datei einen Hintergrund zuweist, das sollte vermutlich jedoch flexibler sein. Hierzu solltest du dir vielleicht besser ein Modul programmieren (lassen), was einem Artikel einen Hintergrundbild zuweisen lässt, dies ließe sich dann auch einfacher durch den Redakteur einstellen.

Danke, das mit der CSS Klasse in Text-Elementen funktioniert schon mal. Mal sehen, ob mein Bekannter das mit dem Anlegen von Stylesheet-Elementen hinbekommt...

Ich hoffe, dass ich etwas weiterhelfen konnte,
Lars

Du bist eine große Hilfe! Vielen herzlichen Dank.
Tobias

[MacKP]

Hallo Vollmilch,
ich glaube da gibt es ein paar Probleme beim Grundverständniss vom Web ;-)
Internetseiten sind nicht gleich Wordartikeln. Wenn man komplett durchgestylte genau da wo man haben will nen px Verschoben haben will, dann nimmt man besser PDF-Dateien.

Zusätzlich musst du immer schauen was wann wo vererbt wird vom CSS. Ich kenne die Seite und das CSS nicht. Aber es sollte möglich sein mit dem TinyMCE ne Überschrift anzuklicken und gleichzeitig Mittig. Wenn das keine wirklichen auswirkungen hat, dann liegts durchaus auch an deinem CSS.

Was ich an solchen Stellen eher mache:
Den Artikel in mehrere Elemente unterteilen. Pro Bild oder dann Absatz ein Text Element wo man dann ein Bild (nicht im TinyMCE) reinsetzt. Klingt am Anfang nach mehr Arbeit, ist aber vom Pflegeaufwand sehr viel einfacher.

Viele Grüße

[mediak]

Hallo Lars,

Wenn man die Zentriert anstatt linksbündig haben möchte, gibt es vermutlich auch nur den Weg über h1 - h6 in den Stylesheets?

Die Schriftgröße ist bei der Liste dann auch eine andere, als beim normalen Text. So etwas kann für einen Anfänger ziemlich anstrengend sein.

Mal sehen, ob mein Bekannter das mit dem Anlegen von Stylesheet-Elementen hinbekommt...

Tobias

Hallo, Vollmilch,
ich hab es so verstanden, als waerest Du der Administrator (der das CMS auch eingerichtet hat) und Dein Freund der Redakteur? Dann solltest eigentlich Du auch dem Redakteur, die Stile, die er benoetigt, in der basis.css einrichten. Du kannst sie dort auch aussagekraeftig benennen z.B. "titelrotzentriert".

Der Sinn ist ja (meistens) auch gerade der, dass einer, der sich damit auskennt, Design und Programmierung macht und dann nur das zur inhaltlichen Pflege freigibt, was den Redakteur betrifft - weil der sich dann meistens nur mit den Inhalten auskennt. Wuerde man ihm mit allem freie Hand lassen, kann so eine Website ganz schnell vermurkst sein. Das heisst also eher, dass ich als Webdesigner Admin den Redakteuren gar nicht erlaube, selber in den Styles herumzubasteln, sondern ihnen von Anfang an die einrichte, die sie benoetigen. Die "Sperren" fuer den Redakteur kann sogar so weit gehen, dass ich auch Schaltflaechen im Tiny MCE fuer den Redakteur ausblende. Wenn vom Design her festgelegt ist, dass zentrierte Texte da nichts zu suchen haben, dann bekommt der Redakteur auch gar nicht die Moeglichkeit, das so zu formatieren.

Insgesamt ist es dann eben entscheidend, wie Du die ganzen grundlegenden Stile fuer die normalen html-Tags in der Basis anlegst. Damit kannst Du schon verhindern, dass eine Liste eine andere Schriftgroesse hat als der Artikeltext. Dafuer muss man schon mehr in die Tiefen von css einsteigen. Das kann man i.d.R. einem normalen Redakteur auch gar nicht zumuten.

Ich wuerde mir auch gut ueberlegen, mit Tabellen zu layouten - vor 15 Jahren ging es gar nicht anders, wenn eine Seite nach ein bisschen mehr aussehen sollte. Heute kompliziert es nur unnoetig den Code und verhindert Barrierefreiheit (bzw. "Barriere-Armut"). Lieber mal ueberlegen, ob man das dann vom Layout her nicht anders loest.
Viel Erfolg