Warum kein WYSIWYG im Editor?

**maxi62** · 22.12.2009, 15:14

Danke Andreas für die Arbeit die du dir gemacht hast. Aber auch das funktioniert noch nicht 100% fehlerfrei. Denn dann hat man oben am Rand im Frontend wo Sidemap,Kontakt usw. steht, plötzlich Punkte davor!
Erst wenn man zusätzlich noch unten aufgeführtes mit in die Basis.css bringt, ist das weg und es geht.
Im übrigen fehlen bei meiner Buch CD keine Grafiken!

#mainmenu ul,
#topmenu ul
{
margin:0;
padding:0;
list-style-type:none;
}

Also meine Basis.css sieht dann so aus:

Code:

html,
body,
div,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
sub,
sup,
tt,
dl,
dt,
dd,
fieldset,
form,
label,
legend,
table,
ol,
ul,
li,
captio
{
	margin:0;
	padding:0;
	vertical-align:baseline;
	border:0;
	font-size:100%;
	outline:0;
	background:transparent;
}
body
{
	font-family:"Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
	font-size:75%;
	color:#333333;
	line-height:1.5;
}
input,
textarea,
select
{
	margin:0;
	padding:0;
	font-family:"Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
	font-size:1.1em;
	color:#333333;
}
pre,
code
{
	font-family:"Andale Mono", monospace;
	font-size:1.1em;
}
h1,
h2,
h3,
h4,
h5,
h6
{
	font-family:Helvetica, Arial, sans-serif;
	font-weight:normal;
}
h1
{
	margin-bottom:0.25em;
	font-size:2.1em;
}
h2
{
	margin-bottom:0.4em;
	font-size:1.75em;
}
h3
{
	margin-bottom:0.65em;
	font-size:1.5em;
}
a
{
	color:#133b9a;
}
a:hover
{
	color:#1f4ecc;
}
blockquote,
q
{
	quotes:none;
}
table
{
	border-collapse:collapse;
	border-spacing:0;
}
caption,
th,
td
{
	text-align:left;
}
ins
{
	text-decoration:none;
}
del
{
	text-decoration:line-through;
}
*:focus
{
	outline:0;
}
/* Fix background image bug in IE5 */
* html ul,
* html ol
{
	position:relative;
}
/* Fix ordered list in IE6 */
* html ol
{
	margin-left:2em;
}
/* Fix ordered list in IE7 */
*:first-child+html ol
{
	margin-left:2em;
}
/* Fix legend margin in IE6 */
* html legend
{
	margin-bottom:1.4em;
}
/* Fix legend margin in IE7 */
*:first-child+html legend
{
	margin-bottom:1.4em;
}
/* TinyMCE only */
body#tinymce ul
{
	margin-bottom:1em;
	padding-left:40px;
	list-style-type:disc;
}
body#tinymce ul ul
{
	margin-bottom:0;
}
body#tinymce li
{
	list-style-type:disc;
}
body#tinymce ul ul,
body#tinymce li li
{
	list-style-type:circle;
}
body#tinymce ul ul ul,
body#tinymce li li li
{
	list-style-type:square;
}



#mainmenu ul,
#topmenu ul
{
	margin:0;
	padding:0;
	list-style-type:none;
}

**Andreas** · 22.12.2009, 15:20

Jetzt hast du mich neugierig gemacht, warte mal, ich setz mal die Umgebung auf und schau mir das bei mir mal an

**ATLAS** · 22.12.2009, 15:26

Meine persönliche Konsequenz besteht nun darin, Webconsulting nicht zu benutzen und die ganze Arbeit lieber nochmal mit MusicAcademy umzusetzen.
Bei mir ist es nicht tragisch, es war im Buch mit dabei.
Würde ich es kaufen, dann ....

Danke noch mal an die Hilfeleistenden.

**Andreas** · 22.12.2009, 15:36

Hat doch keine Stunde gedauert

Ich kann das also nicht bestätigen. Nicht dass wir aneinander vorbei sprechen, hast du das 1. oder das 2. Buch? Sieh dir mal den Screenshot an. Ich hab nur die original, unveränderte basic.css geöffnet (was man ja nicht tun sollte, wenn man die CSS-Dateien mit dem Modul verwaltet) und ans Ende den Code für TinyMCE eingefügt. An diesem Code kanns sowieso nicht liegen, da der ID-Selektor body#tinymce im FE nicht greifen kann, es sei denn du hast ihn manuell dort eingefügt.

Andreas

Solltest du wirklich gar nicht klar kommen, schau ich mir auch gerne mal dein BE an.

**maxi62** · 22.12.2009, 15:47

@Andreas: Hmm, ich hab das neuste Buch, nennst sich "Das offizielle Typolight Handbuch - Der Leitfaden für Anwender, Anministratoren und Entwickler". Vor einer Woche bei Amazon gekauft!

Sehr merkwürdig das es bei dir reicht die Tiny-Anweisungen anzufügen. Bei mir nicht. Aber ich hab jetzt auch schon so viel experimentiert, vielleicht hab ich eine Anweisung nicht rückgängig gemacht oder es gibt verschiedene Buch CD´s !

Kannst du einfach mal deine BASIS.CSS hier als Anhang posten, würde ich gern mal testen!

**Andreas** · 22.12.2009, 16:13

Ich muss mich jetzt doch nochmal selbst korrigieren, weil ich auch Mist erzählt habe

Das Zeichen > vor den Listen ist doch ein Bild. Dann ist dieses Bild bei dir auf jeden Fall schon mal vorhanden gewesen.

Es ist so, dass wenn du eine Liste mit dem CE 'Aufzählung' erstellst, diese Listen auch formatiert werden. Das geschieht hierrüber in der webconsulting.css ab Zeile 213:

Code:

.ce_list ol
{
  margin-left:3em;
  list-style-type:decimal;
}

.ce_list ul
{
  margin-left:1.5em;
}

.ce_list ul li
{
  padding-left:18px;
  background-image:url("tl_files/webconsulting/arrow.gif");
  background-position:left center;
  background-repeat:no-repeat;
}

Erstellst du aber eine Liste innerhalb eines CEs 'Text', dann werden die Listen nicht formatiert. Ändere also die Selektoren (siehe Screenshot2), wenn du diese Formatierung auch für Listen in Textelementen im FE haben möchtest.

Screenshot1 zeigt das Ergebnis im FE. Da Leo im kompletten Template keine Listen innerhalb von Text-Elementen (und schon gar keine eingerückten Listen) benutzt hat, ist die Formatierung im FE für eingerückte Listen, wie du siehst, nicht perfekt, was du aber leicht mit firebug im Firefox korrigieren kannst.

Jetzt müsstest du auch wissen, wie du es hinbekommst, dass die Listen im BE im TinyMCE so aussehen wie im Frontend

Andreas

**Andreas** · 22.12.2009, 16:18

Ich glaub das Posten der basic.css nützt nichts. Was ich geschrieben habe bezieht sich auch alles auf die 1. Auflage des Handuches.

Mit einem Link könnte ich dir wahrscheinlich sofort helfen. Wie gesagt, mit Firebug für den Firefox, bekommst du sofort angezeigt, welcher Selektor in welcher Datei in welcher Zeile für die Formatierung zuständig ist und sogar wo was überschrieben wird. Und kannst sofort, ohne zu speichern, temporär Änderungen vornehmen. Mehr mach ich da auch nicht. Also: Ab jetzt ist Firebug ein Muss

**maxi62** · 22.12.2009, 18:14

Hi
Also so ganz raff ich es noch nicht. Du redest von ZE, BE, FE. Nu müsste ich erstmal wissen für was die Buchstaben stehen ;-) Schade das es nicht so eine komplette erläuterte Klassenübersicht gibt.
Nu ja Firebug hab ich halt nicht da ich auch kein Firefox nutze, ich bin einer der wenigen die den IE lieber mögen !
Aber wenn es denn sein muss werde ich den halt noch installieren.

**Andreas** · 22.12.2009, 18:50

CE - Content Element - Inhaltselement
FE - Frontend - das was der User nachher im Browser sieht
BE - Backend - Backstage

hinter den Kulissen, also dort wo du die Inhalte einpflegst usw., TYPOlight halt.

Nina hat mal sone Klassenübersicht angefertigt, braucht man aber eigentlich nicht, sieht man auch im Firebug.

Firefox, Safari und Opera kannst du problemlos neben IE auf deinem PC installieren. Sie nisten sich nicht ins System ein, so wie es der IE macht. Sind einfach Programme, welche du bei Bedarf starten kannst und nach Belieben wieder deinstallieren kannst.

Zusätzlich noch den IETester um IE5,5 und 6 zu testen, 7 und 8 gehen ja im 8er.

Firefox mit seinen vielen Addons ist wie ein Schweizer Messer. Wenn du wirklich effektiv entwickeln möchtest wirst du deshalb wohl kaum drum herum kommen. Beispiele für nützliche Addons:

compact menu 2
download statusbar
downthemall
dummy lipsum
firebug
html validator
noscript
quick local switcher
webdeveloper
dom inspector
hide menubar
ie tab
js-view
links and forms
open with
reloadevery
showip
timestamp converter
viewdependencies
viewframes

Hab nur musthaves und die aufgelistet, welche für Entwicklung interessant sind. Hab sonst noch mehr.

Andreas

**ATLAS** · 22.12.2009, 19:17

Soweit ich sehe, kann ich das Editorfenster im Backend mit Firefox nicht wirklich erfassen. Zumindest haben Änderungen keine Onlinewirkung. Wenn ich das Fenster neu lade erscheinen kurzfristig die Aufzählungspunkte. Sie werden aber von irgendeiner Anweisung wieder verdrängt.

Es ist aber schon traurig, das es ein einziges Rätselraten ist, was schon den ganzen Tag lang so geht.

Da muss man sich über Frust nicht wundern.

**maxi62** · 22.12.2009, 19:29

@Andreas: Danke für die Erklärung!

Zitat von ATLAS

Soweit ich sehe, kann ich das Editorfenster im Backend mit Firefox nicht wirklich erfassen.

Stimmt, hab ich auch gemerkt. Von den Tiny-Styles kann ich in Firebug auch nichts sehen!

Da muss man sich über Frust nicht wundern.

Ja stimmt, optimal ist das keineswegs. Man muss ja bedenken das Bücher als auch fertige Templates vorwiegend von Leuten gekauft werden die sich das CSS-Experimentieren eigentlich erstmal ersparen wollen. Hier ist es er umgekehrt, das Template schreckt mehr ab!

Na ja, mit meiner zuletzt geposteten CSS geht zumindest glaub alles. Ich will mal schaun ob ich das template irgendwie etwas umbauen kann, die Startseite gefällt mir auch nicht. Die unteren drei Spalten werden offenbar absolut positioniert und im Backend alle als Hauptspalte angesprochen. Auch nicht sehr schön und teils verwirrend weil man nicht so einfach andere Module dort unterbringen kann! Und gut sieht es auch nur aus solange deren Inhalt in etwa die gleiche Länge hat, was bei eingebundenem RSS und anderen Dingen nicht gerade oft der Fall ist. Aber immerhin ist das Template schon etwas schöner als die Musikschule. Schade das es keine weiteren kostenlosen gibt.

**ATLAS** · 25.12.2009, 15:24

Also ich bekomme es nicht hin, das der Editor mir auch die Listenpunkte im Webconsulting anzeigt.
Ich verstehe die ganze Sache auch technisch nicht. Worin besteht denn der Unterschied zwischen Musikschule und Webconsulting? Die Änderung der Basic-CSS kann es ja nicht sein. Und auch die anderen genannten Punkte ergeben für mich so gar keinen Sinn.
Wenn es nur mit Formaten wie "body#tinymce" usw. gehen würde, dann müsste ich diese ja in der CSS der Musikschule irgendwo wieder finden. Denn dort gibt es keine eingeschränkte Funktion. Oder habe ich sie übersehen?

Läge es wirklich nur an ol, ul, und li in der CSS wäre das mit 3 Handgriffen erledigt.
Der Unterschied zwischen Musikschule und Webconsulting ist in meinen Augen zumindest in diesem Thema noch nicht erfasst worden.

**Andreas** · 25.12.2009, 17:10

Gib mir mal einen Link, dann kann ich dir helfen.

Andreas

**Liebei** · 25.12.2009, 20:48

Zitat von ATLAS

Läge es wirklich nur an ol, ul, und li in der CSS wäre das mit 3 Handgriffen erledigt.

Genau daran liegt es, schau dir meine Posts nochmal an und ändere die css-files entsprechend und es geht.

**jachen** · 26.12.2009, 09:12

Webconsulting 'basic.css'

Code:

/* Style sheet basic */
html,body,div,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;vertical-align:baseline;border:0;font-size:100%;outline:0;background:transparent;}
body{font-family:"Lucida Grande", Helvetica, Arial, Verdana, sans-serif;font-size:75%;color:#333333;line-height:1.5;}
input,textarea,select{margin:0;padding:0;font-family:"Lucida Grande", Helvetica, Arial, Verdana, sans-serif;font-size:1.1em;color:#333333;}
pre,code{font-family:"Andale Mono", monospace;font-size:1.1em;white-space:pre;}
h1,h2,h3,h4,h5,h6{font-family:Helvetica, Arial, sans-serif;font-weight:normal;}
h1{margin-bottom:0.25em;font-size:2.1em;}
h2{margin-bottom:0.4em;font-size:1.75em;}
h3{margin-bottom:0.65em;font-size:1.5em;}
a{color:#133b9a;}
a:hover{color:#1f4ecc;}
ol,ul{list-style-type:circle;}
blockquote,q{quotes:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th,td{text-align:left;}
ins{text-decoration:none;}
del{text-decoration:line-through;}
*:focus{outline:0;}
* html ul,* html ol{position:relative;}
* html ol{margin-left:2em;}
*:first-child+html ol{margin-left:2em;}
* html legend{margin-bottom:1.4em;}
*:first-child+html legend{margin-bottom:1.4em;}

Musicacademy basic.css

Code:

/* Style sheet basic */
body{margin:0 0 24px 0;padding:0;}
a,body,div,em,input,label,li,ol,p,select,span,strong,td,th,textarea,u,ul{font-family:Verdana, sans-serif;}
a,body,div,input,label,li,ol,p,select,td,th,textarea,u,ul{font-size:11px;}
h1{margin:0 0 12px 0;padding:0;font-weight:bold;font-size:13px;}
h2{margin:0 0 6px 0;padding:0;font-weight:bold;font-size:11px;}
a{text-decoration:none;color:#a84204;}
a:hover{text-decoration:underline;color:#a84204;}
img{vertical-align:middle;border:0px;}
p,pre,form{margin:0;padding:0;}

Wenigstens soweit bin ich rein empirisch gekommen in der Angelegenheit:

Wenn ich in Webconsulting (Version 2 deutsch) die basic.css der Musiacademy einbinde (gemeint ist damit glaube ich diese mit der Webconsulting-basic.css in der Datenbank ersetze), dann macht TinyMCE in Webconsulting genau das Erwartete: es zeigt die Listen korrekt an (wenigstens bei meiner Installation).

Die Frage, die ich aus Zeitgründen noch nicht beantworten kann, ist, welche Notation in der Webconsulting-basic.css die Sache verhindert, ja es verzweigt sogar in die webconsulting.css und installiert die Pfeilgrafik was nicht Sinn der Sache wäre (wie früher im Thread erwähnt).

Gruss
jachen

**jachen** · 26.12.2009, 10:28

Die Webconsulting Designer haben im basic.css die Notation ul, li mit list-style-type:none; zugunsten der eigenen Listen im Layout übersteuert. Somit bleibt für
TinyMCE die Funktion inaktiv. Vielleicht kennt hier ein Krack einen Ausweg.

Gruss
Jachen

**Liebei** · 26.12.2009, 11:41

Hallo Jachen,

welche Version vom Webconsulting hast Du, altes oder neues Buch?

Für die aus dem alten Buch schaut die Lösung folgendermaßen aus, Steht eigentlich schon im Thread, aber für dich nochmal zusammengefasst:

1. Backend (basic.css):
Zeile 4: "ul, li," löschen
Zeile 73: "ul" löschen

2. Frontend (webconsulting.css):
Zeile 224: list-style-type:none; hinzufügen
Zum Menü: #mainmenu ul, #topmenu ul {margin:0; padding:0;list-style-type:none;} hinzufügen

Und noch eine Bitte, nicht immer die ganze CSS posten, das bringt nichts, besser ist ein Link wo man drüberschauen kann!

**FloB** · 26.12.2009, 11:42

Die Lösung ist einfach, in die basic.css am Ende in etwa das einfügen (nicht getestet):

Code:

.mceContentBody ul { list-style-type: disc !important; margin-left: 1.5em !important; }
.mceContentBody ol { list-style-type: decimal !important; margin-left:1.5em !important; }

Sonst nichts löschen oder verändern. Nicht vergessen nach der Änderung den Browsercache zu löschen!

Edit: Margin und !important eingefügt.

**ATLAS** · 26.12.2009, 12:42

@ Andreas
Das ist super nett. Aber lass uns noch einen Moment probieren.

@ Liebei
Bis auf einen Punkt (OL) hast du recht. Aber bitte keine Zeilenangaben. Die sind nicht über die Backendbearbeitung zu finden.

@ FloB
Dein Tipp war der entscheidende.

----------
Achtung! Nur erste Buchfassung.
Ich fasse nochmal die von euch genannten Punkte zusammen:
So wie ich das sehe, ist in der Basic im ersten Kasten UL, LI und Ol zu entfernen. (OL muss auch mit entfernt werden, sonst gehen keine Zahlen).
Im CSS Webconsulting in der Kategorie Mainmenu unter Mainmenu hinzufügen von:
#mainmenu ul, #topmenu ul {margin:0; padding:0;list-style-type:none;}

Und list-style-type:none; habe ich aus Unkenntnis, welches nun Zeile 224 ist, unter #mainmenu li eingetragen.

Danach noch die Änderung von FloB:

Code:

.mceContentBody ul { list-style-type: disc !important; margin-left: 1.5em !important; }
.mceContentBody ol { list-style-type: decimal !important; margin-left:1.5em !important; }

Zumindest bei mir geht es nun.

Fazit:
Wenn man sich das gesamte Thema mal durchliest, dann ist alles nur stochern im Nebel. Versuch und Irrtum. Das ist so und kann auch nicht anders sein, wenn der Entwickler selbst nicht aktiv ist. Es muss aber nicht immer gleich der Ton angeschlagen werden, das alle anderen Deppen sind, nur weil der Ultimative Tipp bei ihnen nicht vollständig Wirkung zeigt. Wie man sieht, sind es mehrere Änderungen, die zum Ziel führen.
Ich finde es aber sehr schön, das am Ende (Falls es das Ende ist) sich doch mehrere eingeklinkt haben und, ganz ohne Randbemerkungen, gemeinsam ein Ergebnis erarbeitet wurde.

Es bleibt aber noch anzumerken, das solche Verhaltensweisen dringend in der Beschreibung des Kauftemplates Erwähnung finden sollten. Möglichst mit Anleitung zum Rückbau.

Vielen Dank nochmal an alle.

**FloB** · 26.12.2009, 13:15

Für die Lösung des Problems sind nur Basiskenntnisse von CSS vonnöten, da steckt keine Magie dahinter.

Dennoch sollte das in den Templates korrigiert werden. Es ist eine Einschränkung der Usability, die nicht sein sollte.

Edit:

Zitat von ATLAS

Und list-style-type:none; habe ich aus Unkenntnis, welches nun Zeile 224 ist, unter #mainmenu li eingetragen.

Das bringt gar nichts, kannst du löschen. Auch deine anderen Änderungen sind nicht nötig: Das Original-Template sollte schon alles so aussehen lassen, wie es sein soll – meine Änderungen werden nur vom TinyMCE registriert.

**jachen** · 26.12.2009, 13:23

Herzlichen Dank, es ist machbar.

@Liebei: ich habe so in etwa alles, was Leo produziert hat. Momentan arbeite ich mit 2.7.6 und entsprechend "eigene" und "zugekaufte" CSS.
Entschuldigung wegen den Listings. War echt doof.

@FloB

Ja, das ist ein entscheidender Tip.

@ATLAS

Es bleibt aber noch anzumerken, das solche Verhaltensweisen dringend in der Beschreibung des Kauftemplates Erwähnung finden sollten.

Nicht nur das!
Thema basic.css in Leo's Bücher, naja.

Ich habe beide Bücher und 2 Kauftemplates mit erweiterten Lizenzen. Und nach einem Jahr TYPOlight rate ich keinem, der nicht gute Markup und CSS-Kentnisse besitzt, sich an eine kommerzielle Website heranzuwagen.
Hinzu kommt, dass php und MySQL keine Fremdwörter sein sollten. Aber das wusste ich damals noch nicht.

Heute bin ich aber froh, das alles durchgestanden zu haben und wenn's mal eben nicht mehr weitergeht: Hier anklopfen.

Bin eigentlich überrascht, dass die Helfer hier im Thread das solange ausgehalten haben. Wahrscheinlich hat ihnen der Umstand doch etwas gefuchst.

Alles Gute und nochmals
Thanks
jachen

**ATLAS** · 26.12.2009, 13:40

@ FloB
Deine Lösung hat bei mir definitiv nicht im Frontend funktioniert ohne die anderen Änderungen. Das erscheint mir auch logisch. Deine Änderung betrifft den Editor, die Frontendanzeige aber muss es ja auch zulassen.

Das macht aber nix. Man kann ja mit deiner Lösung anfangen. Wenn es dann geht, ist alles schön. Wenn nicht, dann nimmt man noch die anderen hinzu. So sind alle bedient.

**Liebei** · 26.12.2009, 14:07

Zitat von ATLAS

@ Liebei
Bis auf einen Punkt (OL) hast du recht. Aber bitte keine Zeilenangaben. Die sind nicht über die Backendbearbeitung zu finden.

@Atlas
Freut mich ja, wenn es nun funktioniert! Das mit OL war nicht der Ausgangspunkt des gesamten Themas, deshalb hab ich es auch nicht erwähnt, aber Du hast natürlich Recht.

Sorry, dass ich Zeilennummern angegeben habe, aber ich arbeite nicht im Backend, weil mir dort die Formatierung nicht passt, ich habs lieber mit einem externen Editor.

Einmal muß ich aber noch für Leo Partei ergreifen. Ich nutze im BE die Aufzählung sowohl als auch, allerdings verwende ich im FE generell auch Grafiken.