In diesem Artikel zeig ich euch mögliche Typografie Elemente. Alle folgenden Elemente können in einem Artikel verwendet werden. Um sie zu benutzen muss man oft eine CSS Klasse einfügen. Das geht je nach Editor nur wenn man den Editor deaktiviert und mittels HTML Ansicht direkt die Änderung macht.

Akkordeon

Frühere Versionen von Allrounder hatten eine eigene Akkordeon Lösung mittels der lvacc Klasse. In der aktuellen Version ist dies standardmässig deaktiviert, kann aber in den "Advanced Template Options" wieder aktiviert werden indem man "Load deprecated features" aktiviert.

Bootstrap hat eine integrierte Lösung um ein Akkordeon zu erstellen. Wie das geht kann man in deren Dokumentation nachlesen. Es gibt aber auch tolle Plugins wie Sliders welche helfen das ganz einfach zu machen. Wenn man das Sliders Plugin nutzt, sollte man in dessen Einstellungen das Laden des Stylesheets deaktivieren, sonst siehts doof aus.

Horizontale Linie

<hr />

<hr class="black" />

<hr class="red" />

<hr class="blue" />

<hr class="green" />

Überschrift 1-6

<h1>Dieser Text ist eine Überschrift 1</h1>
<h2>Dieser Text ist eine Überschrift 2</h2>
<h3>Dieser Text ist eine Überschrift 3</h3>
<h4>Dieser Text ist eine Überschrift 4</h4>
<h5>Dieser Text ist eine Überschrift 5</h5>
<h6>Dieser Text ist eine Überschrift 6</h6>

Dieser Text ist eine Überschrift 1

Dieser Text ist eine Überschrift 2

Dieser Text ist eine Überschrift 3

Dieser Text ist eine Überschrift 4

Dieser Text ist eine Überschrift 5
Dieser Text ist eine Überschrift 6

Sektionsüberschrift 1-6

<h1 class="section">Sektionsüberschrift 1</h1>
<h2 class="section">Sektionsüberschrift 2</h2>
<h3 class="section">Sektionsüberschrift 3</h3>
<h4 class="section">Sektionsüberschrift 4</h4>
<h5 class="section">Sektionsüberschrift 5</h5>
<h6 class="section">Sektionsüberschrift 6</h6>

Sektionsüberschrift 1

Sektionsüberschrift 2

Sektionsüberschrift 3

Sektionsüberschrift 4

Sektionsüberschrift 5
Sektionsüberschrift 6

Abschnitte

Die Style funktionieren jeweils sicher für <p> sowie <div> Tags.
Siehe auch Bootstrap Dokumentation für weitere Möglichkeiten.

<p class="alert">TEXT HIER...</p>
<p class="alert alert-error">TEXT HIER...</p>
<p class="alert alert-success">TEXT HIER...</p>
<p class="alert alert-info">TEXT HIER...</p>
<p class="alert alert-block">TEXT HIER...</p>

Ein allgemeiner Warntext mit der Klasse alert

Ein Fehlertext mit den Klassen alert alert-error

Ein Erfolgstext mit den Klassen alert alert-success

Ein Informationstext mit den Klassen alert alert-info

Ein allgemeiner Warntext mit etwas grösserem Abstand oben und unten. Ideal für grössere Textblöcke. Gemacht mit den Klassen alert alert-block


Bitte beachtet dass die folgenden Klassen neu ein Prefix typo- benötigen. Dies weil einige davon mit Bootstrap Sachen wie Tooltips und Popovers Probleme machten.

<p class="typo-tip">TEXT HIER...</p>
<p class="typo-alert">TEXT HIER...</p>

Ein Tip Text welcher dazu verwendet werden kann um speziell gut sichtbare Tips zu markieren. Klasse: typo-tip

Ein Alarm Text welcher dazu verwendet werden kann um speziell gut sichtbare Alarmmeldungen zu markieren. Klasse: typo-alert


<p class="typo-info">TEXT HIER...</p>
<p class="typo-right">TEXT HIER...</p>
<p class="typo-alarm">TEXT HIER...</p>
<p class="typo-tell">TEXT HIER...</p>
<p class="typo-content">TEXT HIER...</p>
<p class="typo-note">TEXT HIER...</p>

<p> Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen. Sofern man dem <p> den Klassennamen typo-info mitgibt, wird es so formatiert wie in dieser Demo.

<p> Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen. Sofern man dem <p> den Klassennamen typo-right mitgibt, wird es so formatiert wie in dieser Demo.

<p> Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen. Sofern man dem <p> den Klassennamen typo-alarm mitgibt, wird es so formatiert wie in dieser Demo.

<p> Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen. Sofern man dem <p> den Klassennamen typo-tell mitgibt, wird es so formatiert wie in dieser Demo.

<p> Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen. Sofern man dem <p> den Klassennamen typo-content mitgibt, wird es so formatiert wie in dieser Demo.

<p> Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen. Sofern man dem <p> den Klassennamen typo-note mitgibt, wird es so formatiert wie in dieser Demo.


<p class="contenthead">TEXT HIER...</p>
<p class="contenthead-dark">TEXT HIER...</p>
<p class="contenthead-blue">TEXT HIER...</p>
<p class="contenthead-red">TEXT HIER...</p>
<p class="contenthead-green">TEXT HIER...</p>

<p> Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen. Sofern man dem <p> den Klassennamen contenthead mitgibt, wird es so formatiert wie in dieser Demo.

<p> Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen. Sofern man dem <p> den Klassennamen contenthead-dark mitgibt, wird es so formatiert wie in dieser Demo.

<p> Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen. Sofern man dem <p> den Klassennamen contenthead-blue mitgibt, wird es so formatiert wie in dieser Demo.

<p> Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen. Sofern man dem <p> den Klassennamen contenthead-red mitgibt, wird es so formatiert wie in dieser Demo.

<p> Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen. Sofern man dem <p> den Klassennamen contenthead-green mitgibt, wird es so formatiert wie in dieser Demo.


<p class="typo-hot">TEXT HIER...</p>
<p class="typo-new">TEXT HIER...</p>
<p class="typo-top">TEXT HIER...</p>

<p> Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen. Sofern man dem <p> den Klassennamen typo-hot mitgibt, wird es so formatiert wie in dieser Demo.

<p> Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen. Sofern man dem <p> den Klassennamen typo-new mitgibt, wird es so formatiert wie in dieser Demo.

<p> Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen. Sofern man dem <p> den Klassennamen typo-top mitgibt, wird es so formatiert wie in dieser Demo.

Code

<code>TEXT HIER...</code>

Dies ist ein Code Text. Damit kann man innerhalb von Webseiten einen Code auszeichnen und diesen darstellen.

Blockquote

<blockquote>TEXT HIER...</blockquote>
Dies ist ein Zitat Block mit Textinhalt. Zitate bilden des öfteren eine schicke Bereicherung für eine Webseite. So kann man Zitate sehr gut nutzen um andere Quellen zu zitieren oder einfach den eigenen Beitrag etwas aufbessern indem man seinen verfassten Text mit einem blockquote Tag umschließt.

Listen

Unsortierte Liste

<ul>
  <li>....</li>
  <li>....</li>
</ul>
  • Listenpunkt 1.1
  • Listenpunkt 1.2
  • Listenpunkt 1.3
    • Listenpunkt 1.3.1
    • Listenpunkt 1.3.2
    • Listenpunkt 1.3.3
      • Listenpunkt 1.3.3.1
      • Listenpunkt 1.3.3.2
      • Listenpunkt 1.3.3.3
      • Listenpunkt 1.3.3.4
      • Listenpunkt 1.3.3.5
    • Listenpunkt 1.3.4
    • Listenpunkt 1.3.5
  • Listenpunkt 1.4
  • Listenpunkt 1.5

<ulclass="arrow"
  <li>....</li>
  <li>....</li>
</ul>
  • Listenpunkt 1.1
  • Listenpunkt 1.2
  • Listenpunkt 1.3
    • Listenpunkt 1.3.1
    • Listenpunkt 1.3.2
    • Listenpunkt 1.3.3
      • Listenpunkt 1.3.3.1
      • Listenpunkt 1.3.3.2
      • Listenpunkt 1.3.3.3
      • Listenpunkt 1.3.3.4
      • Listenpunkt 1.3.3.5
    • Listenpunkt 1.3.4
    • Listenpunkt 1.3.5
  • Listenpunkt 1.4
  • Listenpunkt 1.5

<ul class="folder">
  <li>....</li>
  <li>....</li>
</ul>
  • Listenpunkt 1.1
  • Listenpunkt 1.2
  • Listenpunkt 1.3
    • Listenpunkt 1.3.1
    • Listenpunkt 1.3.2
    • Listenpunkt 1.3.3
      • Listenpunkt 1.3.3.1
      • Listenpunkt 1.3.3.2
      • Listenpunkt 1.3.3.3
      • Listenpunkt 1.3.3.4
      • Listenpunkt 1.3.3.5
    • Listenpunkt 1.3.4
    • Listenpunkt 1.3.5
  • Listenpunkt 1.4
  • Listenpunkt 1.5

<ul class="ok">
  <li>....</li>
  <li>....</li>
</ul>
  • Listenpunkt 1.1
  • Listenpunkt 1.2
  • Listenpunkt 1.3
    • Listenpunkt 1.3.1
    • Listenpunkt 1.3.2
    • Listenpunkt 1.3.3
      • Listenpunkt 1.3.3.1
      • Listenpunkt 1.3.3.2
      • Listenpunkt 1.3.3.3
      • Listenpunkt 1.3.3.4
      • Listenpunkt 1.3.3.5
    • Listenpunkt 1.3.4
    • Listenpunkt 1.3.5
  • Listenpunkt 1.4
  • Listenpunkt 1.5

<ul class="star">
  <li>....</li>
  <li>....</li>
</ul>
  • Listenpunkt 1.1
  • Listenpunkt 1.2
  • Listenpunkt 1.3
    • Listenpunkt 1.3.1
    • Listenpunkt 1.3.2
    • Listenpunkt 1.3.3
      • Listenpunkt 1.3.3.1
      • Listenpunkt 1.3.3.2
      • Listenpunkt 1.3.3.3
      • Listenpunkt 1.3.3.4
      • Listenpunkt 1.3.3.5
    • Listenpunkt 1.3.4
    • Listenpunkt 1.3.5
  • Listenpunkt 1.4
  • Listenpunkt 1.5

<ul class="cross">
  <li>....</li>
  <li>....</li>
</ul>
  • Listenpunkt 1.1
  • Listenpunkt 1.2
  • Listenpunkt 1.3
    • Listenpunkt 1.3.1
    • Listenpunkt 1.3.2
    • Listenpunkt 1.3.3
      • Listenpunkt 1.3.3.1
      • Listenpunkt 1.3.3.2
      • Listenpunkt 1.3.3.3
      • Listenpunkt 1.3.3.4
      • Listenpunkt 1.3.3.5
    • Listenpunkt 1.3.4
    • Listenpunkt 1.3.5
  • Listenpunkt 1.4
  • Listenpunkt 1.5

An ordered list

<ol>
  <li>....</li>
  <li>....</li>
</ol>
  1. Listenpunkt 1.1
  2. Listenpunkt 1.2
  3. Listenpunkt 1.3
    1. Listenpunkt 1.3.1
    2. Listenpunkt 1.3.2
    3. Listenpunkt 1.3.3
      1. Listenpunkt 1.3.3.1
      2. Listenpunkt 1.3.3.2
      3. Listenpunkt 1.3.3.3
      4. Listenpunkt 1.3.3.4
      5. Listenpunkt 1.3.3.5
    4. Listenpunkt 1.3.4
    5. Listenpunkt 1.3.5
  4. Listenpunkt 1.4
  5. Listenpunkt 1.5

Tabellen

<table>
  <tbody>
    <tr>
      <th>Tabellenplatz 1</th>
      <th>Tabellenplatz 2</th>
    </tr>
    <tr>
      <td>Tabellenplatz 3</td>
      <td>Tabellenplatz 4</td>
    </tr>
    <tr>
      <td>Tabellenplatz 5</td>
      <td>Tabellenplatz 6</td>
    </tr>
    <tr>
      <td>Tabellenplatz 7</td>
      <td>Tabellenplatz 8</td>
    </tr>
    <tr>
      <td>Tabellenplatz 9</td>
      <td>Tabellenplatz 10</td>
    </tr>
  </tbody>
</table>
Tabellenplatz 1Tabellenplatz 2
Tabellenplatz 3 Tabellenplatz 4
Tabellenplatz 5 Tabellenplatz 6
Tabellenplatz 7 Tabellenplatz 8
Tabellenplatz 9 Tabellenplatz 10

<table class="gray">
  ....
</table>
Tabellenplatz 1Tabellenplatz 2
Tabellenplatz 3 Tabellenplatz 4
Tabellenplatz 5 Tabellenplatz 6
Tabellenplatz 7 Tabellenplatz 8
Tabellenplatz 9 Tabellenplatz 10

<table class="blue">
  ...
</table>
Tabellenplatz 1Tabellenplatz 2
Tabellenplatz 3 Tabellenplatz 4
Tabellenplatz 5 Tabellenplatz 6
Tabellenplatz 7 Tabellenplatz 8
Tabellenplatz 9 Tabellenplatz 10

<table class="red">
  ...
</table>
Tabellenplatz 1Tabellenplatz 2
Tabellenplatz 3 Tabellenplatz 4
Tabellenplatz 5 Tabellenplatz 6
Tabellenplatz 7 Tabellenplatz 8
Tabellenplatz 9 Tabellenplatz 10

<table class="yellow">
  ...
</table>
Tabellenplatz 1Tabellenplatz 2
Tabellenplatz 3 Tabellenplatz 4
Tabellenplatz 5 Tabellenplatz 6
Tabellenplatz 7 Tabellenplatz 8
Tabellenplatz 9 Tabellenplatz 10

<table class="white">
  ...
</table>
Tabellenplatz 1Tabellenplatz 2
Tabellenplatz 3 Tabellenplatz 4
Tabellenplatz 5 Tabellenplatz 6
Tabellenplatz 7 Tabellenplatz 8
Tabellenplatz 9 Tabellenplatz 10

Tooltip

Frühere Versionen von Allrounder hatten eine eigene Tooltip Lösung mittels der lv-tooltip Klasse. In der aktuellen Version ist diese standardmässig deaktiviert, kann aber in den "Advanced Template Options" wieder aktiviert werden indem man "Load deprecated features" aktiviert.
Um Tooltips zu einzufügen empfiehlt es sich jedoch eines der verfügbaren Plugins zu nutzen. Im Joomla Extension Directory (JED) gibts ne ganze Auswahl. Empfehlenswert ist sicher eine welche auf dem vorhandenen Bootstrap Code basiert.

Dropcap

<span class="dropcap">D</span>as ist ein Dropcap!

Das ist ein Dropcap! Dropcaps werden zur Ausschmückung von Textblöcken verwendet. Besonders anschaulich ist ein Dropcap, wenn er den Beginn eines neuen Abschnitts markiert. Um einen Dropcap zu benutzen, umschließt man den Anfangsbuchstaben des ersten Wortes eines Absatzes mit einem span, welches den Klassennamen "dropcap" hat.


Bilder

<img class="featured pull-left" alt="Cooles Bild" src="images/200x200.png" /><p>Irgendein Text...</p>
joomla
Ausrichten

Mittels der zusätzlichen Klasse pull-left kann man das Bild links ausrichten sodass der Text das Bild rechts umfliesst.

Fülltext

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.


<img class="featured-dark pull-right" alt="Cooles Bild" src="images/200x200.png" /><p>Irgendein Text...</p>
cool image
Ausrichten

Mittels der zusätzlichen Klasse pull-right kann man das Bild rechts ausrichten sodass der Text das Bild links umfliesst.

Fülltext

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.


<img class="border-dark" alt="Cooles Bild" src="images/200x200.png" />
cool image
<img class="border-light" alt="Cooles Bild" src="images/200x200.png" />

cool image

Bildspiegelung

Frühere Versionen von Allrounder hatten eine Lösung um mittels der reflect Klasse eine Spiegelung unter dem Bild darzustellen. In der aktuellen Version ist diese standardmässig deaktiviert, kann aber in den "Advanced Template Options" wieder aktiviert werden indem man "Load deprecated features" aktiviert.
Diese Funktion benutzt JavaScript Code welcher vom Entwickler nicht mehr weiterentwickelt wird. Wer sowas mag sollte sich nach entsprechenden Plugins umsehen.

Bildunterschriften

Frühere Versionen von Allrounder hatten eine Lösung um mittels der lv-caption Klasse eine Bildunterschrift unter dem Bild anzuzeigen. In der aktuellen Version ist diese standardmässig deaktiviert, kann aber in den "Advanced Template Options" wieder aktiviert werden indem man "Load deprecated features" aktiviert.
Diese Funktion benutzt JavaScript Code welcher vom Entwickler nicht mehr weiterentwickelt wird. Bildunterschriften kann man heute mittels den HTML5 Tags <figure> und <figcaption> auch ganz ohne JavaScript erstellen.

Spalten

Frühere Versionen von Allrounder hatten eine Lösung um mittels der lv-cols Klasse Spalten anzuzeigen. In der aktuellen Version ist diese standardmässig deaktiviert, kann aber in den "Advanced Template Options" wieder aktiviert werden indem man "Load deprecated features" aktiviert.

Da Bootstrap von sich aus schon solche Features mitbringt, habe ich diese etwas erweitert was nun erlaubt sogar "responsive" Spalten zu machen. Das heisst wenn das Fenster kleiner wird (zB auf Handys oder wenn man den Browser kleiner macht) werden die Spalten automatisch reduziert.

Zwei Spalten

<div class="col-2">
    <div>
        Bissel Inhalt hier...
    </div>
    <div>
        Bissel Inhalt dort...
    </div>
</div>
2 SpaltenFeatured Bild

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

2 SpaltenFeatured Bild

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.


Drei Spalten

<div class="col-3">
    <div>
        Bissel Inhalt hier...
    </div>
    <div>
        Bissel Inhalt dazwischen...
    </div>
    <div>
        Bissel Inhalt dort...
    </div>
</div>
3 Spalten

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

3 Spalten

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

3 Spalten

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.


Vier Spalten

<div class="col-4">
    <div>
        Bissel Inhalt hier...
    </div>
    <div>
        Noch etwas Inhalt hier...
    </div>
    <div
        Nochmal etwas Inhalt...
    </div>
    <div
        Bissel Inhalt dort...
    </div>
</div>
4 Spalten

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

4 Spalten

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

4 Spalten

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

4 Spalten

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.


Fünf Spalten

<div class="col-5">
    <div>
        Bissel Inhalt hier...
    </div>
    <div>
        Noch etwas Inhalt hier...
    </div>
    <div>
        Bissel Inhalt dazwischen...
    </div>
    <div>
        Noch etwas Inhalt dort...
    </div>
    <div>
        Bissel Inhalt dort...
    </div>
5 Spalten

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

5 Spalten

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

5 Spalten

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

5 Spalten

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

5 Spalten

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.


Sechs Spalten

<div class="col-6">
    <div>
        Bissel Inhalt hier...
    </div>
    <div>
        Noch etwas Inhalt hier...
    </div>
    <div>
        Und nochmal...
    </div>
    <div>
        Und nochmal dort...
    </div>
    <div>
        Noch etwas Inhalt dort...
    </div>
    <div>
        Bissel Inhalt Inhalt dort...
    </div>
6 Spalten

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

6 Spalten

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

6 Spalten

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

6 Spalten

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

6 Spalten

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

6 Spalten

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

   
© Bakual