Top 1

If you log in to the site (the Author Login link is on the very bottom of this page) you will be able to edit it and all of the other existing articles. You will also be able to create a new article and make other changes to the site.

   

Top 2

If you log in to the site (the Author Login link is on the very bottom of this page) you will be able to edit it and all of the other existing articles. You will also be able to create a new article and make other changes to the site.

   

Top 3

If you log in to the site (the Author Login link is on the very bottom of this page) you will be able to edit it and all of the other existing articles. You will also be able to create a new article and make other changes to the site.

   

Login Form  

   

In this article, I show you possible typographic elements. All the following elements can be used in an article. To use them you often have to insert a CSS class. This depends on the editor only if you disable the editor and make the change directly using HTML view.

Accordion

Earlier versions of all-rounder had their own accordion solution using the lvacc class. In the current version, this is deactivated by default, but can be reactivated in the "Advanced Template Options" by activating "Load deprecated features".

Bootstrap has an integrated solution to create an accordion. How to do this can be read in their documentation. But there are also great plugins like sliders which help to make it quite easy. If you use the sliders plugin, you should deactivate its loading of the Stylesheets

Horizontal Line

<hr />

<hr class="black" />

<hr class="red" />

<hr class="blue" />

<hr class="green" />

Headline 1-6

This text is a heading h1

This text is a heading h2

This text is a heading h3

This text is a heading h4

This text is a heading h5
This text is a heading h6

Section heading 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

Sections

The styles work securely for both

and

tags. See also Bootstrap documentation for further possibilities.
<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>

This is a code text. This allows you to identify and display a code within websites..

Quote

<blockquote>TEXT HIER...</blockquote>
This is a citation block with text content. Quotes often form a nice addition to a website.

List style

<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

Tables

<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 1 Tabellenplatz 2
Tabellenplatz 3 Tabellenplatz 4
Tabellenplatz 5 Tabellenplatz 6
Tabellenplatz 7 Tabellenplatz 8
Tabellenplatz 9 Tabellenplatz 10

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

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

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

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

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

Images

<img class="featured pull-left" alt="Cooles Bild" src="images/1.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/1.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/1.png" />
cool image
<img class="border-light" alt="Cooles Bild" src="images/1.png" />

cool image

   

Bottom 1

If you log in to the site (the Author Login link is on the very bottom of this page) you will be able to edit it and all of the other existing articles. You will also be able to create a new article and make other changes to the site.

   

Bottom 2

If you log in to the site (the Author Login link is on the very bottom of this page) you will be able to edit it and all of the other existing articles. You will also be able to create a new article and make other changes to the site.

   

Bottom 3

If you log in to the site (the Author Login link is on the very bottom of this page) you will be able to edit it and all of the other existing articles. You will also be able to create a new article and make other changes to the site.

   
© ALLROUNDER