Theme erstellen

Anmelden

|

Rocksolid Columns: Spaltenabstand entfernen

Für ein Kundenprojekt benötigte ich die Möglichkeit die Rocksolid Columns (im Theme Tao / Oneo) so anzupassen, dass die Spalten keine Abstände besitzen. Dafür habe ich das margin-right auf 0px gesetzt und lassen die width des Grids neu berechnen.

Um ein paar Byte und Platz zu sparen, kannst du natürlich die Definitionen von large, medium und small zusammensetzen, da sie auf allen Geräten nun dieselbe Breite erhalten. An der stelle habe darauf verzichtet, damit diese Vorlage flexibel bleibt und auch für andere Zwecke umgebaut werden kann.

CSS Datei einbinden, um Spaltenabstände zu verhindern

So kannst du die CSS-Datei einbinden:

  1. Kopiere meinen Code
  2. Lade ihn in den Editor deiner Wahl und speichere die Datei als noGapColumn.css
    Alternativ: erstelle direkt eine CSS-Datei in deiner Contao Instanz
  3. Lade die Datei in die Dateiverwaltung deiner Contao Instanz
  4. Binde die Datei unter Themes » Seitenlayouts » Externe Stylesheets ein
  5. Füge in den Spaltenumschlag (Umschlag Anfang) Elementen, die CSS-Klasse noGap ein
  6. CWE abonnieren 😏
/* large */

.noGap .rs-column {
  margin-right: 0px ;
}

.noGap .rs-column.-large-col-2-1,
.tao-no-sidebar .noGap .rs-column.-large-col-2-1,
.page-footer .noGap .rs-column.-large-col-2-1 {
	width: calc(100% / 2) ;
}
.noGap .rs-column.-large-col-3-1,
.tao-no-sidebar .noGap .rs-column.-large-col-3-1,
.page-footer .noGap .rs-column.-large-col-3-1 {
	width: calc(100% / 3) ;
}
.noGap .rs-column.-large-col-3-2,
.tao-no-sidebar .noGap .rs-column.-large-col-3-2,
.page-footer .noGap .rs-column.-large-col-3-2 {
	width: calc(100% / 3 * 2) ;
}
.noGap .rs-column.-large-col-4-1,
.tao-no-sidebar .noGap .rs-column.-large-col-4-1,
.page-footer .noGap .rs-column.-large-col-4-1 {
	width: calc(100% / 4) ;
}
.noGap .rs-column.-large-col-4-2,
.tao-no-sidebar .noGap .rs-column.-large-col-4-2,
.page-footer .noGap .rs-column.-large-col-4-2 {
	width: calc(100% / 4 * 2) ;
}
.noGap .rs-column.-large-col-4-3,
.tao-no-sidebar .noGap .rs-column.-large-col-4-3,
.page-footer .noGap .rs-column.-large-col-4-3 {
	width: calc(100% / 4 * 3) ;
}
.noGap .rs-column.-large-col-5-1,
.tao-no-sidebar .noGap .rs-column.-large-col-5-1,
.page-footer .noGap .rs-column.-large-col-5-1 {
	width: calc(100% / 5 * 1) ;
}
.noGap .rs-column.-large-col-5-2,
.tao-no-sidebar .noGap .rs-column.-large-col-5-2,
.page-footer .noGap .rs-column.-large-col-5-2 {
	width: calc(100% / 5 * 2) ;
}
.noGap .rs-column.-large-col-5-3,
.tao-no-sidebar .noGap .rs-column.-large-col-5-3,
.page-footer .noGap .rs-column.-large-col-5-3 {
	width: calc(100% / 5 * 3) ;
}
.noGap .rs-column.-large-col-5-4,
.tao-no-sidebar .noGap .rs-column.-large-col-5-4,
.page-footer .noGap .rs-column.-large-col-5-4 {
	width: calc(100% / 5 * 4) ;
}
.noGap .rs-column.-large-col-6-1,
.tao-no-sidebar .noGap .rs-column.-large-col-6-1,
.page-footer .noGap .rs-column.-large-col-6-1 {
	width: calc(100% / 6 * 1) ;
}
.noGap .rs-column.-large-col-6-2,
.tao-no-sidebar .noGap .rs-column.-large-col-6-2,
.page-footer .noGap .rs-column.-large-col-6-2 {
	width: calc(100% / 6 * 2) ;
}
.noGap .rs-column.-large-col-6-3,
.tao-no-sidebar .noGap .rs-column.-large-col-6-3,
.page-footer .noGap .rs-column.-large-col-6-3 {
	width: calc(100% / 6 * 3) ;
}
.noGap .rs-column.-large-col-6-4,
.tao-no-sidebar .noGap .rs-column.-large-col-6-4,
.page-footer .noGap .rs-column.-large-col-6-4 {
	width: calc(100% / 6 * 4) ;
}
.noGap .rs-column.-large-col-6-5,
.tao-no-sidebar .noGap .rs-column.-large-col-6-5,
.page-footer .noGap .rs-column.-large-col-6-5 {
	width: calc(100% / 6 * 5) ;
}
.noGap .rs-column.-large-col-7-1,
.tao-no-sidebar .noGap .rs-column.-large-col-7-1,
.page-footer .noGap .rs-column.-large-col-7-1 {
	width: calc(100% / 7) ;
}
.noGap .rs-column.-large-col-7-2,
.tao-no-sidebar .noGap .rs-column.-large-col-7-2,
.page-footer .noGap .rs-column.-large-col-7-2 {
	width: calc(100% / 7 * 2) ;
}
.noGap .rs-column.-large-col-7-3,
.tao-no-sidebar .noGap .rs-column.-large-col-7-3,
.page-footer .noGap .rs-column.-large-col-7-3 {
	width: calc(100% / 7 * 3) ;
}
.noGap .rs-column.-large-col-7-4,
.tao-no-sidebar .noGap .rs-column.-large-col-7-4,
.page-footer .noGap .rs-column.-large-col-7-4 {
	width: calc(100% / 7 * 4) ;
}
.noGap .rs-column.-large-col-7-5,
.tao-no-sidebar .noGap .rs-column.-large-col-7-5,
.page-footer .noGap .rs-column.-large-col-7-5 {
	width: calc(100% / 7 * 5) ;
}
.noGap .rs-column.-large-col-7-6,
.tao-no-sidebar .noGap .rs-column.-large-col-7-6,
.page-footer .noGap .rs-column.-large-col-7-6 {
	width: calc(100% / 7 * 6) ;
}

/* medium */ 
@media screen and (max-width: 900px) {
	
	.noGap .rs-column.-medium-col-1-1,
	.tao-no-sidebar .noGap .rs-column.-medium-col-1-1,
	.page-footer .noGap .rs-column.-medium-col-1-1 {
		width: 100% ;
	}	
	
	.noGap .rs-column.-medium-col-2-1,
	.tao-no-sidebar .noGap .rs-column.-medium-col-2-1,
	.page-footer .noGap .rs-column.-medium-col-2-1 {
		width: calc(100% / 2) ;
	}
	.noGap .rs-column.-medium-col-2-2,
	.tao-no-sidebar .noGap .rs-column.-medium-col-2-2,
	.page-footer .noGap .rs-column.-medium-col-2-2 {
		width: 100% ;
	}	
	
	.noGap .rs-column.-medium-col-3-1,
	.tao-no-sidebar .noGap .rs-column.-medium-col-3-1,
	.page-footer .noGap .rs-column.-medium-col-3-1 {
		width: calc(100% / 3) ;
	}
	.noGap .rs-column.-medium-col-3-2,
	.tao-no-sidebar .noGap .rs-column.-medium-col-3-2,
	.page-footer .noGap .rs-column.-medium-col-3-2 {
		width: calc(100% / 3 * 2) ;
	}
	.noGap .rs-column.-medium-col-3-3,
	.tao-no-sidebar .noGap .rs-column.-medium-col-3-3,
	.page-footer .noGap .rs-column.-medium-col-3-3 {
		width: 100% ;
	}
	
	.noGap .rs-column.-medium-col-4-1,
	.tao-no-sidebar .noGap .rs-column.-medium-col-4-1,
	.page-footer .noGap .rs-column.-medium-col-4-1 {
		width: calc(100% / 4) ;
	}
	.noGap .rs-column.-medium-col-4-2,
	.tao-no-sidebar .noGap .rs-column.-medium-col-4-2,
	.page-footer .noGap .rs-column.-medium-col-4-2 {
		width: calc(100% / 4 * 2) ;
	}
	.noGap .rs-column.-medium-col-4-3,
	.tao-no-sidebar .noGap .rs-column.-medium-col-4-3,
	.page-footer .noGap .rs-column.-medium-col-4-3 {
		width: calc(100% / 4 * 3) ;
	}
	.noGap .rs-column.-medium-col-4-4,
	.tao-no-sidebar .noGap .rs-column.-medium-col-4-4,
	.page-footer .noGap .rs-column.-medium-col-4-4 {
		width: 100% ;
	}
	
	.noGap .rs-column.-medium-col-5-1,
	.tao-no-sidebar .noGap .rs-column.-medium-col-5-1,
	.page-footer .noGap .rs-column.-medium-col-5-1 {
		width: calc(100% / 5 * 1) ;
	}
	.noGap .rs-column.-medium-col-5-2,
	.tao-no-sidebar .noGap .rs-column.-medium-col-5-2,
	.page-footer .noGap .rs-column.-medium-col-5-2 {
		width: calc(100% / 5 * 2) ;
	}
	.noGap .rs-column.-medium-col-5-3,
	.tao-no-sidebar .noGap .rs-column.-medium-col-5-3,
	.page-footer .noGap .rs-column.-medium-col-5-3 {
		width: 57.5%;
	}
	.noGap .rs-column.-medium-col-5-4,
	.tao-no-sidebar .noGap .rs-column.-medium-col-5-4,
	.page-footer .noGap .rs-column.-medium-col-5-4 {
		width: calc(100% / 5 * 4) ;
	}
	.noGap .rs-column.-medium-col-5-5,
	.tao-no-sidebar .noGap .rs-column.-medium-col-5-5,
	.page-footer .noGap .rs-column.-medium-col-5-5 {
		width: 100% ;
	}
	
	.noGap .rs-column.-medium-col-6-1,
	.tao-no-sidebar .noGap .rs-column.-medium-col-6-1,
	.page-footer .noGap .rs-column.-medium-col-6-1 {
		width: calc(100% / 6 * 1) ;
	}
	.noGap .rs-column.-medium-col-6-2,
	.tao-no-sidebar .noGap .rs-column.-medium-col-6-2,
	.page-footer .noGap .rs-column.-medium-col-6-2 {
		width: calc(100% / 6 * 2) ;
	}
	.noGap .rs-column.-medium-col-6-3,
	.tao-no-sidebar .noGap .rs-column.-medium-col-6-3,
	.page-footer .noGap .rs-column.-medium-col-6-3 {
		width: calc(100% / 6 * 3) ;
	}
	.noGap .rs-column.-medium-col-6-4,
	.tao-no-sidebar .noGap .rs-column.-medium-col-6-4,
	.page-footer .noGap .rs-column.-medium-col-6-4 {
		width: calc(100% / 6 * 4) ;
	}
	.noGap .rs-column.-medium-col-6-5,
	.tao-no-sidebar .noGap .rs-column.-medium-col-6-5,
	.page-footer .noGap .rs-column.-medium-col-6-5 {
		width: calc(100% / 6 * 5) ;
	}
	.noGap .rs-column.-medium-col-6-6,
	.tao-no-sidebar .noGap .rs-column.-medium-col-6-6,
	.page-footer .noGap .rs-column.-medium-col-6-6 {
		width: 100% ;
	}
	
	.noGap .rs-column.-medium-col-7-1,
	.tao-no-sidebar .noGap .rs-column.-medium-col-7-1,
	.page-footer .noGap .rs-column.-medium-col-7-1 {
		width: calc(100% / 7) ;
	}
	.noGap .rs-column.-medium-col-7-2,
	.tao-no-sidebar .noGap .rs-column.-medium-col-7-2,
	.page-footer .noGap .rs-column.-medium-col-7-2 {
		width: calc(100% / 7 * 2) ;
	}
	.noGap .rs-column.-medium-col-7-3,
	.tao-no-sidebar .noGap .rs-column.-medium-col-7-3,
	.page-footer .noGap .rs-column.-medium-col-7-3 {
		width: calc(100% / 7 * 3) ;
	}
	.noGap .rs-column.-medium-col-7-4,
	.tao-no-sidebar .noGap .rs-column.-medium-col-7-4,
	.page-footer .noGap .rs-column.-medium-col-7-4 {
		width: calc(100% / 7 * 4) ;
	}
	.noGap .rs-column.-medium-col-7-5,
	.tao-no-sidebar .noGap .rs-column.-medium-col-7-5,
	.page-footer .noGap .rs-column.-medium-col-7-5 {
		width: calc(100% / 7 * 5) ;
	}
	.noGap .rs-column.-medium-col-7-6,
	.tao-no-sidebar .noGap .rs-column.-medium-col-7-6,
	.page-footer .noGap .rs-column.-medium-col-7-6 {
		width: calc(100% / 7 * 6) ;
	}
	.noGap .rs-column.-medium-col-7-7,
	.tao-no-sidebar .noGap .rs-column.-medium-col-7-7,
	.page-footer .noGap .rs-column.-medium-col-7-7 {
		width: 100% ;
	}
}

/* small */

@media screen and (max-width: 599px) {

	.noGap .rs-column.-small-col-1-1,
	.tao-no-sidebar .noGap .rs-column.-small-col-1-1,
	.page-footer .noGap .rs-column.-small-col-1-1 {
		width: 100% ;
	}	
	
	.noGap .rs-column.-small-col-2-1,
	.tao-no-sidebar .noGap .rs-column.-small-col-2-1,
	.page-footer .noGap .rs-column.-small-col-2-1 {
		width: calc(100% / 2) ;
	}
	.noGap .rs-column.-small-col-2-2,
	.tao-no-sidebar .noGap .rs-column.-small-col-2-2,
	.page-footer .noGap .rs-column.-small-col-2-2 {
		width: 100% ;
	}	
	
	.noGap .rs-column.-small-col-3-1,
	.tao-no-sidebar .noGap .rs-column.-small-col-3-1,
	.page-footer .noGap .rs-column.-small-col-3-1 {
		width: calc(100% / 3) ;
	}
	.noGap .rs-column.-small-col-3-2,
	.tao-no-sidebar .noGap .rs-column.-small-col-3-2,
	.page-footer .noGap .rs-column.-small-col-3-2 {
		width: calc(100% / 3 * 2) ;
	}
	.noGap .rs-column.-small-col-3-3,
	.tao-no-sidebar .noGap .rs-column.-small-col-3-3,
	.page-footer .noGap .rs-column.-small-col-3-3 {
		width: 100% ;
	}
	
	.noGap .rs-column.-small-col-4-1,
	.tao-no-sidebar .noGap .rs-column.-small-col-4-1,
	.page-footer .noGap .rs-column.-small-col-4-1 {
		width: calc(100% / 4) ;
	}
	.noGap .rs-column.-small-col-4-2,
	.tao-no-sidebar .noGap .rs-column.-small-col-4-2,
	.page-footer .noGap .rs-column.-small-col-4-2 {
		width: calc(100% / 4 * 2) ;
	}
	.noGap .rs-column.-small-col-4-3,
	.tao-no-sidebar .noGap .rs-column.-small-col-4-3,
	.page-footer .noGap .rs-column.-small-col-4-3 {
		width: calc(100% / 4 * 3) ;
	}
	.noGap .rs-column.-small-col-4-4,
	.tao-no-sidebar .noGap .rs-column.-small-col-4-4,
	.page-footer .noGap .rs-column.-small-col-4-4 {
		width: 100% ;
	}
	
	.noGap .rs-column.-small-col-5-1,
	.tao-no-sidebar .noGap .rs-column.-small-col-5-1,
	.page-footer .noGap .rs-column.-small-col-5-1 {
		width: calc(100% / 5 * 1) ;
	}
	.noGap .rs-column.-small-col-5-2,
	.tao-no-sidebar .noGap .rs-column.-small-col-5-2,
	.page-footer .noGap .rs-column.-small-col-5-2 {
		width: calc(100% / 5 * 2) ;
	}
	.noGap .rs-column.-small-col-5-3,
	.tao-no-sidebar .noGap .rs-column.-small-col-5-3,
	.page-footer .noGap .rs-column.-small-col-5-3 {
		width: 57.5%;
	}
	.noGap .rs-column.-small-col-5-4,
	.tao-no-sidebar .noGap .rs-column.-small-col-5-4,
	.page-footer .noGap .rs-column.-small-col-5-4 {
		width: calc(100% / 5 * 4) ;
	}
	.noGap .rs-column.-small-col-5-5,
	.tao-no-sidebar .noGap .rs-column.-small-col-5-5,
	.page-footer .noGap .rs-column.-small-col-5-5 {
		width: 100% ;
	}
	
	.noGap .rs-column.-small-col-6-1,
	.tao-no-sidebar .noGap .rs-column.-small-col-6-1,
	.page-footer .noGap .rs-column.-small-col-6-1 {
		width: calc(100% / 6 * 1) ;
	}
	.noGap .rs-column.-small-col-6-2,
	.tao-no-sidebar .noGap .rs-column.-small-col-6-2,
	.page-footer .noGap .rs-column.-small-col-6-2 {
		width: calc(100% / 6 * 2) ;
	}
	.noGap .rs-column.-small-col-6-3,
	.tao-no-sidebar .noGap .rs-column.-small-col-6-3,
	.page-footer .noGap .rs-column.-small-col-6-3 {
		width: calc(100% / 6 * 3) ;
	}
	.noGap .rs-column.-small-col-6-4,
	.tao-no-sidebar .noGap .rs-column.-small-col-6-4,
	.page-footer .noGap .rs-column.-small-col-6-4 {
		width: calc(100% / 6 * 4) ;
	}
	.noGap .rs-column.-small-col-6-5,
	.tao-no-sidebar .noGap .rs-column.-small-col-6-5,
	.page-footer .noGap .rs-column.-small-col-6-5 {
		width: calc(100% / 6 * 5) ;
	}
	.noGap .rs-column.-small-col-6-6,
	.tao-no-sidebar .noGap .rs-column.-small-col-6-6,
	.page-footer .noGap .rs-column.-small-col-6-6 {
		width: 100% ;
	}
	
	.noGap .rs-column.-small-col-7-1,
	.tao-no-sidebar .noGap .rs-column.-small-col-7-1,
	.page-footer .noGap .rs-column.-small-col-7-1 {
		width: calc(100% / 7) ;
	}
	.noGap .rs-column.-small-col-7-2,
	.tao-no-sidebar .noGap .rs-column.-small-col-7-2,
	.page-footer .noGap .rs-column.-small-col-7-2 {
		width: calc(100% / 7 * 2) ;
	}
	.noGap .rs-column.-small-col-7-3,
	.tao-no-sidebar .noGap .rs-column.-small-col-7-3,
	.page-footer .noGap .rs-column.-small-col-7-3 {
		width: calc(100% / 7 * 3) ;
	}
	.noGap .rs-column.-small-col-7-4,
	.tao-no-sidebar .noGap .rs-column.-small-col-7-4,
	.page-footer .noGap .rs-column.-small-col-7-4 {
		width: calc(100% / 7 * 4) ;
	}
	.noGap .rs-column.-small-col-7-5,
	.tao-no-sidebar .noGap .rs-column.-small-col-7-5,
	.page-footer .noGap .rs-column.-small-col-7-5 {
		width: calc(100% / 7 * 5) ;
	}
	.noGap .rs-column.-small-col-7-6,
	.tao-no-sidebar .noGap .rs-column.-small-col-7-6,
	.page-footer .noGap .rs-column.-small-col-7-6 {
		width: calc(100% / 7 * 6) ;
	}
	.noGap .rs-column.-small-col-7-7,
	.tao-no-sidebar .noGap .rs-column.-small-col-7-7,
	.page-footer .noGap .rs-column.-small-col-7-7 {
		width: 100% ;
	}
	
}

Zurück

Ich beschäftige mich seit Contao 3 mit dem CMS. Auf meinem Blog und auf YouTube findest du einige kostenlose Beiträge und Videos. Gerne unterstütze ich dich bei deinen Projekten, schau gern auf meiner Agentur-Website vorbei.