33 geniale Contao-Erweiterungen, die du kennen solltest! - Contao Academy
Ergebnis 1 bis 9 von 9

Thema: Rocksolid Columns Reihenfolge umkehren

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

    Standard Rocksolid Columns Reihenfolge umkehren

    Hi Leute,
    ich nutze die Erweiterung Rocksolid Columns. In der großen Ansicht ,auf dem Desktop, habe ich zwei Spalten nebeneinander. Links Bilder, rechts Text. Wenn ich jetzt den Viewport kleiner mache rutscht die rechte Spalte unter die Linke, das ist das normale Verhalten. Ich hätte aber gerne, dass in diesem Falle es gerade anders rum ist, und der Text über den Bildern steht. Ich weiß aber nicht, an welcher CSS Schraube ich da drehen muß! Kann mir da jemand helfen?

    Grüße aus Ludwigsburg
    JK
    Geändert von kubjo (07.11.2019 um 08:40 Uhr)
    Wir sind alle Würmchen, nur glaube ich, daß ich ein Glühwürmchen bin.

  2. #2
    Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    4.121
    Partner-ID
    7421

    Standard

    Mit css-grid oder flexbox kannst Du die Reihenfolge prinzipiell anpassen.
    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.
    Immer dran denken: Contao-Check zum Testen der Servervoraussetzungen (Contao 2, Contao 3 und Contao 4) und zum Prüfen einer bestehenden Installation (bis Contao 3.5)

  3. #3
    Contao-Fan
    Registriert seit
    03.01.2012.
    Beiträge
    495

    Standard

    Mit den Rocksolid Columns sollte das normalerweise nicht möglich sein. Es sei denn man schreibt das gesamte CSS um. Ich denke, dass du eigenes CSS (Flexbox oder grid) und Markup verwenden musst.

    Für solche Fälle nutze ich zum Beispiel gerne die Rocksolid Custom Elements und gebe dem Bild und den Texten eigene CSS-Klassen. Wenn ich mit flexbox arbeite, ändere ich die Reihenfolge innerhalb eines Media Queries ganz einfach mit der CSS-Eigenschaft "order".

  4. #4
    Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    4.121
    Partner-ID
    7421

    Standard

    Ja stimmt, man muss bei den Rocksolid-Columns etwas am Template und am css Schrauben, damit das alles funktioniert.
    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.
    Immer dran denken: Contao-Check zum Testen der Servervoraussetzungen (Contao 2, Contao 3 und Contao 4) und zum Prüfen einer bestehenden Installation (bis Contao 3.5)

  5. #5
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Vienna, Austria
    Beiträge
    21.791
    Partner-ID
    10107
    User beschenken
    Wunschliste

    Standard

    Reicht da nicht einfach CSS Grid?

  6. #6
    Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    4.121
    Partner-ID
    7421

    Standard

    Ich habe das mal für ein Theme von Rocksolid gemacht. Soweit ich mich erinnere, stimmt die "Verschachtelung" fürs css-grid nicht. Außerdem wollte ich, dass die volle Funktionalität im Backend erhalten bleibt (also Auswahl der entsprechenden Anzahl von Columns für die Ausgabe durch einen Redakteur).

    Ich werde das mal übers Wochenende raussuchen und schauen, ob ich das allgemein zur Verfügung stellen kann. Damals ging es um die Anpassung eines konkreten Themes. Ich weiss jetzt ohne Testen nicht, ob meine Anpassungen auch dann richtig greifen, wenn nur die Erweiterung im Einsatz ist.
    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.
    Immer dran denken: Contao-Check zum Testen der Servervoraussetzungen (Contao 2, Contao 3 und Contao 4) und zum Prüfen einer bestehenden Installation (bis Contao 3.5)

  7. #7
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Vienna, Austria
    Beiträge
    21.791
    Partner-ID
    10107
    User beschenken
    Wunschliste

    Standard

    Die Verschachtelung ist ja einfach nur
    HTML-Code:
    <div>
      <div>
        <!-- spalte 1 -->
      </div>
      <div>
        <!-- spalte 2 -->
      </div>
      <div>
        <!-- spalte 3 -->
      </div>
    </div>
    Damit kann man nicht mit CSS Grid arbeiten? Bin was CSS Grid anbelangt leider kein experte.

    Mit flex könnte man die Reihenfolge aber auch einfach umdrehen.

  8. #8
    Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    4.121
    Partner-ID
    7421

    Standard

    Hab gerade gefunden wie ich die notwendige Templateanpassung mit einem Anstupser von @Ausi erstellt habe. https://github.com/madeyourday/conta...ent-2269822398
    Es geht dabei um die einzelnen Klassen für die Spaltenumschläge, damit auch alle Backendeinstellungen weiterhin so greifen, wie vorgesehen. Der Rest ist dann tatsächlich nur noch css.
    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.
    Immer dran denken: Contao-Check zum Testen der Servervoraussetzungen (Contao 2, Contao 3 und Contao 4) und zum Prüfen einer bestehenden Installation (bis Contao 3.5)

  9. #9
    Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    4.121
    Partner-ID
    7421

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    Damit kann man nicht mit CSS Grid arbeiten? Bin was CSS Grid anbelangt leider kein experte.

    Mit flex könnte man die Reihenfolge aber auch einfach umdrehen.
    Ja mit Flex könnte man auch arbeiten. Hatte ich auch geschrieben. Das eigentliche Problem war, dass ich die Einstellungen im Backend in Ihrer Funktionalität nicht außer Kraft setzen möchte.
    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.
    Immer dran denken: Contao-Check zum Testen der Servervoraussetzungen (Contao 2, Contao 3 und Contao 4) und zum Prüfen einer bestehenden Installation (bis Contao 3.5)

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
  •