CMSimple Tests und Demo

Contentboxen

contentbox right

Kirche in der AbenddämmerungDas ist eine rechte Contentbox. Solche Boxen werden oft als Aufmacher (Teaser) verwendet.

Wenn man in der Lage ist, ein wenig im Quelltext zu arbeiten, kann man diese flexiblen Contentboxen erstellen. Unterhalb von ca. 760px horizontaler Bildschirmauflösung floaten sie untereinander, den Umschaltpunkt kann man im CSS-Code ändern.

contentbox left

Oberbaumbrücke in BerlinDas ist eine linke Contentbox. Solche Boxen werden oft als Aufmacher (Teaser) verwendet.

Der CSS-Code für die Contentboxen ist in den neueren Templates von ge-webdesign.de bereits enthalten. Dieser CSS-Code ist für jedes Template ein wenig anders, weil er natürlich zum Template Design passen muss.

 

contentbox fullsize

Berliner SpatzenDas ist eine Contentbox in voller Breite. Solche Boxen werden oft als Aufmacher (Teaser) verwendet. Sie können aber auch aus rein gestalterischen Gründen eingesetzt werden, z. B. um bestimmte Inhalte hervorzuheben oder zu bündeln.

 

Den html-Code kann man einfach in die Quelltextansicht des Editors kopieren.

Hier der html-Code:

<div class="tplge_contentboxleft">
<h2 class="tplge_headlineContentBox">contentbox left</h2>
<p>Das ist eine linke Contentbox. Contentboxen werden in der Regel als Aufmacher (Teaser) verwendet.</p>
</div>
<div class="tplge_contentboxright">
<h2 class="tplge_headlineContentBox">contentbox right</h2>
<p>Das ist eine rechte Contentbox. Contentboxen werden in der Regel als Aufmacher (Teaser) verwendet.</p>
</div>
<div class="tplge_contentboxesClear">&nbsp;</div>
<div class="tplge_contentboxfullsize">
<h2 class="tplge_headlineContentBox">contentbox fullsize</h2>
<p>Das ist eine Contentbox in voller Breite. Contentboxen werden in der Regel als Aufmacher (Teaser) verwendet. Sie können aber auch aus rein gestalterischen Gründen eingesetzt werden, z. B. um bestimmte Inhalte hervorzuheben.</p>
</div>


Den CSS-Code kann man einfach in die stylesheet.css des Templates kopieren. In den neueren Templates sind die notwendigen CSS-Klassen bereits enthalten und auf das Template abgestimmt.

Hier der dazugehörige CSS-Code:

/* Contentboxen */
div.tplge_contentboxleft {
clear: both;
background: #eee;
width: 47%;
min-height: 80px;
float: left;
box-sizing: border-box;
border: 3px solid #567;
border-radius: 5px;
padding: 10px 16px;
margin: 16px 3% 16px 0;
}

div.tplge_contentboxright {
background: #eee;
width: 47%;
min-height: 80px;
float: right;
box-sizing: border-box;
border: 3px solid #567;
border-radius: 5px;
padding: 10px 16px;
margin: 16px 0 16px 3%;
}

div.tplge_contentboxfullsize {
background: #eee;
width: 100%;
min-height: 80px;
box-sizing: border-box;
border: 3px solid #567;
border-radius: 5px;
padding: 10px 16px;
margin: 16px 0;
}

.tplge_headlineContentBox {
background: #567;
color: #fff;
padding: 10px 16px;
margin: -10px -16px 16px -16px;
}

div.tplge_contentboxesClear {
clear: both;
height: 1px;
overflow: hidden;
}

@media (max-width: 760px) {
div.tplge_contentboxleft {width: 100%;}
div.tplge_contentboxright {width: 100%;}
}
nach oben