CSS-Anweisung für Editordarstellung von Module-Editor-Buttons

Ideen für neue Funktionen in CONTENIDO?
Antworten
Faar
Beiträge: 1673
Registriert: Sa 8. Sep 2007, 16:23
Wohnort: Brandenburg
Kontaktdaten:

CSS-Anweisung für Editordarstellung von Module-Editor-Buttons

Beitrag von Faar » Di 22. Dez 2020, 11:19

Hallo Miteinander,
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). :roll:
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;
}
Eine Kleinigkeit mit großer Wirkung.
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. 8)

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. :evil:

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;
}
Schaue ich aber im Editorbereich mit dem Entwicklertool, sieht es immer noch so aus:

Code: Alles auswählen

.cms_abstract_img {
    margin: 2px 2px 0;
    z-index: 2147483647 !important;
	width: 16px;
}
... das ist doch :cry: :motz:
Fliegt der Bauer übers Dach, ist der Wind weißgott nicht schwach.

xmurrix
Beiträge: 2957
Registriert: Do 21. Okt 2004, 11:08
Wohnort: Augsburg
Kontaktdaten:

Re: CSS-Anweisung für Editordarstellung von Module-Editor-Buttons

Beitrag von xmurrix » Di 22. Dez 2020, 12:30

Hallo Frank,

das Problem mit Frontend Styles, die die Backend Styles überschreiben, wird man in CONTENIDO immer haben. Das Einzige, was da hilft, ist die Verwendung von inline-Styles für CONTENIDO Elemente, die im Frontend-Layout ausgegeben werden.

CONTENIDO cached selber keine CSS-Dateien, die werden eher vom Browser oder von einem Proxy gecahed.

Gruß
Murat
CONTENIDO downloads: CONTENIDO 4.10.1
CONTENIDO links: Documentation, API documentation
CONTENIDO @ Github: CONTENIDO 4.10

lunsen_de
Beiträge: 223
Registriert: Mo 17. Okt 2005, 20:26
Wohnort: Weimar
Kontaktdaten:

Re: CSS-Anweisung für Editordarstellung von Module-Editor-Buttons

Beitrag von lunsen_de » Di 22. Dez 2020, 12:56

Hallo,

ich setzte dafür einen Styleswitcher-Modul ein, welches im Editmodus ein anderes css-File implementiert. Also im Frontend eine meist leere frontend.css (oder auch garnichts) und im Backend eine backend.css, in der ich die relevanten/störenden Definitionen überschreibe.

Grüße lunsen_de

Faar
Beiträge: 1673
Registriert: Sa 8. Sep 2007, 16:23
Wohnort: Brandenburg
Kontaktdaten:

Re: CSS-Anweisung für Editordarstellung von Module-Editor-Buttons

Beitrag von Faar » Di 22. Dez 2020, 14:03

Bin noch fleissig bei der Arbeit :(
Also irgendein Cache muss es sein.
Während STRG + F5 im Frontend funktioniert, bleibt es im Backend beim alten CSS.

Abseits dessen überschreibt auch das Frontend-CSS die Formularfelder der neuen Moduleingaben wie content_teaser.
Die Methode, ein !important dahinter zu schreiben funktioniert wenigstens.
Die html-inline Styles sind halt auch nur noch übersichtlich, wenn es ganz wenige Anweisungen sind.
Ich mache das um die Labeltexte farblich abzuheben.

Ich fürchte, ich muss Weihnachten dieses Jahr etwas verschieben, werd sonst nicht fertig. :?
Sorry für Euch. 8)
Fliegt der Bauer übers Dach, ist der Wind weißgott nicht schwach.

xmurrix
Beiträge: 2957
Registriert: Do 21. Okt 2004, 11:08
Wohnort: Augsburg
Kontaktdaten:

Re: CSS-Anweisung für Editordarstellung von Module-Editor-Buttons

Beitrag von xmurrix » Di 22. Dez 2020, 14:41

...Während STRG + F5 im Frontend funktioniert, bleibt es im Backend beim alten CSS...
Bei Verwendung STRG + F5 wird nur die die Haupt-Seite neu geladen. Da im Backend mit Frames gearbeitet wird, hilft STRG + F5 da nicht viel. Um geänderte JS-, CSS- oder Bild-Dateien im Backend neu zu laden, muss man den ganzen Browsercache leeren.

Der Ansatz von lunsen_de, im Backend zusätzliche CSS zu laden, mit der man das überschreiben kann, ist eine gute Idee.
CONTENIDO downloads: CONTENIDO 4.10.1
CONTENIDO links: Documentation, API documentation
CONTENIDO @ Github: CONTENIDO 4.10

Antworten