LightDesign

zum Download »

Contentboxen

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

Mehr zum Thema Contentboxen erfahren Sie hier »

contentbox left

Boot in BerlinDas ist die linke Contentbox.

Contentboxen werden in der Regel als Aufmacher (Teaser) verwendet.

contentbox right

Hausboot PenichetteDas ist die rechte Contentbox.

Contentboxen werden in der Regel als Aufmacher (Teaser) verwendet.

contentbox fullsize

PalmeDas 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.

 

Newsboxen

Die Newsboxen sollten mit einer h1-h4 beginnen, damit sie so aussehen wie auf dieser Demoseite.

Überschriften

HolzfigurenIn CMSimple 5 können, wenn H1only_pagesplitting aktiviert ist, alle Überschriften (h1-h6) auf CMSimple Seiten zur semantischen Gliederung des Seiteninhalts verwendet werden:

Überschrift h1

Überschrift h2

Überschrift h3

Überschrift h4

Überschrift h5
Überschrift h6

Zitatblock

"Wer Visionen hat, sollte zum Arzt gehen" 

(Helmut Schmidt  im Bundestagswahlkampf 1980)

Infobox

Das ist eine speziell gestaltete Box, die Klasse ist tplge_box01. Diese CSS Klasse kann allen Elementen zugeordnet werden, z. B. Absätzen (<p class="tplge_box01">) oder Bereichen (<div class="tplge_box01">).

Codebox

<div>
<img class="tplge_right_border" src="./userfiles/images/bild5.jpg" alt="">
</div>

CSS-Klassen für Bilder:

  • img.tplge_border
  • img.tplge_left_border
  • img.tplge_right_border (siehe Bild oben rechts)
  • img.tplge_noborder
  • img.tplge_left_noborder
  • img.tplge_right_noborder
  • img.tplge_left
  • img.tplge_right
  • img.tplge_centered

Geordnete Liste

  1. Langer Listenpunkt, der einen Zeilenumbruch verursacht, um die Zeilenhöhe innerhalb eines Listenpunktes testen und einstellen zu können.
  2. Listenpunkt
  3. Listenpunkt
  4. Listenpunkt

CMSimple Template Demoseite

nach oben