Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.


inhaltselemente_typo3 [2023.12.12 16:02] (aktuell) – angelegt - Externe Bearbeitung 127.0.0.1
Zeile 1: Zeile 1:
 +====== 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;
 +  }
 +
 +===== Standards für Links =====
 +
 +  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;
 +  }
 +
 +===== HTML-Element mit Link und Hover Effekt =====
 +
 +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;
 +  }
 +
 +===== Überschrift H4: Link als Button=====
 +  .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;
 +  }
 +