die Wysiwyg-Darstellung kollidiert nicht selten mit den Editor-Buttons der einzelnen Module in der Editordarstellung, weil das Design mancher Seiten nicht selten mit Positions und minus-Margins und z-index arbeitet. Ganz schlimm bei Seiten die mit Vue.js erstellt wurden.
(Vue.js läuft zwar nicht auf Contenido aber das Design samt CSS bekommt man mal auf den Tisch gelegt)
Wenn in dem Design-CSS steht, dass ein img 100% füllend sein soll, tut das dann auch der Button, der ebenfalls ein img ist.
Da CSS überraschenderweise cascadierend ist, wirkt jene Anweisung stärker, die cascadierend auf ein img wirkt als die direkte Anweisung auf die img-Klasse seitens Contenido.
Schlimmer noch ist es mit dem z-index, den kann man manchmal verändern wie man will, der Button bleibt stur hinter den Designelementen verborgen.
Ok, das Problem wurde von den Contenido Machern bereits erkannt, aber unbefriedigend gelöst (und es ist auch nicht so einfach).
Wo findet man das?
Hier: contenido/styles/content_types/cms_abstract_tabbed.css
Der z-Index hatte hier bereits ein !important aber die Weite hatte es nicht.
Das habe ich hier eingefügt und damit bleibt der Button auf 16 Pixel beschränkt und wird nicht 100% breit.
Code: Alles auswählen
.cms_abstract_img {
margin: 2px 2px 0 !important;
z-index: 2147483647 !important;
width: 16px !important;
}
Diese große Zahl beim z-index ist so gut wie nie nötig, bei Bootstrap-Design bin ich mir da nicht mehr so sicher.
Dem Margin habe ich ebenfalls ein !important gegeben, weil manchmal auch die Margins der Bilder im Design verändert werden.
Der Button soll da bleiben wo er hingehört.
Manches Bootstrap-Design (besonders bei Vue.js fiel mir das auf) ist gespickt mit !important. Warum? Weil bei über 10.000 Zeilen CSS-Anweisungen und zusätzlichem Overwrite-CSS auch Designerstudios ins Schleudern kommen und die Kaskadierung nicht mehr überblicken.
Bei Contenido würde es auch helfen, wenn es statt der reinen Anweisung auf die Klasse eine Ableitung gäbe.
Beispiel: .imgbox > img {width: 100%;} schlägt .cms_abstract_img {width: 16px;}, darum das !important.
Gäbe es sowas wie #con_editor > img.cms_abstract_img{ }, dann würde das sicher die meisten Design-CSS schlagen.
Zusätzlich mit !important wäre es unschlagbar.
Es gibt einen Cache in Contenido, der zum Haare raufen ist und sich offensichtlich nicht löschen lässt.
Meine Änderung in der Contenido-CSS-Datei wird auch heute Morgen noch nicht angezeigt, aber wenigstens mein Overwrite, das ich im Design-CSS eingebaut habe. Das kann man auch machen, gleiche Anweisung oben aber mit der eigenen Ableitung dann ins eigene CSS ganz unten einbauen.
Warum sich der Cache, den es definitiv gibt, nicht löschen lässt, weiß ich nicht.
Bereinige ich alle Frontend-Caches, hat das offenbar keine Auswirkung auf die Editor-Ansicht.
Bereinige ich den Contenido Cache, tut sich auch nichts.
Wenigstens nach einer Nacht hat sich Contenido bequemt, mir mein eigenes Overwrite im Design-CSS anzuzeigen, das im Contenido Pfad wird noch immer hartnäckig ignoriert.
Schaue ich mit Filezilla in der Contenido Datei, sieht es so aus:
Code: Alles auswählen
.cms_abstract_img {
margin: 2px 2px 0 !important;
z-index: 2147483647 !important;
width: 16px !important;
}
Code: Alles auswählen
.cms_abstract_img {
margin: 2px 2px 0;
z-index: 2147483647 !important;
width: 16px;
}