Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
QUESTION Style ändern
#1
Hallo,
Ich habe die Toolbar im Editor "umgestellt", um weitere Toolbar-Buttons zu bekommen.
Jetzt gibt es auch einen Button, um eine Table in ein Dokument einzufügen.

Der Dialog für die Einstellungen der Table bietet aber nicht genügend Möglichkeiten.
In meinem Fall fehlt mir die Möglichkeit, die vertikale Textausrichtung der Tabellenzellen auf top zu stellen (valign=top).
Ich kann das zwar manuell eingeben, wenn ich die Editor-Darstellung auf Sourcecode umstelle, das ist mir aber etwas zu umständlich.
Weiß jemand, ob (und wo und wie) man einstellen kann, welche Styles für eine Table als default verwendet werden?
Also, wenn ich auf den Table Button drücke, gleich von Anfang an valign=top in allen Tabellenspalten eingetragen ist?

Ich habe mal alle Dateien nach den momentan verwendeten Styles durchsucht, aber nichts gefunden.
Reply
#2
(2018-04-01, 20:55:15)bero Wrote: Hallo,
Ich habe die Toolbar im Editor "umgestellt", um weitere Toolbar-Buttons zu bekommen.
Jetzt gibt es auch einen Button, um eine Table in ein Dokument einzufügen.

Der Dialog für die Einstellungen der Table bietet aber nicht genügend Möglichkeiten.
In meinem Fall fehlt mir die Möglichkeit, die vertikale Textausrichtung der Tabellenzellen auf top zu stellen (valign=top).
Ich kann das zwar manuell eingeben, wenn ich die Editor-Darstellung auf Sourcecode umstelle, das ist mir aber etwas zu umständlich.
Weiß jemand, ob (und wo und wie) man einstellen kann, welche Styles für eine Table als default verwendet werden?
Also, wenn ich auf den Table Button drücke, gleich von Anfang an valign=top in allen Tabellenspalten eingetragen ist?

Ich habe mal alle Dateien nach den momentan verwendeten Styles durchsucht, aber nichts gefunden.

Leg im Stylesheet deines themes td {vertical-align:top} fest.

Die Styles für den Editor definierst du in \admin\template\js\ckeditor\skins\getsimple\style.css

Alex
Reply
#3
Vielen Dank.
Für die Darstellung hat das sehr gut geklappt.
Mit den Editor-Styles kämpfe ich noch.
Die CSS-Dateien sehen "merkwürdig" aus.
Alle Einträge stehen in einer Zeile ( keine Zeilenvorschübe ) und mein Texteditor hängt sich bei laden der Datei auf.
Aber das bekomme ich schon hin,
Reply
#4
Es scheint wohl etwas komplizierter zu sein:


Für die Darstellung in der Vorschau klappt es.

Für die Darstellung im Editor aber nicht, bzw. nur teilweise.

Zunächst mal scheint für den Editor nicht die erwähnte css Datei zuständig zu sein, sondern diese hier:
admin/template/js/ckeditor/content.css

Merkwürdigerweise werden aber nur einige der dort gemachten Einstellungen übernommen.
Momentan habe ich das hier drinstehen (in beiden css-Dateien, für Editor und Vorschau):

Code:
table { border: none;
        width: 100%;
       border-style: none;
       border: 0;
       border-spacing: 10px;
       border-width: length=0;}
       
td {    vertical-align: top;
}

Während in der Vorschau alles wie gewünscht dargestellt wird, verhält es sich im Editor so:

Tabellenbreite ist 500px, nicht 100%  (falsch)
Rahmen vorhanden ( falsch )
Zwischenraum zwischen den Zellen vorhanden (richtig)
Vertikale Textausrichtung oben geht nur für die rechte Spalte, nicht für die linke. (falsch ???)

Im Editor kann man die Tabelleneigenschaften über das Kontextmenü einstellen (rechte Maus).
Dort stehen wieder die alten Standardwerte drin.

Das ist alles ziemlich verwirrend, also nix mit GetSimple Huh
Reply
#5
Ich vermute mal, dass es etwas anders funktioniert.
Die Angaben in einem Stylesheet können doch direkt in einem HTML Dokument wieder überschrieben werden.

Wenn ich also im Stylesheet angebe, dass eine Tabelle 100% groß sein soll, nützt das wenig, wenn ich im HTML Dokument dann schreibe: table {width=500px; ........
Und genau das scheint zu passieren.

Wenn ich in der Toolbar des Editors auf den Button Table drücke, geht sofort ein Einstellungsdialog auf, der die Eigenschaften der Tabelle einstellt. Und dort stehen schon Default-Einstellungen, die NICHT aus dem geänderten Stylesheet für den Editor stammen.
Genau diese Eistellungen werden dann aber für die Tabelle verwendet.
Und diese erscheinen auch im HTML-Text in der Sourcecode -Ansicht.

Der richtige Ansatz wäre also, die Stelle zu finden, wo die Default Einstellungen für die Tabelle definiert werden.
Danach habe ich schon gesucht, aber ich kann sie nicht finden.
Irgendwo muss doch der HTML-Code generiert werden, der in die Seite eingefügt wird, wenn man den Einstellungsdialog schließt.
Reply
#6
(2018-04-02, 20:50:35)bero Wrote: Ich vermute mal, dass es etwas anders funktioniert.
Die Angaben in einem Stylesheet können doch direkt in einem HTML Dokument wieder überschrieben werden.

Nicht aber, wenn Du im Stylesheet z. B. schreibst


Code:
table {width:100% !important}

Alex
Reply
#7
Bist du da sicher?
Styles, die man im HTML Dokument festlegt, haben soweit ich weiß, Vorrang.
Wenn ich zum Beispiel im CSS schreibe, width:100%, dann gilt das nur, wenn ich im HTML Dokument keine width-angabe mache. Wenn ich dann im HTML 50% angebe, ist die Größe 50%, nicht 100%, und genau das passiert auch.
Im Dialog für die Table stehen schon jede Menge Parameter drin. Die führen dazu, das entsprechende Styles im HTML eingesetzt werden, wodurch die Angaben im Css ignoriert werden. Und genau das ist mein Problem.
Reply
#8
Ich hab's grade nochmal ausprobiert.
Es ist tatsächlich so, wie ich geschrieben habe, alles Andere hätte mich auch gewundert.

Im Stylesheet steht als Tabellenbreite 100%.
Wenn ich im table-Dialog des Editors die Breite auf 10% setze, trägt der Editor folgenden HTML-Code ein:

<table style="width: 10%;">

Und damit wird die im Staylesheet gemachte Angabe von 100% überschrieben, und die Tabelle ist in der Vorschau tatsächlich nur 10% breit.

Wird der Button "Table" gedrückt, steht initial 500px als Tabellenbreite im Eingabefeld. Und somit bekomme ich die gewünschte Breite 100% nur hin, wenn ich den Wert manuell im Dialog auf von 500px auf 100% ändere.
Und das muss ich für jede neue Tabelle für gefühlte 100 weitere Parameter ( wie z.B. die Textausrichtung von center auf top setzen ) machen.

Was im CSS steht, ist also nur relevant, wenn man KEINE Angaben zum Format macht.

Der Editor macht aber Welche, nämlich die Voreingestellten.

Und diese voreingestellten Werte möchte ich einmalig zentral ändern, und nicht jedesmal, wenn ich eine Tabelle einfüge.
Reply
#9
(2018-04-04, 02:10:03)bero Wrote: Ich hab's grade nochmal ausprobiert.
Es ist tatsächlich so, wie ich geschrieben habe, alles Andere hätte mich auch gewundert.
Nein, es ist nicht so wie Du geschrieben hast. Die Kaskade läuft so:

Im Stylesheet steht table { width:100% }
Im Dokument steht <table>
Ergebnis: <table> ist 100% breit

Im Stylesheet steht table { width:100% }
Im Dokument steht <table style="width:10%">
Ergebnis: <table> ist 10% breit

Im Stylsheet steht table { width:100% !important }
Im Dokument steht <table style="width:10%">
Ergebnis: <table> ist 100% breit.

Im Stylesheet steht table { width: 100% !important }
Im Dokument steht <table style="width:500px">
Ergebnis: <table> ist 100% breit.

Quote:Was im CSS steht, ist also nur relevant, wenn man KEINE Angaben zum Format macht.
Nein. Was im CSS steht, ist IMMER relevant, wenn Du hinter die Eigenschaftsdeklaration !important schreibst.

Alex
Reply




Users browsing this thread: 1 Guest(s)