Druckbare Version
Hi Leute,
habe gerade die ersten Test in der 4.4.8 hinter mir, was mir auffällt ist, dass der Punkt Abstand davor und dahinter weg ist.
Gibt es irgendwo eine Liste der Änderungen für Leute die sich in der Version 3.x auskennen und jetzt umsteigen wollen?
Grüße aus Ludwigsburg
Jochen Kubik
Ja, zwar nicht 100% vollständig, aber vorhanden: https://github.com/contao/core-bundl...ter/UPGRADE.md
Hi Leute,
ich muß das Thema nochmal hoch hieven:
Nachdem die o.g. Funktion (leider) weggefallen ist, stellt sich mir die Frage, wie ihr das elegant löst?
Ich habe mir nach dem Schema:
in 5px Schritten bis +/- 200px mein CSS ergänzt, so dass ich jederzeit einem CE eine dieser Klassen zuweisen kann, ohne erst lange ins CSS gehen zu müssen.Code:.Abstand-o-5 {margin-top:5px!important;}
...
.Abstand-u-5 {margin-bottom:5px!important;}
...
Ist diese Vorgehensweise OK, oder gibt es etwas besseres, was ich nicht kenne?
Grüße aus Ludwigsburg
Jochen Kubik
Hallo,
falls Du Bootstrap verwendest, gibt es ab Version 4 jetzt Abstandsklassen Suchwort Spacing.
https://getbootstrap.com/docs/4.0/utilities/spacing/
Steffen Winde
Hi swinde,Zitat:
Zitat von swinde
ich verwende kein Bootstrap, ehrlich gesagt, ich weiß garnicht was das ist ;-)
Aber, wenn ich das so richtig sehe, fügen die dort ein spacerbild mit x pixel ein, das ist aber nicht die feine CSS Art, oder?
Grüße
Jochen
Hi,
nein, das macht Bootstrap nicht. Das macht genau das gleiche wie du, nur mit anderen Klassennamen (z.B. mt-0 bis mt-5). Über eine Config kann man weitere Stufen hinzufügen, ohne das CSS dafür schreiben zu müssen.
Was ich auch ganz gut für Redakteure finde: https://github.com/Craffft/css-style-selector-bundle
Da kannst du die CSS-Klassen im Backend verwalten (das CSS dazu musst du aber selber anlegen). Der Redakteur hat dann ein Dropdown, welches das CSS-Klassen Feld befüllt.
Da kannst du dann Namen wie "Abstand nach unten 5" erstellen, und es wird zu deinem ".Abstand-u-5".
Kannst Du noch einmal beschreiben wo Dir welche Funktion fehlt?Zitat:
Zitat von kubjo
Ganz allgemein ist mir bis auf ganz ganz wenige Ausnahmen jedes !important ein Dorn im Auge.
Klassen in der von Dir hier beschriebenen Form blähen m.E. den Code nur unnötig auf.
Ich bin mir im Moment auch nicht im Klaren darüber, wozu so etwas in 5-px-Schritten für jedes Theme notwendig sein sollte.
Wenn ich mein Theme erstelle habe ich für die einzelnen Elemente feste Abstände - höchstens mal 2 oder 3 verschiedene, ganz besonders wenn es um die Abstände oben und unten geht (Stichwort: verticaler Rhythmus). Die Abstände stehen in Bezug zur Schriftgröße und zum Viewport. Die Abstände, die für ein bestimmtes Theme festgelegt werden, wiederholen sich eigentlich überall in dem Theme. Wenn man mit einem Preprozessor (z.B. Sass) arbeitet kann man dafür Variable einsetzen und muss dann nur den Wert der Variablen verändern.
Auch in reinem css wäre das Setzen von Klassen bei jedem Element für mich kein Vorteil gegenüber Veränderungen im css und geschickter Ausnutzung von Vererbung und Kaskade.
Hi mlweb,
ja, da treffen wohl Welten aufeinander. Ich verwende / habe verwendet die Abstände sehr oft, wenn es um meine eigenen Seite geht. Bei Kundenprojekte, arbeite ich dann eher so wie Du, strukturiert und einmalig im CSS.
An Sass habe ich mich bis jetzt noch nicht ran getraut, ich weiß auch nicht, wie ich hier einen soften Einstieg machen kann.
Grüße aus Ludwigsburg
Jochen Kubik
Individuelle Abstände zu setzen sollte eigentlich nicht nötig sein. Aber man kann diese Felder per SQL ja in einem Rutsch leeren.
So in etwa könnte eine CSS aussehen:
PHP-Code:[class^="mod_"] {
margin-bottom: 2rem;
}
[class^="ce_"] {
margin-bottom: 1.5rem;
}
Wenn Du ccs kannst ist es eigentlich ganz einfach. Einfach mal installieren und testen.Zitat:
Zitat von kubjo
Wenn Du erst mal nichts installieren willst ist Sassmeister sehr zu empfehlen.
Dann einfach die Beispiele von der Sass-Seite mal durchgehen.
Ich verwende übrigends die scss-Syntax. Wenn ich auf die korrekte Tab-Einrückung streng achten müsste, würde ich wohl nur noch am Fehler suchen sein. :D
Außerdem besteht damit die Möglichkeit auch ganz normales css zu verwenden bzw. zu übernehmen und erst einmal nur Teile in scss zu schreiben.
Und ansonsten gibt es auch ein paar Tutorials im Netz.
Ich muss das leider auch nochmal hochholen ... ich habe gerade eine Seite von 3.5 auf 4.4 geupdated, die extrem umfangreich ist und wo die
Redakteure auch oftmals für sich mit Abstand oben / unten gearbeitet haben.
Das ist nun nach dem Update komplett alles weg .... die Seite läuft mit einem Oneo und verschachtelten Spalten / Layouts ... es sind ca. 6000 Zeilen aus der tl_content, die
da mit einem Abstand entweder oben oder unten daher kommen.
Die Idee das mit extra CSS Klassen zu lösen würde ich ja noch mittragen, wenn in der FE-Generierung die anhand der bisherigen Abstände schon behelfsmässig mit drin wären ... aber ich kann hier niemandem zumuten 6000 Content Elemente von Hand nachzupflegen ....
Wie kann ich das denn möglichst elegant lösen?
Gibt es eine globale Funktion, die sich "immer" den CSS-Klassennamen holt, an die man das "holen" der bestehenden Spacing-Werte mit ankoppeln kann? Ich will ja nicht die Felder wieder haben, sondern nur die Elemente, die bislang damit gearbeitet haben, nicht nochmal anfassen müssen - weil .... 6000
Danke sehr für Hinweise
Mark
Ich würde mir ein entsprechendes Skript schreiben (vorausgesetzt die Spacing-Spalte ist nicht gelöscht wurden), was daraus CSS-Klassen definiert. Ein Anfang wäre folgendes Skript:
Es würden Klassen mt-* sowie mb-* erstellt werden für die Abstände. In meinen Projekten findet dann noch ein Mapping auf vordefinierte Abstände ab (Also eine Angabe von 20 Px würde zu mt-1 werden).PHP-Code:<?php
$result = \Contao\Database::getInstance()->query('SELECT id,space,cssID FROM tl_content WHERE space != \'\'');
while ($result->next()) {
$spacing = \Contao\StringUtil::deserialize($result->space, true);
$cssId = \Contao\StringUtil::deserialize($result->cssID, true);
$classes = explode(' ', $cssId[1]);
if ($spacing[0] !== '') {
$classes[] = 'mt-' . $spacing[0];
}
if ($spacing[1] !== '') {
$classes[] = 'mb-' . $spacing[1];
}
$cssId[1] = implode(
' ',
array_filter(array_unique($classes))
);
\Contao\Database::getInstance()
->prepare('UPDATE tl_content %s WHERE id=?')
->set(['cssId' => serialize($cssId)])
->execute($result->id);
}
Disclaimer: Ungetestet und ohne Gewähr. Ohne Integration in Contao nicht lauffähig