Anpassen einer Variante des mehrspaltigen Inhaltscontainers über CSS-Only

Nutzbar ab: Version 008.000.207.000

20. Jul 2017

CSS-Only Varianten von Weblics® können Sie über CSS individuell anpassen

Mit den Weblics® stehen Ihnen zahlreiche fertige Anwendungen zur Verfügung, die Sie bei Bedarf individuell anpassen können.

Beispiel 1: Mehrspaltiger Inhaltscontainer für Kacheloptik bei Bildern

Am Beispiel des "mehrspaltigen Inhaltscontainers" mit Spaltenvarianten 70/30 und 33/33/33 demonstrieren wir Ihnen, wie Sie diese Containervariante anpassen können (Stand: Juli 2017). Der Container soll dafür verwendet werden, um innerhalb der Spalten Bilder mit Kacheloptik zu platzieren.

Ansicht in der Seitenbearbeitung

66/33 und 33/33/33 Container mit geringem Aussenabstand (Editoransicht)zoom
66/33 und 33/33/33 Container mit geringem Aussenabstand (Editoransicht)

Webseitenansicht

66/33 und 33/33/33 Container mit geringem Aussenabstand (Seitenansicht)zoom
66/33 und 33/33/33 Container mit geringem Aussenabstand (Seitenansicht)
 

Beispiel: Auszug aus der design.css zum mehrspaltigen Inhaltscontainer 66 / 33 und 33 / 33 / 33 mit geringem Abstand (für Kacheloptik)

/* ... */
/*@wCssFragment{class:elementContainerStandardColumns;variant:6633less;caption-en:66 / 33;caption:Zweispaltig 66 / 33, wenig Abstand;contentgroups:;}*/
.elementContainerStandardColumns_var6633less                             {-w-number-columns:2;margin-bottom:1px;}
.elementContainerStandardColumns_var6633less > .col1                     {float:left;width:66.66%;}
.elementContainerStandardColumns_var6633less > .col2                     {float:left;width:33.33%;}
.elementContainerStandardColumns_var6633less > .col1 > div               {margin-right:1px;}
.elementContainerStandardColumns_var6633less > .col2 > div               {margin-left:1px;}
.elementContainerStandardColumns_var6633less .elementPicture             {margin-bottom:1px}

/*@wCssFragment{class:elementContainerStandardColumns;variant:333333less;caption:Dreispaltig 33 / 33 / 33, wenig Abstand;caption-en:33 / 33 / 33;contentgroups:;}*/
.elementContainerStandardColumns_var333333less                           {-w-number-columns:3;margin-bottom:1px;}
.elementContainerStandardColumns_var333333less > .col1                   {float:left;width:33.33%;}
.elementContainerStandardColumns_var333333less > .col2                   {float:left;width:33.33%;}
.elementContainerStandardColumns_var333333less > .col3                   {float:left;width:33.33%;}
.elementContainerStandardColumns_var333333less > .col1 > div             {margin-right:1px;}
.elementContainerStandardColumns_var333333less > .col2 > div             {margin-left:1px;margin-right:1px;}
.elementContainerStandardColumns_var333333less > .col3 > div             {margin-left:1px;}
.elementContainerStandardColumns_var333333less .elementPicture           {margin-bottom:1px}

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

  .elementContainerStandardColumns_var6633less          {margin-bottom:20px;}
  .elementContainerStandardColumns_var6633less > .col1,
  .elementContainerStandardColumns_var6633less > .col2,
  .elementContainerStandardColumns_var6633less > .col3  {width:100%;margin-bottom:20px;}
  .elementContainerStandardColumns_var6633less .elementPicture           {margin-bottom:20px}

  .elementContainerStandardColumns_var333333less         {margin-bottom:20px;}
  .elementContainerStandardColumns_var333333less > .col1,
  .elementContainerStandardColumns_var333333less > .col2,
  .elementContainerStandardColumns_var333333less > .col3 {width:100%;margin-bottom:20px;}
  .elementContainerStandardColumns_var333333less .elementPicture           {margin-bottom:20px}
}

/* ... */

In den CSS-Only-Varianten für die Spalten wurde das margin jeweils auf 1px gesetzt, auch für den Abstand unterhalb des Containers. So können Sie zwei mehrspaltige Inhaltscontainer (66 / 33 und 33 / 33 / 33) untereinander mit wenig Abstand platzieren.

Fertig ist die individuelle Container-Variante über reine CSS-Anpassung!

Ähnliche Seiten

Entwicklerbereich Weblication® CMS - © Scholl Communications AG