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.

Frank Seidel

Sitelogo

Das Logo der Website (das modifizierte Logo von fhs-basic) wird in der Stylesheet.css ab Zeile 202 definiert:

#logo a {
background: url(images/logo.png) no-repeat;
height: 70px;
width: 300px;
display: inline-block;
float: left;
margin: 10px 20px;
text-decoration: none;
border: 0;
}

Dabei liegt die Bilddatei im Verzeichnis: /templates/fhs-basic-all/images. Der Dateiname muß in der Zeile 203 angepasst werden (background: url(images/logo.png) no-repeat;). Die Höhe und Breite des Logos müssen in Zeile 204 und 205 eingetragen werden.

Schriften

Das Template verwendet als Standard-Schriftart „Open-Sans“ mit erweiterter Unterstützung für Latin-Zeichensätze und Kyrillisch. Для наших русских друзей. ;-))

Die verfügbaren Schnitte sind: 300 Light (CSS-Klasse: OS-Light), 400 Regular (normal im Editor), 600 Semibold (bold im Editor) und 700 Fett (CSS-Klasse: OS-Bold).

Unordered List – CSS-Class listUnordered

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque cursus, mauris nec sagittis dictum, nunc pede facilisis nisl, id mattis nunc nulla in ipsum.
• Donec ullamcorper, nulla eu faucibus sagittis, wisi risus ultrices metus, a ornare purus metus eget elit.
  • Sed a leo. Suspendisse nisl tellus, volutpat vel, vehicula nec, venenatis eu, erat. Maecenas vulputate laoreet lectus.
    • Fusce pulvinar ante non sapien.
    • Aliquam iaculis, wisi ac tristique ornare, ante est lacinia urna, quis tempor neque dui id tortor.
  • Vivamus posuere.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Quisque cursus, mauris nec sagittis dictum, nunc pede facilisis nisl, id mattis nunc nulla in ipsum.
• Donec ullamcorper, nulla eu faucibus sagittis, wisi risus ultrices metus, a ornare purus metus eget elit.
• Sed a leo. Suspendisse nisl tellus, volutpat vel, vehicula nec, venenatis eu, erat. Maecenas vulputate laoreet lectus. Fusce pulvinar ante non sapien. Aliquam iaculis, wisi ac tristique ornare, ante est lacinia urna, quis tempor neque dui id tortor.

Ordered List

1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque cursus, mauris nec sagittis dictum, nunc pede facilisis nisl, id mattis nunc nulla in ipsum.
2. Donec ullamcorper, nulla eu faucibus sagittis, wisi risus ultrices metus, a ornare purus metus eget elit.
   1. Sed a leo. Suspendisse nisl tellus, volutpat vel, vehicula nec, venenatis eu, erat. Maecenas vulputate laoreet lectus.
      1. Fusce pulvinar ante non sapien.
      2. Aliquam iaculis, wisi ac tristique ornare, ante est lacinia urna, quis tempor neque dui id tortor.
   2. Vivamus posuere.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
   3. Quisque cursus, mauris nec sagittis dictum, nunc pede facilisis nisl, id mattis nunc nulla in ipsum.
3. Donec ullamcorper, nulla eu faucibus sagittis, wisi risus ultrices metus, a ornare purus metus eget elit.
4. Sed a leo. Suspendisse nisl tellus, volutpat vel, vehicula nec, venenatis eu, erat. Maecenas vulputate laoreet lectus. Fusce pulvinar ante non sapien. Aliquam iaculis, wisi ac tristique ornare, ante est lacinia urna, quis tempor neque dui id tortor.

Bilder

My car needs a wash.

Bilder im Text rechts erhalten die CSS-Klasse imgR und nehmen damit normalerweise eine maximale Breite von 30% 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%).

Schaue bitte in den Quellcode um die Styles für die folgenden drei Bilder herauszufinden. Ich kann doch nicht alles beschreiben. Dafür habe ich hier nicht genug Lust Platz. ;-)

- Frank Seidel

John Doe jun.

Juniorchef

kocht Kaffee für alle

Jane Doe

graue Eminenz

verwaltet die Finanzen

John Doe sen.

Seniorchef

ist selten anwesend

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.

Menschen mit einer neuen Idee gelten solange als Spinner, bis sich die Sache durchgesetzt hat.

— Mark Twain

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.

(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!

Ja, ja. Jeden Tag wird es ein bisschen komplizierter.
Wie schön einfach war es doch in den 90ern des letzten Jahrhunderts. Da brauchte das keiner. ;-)

- Frank Seidel

« vorige Seite | Seitenanfang | nächste Seite »