Contao-Camp 2024
Ergebnis 1 bis 12 von 12

Thema: Abstand davor und dahinter - weg!

  1. #1
    Alter Contao-Hase Avatar von kubjo
    Registriert seit
    11.01.2011.
    Ort
    Ludwigsburg
    Beiträge
    1.380

    Standard Abstand davor und dahinter - weg!

    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
    Wir sind alle Würmchen, nur glaube ich, daß ich ein Glühwürmchen bin.

  2. #2
    Contao-Urgestein
    Registriert seit
    29.10.2009.
    Ort
    Magdeburg
    Beiträge
    2.020
    Partner-ID
    626
    User beschenken
    Wunschliste

    Standard

    Ja, zwar nicht 100% vollständig, aber vorhanden: https://github.com/contao/core-bundl...ter/UPGRADE.md

  3. #3
    Alter Contao-Hase Avatar von kubjo
    Registriert seit
    11.01.2011.
    Ort
    Ludwigsburg
    Beiträge
    1.380

    Standard

    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:

    Code:
    .Abstand-o-5  {margin-top:5px!important;}
    ...
    .Abstand-u-5  {margin-bottom:5px!important;}
    ...
    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.
    Ist diese Vorgehensweise OK, oder gibt es etwas besseres, was ich nicht kenne?


    Grüße aus Ludwigsburg
    Jochen Kubik
    Wir sind alle Würmchen, nur glaube ich, daß ich ein Glühwürmchen bin.

  4. #4
    Contao-Fan
    Registriert seit
    05.11.2009.
    Ort
    Liebschützberg (Sachsen)
    Beiträge
    526

    Standard

    Hallo,

    falls Du Bootstrap verwendest, gibt es ab Version 4 jetzt Abstandsklassen Suchwort Spacing.

    https://getbootstrap.com/docs/4.0/utilities/spacing/

    Steffen Winde

  5. #5
    Alter Contao-Hase Avatar von kubjo
    Registriert seit
    11.01.2011.
    Ort
    Ludwigsburg
    Beiträge
    1.380

    Standard

    Zitat Zitat von swinde Beitrag anzeigen
    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,

    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
    Wir sind alle Würmchen, nur glaube ich, daß ich ein Glühwürmchen bin.

  6. #6
    Contao-Nutzer
    Registriert seit
    14.03.2012.
    Ort
    Berlin
    Beiträge
    225

    Standard

    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".

  7. #7
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    6.715
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von kubjo Beitrag anzeigen

    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:

    Code:
    .Abstand-o-5  {margin-top:5px!important;}
    ...
    .Abstand-u-5  {margin-bottom:5px!important;}
    ...
    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.
    Kannst Du noch einmal beschreiben wo Dir welche Funktion fehlt?

    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.
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  8. #8
    Alter Contao-Hase Avatar von kubjo
    Registriert seit
    11.01.2011.
    Ort
    Ludwigsburg
    Beiträge
    1.380

    Standard

    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
    Wir sind alle Würmchen, nur glaube ich, daß ich ein Glühwürmchen bin.

  9. #9
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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-bottom2rem;
    }
    [class^=
    "ce_"] {
      
    margin-bottom1.5rem;

    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  10. #10
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    6.715
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von kubjo Beitrag anzeigen
    An Sass habe ich mich bis jetzt noch nicht ran getraut, ich weiß auch nicht, wie ich hier einen soften Einstieg machen kann.
    Wenn Du ccs kannst ist es eigentlich ganz einfach. Einfach mal installieren und testen.
    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.
    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 habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  11. #11
    Alter Contao-Hase
    Registriert seit
    28.09.2010.
    Beiträge
    1.368

    Standard

    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

  12. #12
    Contao-Urgestein
    Registriert seit
    29.10.2009.
    Ort
    Magdeburg
    Beiträge
    2.020
    Partner-ID
    626
    User beschenken
    Wunschliste

    Standard

    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:

    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->spacetrue);
        
    $cssId   = \Contao\StringUtil::deserialize($result->cssIDtrue);
        
    $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);
    }
    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).

    Disclaimer: Ungetestet und ohne Gewähr. Ohne Integration in Contao nicht lauffähig

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •