Page 1 of 1

Formatierung des Admin Bearbeitungsmodus

Posted: Fri Aug 05, 2016 7:37 pm
by Hartmut
Hallo,

ich habe ein CMSimple_XH Template im Layout eines DRK Ortsvereins erstellt, allerdings habe ich noch ein kleines Problem mit der CSS-Formatierung? im Admin Bearbeitungsmodus.

Im Ansichtsmodus habe ich im Content-Bereich die Hintergrundfarbe "weiß" und auch die Aufzählungspunkte (<ul> <li> ...) werden angezeigt.
Im Admin Bearbeitungsmodus wird mir im Content-Bereich allerdings die im Body definierte Hintergrundfarbe (grau) angezeigt und die Aufzählungspunkte werden nicht angezeigt und der Aufzählungstext wird linksbündig angeordnet.

[ external image ]
[ external image ]

Beim Wechsel vom Ansichtsmodus in den Bearbeitungsmodus wird die richtige Formatierung (weißer Hintergrund und die Aufzählungspunkte) für einen Bruchteil einer Sekunde im Bearbeitungsmodus angezeigt und anschließend wird der graue Hintergrund und der Text ohne Aufzählungspunkte angezeigt.
Nach meinem Kenntnisstand wird die Content Formatierung bei einer Standard CMSimple_XH Installation auch für den Admin Bearbeitungsmodus verwendet, aber dies ist bei dem DRK-Template leider nicht der Fall.

Da der gleiche Content beispielsweise beim Template "mini" im Admin Bearbeitungsmodus richtig angezeigt wird, dürfte es sich also um ein Problem im DRK Template handeln.

Hat Jemand eine Idee woran dies liegen könnte?

Viele Grüße

Hartmut

Re: Formatierung des Admin Bearbeitungsmodus

Posted: Sat Aug 06, 2016 10:40 am
by frase
Hi Hartmut,
in solchen Fällen wäre es besser, einen Link zur Seite anzugeben. Man könnte dann konkreter antworten.

Nun also der Versuch einer "allgemeinen" Erklärung:
Nehmen wir an, du hast für den Body im Stylesheet als Hintergrundfarbe #666 (grau) festgelegt.
Für deinen Contentbereich hast du #fff (weiß) genommen.

Der Editor (tinymce) wird innerhalb deines Contentbereichs als iFrame aufgerufen.
Der Editor weiß also gar nicht, dass es einen Contentbereich gibt und nimmt die body-Angabe als Hintergrund (grau).

Es gibt mehrere Möglichkeiten, das zu lösen. Eine davon wäre im Stylesheet:

Code: Select all

#tinymce {
    background-color: #fff;
    background-image: none;
}
Damit wird der Hintergrund des Tiny weiß (wie dein Contentbereich).
In diesem Falle wird auch gleich noch ein evtl. vorhandenes Hintergundbild entfernt.

Die Listen:
Es ist immer besser, wenn man die Listen explizit über eine Klasse formatiert - sonst überlässt man die Darstellung dem Browser, bzw. wie hier, dem Editor.
Also: Eine Klasse für ungeordnete Listen ins CSS und dann der UL diese Klaasse verpassen. Ebenso für geordnete (OL).
Hartmut wrote: Beim Wechsel vom Ansichtsmodus in den Bearbeitungsmodus wird die richtige Formatierung (weißer Hintergrund und die Aufzählungspunkte) für einen Bruchteil einer Sekunde im Bearbeitungsmodus angezeigt und anschließend wird der graue Hintergrund und der Text ohne Aufzählungspunkte angezeigt.
Das ist die Zeitspanne, in der der iFrame mit dem Editor geladen wird.

Nachtrag:
Nimm für die Listen wirklich eine extra-Klasse.
Wenn du nur allgemein ul und li formatierst, bekommst du Schwierigkeiten bei der Darstellung im Pagemanager u.A.

Re: Formatierung des Admin Bearbeitungsmodus

Posted: Sat Aug 06, 2016 2:21 pm
by Hartmut
Hallo frase,

herzlichen Dank für deine Tipps, denn sie haben mir weitergeholfen und die beiden Probleme sind gelöst. :-)

Der entscheidende Punkt war gewesen, dass tinymce bei diesem Template eine eigene CSS Klasse im Stylesheet benötigt und somit der Bearbeitungshintergrund auf eine frei wählbare Farbe definiert werden konnte.

Für die Auflistung (<ul>, <li> ...) gab es für den Content Container zwar eine CSS Klassen Definition, aber die hat beim Editor tinymce bis zur oben genannten Ergänzung (tinymce Klasse mit background-color) nicht gezogen. Jetzt ist im Editiermodus auch die Aufzählung OK. :?

Mit einem Link konnte ich gestern nicht aufwarten, da es sich um eine lokale Installation (Portable_XH) handelte.

Viele Grüße und Danke

Hartmut

Re: Formatierung des Admin Bearbeitungsmodus

Posted: Tue Aug 09, 2016 9:05 am
by cmb
Spezielle Regeln zur Formatierung des TinyMCE sind mit Vorsicht zu genießen. Zum einen funktionieren diese nicht mit anderen Editoren (CKEditor), zum anderen können sich die Selektoren bei späteren Versionen ändern (bzw. läuft es beim TinyMCE 4 u.U. sowieso ganz anders; kein IFrame mehr).

Der entscheidende Punkt, den Frank ja schon benannt hat, ist, dass der TinyMCE (3) in einem IFrame eingebunden wird. Er kennt daher nicht die Templatestruktur, d.h. alles was über IDs, Klassen etc. der Templatestruktur gestylt wird, wird vom TinyMCE ignoriert. Daher diese Elemente also direkt stylen, wenn die Styles auch im Editor wirken sollen; dabei aber das Caveat bzgl. Listen von Frank beachten. Und alles was nicht im Editor wirken soll, dann einfach für eine ID/Klasse der Templatestruktur stylen.

Einfaches Beispiel für einen weißen Hintergrund mit schwarzem Rahmen:

Code: Select all

<body id="body"><div id="outer"><!-- Kindelemente --></div></body>

Code: Select all

/* TinyMCE sieht nur dieses: */
body {background: white}
/* aber nicht mehr diese: */
#body {background: black}
#outer {background: white; margin: 2em}