Moin! Bin heute am einpflegen von Artikel-Beschreibungen. Das TinyMCE ist ja eigentlich ganz fein. Aber grosse Probleme habe ich mit jeder Art von Tabelle. Ich kriege einfach die Rahmen nicht in den Griff. Eigentlich kann man ja Rahmen, Gitter usw. in dem Menü “Tabelle bearbeiten” anpassen. Aber alles was ich da angebe wird ignoriert. Es ändert sich nix, die Tabellen schauen immer gleich aus. Scheinbar wird da irgendwas via CSS noch vererbt? Hat mir da jemand einen Tip? Wie geht Ihr damit um? AS
OK, ich bin etwas weiter … Ganz am Ende der style.css steht das hier: /\* Tables \*/ tbody, tbody tr, thead, thead tr {border: 0 none;} table { display: block; border: 1px solid #c7c7c7; width: auto !important; } table thead tr th { background: #f5f5f5; padding-left: 10px; } table tbody tr td, table tbody tr th { border-top: 1px dashed #dfdfdf; } table td, table th {color: #999;} Und das wird wohl dann auf generell alle Tabellen angewandt. Nur wenn ich das jetzt wieder ändere, dann stimmen ja die Tabellen im Rest des Shops nicht mehr. Ich möchte ja eigentlich nur, dass ich die Tabellen in der Artikelbeschreibung auch tatsächlich mit TinyMCE gestalten kann. Wie packe ich das jetzt an? Mir ist auch aufgefallen, dass in der Tabelle dann plötzlich id=„zebra“ steht. Hab ich da aber nicht rein geschrieben … :wtf: Kann mir mal einer einen Tip geben? AS P.S.: Eigentlich gehört dieses Posting wohl in den Bereich „Templates und Design“, denke ich. Vielleicht mag das ja mal jemand verschieben, der dazu die nötigen Rechte hat. 
Der neuerstellten Tabelle kannst du ja in den Eigenschaften eine Class mitgeben z.B. TEST. Wenn du dann in der CSS deine Änderugen nur für die Tabellen, Spalten etc. in der Class TEST definierst, sollte es eig. gehen. table.test { display: block; border: 1px solid #c7c7c7; }
Danke Dir! Versuche ich gleich … Übrigens ist der grösste Teil schon geschafft wenn man das display:block; rausnimmt. Habe da gerade mal in firebug rumprobiert … Der Rest sieht dann ganz ordentlich aus. Achja, eins noch: die oberste gestrichelte Linie kommt irgendwie daher, dass seit 3.5.3 immer ein thead erwartet wird. Wie kriege ich DAS weg? wo ist das definiert? Denn die Tabellen aus TinyMCE haben im Standard eben keinen thead … AS
ich habe mit dem Problem vor ein paar Tagen auch schon gekämpft http://forum.shopware.de/templates-und-design-f14/tabellendarstellung-nach-update-defekt-t891.html das “zebra” kommt aus der Templatedatei “_default/frontend/detail/description.tpl” Zeile 27: [code]{* Article description *} {block name=‘frontend_detail_description_text’} {$sArticle.description_long|replace:"
zebra verpasst bekommen… Gruss René
Supi, Danke! Und für was dient das “zebra”? Hast Du es raus genommen? Wie gehst DU mit dem thead um (bei TinyMCE)? AS
Sehe gerade, das hat mit thead garnix zu tun. Das ist dieser Teil hier: table tbody tr td, table tbody tr th { border-top: 1px dashed #dfdfdf; } Oder? Der verpasst allen Zellen am oberen Rand eine gestrichelte Linie. Und bei der ersten Zeile ist das dann direkt unter dem Rahmen der Tabelle zu sehen. Und das sieht dann so komisch aus… Ist das bei Dir auch so? Oder wie hast Du das gelöst? AS
die id “zebra” bewirkt, das die Zeilen einer Tabelle abwechselnde Hintergrundfarben bekommen. Dies wird durch die Javascript- Funktion stripe in der jquery.shopware.js realisiert, Zeile 1821: //Stripes tables $.stripe = function (id) { var even = false; var evenColor = arguments[1] ? arguments[1] : "#fff"; var oddColor = arguments[2] ? arguments[2] : "#efefef"; var table = document.getElementById(id); if (!table) { return } var tbodies = table.getElementsByTagName("tbody"); for (var h = 0; h \< tbodies.length; h++) { var trs = tbodies[h].getElementsByTagName("tr"); for (var i = 0; i \< trs.length; i++) { if (!hasClass(trs[i]) && !trs[i].style.backgroundColor) { var tds = trs[i].getElementsByTagName("td"); for (var j = 0; j \< tds.length; j++) { var mytd = tds[j]; if (!hasClass(mytd) && !mytd.style.backgroundColor) { mytd.style.backgroundColor = even ? evenColor : oddColor } } } even = !even } } }; … aber nur wenn der Zeile bzw. Spalte kein Hintergrund oder ne Klasse zugewiesen ist! Wenn du also den Zeilen ein Hintergrund zuweist, tritt der Effekt nicht auf. Gruss René
das mit dem dashed ist bei mir auch so, aber ich habe da gerade eine Idee! Werd da gleich mal was probieren. Vielleicht bekomm ichs ja weg… Gruss René
Also, dann ist das mit dem „zebra“ ja kein Problem. Kann man ja im Template das „replace“ einfach entfernen … Nachdem ich aus display: block; gemachte habe display: inline-block; sieht das auch schon mal ordentlich aus. Bleiben eben nur die Strichel-Linien. Wie kriegt man die NUR in der obersten Reihe raus? AS EDIT: bin gespannt … 
Man könnte an der Stelle auch den „zebra-replace“ dahingehend umschreiben und nutzen (statt löschen), um die Klasse „table.test“ (oder dann „table.artdetail“) zu platzieren. Dann müsste man die nicht immer in TinyMCE mit eintragen, oder? ALT: [code] {* Article description *} {block name=‚frontend_detail_description_text‘} {$sArticle.description_long|replace:"
naja, macht wenig sinn… weil sich das ja auf alle Tabellen in diesem Block auswirkt, und nicht nur die, die übers TinyMCE erstellt werden… somit würden die anderen Tabellen auch mit formatiert werden… Gruss René
Naja, aber andere Tabellen habe ich dort in der Artikel-Detail-Ansicht eigentlich nicht… AS
ich kann das mit dem oberen dashed Rahmen, grad nicht nachvollziehen, da das bei mir perfekt durch den Vollrahmen der Tabellen überdeckt wird…
OK, ich hatte aus „display: block;“ gemacht „display: inline-block;“. Jetzt habe ich das geändert in „display: table;“ -> PASST! Sieht jetzt also so aus: /\* Tables - Korrektur nach 3.5.3 \*/ tbody, tbody tr, thead, thead tr {border: 0 none;} table { display: table; border: 1px solid #c7c7c7; width: auto !important; } table thead tr th { background: #f5f5f5; padding-left: 10px; } table tbody tr td, table tbody tr th { border-top: 1px dashed #dfdfdf; } table td, table th {color: #999;} Anschluss-Frage zur Nomenklatur: ottschos Vorschlag mit der eigenen Klasse als „table.mytable“ gefällt mir gut. Das ist ja dann eine Unterklasse zu „table“. Da mir aber CSS noch etwas neu ist komme ich mit dem Rest mit der Schreibweise nicht klar. Die Klasse „table.mytable“ erbt ja alles, was in ihr nicht explizit definiert wird von der Klasse „table“, richtig? Und wenn ich nun für diese neue Klasse „table.mytable“ hier etwas ändern will: ?? } table thead tr th { background: #f5f5f5; padding-left: 10px; } Wie muss das dann aussehen? so? : } table.mytable thead tr th { background: #f5f5f5; padding-left: 10px; } Funktioniert das? AS
Hm. Also ich habe jetzt eine Klasse angelegt. Erst als table.test, das funktionierte nicht. Dann als mytable, geht auch nicht. Im HTML Code steht zwar … [code]
| sdfwefr | fghfgh | ertert | sdfsdf |
| 234 | 2342342344 | 234 | 234234234 |
| 234 | | 234234234 | |
| | 234234 | | 234 |
[/code] Also, die KLasse kommt in der Tabelle an. Aber rechts beim CSS holt er sich wieder alles aus table von der styles.css … Kann es sein, dass das „zebra“ eben über das framework auch diese Klasse nachträglich zuweist? Bin ratlos … AS
Moin! Also ich kriege das einfach nicht hin. Das „zebra“ hatte ich jetzt entfernt. Aber das war es wohl auch nicht. Ich will doch einfach nur einer Tabelle in der Artikel-Beschreibung eine eigene Klasse geben und diese dadurch entsprechend darstellen. Das sollte doch möglich sein, oder? Die Klassen-Zuweisung kommt auch im html-Code an. Aber in der CSS-Ansicht rechts unten im FireBug sehe ich, dass die Formatierungen immer noch aus der styles.css aus _default kommen. Was läuft da falsch? AS
Hast du es mal so versucht: table.mytable thead.mytable tr.mytable th.mytable { background: #f5f5f5; padding-left: 10px; } Wenn nicht gib der Tabelle eine ID oder lass die ID Zebra und versuch es so: #Zebra table thead tr th { background: #f5f5f5; padding-left: 10px; } EDIT: Alles ungetestet. Aber ich versuche es nachher bei Gelegenheit mal.
Ich wollte eigentlich erst mal nur Deinen Vorschlag von hier umsetzen: administration-f11/artikeldetails-tabellen-mit-tinymce-t958.html#p5354 Aber schon das funktioniert nicht: table.test { display: table; } Im html-code steht zwar nun: [code]
…[/code] Aber in den Styles beim firebug steht trotzdem: table { border: 1px solid #C7C7C7; display: block; width: auto !important; } usw. Und das schnalle ich einfach nicht. Wo nimmt er das her? AS