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

Ideen für neue Funktionen in CONTENIDO?
Antworten
Faar
Beiträge: 1719
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: 2982
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: 226
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: 1719
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: 2982
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

Seelauer
Beiträge: 186
Registriert: So 22. Jan 2006, 21:03
Wohnort: Mal da, mal da
Kontaktdaten:

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

Beitrag von Seelauer » Do 21. Jan 2021, 10:07

Der Ansatz von lunsen_de, im Backend zusätzliche CSS zu laden, mit der man das überschreiben kann, ist eine gute Idee.
Gibt es dazu einen Tip, wie sich das auch updatesicher und zentral einfügen lassen kann ?
Guten Gruß
Seelauer.

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

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

Beitrag von Faar » Do 21. Jan 2021, 11:59

Seelauer hat geschrieben:
Do 21. Jan 2021, 10:07
Der Ansatz von lunsen_de, im Backend zusätzliche CSS zu laden, mit der man das überschreiben kann, ist eine gute Idee.
Gibt es dazu einen Tip, wie sich das auch updatesicher und zentral einfügen lassen kann ?
Die Methode mit @import greift hier auch nicht, da es eine CSS-Datei ohne weitere CSS-Anweisungen sein muss und beim Update würde die main.css oder style.css wieder überschrieben werden und dann ist @import auch weg.
Das könnte man am ehesten so Updatesicher lösen, indem man für die nächste Version die main.css (oder welche auch immer die Hauptcss ist) als reine @import Datei einrichtet und hier eine Art Dummy-CSS zum Schluss einbindet, die bei Erstinstallation leer ist und bei Updates nicht überschrieben wird.
Das ist leider etwas wenn-dann-Programmiererei. :?

Vielleicht würde da ein Hook helfen? :)
...der sicher erst noch zu machen wäre...
Fliegt der Bauer übers Dach, ist der Wind weißgott nicht schwach.

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

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

Beitrag von xmurrix » Do 21. Jan 2021, 13:48

Seelauer hat geschrieben:
Do 21. Jan 2021, 10:07
Der Ansatz von lunsen_de, im Backend zusätzliche CSS zu laden, mit der man das überschreiben kann, ist eine gute Idee.
Gibt es dazu einen Tip, wie sich das auch updatesicher und zentral einfügen lassen kann ?
Du kannst im head-Bereich des Layouts eine eigene CSS laden, wenn die Seite im Backend Editor-Modus läuft, z. B.:

Code: Alles auswählen

<?php if (cRegistry::isBackendEditMode()): ?>
    <link rel="stylesheet" type="text/css" href="css/contenido_overwrite.css" />
<?php endif; ?>
Die Datei contenido_overwrite.css brauchst du nur im css-Ordner des Mandantenverzeichnisses legen und in den Regeln dafür sorgen, dass sie andere überschreiben oder eine höhere Spezifizität haben. Bei einem Update wird die CSS auch nicht überschrieben.

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

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

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

Beitrag von Faar » Do 21. Jan 2021, 13:54

xmurrix hat geschrieben:
Do 21. Jan 2021, 13:48
Du kannst im head-Bereich des Layouts eine eigene CSS laden, wenn die Seite im Backend Editor-Modus läuft, z. B.:
...
... und in den Regeln dafür sorgen, dass sie andere überschreiben oder eine höhere Spezifizität haben.
Hallo Murat,
die overwrite_css sollte dann nicht so einfach im Headbereich auftauchen sondern sichergestellt sein, dass sie nach der Contenido eigenen CSS-Datei eingebunden wird, sonst klappt es mit dem Überschreiben nicht wirklich gut.
Und "!important" sollte Ausnahme bleiben.
Fliegt der Bauer übers Dach, ist der Wind weißgott nicht schwach.

Seelauer
Beiträge: 186
Registriert: So 22. Jan 2006, 21:03
Wohnort: Mal da, mal da
Kontaktdaten:

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

Beitrag von Seelauer » Do 21. Jan 2021, 15:05

Die Datei contenido_overwrite.css brauchst du nur im css-Ordner des Mandantenverzeichnisses legen und in den Regeln dafür sorgen, dass sie andere überschreiben oder eine höhere Spezifizität haben. Bei einem Update wird die CSS auch nicht überschrieben.
Gruß
xmurrix
Danke für die Info !
Guten Gruß
Seelauer.

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

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

Beitrag von xmurrix » Do 21. Jan 2021, 15:28

Faar hat geschrieben:
Do 21. Jan 2021, 13:54
xmurrix hat geschrieben:
Do 21. Jan 2021, 13:48
Du kannst im head-Bereich des Layouts eine eigene CSS laden, wenn die Seite im Backend Editor-Modus läuft, z. B.:
...
... und in den Regeln dafür sorgen, dass sie andere überschreiben oder eine höhere Spezifizität haben.
Hallo Murat,
die overwrite_css sollte dann nicht so einfach im Headbereich auftauchen, sondern sichergestellt sein, dass sie nach der Contenido eigenen CSS-Datei eingebunden wird, sonst klappt es mit dem Überschreiben nicht wirklich gut.
Und "!important" sollte Ausnahme bleiben.
Hallo Frank,


es gibt kein Hook, das explizit zum Überschreiben/Erweitern der CONTENIDO-Backend Styles verwendet wird. Die im head-Bereich des Layouts eingebundene CSS-Datei "contenido_overwrite.css" würde vor den CONTENIDO-Backend CSS-Dateien erscheinen, daher müsste man da mit !important arbeiten.

Eine Alternative wäre das dynamische Hinzufügen der CSS-Datei "contenido_overwrite.css" am Ende des Layouts per JavaScript, z. B.:

Code: Alles auswählen

<?php if (cRegistry::isBackendEditMode()): ?>
    <script>
    (functon(){
        $('head').append('<link rel="stylesheet" type="text/css" href="css/contenido_overwrite.css" />');
    })();
    </script>
<?php endif; ?>
Im Backend wird sowieso JavaScript (jQuery) verwendet und bei dieser Variante kann man in der Regel ohne !important arbeiten, da die CSS-Datei nach den CONTENIDO-Backend CSS-Dateien hinzugefügt wird, also in der Regel als letzte CSS-Datei vorkommt. Es kann aber sein, dass andere Frontend-Module auch CSS-Dateien dynamisch nachladen, z. B. der WYSIWYG-Editor. Hier kann man nicht viel machen, hier gilt die die Devise: "Wer zuletzt kommt, überschreibt zuletzt"...

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

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

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

Beitrag von Faar » Fr 22. Jan 2021, 16:45

Hallo Murat!
xmurrix hat geschrieben:
Do 21. Jan 2021, 15:28
Die im head-Bereich des Layouts eingebundene CSS-Datei "contenido_overwrite.css" würde vor den CONTENIDO-Backend CSS-Dateien erscheinen, daher müsste man da mit !important arbeiten.
Das ist ein Notbehelf aber manchmal geht es auch ohne !important mittels Kaskadierung. Je genauer ein HTML-Element angewählt wird, desto mehr wird es bevorzugt gegenüber nur einer Anwahl über Klasse.
Hab in letzter Zeit leidlich viel Erfahrung mit !important im Fremprojekt sammeln dürfen.
Es geht oft auch ohne.
Eine Alternative wäre das dynamische Hinzufügen der CSS-Datei "contenido_overwrite.css" am Ende des Layouts per JavaScript, z. B.:
Aber warum per Javascript? Reicht es nicht, am Ende des Layouts einfach ein CSS-File zu verlinken mit diesem PHP?

Code: Alles auswählen

<?php if (cRegistry::isBackendEditMode()): ?>
    <script>
    (functon(){
        $('head').append('<link rel="stylesheet" type="text/css" href="css/contenido_overwrite.css" />');
    })();
    </script>
<?php endif; ?>
Hm... hier frage ich mich gerade, ob man nicht mit Javascript den Platz direkt vor </head> ansprechen könnte, dann wäre das Problem vielleicht gelöst (außer bei internem Modul-CSS).
da die CSS-Datei nach den CONTENIDO-Backend CSS-Dateien hinzugefügt wird, also in der Regel als letzte CSS-Datei vorkommt.
Ist das so, dass der Codeschnipsel oben erst nach dem Contenido-CSS einfügt?
Das wäre nicht nur gut sondern auch interessant.
Quasi eine Art Hook 8)
"Wer zuletzt kommt, überschreibt zuletzt"...
Ja eben, wenn man CSS in den Footer packt, sollte es ziemlich sicher als letztes kommen.

P.S. Gruß,
Frank
Fliegt der Bauer übers Dach, ist der Wind weißgott nicht schwach.

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

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

Beitrag von xmurrix » Sa 23. Jan 2021, 09:16

Hallo Frank,
...Aber warum per Javascript? Reicht es nicht, am Ende des Layouts einfach ein CSS-File zu verlinken mit diesem PHP?...
Ja, das würde auch ausreichen. Seit HTML5 ist es kein Problem, wenn man CSS-Dateien auch im body-Element verlinkt.
...Ist das so, dass der Codeschnipsel oben erst nach dem Contenido-CSS einfügt?...
Die CONTENIDO-Backend CSS wird bei der Ausgabe der Seite mit PHP hinzugefügt. Die benutzerdefinierte CSS wird im Browser, nachdem die Seite geladen wurde, mittels JavaScript hinzugefügt und landet somit nach der CONTENIDO-Backend CSS.

Nachtrag:
Es gibt auch die Chain "Contenido.Content.conGenerateCode", die beim Generieren des Codes der Ausgeführt wird. Hier kann man auch eine Chainfunktion implementieren, die den Code der Seite als Parameter bekommt, das benutzerdefinierte CSS link-Element hinzufügt und den geänderten Code der Seite zurückliefert.

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

Oldperl
Beiträge: 4160
Registriert: Do 30. Jun 2005, 22:56
Wohnort: Eltmann, Unterfranken, Bayern
Kontaktdaten:

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

Beitrag von Oldperl » Mo 25. Jan 2021, 13:20

Servus,

könnte man auch mit einer Chain machen.

Gruß aus Franken

Ortwin
ConLite 2.1, alternatives und stabiles Update von Contenido 4.8.x unter PHP 7.x - Download und Repo auf Gitport.de
phpBO Search Advanced - das Suchwort-Plugin für CONTENIDO 4.9
Mein Entwickler-Blog

Antworten