"Abstand" wegoptimiert?

Tagchen,
ich schrieb ja schon irgendwo: ich habe etliche Probleme mit der 4.4 - weil sooo vieles anders ist als in 3.5

Jetzt ärgerte ich mich gerade über das Verschwinden der Abstand-Einstellung je Inhaltselement (siehe Anhang). Ich habe das in früher mittelmäßig oft benutzt, nicht überall und schon gar nicht überall gleich - also mal 10px davor, mal 20px danach, mal 10px davor UND 42px danach usw. um Abstände eben flexibler gestalten zu können. (Warum) ist das jetzt "out"?
Die Felder gibt es offenbar nicht mehr. Muss ich etwa ALLE Seiten durchgehen und für/in alle betroffenen Inhaltselemente irgendwas rein "schummeln"? Zum Beispiel ein

Code:

---

<p style="margin-...:42px">&nbsp;</p>

---

in jedes betroffene Inhaltselement? Das wäre verdammt mühselig und klappt wohl nur bei ce_text und bei allen anderen guck ich in die Röhre :-(
Selbst einen eigenen CSS-Eintrag je Inhaltselement geht ja nicht (wäre auch extrem mühselig), weil die DIVs keine ID bekommen sondern nur eine CLASS
Gibt's Alternativen, Würgarounds, whatever?

Weil man es besser über CSS löst statt inline Styles (die bis dato erzeugt wurden). Das ist einfach nicht mehr zeitgemäß....

Leg dir im CSS doch einfach Helferklassen an. z.B.

Code:

---

.m1 {
  margin-bottom: 80px;
  margin-top: 80px;
}
.m2 {
  margin-bottom: 40px;
  margin-top: 40px;
}
.m3 {
  margin-bottom: 40px;
  margin-top: 85px;
}
.m4 {
  margin-bottom: 85px;
  margin-top: 40px;
}
.mt1 {
  margin-top: 80px;
}
.mt2 {
  margin-top: 40px;
}
etc etc

---

Die kann man dann ganz easy in jedem Element - > CSS Klasse entsprechend vergeben.
Falls du Bootstrap verwendest, gibt es alle diese Helferklassen bereits und du musst nichts selbst anlegen. https://getbootstrap.com/docs/4.0/utilities/spacing/




Alternativ kannst du auch einfach den jeweiligen Element per CSS Abstände definieren z.B.

Code:

---

.ce_text{margin15px 0;}
.ce_gallery{margin15px 0;}

etc etc

---

Du siehst...die Möglichkeiten sind vielfältig ;)

Zitat:

---

Zitat von Kahmoon

Leg dir im CSS doch einfach Helferklassen an. z.B.
... {codesnippsel}

---

Das ist zwar auch erstmal (initial) sehr aufwändig, weil ich erstens viele verschiedene habe um Abstände eben flexibler gestalten zu können und zweitens wohl (oder besser übel) tatsächlich ALLE Seiten durchgehen muss ... Aber gut, wenn es nicht mehr "altmodisch" geht...

Zitat:

---

Zitat von Kahmoon

Die kann man dann ganz easy in jedem Element - > CSS Klasse entsprechend vergeben.

---

Ich sach ja: wenn es nicht mehr "altmodisch" geht...
Ist ja auch gar nicht umständlich (sorry!), für jeden "mal eben schnell" definierten Abstand an einem Inhaltselement erst noch ein Stück CSS bauen zu müssen. Nochmal sorry.

Zitat:

---

Zitat von Kahmoon

Falls du Bootstrap verwendest, gibt es alle diese Helferklassen bereits und du musst nichts selbst anlegen. https://getbootstrap.com/docs/4.0/utilities/spacing/

---

Lieber nicht, ich bin so ein "ewig (vor)gestriger" ;)
Das klingt ja noch umständlicher. :D

Zitat:

---

Zitat von Kahmoon

Alternativ kannst du auch einfach den jeweiligen Element per CSS Abstände definieren z.B.

Code:

---

.ce_text{margin15px 0;}
.ce_gallery{margin15px 0;}

etc etc

---

Du siehst...die Möglichkeiten sind vielfältig ;)

---

Genau DAS kann ich nicht tun, weil

Zitat:

---

Zitat von purzel

nicht überall und schon gar nicht überall gleich - also mal 10px davor, mal 20px danach, mal 10px davor UND 42px danach usw.

---

Es gibt gerade bei ce_text Elementen mehrere verschiedene.

Aber ich habe dank und auf Basis Deines Tipps während ich hier schrieb eine für mich praktikable Lösung ersonnen. Initial aufwändig (s.o.) aber modern weil mit CSS-Klassen :)

Ich weiß...Veränderung tut manchmal weh....aber es ist gar nicht sooo schlimm ;-).

Einmal Helferklassen anlegen.....kann man für sämtliche Projekte immer wieder verwenden. Noch weniger Aufwand ist es Grundabstände für Elemente definieren und nur den Ausnahmen, die du ja offensichtlich hast, eine weitere CSS Klasse zuweisen. So mache ich es...

Das könnte man auch so „lösen” - semantisch dann halt wie vorhin schlecht:
Eine Stylepicker Erweiterung installieren und dann x Styles definieren.

Code:

---

.bottom10 {margin-bottom:10px;}
.bottom20 {margin-bottom:20px;}
…
.top10 {…)

---

Dann kann man die vordefinierten Klasse einfach auswählen.

Zitat:

---

Zitat von planepix

Eine Stylepicker Erweiterung installieren und dann x Styles definieren.
…
Dann kann man die vordefinierten Klasse einfach auswählen.

---

Danke, die Idee finde ich ergänzend auch gut - wenn man denn erstmal weiß dass es sowas gibt. Kannst Du eine empfehlen? Der Beschreibung nach scheint "CSS Stil Wähler" von craffft genau das Richtige zu sein; die Beschreibung "christianromeni/c-customarticles" ist mit "Custom Article options for Contao Open Source CMS" ja mehr als dürftig.

Ich habe zwar keine Ausnahmen a la "6px", "7px" usw, sondern nur durch 5 teilbare und da auch (glaub ich wenigstens) nur 5...25 px in beiden Richtungen (vor/nach). Von daher dürfte das Erstellen der Definitionen ein überschaubarer Aufwand sein. Richtig ätzend hingegen ist das Durchsuchen, wo ich das überall gemacht habe... Zumindest habe ich anscheinend ein paar "Vorlieben" gehabt, so dass möglicherweise die Anzahl noch mehr reduziert werden kann

Genau, mit dem habe ich das mal gebaut für einen Kunden, der das partout haben wollte…

https://packagist.org/packages/craff...elector-bundle

Alternative erstellst du dir nur die CSS-Regeln und nimmst kurze Klassenbezeichnungen wie t10 und b10; dann kannst du dir eine Abhängigkeit eines Bundles sparen…

Und in deiner „alten” 3.5 Installation kannst du in Datenbank vermutlich den Stellen auf die Schliche kommen, wo das eingesetzt war.

Code:

---

tl_module DROP space
tl_article DROP space
tl_content DROP space

---

Zitat:

---

Zitat von planepix

Alternative erstellst du dir nur die CSS-Regeln und nimmst kurze Klassenbezeichnungen wie t10 und b10; dann kannst du dir eine Abhängigkeit eines Bundles sparen…

---

In der Tat zwei nicht unwichtige Argumente.

Zitat:

---

Zitat von planepix

Und in deiner „alten” 3.5 Installation kannst du in Datenbank vermutlich den Stellen auf die Schliche kommen, wo das eingesetzt war.

---

Erschreckend: in 134 von 320 Artikeln und in 710 von 1288 Inhaltselementen. Da bin ich ja Wochen beschäftigt :eek:
Das mag mit daran liegen, dass viele meiner Inhaltselemente keine separate Überschrift haben; die hat meist nur das Erste.
Ich glaube da lohnt es sich, zumindest mal drüber nachzudenken ob man das über geschickte Datenbank-Manipulationen abkürzen kann. Dazu müsste ich herausfinden, was die "Unterfelder" von cssID in den Tabellen tl_article und tl_content bedeuten. Du weißt das nicht zufällig? So ein Eintrag sieht ja so aus:
a:2:{i:0;s:0:"";i:1;s:0:"";}
Die beiden Strings dürften "menschlesbar" die Namen von CSS ID und Klasse sein; aber mit i: und s: kann ich nichts anfangen; vielleicht irgendeine ID. (Zumindest in Inhaltselementen scheint das zweite s: die ID des übergeordneten Artikels zu sein...)

Zitat:

---

Zitat von purzel

Erschreckend: in 134 von 320 Artikeln und in 710 von 1288 Inhaltselementen. Da bin ich ja Wochen beschäftigt :eek:

---

Das ist u.a. der Grund warum solche Dinge schon seit den Anfangszeiten des css besser dort aufgehoben waren. Auch ein Wildwuchs von sehr vielen unterschiedlichen Abständen ist in meinen Augen nicht wirklich klug.
Ich habe vor kurzem auch eine solche Installation übernommen. Dort haben wir über css eine Grundeinstellung vorgenommen, die für die meisten Elemente passt und noch zwei oder drei Klassen verwendet für ein paar Sonderfälle. Damit war die Umstellung sehr schnell erledigt.

Du hast (leider) sowas von Recht...
In den Anfangszeiten von Typolight (so lange verwende ich das schon) durfte man auch irgendwo auswählen dass ein Element zentriert wird. Auch das verschwand irgendwann und ich musste meine (zum Glück nur wenigen) zentrierten Elemente mit einer CSS Klasse

Code:

---

.zentriert { text-align: center; }

---

ausstatten. In den Anfangszeiten konnte ich und möglicherweise auch einige andere nicht absehen, dass eines Tages inline-CSS "böse" sein würde :) Und, zu guter Letzt, in meinen Anfangszeiten war CSS für mich ziemliches Neuland und trotzdem sollte ich diese Seite bauen... Ich wusste damals noch nicht, was in Sachen Styles klug ist und was nicht :(
Jetzt habe ich eine riesige Fleißarbeit vor mir, aber Dein Tipp mit einer Art "Grundabstand" gefällt mir ziemlich gut, vielen Dank dafür.

Zitat:

---

Zitat von purzel

Jetzt habe ich eine riesige Fleißarbeit vor mir, aber Dein Tipp mit einer Art "Grundabstand" gefällt mir ziemlich gut, vielen Dank dafür.

---

Das habe ich doch auch schon 5 Posts weiter oben gemacht! :-( :-)))

So hast du wenigstens auf einen Streich alle unterschiedlichen Abstände "aufgeräumt".

VG Frank

Zitat:

---

Zitat von purzel

In den Anfangszeiten konnte ich und möglicherweise auch einige andere nicht absehen, dass eines Tages inline-CSS "böse" sein würde :)

---

Das war auch 2006 schon relativ klar - vor allem auf Grund der schlechten Wartbarkeit, die Dir ja nun auch auf die Füsse gefallen ist.

Sorry ...

@ Kahmoon / Frank:
Sorry, ich hatte Deine Formulierung nicht in die Richtung interpretiert, war kein böser Wille.

@ lucina:
Wohl dem, der (der, die) das 2006 schon wusste und absehen konnte. Bei mir könnte das die Zeit gewesen sein, in der ich mit CSS angefangen habe. (Plain) HTML kenne ich natürlich schon länger...

@ all:
Es bedarf noch des finalen Tests an (einer KOPIE) der Datenbank, aber ich bin zuversichtlich dass das klappt: ein kleines PHP-Script, welches mir den Löwenanteil der o.g. Fleißarbeit abnimmt: nämlich die vor- und nach- Abstände aus der 3.5er Spalte "space" in Helferklassen der Spalte "cssID" überführen

Alles gut. War nur Spaß :)

Ich schrieb ...

Zitat:

---

Zitat von purzel

...ein kleines PHP-Script, welches mir den Löwenanteil der o.g. Fleißarbeit abnimmt: nämlich die vor- und nach- Abstände aus der 3.5er Spalte "space" in Helferklassen der Spalte "cssID" überführen

---

Das funktioniert natürlich nur dann, wenn man beim "frischen" Installieren einer 4.4 die (Kopie der) Datenbank aus der 3.5 benutzt und zunächst NICHT die nicht mehr benötigten Spalten aus tl_article und tl_content gelöscht hat. Andere Versionen als 4.4 habe ich nicht getestet.
Das Anlegen und mit den gewünschten/richtigen margin-top und margin-bottom Werten zu füllen der erzeugten Helfer-Klassen muss ich zwar noch machen, aber immerhin hat mir das Script das mühselige selbst Suchen derer Elemente erspart, bei denen ich "Abstand" (also inline-CSS) benutzt habe.
Auf Wunsch poste ich das Script.

Mein Skript hat ja direkt via DB Manipulationen der Spalte cssID bei etlichen Elementen in tl_content und tl_article CSS Klassen eingefügt. Die haben sofort funktioniert.

Ergänzend habe ich einen ganz seltsamen Effekt:

In einem zweiten Durchlauf habe ich das mit einem Rudel Datensätze tl_article in der Spalte teaserCssID gemacht. Die funktionieren NICHT, obwohl es erstens die selben Klassennamen sind und zweitens wie erwartet in dem Feld im BE zu sehen sind. Die teaserCssID funktionieren erst, wenn ich die jeweiligen Artikel einmal öffne und per Speichern und Schließen wieder schließe.
Warum? Was kann ich dagegen tun? Muss ich alle via DB Manipulation modifizierten Datensätze einmal öffnen? Dann hätte ich den Kram auch von Hand eintippen können :(

Zitat:

---

Zitat von purzel

Mein Skript hat ja direkt via DB Manipulationen der Spalte cssID bei etlichen Elementen in tl_content und tl_article CSS Klassen eingefügt. Die haben sofort funktioniert.

---

Zitat:

---

Muss ich alle via DB Manipulation modifizierten Datensätze einmal öffnen? Dann hätte ich den Kram auch von Hand eintippen können :(

---

Wie hast Du das denn gemacht? Deine Frage

Zitat:

---

Zitat von purzel

Dazu müsste ich herausfinden, was die "Unterfelder" von cssID in den Tabellen tl_article und tl_content bedeuten. Du weißt das nicht zufällig? So ein Eintrag sieht ja so aus:
a:2:{i:0;s:0:"";i:1;s:0:"";}
Die beiden Strings dürften "menschlesbar" die Namen von CSS ID und Klasse sein; aber mit i: und s: kann ich nichts anfangen; vielleicht irgendeine ID.

---

lässt mich bermuten, daß Du es nicht so eingefügt hast, wie Contao es erwartet (und selbst abspeichern würde).

Zur Erklärung: a:2:{i:0;s:0:"";i:1;s:0:"";} ist ein "serialisierter Array (siehe https://www.php.net/manual/de/function.serialize.php). Es ist die String-Darstellung des Arrays ["",""] -- also leere CSS-ID und CSS-Klasse. Wenn Du eine CSS-Klasse einträgst, müsste z.B. so etwas in der Datenbank gespeichert werden:

Code:

---

a:2:{i:0;s:0:"";i:1;s:9:"cssklasse";}

---

a:2 ... Array der Länge 2

i:0;s:0:"" ... an Index 0 ein String der Länge 0: der leere String ""

i:1;s:9:"cssklasse" ... an Index 1 ein String der Länge 9: der leere String "cssklasse"

Hallo fiedsch,
herzlichen Dank für's Augen öffnen ;)

Dein zweites bzw. drittes Zitat ("Dazu müsste ich wissen...") ist sozusagen Schnee von gestern (nicht böse gemeint!!). Hier hatte man mir das erklärt, auf dessen Basis habe ich ja dann mein Skript programmiert. Es erzeugte schon "formatmäßig" richtige Einträge in der DB. Die sehen die genau aus wie in Deinem Beispiel (z.B. a:2:{i:0;s:0:"";i:1;s:3:"n20";} und zweitens stehen ja auch genau die zugehörigen CSS-Klassen in den entsprechenden Feldern im Backend "CSS-ID/Klasse".

So, das hat mich veranlasst, GANZ GENAU meine DB-Einträge zu prüfen, bei der Masse verliert man leicht den Überblick. Der erste Durchlauf (Posting v. 2.6.) war für die sofort funktionierenden cssID-Felder und hat 100% korrekte Einträge produziert. Der zweite Durchlauf (gestern) war für TeaserCssID hat "halb falsche" Einträge erzeugt (z.B. a:1:{i:1;s:3:"n20";}), möglicherweise war ich beim Bau des zweiten Durchlaufs etwas unkonzentriert. Asche auf mein Haupt.

Nun habe ich mein Skript überarbeitet (leider jetzt nicht mehr so hübsch wie die erste Version, ich wollte fertig werden) und jetzt hat es auch für TeaserCssID korrekte Einträge gebaut. Damit funktionieren nun auch die Abstand-Helfer-Klassen bei den Teaser-Feldern.

Zitat:

---

Zitat von planepix

https://packagist.org/packages/craff...elector-bundle

---

Ist das der Nachfolger von Stylepicker4ward?

Zitat:

---

Zitat von Samson1964

Ist das der Nachfolger von Stylepicker4ward?

---

Quasi ja, eben anderer Autor.

Mittlerweile gibt es auch dieses Bundle noch:
https://packagist.org/packages/ovele...-style-manager

https://github.com/OMOSde/contao-om-backend hat die Funktionalität auch mit an Bord.

Alle kurz getesteten Erweiterungen lassen mich nicht richtig warm werden. Sie sind teilweise mit Funktionen überfrachtet, die ich nicht brauche. Oder sie liefern nicht das gewünschte Ergebnis. An Stylepicker4ward kommen alle nicht heran: 1. Allen fehlt eine Vorschau auf die CSS-Klasse, 2. Der kleine Button neben CSS-Klasse und das Popup fehlt auch.

craffft/css-style-selector-bundle bringt eine ähnliche Auswahl mit, aber die CSS-Klassen kann man nur für alle oder keine Inhaltselemente freischalten. Wenn meine Klasse z.B. nur für ce_hyperlink gültig ist, geht das damit nicht. Die beiden anderen Erweiterungen können das, aber z.B. oveleon/contao-component-style-manager zeigt neben dem Feld CSS-Klasse nur eine Auswahl an, die selbst nichts in das Feld CSS-Klasse einträgt. Das verwirrt. Und mit Templates und Kategorien war ich auch erstmal überfordert.

Vielleicht muß ich doch mal an den Stylepicker4ward ran, um ihn für Contao 4 zum Laufen zu bringen.

Zitat:

---

Zitat von Samson1964

Die beiden anderen Erweiterungen können das, aber z.B. oveleon/contao-component-style-manager zeigt neben dem Feld CSS-Klasse nur eine Auswahl an, die selbst nichts in das Feld CSS-Klasse einträgt. Das verwirrt. Und mit Templates und Kategorien war ich auch erstmal überfordert.

---

Hi,
ich habe jetzt nicht den ganzen Thread gelesen, aber was meinst du genau damit?
Vielleicht kann ich helfen, da das oveleon/contao-component-style-manager aus meiner Feder entsprungen ist.

LG Doi

EDIT:
Es scheint mir als hättest du Deine CSS-Gruppe als Template-Variable definiert. Hier werden die CSS-Klasse nicht automatisch gesetzt, sondern dem Template zur Verfügung gestellt um dort mit der Auswahl weiter arbeiten zu können. Im Template selber kannst du die Ausgabe / Klasse dann über $this->styleManager an beliebiger Stelle positionieren.

Zitat:

---

Zitat von Doi

Hi,
ich habe jetzt nicht den ganzen Thread gelesen, aber was meinst du genau damit?
Vielleicht kann ich helfen, da das oveleon/contao-component-style-manager aus meiner Feder entsprungen ist.

LG Doi

EDIT:
Es scheint mir als hättest du Deine CSS-Gruppe als Template-Variable definiert. Hier werden die CSS-Klasse nicht automatisch gesetzt, sondern dem Template zur Verfügung gestellt um dort mit der Auswahl weiter arbeiten zu können. Im Template selber kannst du die Ausgabe / Klasse dann über $this->styleManager an beliebiger Stelle positionieren.

---

Ich habe noch nie (außer als Programmierer) händisch Klassen in Templates eingetragen. Ich trage die immer unter "CSS-ID/Klasse" im Inhaltselement ein - auch als Redakteur. Style4ward hat rechts daneben einen Iconlink und aus dem Popup kann man die Klassen in das Feld Klasse übertragen.
Und was für CSS-Gruppen? Es gibt für mich CSS-Klassen wie umbruch, paarung oder breite40. Die muß ich nicht gruppieren oder kategorisieren. Allenfalls für bestimmte Elemente (Text, Bild, Galerie, ...) oder Container (page, article, news, ....) freigeben. Auch das konnte Style4ward wunderbar.

Zitat:

---

Zitat von Samson1964

Ich habe noch nie (außer als Programmierer) händisch Klassen in Templates eingetragen.

---

Musst du auch nicht, das ist nur ein weiteres Feature der Erweiterung um eben mehr Möglichkeiten abzubilden.
Worauf ich hinaus wollte war, ob du ggf. das Häkchen bei "Als Templatevariable verwenden" angewählt hast/hattest. Da es dann kein Wunder wäre, dass diese eben nicht automatisch dem Element hinzugefügt wurde ;) Siehe Dokumentation.

Zitat:

---

Zitat von Samson1964

Und was für CSS-Gruppen? Es gibt für mich CSS-Klassen wie umbruch, paarung oder breite40. Die muß ich nicht gruppieren oder kategorisieren. Allenfalls für bestimmte Elemente (Text, Bild, Galerie, ...) oder Container (page, article, news, ....) freigeben. Auch das konnte Style4ward wunderbar.

---

CSS-Gruppen sind in der Erweiteiterung eine Sammlung von CSS-Klassen die thematisch zusammengehören, ob du nur eine in dem Select-Feld bereitstellst ist dir selbst überlassen.
So könntest du in einen Select-Feld statt "breite40" auch "breite30" und "breite100" bereitstellen. Die Kategorie würde dann eben Breite heißen.

Es mag sein, dass dies für Deine Zwecke zu überdimensioniert erscheint.

Die englische README.md hat mich damals überfordert. Ich weiß nicht, wozu ich im Style-Manager Einstellungen für Grid, Slider, etc. brauche. Ich will einfach nur meine in der CSS-Datei definierten CSS-Klassen im Backend den Redakteuren zur Verfügung stellen. Am besten mit Beschreibung und Vorschaubild. Das alles erfüllt Style4Ward und habe ich in Deinem Bundle nicht gefunden. Mich erschlagen die Funktionen Deines Bundles. Mein Englisch ist nicht gut und ich weiß nicht, ob ich gezwungen bin, da alles Mögliche zu definieren um an mein Ziel zu kommen: Klassen in Inhaltselementen u.ä. zur Verfügung stellen.

Zitat:

---

Zitat von Samson1964

Die englische README.md hat mich damals überfordert. Ich weiß nicht, wozu ich im Style-Manager Einstellungen für Grid, Slider, etc. brauche. Ich will einfach nur meine in der CSS-Datei definierten CSS-Klassen im Backend den Redakteuren zur Verfügung stellen. Am besten mit Beschreibung und Vorschaubild. Das alles erfüllt Style4Ward und habe ich in Deinem Bundle nicht gefunden. Mich erschlagen die Funktionen Deines Bundles. Mein Englisch ist nicht gut und ich weiß nicht, ob ich gezwungen bin, da alles Mögliche zu definieren um an mein Ziel zu kommen: Klassen in Inhaltselementen u.ä. zur Verfügung stellen.

---

Kein Problem, mag wirklich nicht die beste Aufbereitung einer Dokumentation sein :D

Kurz und Knapp erklärt hast du die Möglichkeit alle Deine CSS-Klassen zu konfigurieren. Solltest du die Abstraktion von Kategorien nicht benötigen, legst du dir einfach eine "Allgemein"-Kategorie an und fertig.
Die "Gruppen" welche sich darin befinden, werden später als Select-Feld für die freigegebenen Komponente im Backend angezeigt. Nicht neben dem ID / CSS-Klasse Feld, sondern als eigenständige Palette.

1. Kategorie: Anhang 23807
2. CSS-Gruppe: Anhang 23808
3. Darstellung im Backend (hier ce_text): Anhang 23810

Ich habe dir Anhand des "Breite"-Beispiels einmal eine simple Konfiguration erstellt, die Du in der Maske des StyleManagers importieren kannst:
Import-Datei: Anhang 23809

Damit sollte schnell klar werden, wie der StyleManager zu verwalten ist.
Solltest du noch Fragen haben, stehe ich gerne zur Verfügung.