:target-Logo
Menu

Die Template-Styles

Hier einige Beispiele für Styles, wie sie das Template bietet. Vieles ist gleich, wie auch bei anderen meiner Templates. Die Beschreibungen sind teilweise ebenfalls identisch, sodass sie DC erzeugen. Ismiregal, zumindest hier.

Schriften

Komisch, aber wahr. Ich habe zu bestimmten Zeiten immer eine bestimmte Vorliebe für bestimmte Schriften. Das ändert sich immer mal wieder. Dass mir die PTsans-Narrow als Überschriften-Standard ganz lieb ist, dürfte an der Klarheit der Schrift und an dem geringen Platzbedarf (narrow: eng/schmal) liegen.

Zurzeit liegt mir die Merriweather für den Fließtext sehr am Herzen. Ich finde, dass sie sogar in der hier verwendeten Light-Variante auf Bildschirmen sehr gut lesbar ist. Und besonders gefallen mir derzeit die Mediävalziffern (oder auch Minuskelziffern, siehe Wikipedia). 01234567890 – diese Ziffern stören durch ihre Ober- und Unterlängen den ohnehin guten Graukeil des Merriweather-Fließtextes praktisch gar nicht und sehen auch noch irgendwie „edel“ aus. Mal sehen, ob ich das nächste Woche noch genau so empfinde.

Listen

Ungeordneten Listen sollte man unbedingt die CSS-Klasse ulNrml (für „ul normal“) geben. Die browsereigenen Standard-Listen sind nicht besonders schön. Site-weit kann man die ULs nicht formatieren, da es sonst Konflikte mit den systemeigenen Listen (z.B. Pagemanager) gibt. Ein altes Ärgernis bei CMSimple – finde ich.

  1. Ich bin der Erste in einer geordneten Liste.
  2. Ich komme gleich danach.
  3. Bei mir reicht’s nur bis drei.

Bilder

Beispiel-Bild

Beispielbild

Bilder im Text rechts erhalten die CSS-Klasse imgR und nehmen damit normalerweise eine maximale Breite von 35% ihres übergeordneten Containers ein. Ist der Viewport kleiner als 480px, 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.

Der Mensch ist das religiöse Tier. Er ist das einzige Tier, das seinen Nächsten wie sich selber liebt und, wenn dessen Theologie nicht stimmt, ihm die Kehle durchschneidet.

— Mark Twain in „The Lowest Animal“

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)

YouTube-Video einbetten

Die DSGVO hat ja für einigen Wirbel in der Szene gesorgt. Fakt ist, dass es mich immer schon gestört hat, dass bereits beim Aufruf einer Seite mit YouTube-Video (oder eines anderen Video-Anbieters) Daten verschickt wurden – ohne mich vorher darauf hinzuweisen.

Einige XHler haben sich dazu Gedanken gemacht. Ingo (knollsen) hat ein sehr schönes VideoPrivacy-Plugin zur Verfügung gestellt, das nicht nur bei YouTube-Videos die Privatsphäre schützt, sondern auch bei einigen anderen Anbietern.

Ebenso hat Holger ein YouTubePrivacy-Plugin vorgestellt, das einige kleinere Vorteile aufweist, allerdings ausschließlich mit YouTube funktioniert.

Und, um die Verwirrung komplett zu machen, habe ich Holgers Plugin genommen und einige Styles an meinen Geschmack angepasst. Diese Version verwende ich hier (siehe unten). Du kannst sie dir auf der Seite Die Downloads herunterladen.

Kennst du den Windows XP-Walzer?

Na ja, nicht gerade umwerfend lustig. Wer sich aber vor einigen Jahren mit XP beschäftigte, könnte eventuell in den nächsten 3¼ Minuten zum Schmunzeln kommen. Es ist gar nicht so einfach passende Beispiel-Videos zu finden. Heute bin ich mal auf Rainer Hersch gekommen, der einen Walzer dirigiert – basierend auf Windows XP-Geräuschen. (Deutsche Untertitel habe ich gleich mal eingeblendet.)

Hinweis!
Dieses Video wird über YouTube eingebettet. Ab dem Klick auf den Abspielen-Button gelten für das Video die Datenschutzbestimmungen von YouTube (Google).

Der Trick bei der Video-Einbettung ist hier, dass sich der Server um das Herbeiholen des Vorschaubildes kümmert. Bis zu dem Zeitpunkt, an dem du auf den Play-Button klickst, werden von dieser Seite keine Daten weitergeleitet und keine Cookies gesetzt. Erst wenn du das Video wirklich anschaust, geht die übliche Chose los. Du hast also zumindest die Wahl: wann, wie und ob.