Verwendung: Lässt sich eine Bildergalerie (mit Hyperlink pro Bild) ohne Abstand realisieren?

Juergen's Avatar

Juergen

06 Apr, 2021 01:24 PM

Produkt: Tao Contao
Contao-Version: 4.9.8
Browser und Browserversionen: alle

Versuch der Realisierung über Mehrspaltigkeit (6 Spalten), die nacheinander mit Bildern bestückt wurden. Dabei bleibt ein weißer Balken zwischen den Bildern (siehe Anhang). Welche Möglichkeiten habe ich, diese weißen Balken zu entfernen?

  1. Support Staff 1 Posted by RockSolid Theme... on 06 Apr, 2021 01:45 PM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Sie können dem Spaltenumschlag die CSS-Klasse no-gutter zuweisen und folgenden CSS-Code in die Datei files/tao/css/custom.css einfügen:

    .rs-columns.no-gutter {
        display: flex;
        flex-wrap: wrap;
    }
    .rs-columns.no-gutter > .rs-column {
        flex-grow: 1;
        margin-left: 0;
        margin-right: 0;
    }
    

    Damit wir Ihnen zielgerichteter weiterhelfen können, schicken Sie uns bitte einen Link zur betroffenen Seite.

  2. 2 Posted by jelingnau on 07 Apr, 2021 02:55 PM

    jelingnau's Avatar

    Vielen Dank - klappt wunderbar. Wie finde ich am einfachsten die bereits eingestellten CSS-Eigenschaften (wie .rs-columns)? Infos zu html5 bekomme ich im Frontend Helper, aber nichts zu css. Gibt es dazu eine weitergehende Dokumentation als die wenigen Zeilen im Helptext zu TAO?

    MfG
    Juergen Lingnau

  3. Support Staff 3 Posted by RockSolid Theme... on 07 Apr, 2021 03:06 PM

    RockSolid Themes's Avatar

    Den CSS-Code des Themes finden Sie in der Datei files/tao/css/main.css.

    Informationen zur Anpassung des CSS des Themes finden Sie auch im dritten Teil unseres Anpassungs-Tutorials: https://rocksolidthemes.com/de/contao/support/tutorials/elemente-anpassen-3

  4. 4 Posted by jelingnau on 09 Apr, 2021 10:07 AM

    jelingnau's Avatar

    Ich würde gerne das Dreispalten-Layout unsymmetrisch gestalten - links 25 %, Mitte 60 %, rechts 15 %
    Unter Moduls - Seitenlayout - ID8 lässt sich dies anscheinend durch Angabe der Prozentzahlen nicht realisieren. Mit custom.css bin ich auch nicht weitergekommen (habe zwar die linke Spalte verbreitern können, nicht aber den Abstand zwischen der linken Spalte und der Hauptspalte). Wie komme ich da weiter?

    Gruss
    J. Lingnau

  5. Support Staff 5 Posted by RockSolid Theme... on 09 Apr, 2021 01:33 PM

    RockSolid Themes's Avatar

    Eine solche dreispaltige Aufteilung lässt sich mit folgendem CSS-Code umsetzen:

    .tao-3-columns .sidebar {
        width: calc(25% - 3.7037%);
        margin-left: 3.7037%;
    }
    .tao-3-columns .sidebar.-right {
        left: 60%;
        width: calc(15% - 3.7037%);
        margin-right: calc(-15% + 3.7037%);
        margin-left: 0;
    }
    .tao-3-columns .main-content {
        width: calc(60% - 3.7037% - 3.7037%);
        margin-right: calc(15% + 3.7037%);
    }
    @media screen and (max-width:900px) {
        .tao-3-columns .main-content {
            width: auto;
            margin-right: 5.55556%;
        }
        .tao-3-columns .sidebar.sidebar {
            left: auto;
            width: auto;
            margin-left: 0;
            margin-right: 0;
        }
    }
    @media screen and (max-width:599px) {
        .tao-3-columns .sidebar.sidebar {
            margin-right: 5.55556%;
            margin-left: 5.55556%;
        }
    }
    
  6. 6 Posted by jelingnau on 09 Apr, 2021 02:47 PM

    jelingnau's Avatar

    Sieht genau so aus, wie ich mir das vorgestellt habe. Haben Sie vielen Dank - da muss man erst drauf kommen, und dann auch noch die Darstellung auf Handy und Tablet hinbekommen ...
    Gruss
    J. Lingnau

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Already uploaded files

  • tao_1.jpg 90.5 KB

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac