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.

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.

  • Ich bin ein Listenpunkt erster Klasse in einer ungeordneten Liste.
  • Genau. Wir sind Ober-Listenpunkte.
    • Und ich bin nur ein Unterpunkt.
    • Ich leider auch.
  • Ruhe da oben. Ich bin wichtiger.
  • Ich auch.
  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

Quelle: spass.net

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%).

Übrigens mache ich heute mal eine Ausnahme. Das Beispielbild habe ich geklaut und hoffe, dass ich nicht ins Kittchen muss. Ich fand das sooo lustig! Stammt von hier. Ich bitte um Gnade. ;-)

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 Sinn des Lebens: Etwas, das keiner genau weiß. Jedenfalls hat es wenig Sinn, der reichste Mann auf dem Friedhof zu sein.

— Peter Ustinov

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)

Video (Version 2)

Es gibt Tage, an denen habe ich von allen und allem die Nase mächtig voll. Passiert womöglich jedem mal. Besonders, wenn ich an CMSimple_XH-Templates werkele. XH bedeutet ja bekanntlich eXtra Heavy ;-) Dann kommt mir oft der Titel bzw. der Refrain des folgenden Liedes in den Sinn. Ich lernte vor langer Zeit einige Jahre Französisch – behielt faktisch aber kaum etwas mangels Übung. Dennoch singe ich diesen Refrain in solchen Situationen vor mich hin, in der Hoffnung dass niemand zuhört. Ein Deutscher, der nicht arbeiten will … ein Unding! ;-)))

Warum ich nun gerade diese Version des Liedes als Video-Beispiel wählte? Keine Ahnung. Wenn man schon versucht Gypsy Swing im Stile von Django zu spielen, könnte man das ruhig auch etwas schwungvoller tun (vielleicht so?). Trotzdem nicht schlecht. Es gibt ziemlich viele Interpreten, die das Ding schon durchgezogen haben. Auch besser als hier (Edith Piaf, Pink Martini, …). Wer sich für den deutschen Text interessiert: hier schauen (leider nicht ganz perfekt übersetzt).

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

Das Video ist mit einer leicht modifzierten Version des Plugins youtube_privacy eingebunden. Vom eigenen Server werden keine Cookies gesetzt. Erst beim Abspielen werden Daten an YouTube übermittelt.