Template-Styles
Schriften
Standard-Schriftart:
normal „Fira Sans Condensed Light“ (300)<strong> „Fira Sans Condensed Regular“ (400).firaMedium „Fira Sans Condensed Medium“ (500)
Extra-Schriftart:.handWrite „Caveat Regular“ (400).handWrite <strong> „Caveat Bold“ (700)
Ungeordnete Listen
CSS-Klasse listUnordered
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Donec ullamcorper, nulla eu faucibus sagittis.
- Sed a leo. Suspendisse nisl tellus, volutpat velt.
- Fusce pulvinar ante non sapien.
- Sed a leo. Suspendisse nisl tellus, volutpat velt.
Geordnete Listen
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Donec ullamcorper, nulla eu faucibus sagittis.
- Sed a leo. Suspendisse nisl tellus, volutpat vels.
- Fusce pulvinar ante non sapien.
- Aliquam iaculis.
- Vivamus posuere.Lorem ipsum dolor sit amet.
- Sed a leo. Suspendisse nisl tellus, volutpat vels.
- Donec ullamcorper, nulla eu faucibus sagittis,.
Bilder
My car needs a wash
Bilder im Text rechts erhalten die CSS-Klasse imgR und nehmen damit normalerweise eine maximale Breite von 33% ihres übergeordneten Containers ein. Ist der Viewport kleiner als 640px, wird das Bild 100% einnehmen. Will man hier (wie beim Beispielbild) eine Bildunterschrift haben, setzt man zuerst einen <div> in den das Bild platziert wird. Dann erhält nur der <div> die Klasse imgR – nicht das Bild! Der BU-Text wird dann normal in einem Absatz <p> unter das Bild, aber innerhalb des <div> gesetzt. Selbstverständlich gibt es eine entsprechende Klasse imgL für Bilder im Text links.
Alle anderen Bilder im Text werden normal in ihrer tatsächlichen Größe eingefügt. Aber auch hier gilt: Sie werden nie größer sein, als der Container, in dem sie sich befinden (max-width: 100%).
Zitate
Du kannst Zitate innerhalb eines <blockquote>-Tags setzen. Das sieht dann so aus wie unten. Autor und/oder Quellenangabe erhalten innerhalb des Blocks die Klasse blockAuth.
Ich lese keine Anleitungen – ich drücke Knöpfe bis es klappt!
— ein XH-User
Tabellen
Wenn Tabellen die Klasse respTable erhalten, werden sie (einigermaßen) responsive. Das heißt, die maximal angezeigte Breite ist 100% – alles darüber hinaus wird scrollbar. Mit Tabellen ist das so eine Sache. Richtig responsive bekommt man sie eigentlich nur mit JS und/oder anderen Tricks. Mit reinem CSS, was wünschenswert wäre, bekommt man allerdings wiederum Probleme bei den Editoren, die zurzeit das Setzen von Data-Attributen nicht standardmäßig unterstützen. Bei der hier gezeigten Variante genügt es die Klasse zu vergeben. In allen anderen Fällen ist Handarbeit im Quelltext gefragt.
| Rolle | Schauspieler | Hauptrolle (Episoden) |
Nebenrolle (Episoden) |
|---|---|---|---|
| Dr. Leonard Leakey Hofstadter | Johnny Galecki | 1.01– | |
| Dr. Dr. Sheldon Lee Cooper | Jim Parsons | 1.01– | |
| Penny Hofstadter | Kaley Cuoco | 1.01– | |
| Howard Joel Wolowitz, M.Eng. | Simon Helberg | 1.01– | |
| Dr. Rajesh „Raj“ Ramayan Koothrappali |
Kunal Nayyar | 1.01– | |
| Dr. Bernadette Maryann Rostenkowski-Wolowitz |
Melissa Rauch | 4.04– | 3.05–3.14 |
| Dr. Amy Farrah Fowler | Mayim Bialik | 4.08– | 4.01–4.05 |
| Stuart Bloom | Kevin Sussman | 6.01–6.17, 8.01– | 2.20–5.24, 7.02–7.24 |
| Debbie Wolowitz † | Carol Ann Susi (nur Stimme) |
1.07–8.08 | |
| Barry Kripke | John Ross Bowie | 2.12, 2.13, 3.01, 3.09, 4.17, 5.14, 5.17, 5.22, 6.14, 6.20, 7.10, 7.20, 8.10, 8.15, 9.05, 9.06, 9.15, 9.17, 10.09, 11.08 |
(Daten nur zur Illustration/Demonstration. Quelle: Wikipedia)
Favicon, Apple-Touch-Icon & Co
Wichtig! Im Template, im Abschnitt head, gibt es die üblichen Festlegungen für die Icons usw. Die gelten natürlich nicht für deine Website! Du musst dir diese Angaben passend für deine neue Website neu generieren! Der betreffende Abschnitt ist in der template.htm durch Kommentare markiert und es steht dort auch ein Link, wo du das machen kannst.
Die generierten Icons (und alles andere) befinden sich im Template-Images-Ordner. Dort muss der neu generierte Kram auch wieder hin und die Pfade müssen im head-Bereich entsprechend angepasst werden. Bitte nicht vergessen!