Sie befinden sich hier: start » inhaltselemente_typo3

Frontend Inhaltselemente für TYPO3

Frontend Inhaltselemente für TYPO3

TYPO3 bietet als Standard eine Reihe von Inhaltselementen an, mit denen sich das Layout für Text und Medien bei der Eingabe gestalten lassen. Da diese über mehrere Standards verfügen, lassen sich diese Elemente mit wenig Aufwand auch mit einem eigenen Frontend versehen.

Hier finden Sie einige Beispiele für typische Frontend Anpassung für Inhaltselemente von TYPO3.

Responsive Darstellung von Bildern

Bilder werden in TYPO3 in einem figure Tag als IMG gespeichert. Als Standard lassen sich alle Bilder so per CSS definieren, dass sie bis zu ihrer maximalen Breite aufgezogen werden können. Bei einem geringeren Viewport werden die Bilder dann stufenlos skaliert, wobei das Verhältnis Höhe zu Breite erhalten bleibt. Hier kann auch eine Border als Standard mitgegeben werden.

img {
  width: 100%;
  height: auto;
  border: 15px #ccc solid;
}

Titel für Bilder formatieren

figcaption {
  background-color: #4B778A;
  padding: 5px;
}
.image-caption {
  color: #efefef;
  text-align: center;
}
a, a:active, a:visited {
  color: #478FAD;
}
a:hover {
  color: #2F6E89;
  text-decoration: none;
}

Text und Bilder

Für das Inhaltselemente Text und Bilder (textpic) lassen sich per CSS Standards definieren. Hier ist ein Beispiel für die Einbindung eines Elements Text und Bilder für ein zweispaltiges Layout. Die Bilder werden mittig oberhalb des Textes angeordnet. Das Bild wird mit einem Rahmen versehen. Beim Fließtext unterhalb des Bildes wird der erste Absatz durch ein besonderes Design hervorgehoben.

Bild mit Rahmen

.ce-textpic > div > div > div > figure > img {
  border: 5px #6DCD8E solid;
}

Bild mit farbigem Hintergrund und Abstand

.ce-textpic.ce-center > div > div > div > div > div > figure > img {
  background-color: #A1DAA8;
  padding: 10px 10px 5px 10px;
}

Bildunterschrift mit Farbe für Hintergrund und Text

.ce-textpic.ce-center > div > div > div > div > div > figure > figcaption {
  background-color: #A1DAA8;
  padding: 3px 10px 10px 10px;
  margin-top: -1px;
  text-align: center;
  color: #0B7F35;
}

Erster Absatz mit eigenem Layout

.ce-textpic.ce-center > div.ce-bodytext > p:nth-child(1) {
  border: 1px #A1DAA8 solid;
  margin-top: -10px;
  padding: 10px 10px 40px 10px;
  background-color: #eee;
  color: #666;
}

Buttons unter Boxen

Oft hat man das Bedürfnis, unter einem Inhaltselement einen Button platzieren zu wollen. Da hilft es, einen Link zu formatieren.

.ce-textpic.ce-center > div.ce-bodytext > p:nth-child(2) {
  text-align: center;
  margin: -20px auto 30px auto;
}
.ce-textpic.ce-center > div.ce-bodytext > p:nth-child(2) > a {
  background-color: #0B7F35;
  color: #A1DAA8;
  padding: 15px 30px;
  font-weight: normal;
}
.ce-textpic.ce-center > div.ce-bodytext > p:nth-child(2):hover {
  margin-bottom: 30px;
}
.ce-textpic.ce-center > div.ce-bodytext > p:nth-child(2) > a:hover {
  background-color: #A1DAA8;
  color: #0B7F35;
  padding: 25px 40px 25px 40px;
  text-decoration: none;
  font-weight: bold;
}
.ce-textpic.ce-center > div.ce-bodytext > p:nth-child(2),
.ce-textpic.ce-center > div.ce-bodytext > p:nth-child(2) > a {
  transition: all ease 0.5s;
}

In diesem Fall kann man einen Button als HTML-Element mit reinem Quelltext einfügen, dem man eine eigene CSS Klasse mitgibt. In diesem Fall ist die der Style class=„btn-reisen“. Dieses Vorgehen hat den Vorteil, dass der Buttons 100% der Breite einnehmen kann.

.btn-reisen {
  border: none;
  background-color: #A1DAA8;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: -15px;
  margin-bottom: 25px;
  font-weight: normal;
}
.btn-reisen:hover {
  background-color: #0B7F35;
  color: #A1DAA8;
  padding-top: 25px;
  padding-bottom: 25px;
  margin-top: -25px;
  margin-bottom: 5px;
  font-weight: bold;
}
.btn-reisen:active {
  background-color: #fc6;
}
.btn-reisen {
  transition: all ease 0.5s;
}
.frame-type-header  {
  border: 1px #A1DAA8 solid;
  background-color: #A1DAA8;
  text-align: center;
  padding: 5px;
  margin: 5px auto;
}
.frame-type-header:hover {
  background-color: #DDEEDF;
  border: 1px #0B7F35 solid;
}
.frame-type-header > header > h4 > a {
  background-color: #f00;
  padding: 2% 20%;
  border: 1px #0B7F35 solid;
}