CSS

Hier die "columns"-CSS-Eigenschaften für alle Themes. Ich habe das Standard-Theme flatsite von Yellow für diese Homepage verwendet, "columns" funktioniert aber bei allen Themes. Zu finden ist das verwendete CSS unter > system > themes > assets.

Die "columns"-CSS-Schnipsel für alle Themes

↓ Kolumnen / Spalten: Nachfolgende CSS-Schnipsel sind der Kern von "columns", diese Zeilen werden nach der letzten Navigationszeile in das verwendete CSS (z.B. berlin.css) reinkopiert, siehe Bild.

.col2, .col3, .col4, .col6, .col8, .col9, .col10 {
    display:block;
    position:relative;
    float:left;
    padding:0;
    margin-right:0;
}
.col2 {
    width: 16.66667%;
}
.col3 {
    width: 25%;
}
.col4 {
    width: 33.3333%;
}
.col6 {
    width: 50%;
}
.col8 {
    width: 66.66667%;
}
.col9 {
  width: 75%;
}
.col10 {
  width: 83.33333%;
}

↓ Clear: Gleich danach ein CSS-Schnipsel zum aufheben der float-Anweisungen, ohne diese und dem entsprechenden html-Tag funktioniert "columns" nicht korrekt:

.clear {
    clear:both;
}

↓ Abstand zwischen den Spalten: Die einzelnen Spalten haben keinen Abstand (Gutter) zueinander, so dass Text bei nebeneinanderstehenden Blocks fast ineinander läuft. Ein Innenabstand (padding) würde die Blocks untereinander darstellen, was natürlich keinen Sinn macht. Das bedeutet, dass der Innenabstand ausschließlich beim Inhalt der Blocks erfolgen kann.

h1, h2, h3, h4, h5, h6, p, blockquote, pre, code { padding:10px; }

↓ Smartphone-Breakpoint: Im unteren Bereich von z. B. berlin.css (je nachdem welches Theme verwendet wird), den Schnipsel für kleine Bildschirme wie Smartphones reinkopieren:

@media screen and (max-width:45em) {
    .col2, .col3, .col4, .col6, .col8, .col9, .col10 {float:none; width:100%;}
}