Main Menu  

   

Login Form  

   

Typography

Details

Hello everyone! In this chapter you will learn something about typography. All of the following items are available in your articles. To use them you open an article and switch off the editor to pure html code. Enter the html code you see below and the template will react.

Toggle ALL

Accordion

To use the accordion you simply define a link with a class called "lvacc" and after that you define a div with the class "hideme".
In the div with the class "hideme" you enter the content you want to accord.

 
<a class="lvacc">Accordion</a>
<div class="hideme">
      some content here...
</div>
 
To toggle all Accordions on one page you can use this:
 
<a class="lvacc-all">Toggle ALL</a>
 
Horizontal rule
<hr />

<hr class="black" />

<hr class="red" />

<hr class="blue" />

<hr class="green" />

Headings 1-6
 
<h1>This text has a heading 1</h1>
<h2>This text has a heading 2</h2>
<h3>This text has a heading 3</h3>
<h4>This text has a heading 4</h4>
<h5>This text has a heading 5</h5>
<h6>This text has a heading 6</h6>
 

This text has a heading 1

This text has a heading 2

This text has a heading 3

This text has a heading 4

This text has a heading 5
This text has a heading 6

 
<h1 class="section">Section heading</h1>
<h2 class="section">Section heading</h2>
<h3 class="section">Section heading</h3>
<h4 class="section">Section heading</h4>
<h5 class="section">Section heading</h5>
<h6 class="section">Section heading</h6>
 

Section heading

Section heading

Section heading

Section heading

Section heading
Section heading

 
<h3 class="the-end">The end</h3>
 

The end

Paragraphs
 
<p class="tip">TEXT-HERE...</p>
<p class="alert">TEXT-HERE...</p>>
 

Ein Tip Text welcher dazu verwendet werden kann um spezielle gut sichtbare Tips von sich zu geben.

Ein Alarm Text welcher dazu verwendet werden kann um spezielle gut sichtbare Alarmmeldungen von sich zu geben.


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

p Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen. Sofern man dem p einen Klassennamen 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 einen Klassennamen 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 einen Klassennamen 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 einen Klassennamen 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 einen Klassennamen 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 einen Klassennamen mitgibt, wird es so formatiert wie in dieser Demo.


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

p Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen. Sofern man dem p einen Klassennamen 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 einen Klassennamen 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 einen Klassennamen 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 einen Klassennamen 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 einen Klassennamen mitgibt, wird es so formatiert wie in dieser Demo.


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

p Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen. Sofern man dem p einen Klassennamen 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 einen Klassennamen 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 einen Klassennamen mitgibt, wird es so formatiert wie in dieser Demo.

Code
 
<code>TEXT-HERE...</code>
 
Dies ist ein Code Text. Damit kann man innerhalb von Webseiten einen Code auszeichnen und diesen darstellen.
Blockquote
 
<blockquote>TEXT-HERE...</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.
Lists

Unorderd Lists

 
<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

 
<ul class="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

Hyperlinks
 
<a href="#" title="normaler Hyperlink">Ein normaler Hyperlink</a>
<a class="info" href="#" title="normaler Hyperlink">Ein normaler Hyperlink</a>
<a class="extern" href="#" title="normaler Hyperlink">Ein normaler Hyperlink</a>
<a class="www" href="#" title="normaler Hyperlink">Ein normaler Hyperlink</a>
<a class="download" href="#" title="normaler Hyperlink">Ein normaler Hyperlink</a>
<a class="run" href="#" title="normaler Hyperlink">Ein normaler Hyperlink</a>
<a class="image" href="#" title="normaler Hyperlink">Ein normaler Hyperlink</a>
<a class="user" href="#" title="normaler Hyperlink">Ein normaler Hyperlink</a>
<a class="pdf" href="#" title="normaler Hyperlink">Ein normaler Hyperlink</a>
<a class="zip" href="#" title="normaler Hyperlink">Ein normaler Hyperlink</a>
<a class="text" href="#" title="normaler Hyperlink">Ein normaler Hyperlink</a>
<a class="sound" href="#" title="normaler Hyperlink">Ein normaler Hyperlink</a>
<a class="video" href="#" title="normaler Hyperlink">Ein normaler Hyperlink</a>
 
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

Tooltips

Basic tooltips

With the class="lv-tooltip" you can use the simple tooltip shiped with this template. The lv-tooltip scans and shows the TITLE tag of your HTML elements. Just use the [title] attribute on all html elements you want.

 
<a class="lv-tooltip" href="#" title="I am a Tooltip">A link with a simple tooltip</a>
<p class="lv-tooltip" title="This will be a very large Tooltip::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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.">A paragraph with a LARGE tooltip -.-</p>
<a class="lv-tooltip" href="#" title="I am a <b>tooltip</b> with some <u>HTML tag</u> inside">A simple tooltip with HTML</a>
 
A link with a simple tooltip

A paragraph with a LARGE tooltip -.-

A simple tooltip with HTML

Colorful tooltips

With the class="lv-tooltip-COLORNAME" you can add colorful tooltips to your html elements.

 
This is a <a href="#" class="lv-tooltip-white" title="I am a tooltip, created via title and class">WHITE tooltip</a>
This is a <a href="#" class="lv-tooltip-black" title="I am a tooltip, created via title and class">BLACK tooltip</a>
This is a <a href="#" class="lv-tooltip-blue" title="I am a tooltip, created via title and class">BLUE tooltip</a>
This is a <a href="#" class="lv-tooltip-red" title="I am a tooltip, created via title and class">RED tooltip</a>
This is a <a href="#" class="lv-tooltip-green" title="I am a tooltip, created via title and class">GREEN tooltip</a>
This is a <a href="#" class="lv-tooltip-yellow" title="I am a tooltip, created via title and class">YELLOW tooltip</a>
 
This is a WHITE tooltip
This is a BLACK tooltip
This is a BLUE tooltip
This is a RED tooltip
This is a GREEN tooltip
This is a YELLOW tooltip

Separator tooltips

With the separator :: (double dots) anywhere in the TITLE of your HTML element, you can add a tooltitle to your tooltips.

 
<a href="#" class="lv-tooltip" title="Tooltitle :: and the Tooltext is here">#1 SEPARATOR tooltip</a>
<a href="#" class="lv-tooltip-red" title="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 SEPARATOR tooltip</a>
 
#1 SEPARATOR tooltip
#2 SEPARATOR tooltip
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 Tag", welches den Klassennamen "dropcap" hat .


Images
 
<img class="featured" alt="cool Image" src="images/200x200.png" />
<p>Some text...</p>
 
joomla
Why?

With this featured image you can write entry texts and use a read-more link after the text.

Some random text

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" alt="cool image" src="images/200x200.png" />
<p>Some text...</p>
 
cool image
Why?

With this featured image you can write entry texts and use a read-more link after the text.

Some random text

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="cool image" src="images/200x200.png" />
 
cool image
 
<img class="border-light" alt="cool image" src="images/200x200.png" />
 
cool image
Image reflection
 
<img class="reflect" alt="cool image" src="images/200x200.png" />
<img class="reflect" alt="joomla" src="images/joomla_logo_black.jpg" />
<img class="reflect" alt="koala" src="images/sampledata/parks/animals/180px_koala_ag1.jpg" />
 
joomla
joomla
joomla
Image captions
 
<img class="lv-caption" alt="This is a caption text!" src="images/joomla_logo_black.jpg" />
<img class="lv-caption" alt="Caption are cool, :: This is a caption text!" src="images/200x200.png" />
<img class="lv-caption-fade" alt="An image caption :: with the effect: FADE" src="images/200x200.png" />
<img class="lv-caption-slide" alt="An image caption :: with the effect: SLIDE" src="images/200x200.png" />
<img class="lv-caption-bounce" alt="An image caption :: with the effect: BOUNCE" src="images/200x200.png" />
<img class="lv-caption-gravity" alt="An image caption :: with the effect: GRAVITY" src="images/200x200.png" />
<img class="lv-caption-zoom" alt="An image caption :: with the effect: ZOOM" src="images/200x200.png" />
<img class="lv-caption-racer" alt="An image caption :: with the effect: RACER" src="images/200x200.png" />
<img class="lv-caption-move" alt="An image caption :: with the effect: MOVE" src="images/200x200.png" />
 
This is a caption text!
Caption are cool, :: This is a caption text! An image caption :: with the effect: FADE An image caption :: with the effect: SLIDE An image caption :: with the effect: BOUNCE An image caption :: with the effect: GRAVITY An image caption :: with the effect: ZOOM An image caption :: with the effect: RACER An image caption :: with the effect: MOVE
Columns (2-6)

Two columns

 
<div class="lv-cols">
    <div class="lv-cols2">
        Some content here...
    </div>
    <div class="lv-cols2">
        Some content here...
    </div>
</div>
 
2 cols featured image

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 cols featured image

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


Three columns

 
<div class="lv-cols">
    <div class="lv-cols3">
        Some content here...
    </div>
    <div class="lv-cols3">
        Some content here...
    </div>
    <div class="lv-cols3">
        Some content here...
    </div>
</div>
 
3 cols

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 cols

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 cols

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


Four columns

 
<div class="lv-cols">
    <div class="lv-cols4">
        Some content here...
    </div>
    <div class="lv-cols4">
        Some content here...
    </div>
    <div class="lv-cols4">
        Some content here...
    </div>
    <div class="lv-cols4">
        Some content here...
    </div>
</div>
 
4 cols

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 cols

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 cols

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 cols

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


Five columns

 
<div class="lv-cols">
    <div class="lv-cols5">
        Some content here...
    </div>
    <div class="lv-cols5">
        Some content here...
    </div>
    <div class="lv-cols5">
        Some content here...
    </div>
    <div class="lv-cols5">
        Some content here...
    </div>
</div>
 
5 cols

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 cols

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 cols

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 cols

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 cols

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


Six columns

 
<div class="lv-cols">
    <div class="lv-cols6">
        Some content here...
    </div>
    <div class="lv-cols6">
        Some content here...
    </div>
    <div class="lv-cols6">
        Some content here...
    </div>
    <div class="lv-cols6">
        Some content here...
    </div>
    <div class="lv-cols6">
        Some content here...
    </div>
</div>
 
6 cols

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 cols

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 cols

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 cols

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 cols

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 cols

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

Syntax Highlighting

To hightlight some code snippets with the GESHI Plugin, you have to enable the system plugin called Geshi, and to use the GESHI Syntax.

Example 1: for highlighting HTML syntax use this one:
 
<pre xml:lang="html4strict">
 <p>Highlight this!</p>
</pre>
 
Example 2: for highlighting Javascript syntax use this one:
 
<pre xml:lang="javascript">
  $('#toppanel').hide();
  $('a#toppanel-toggle').click(function(){
    $('#toppanel').slideToggle("middle");
    return true;
  });
</pre>
 

As you see: In this very big article we used a ton of GESHI syntax highlights. This is a very good way to explain things for your visitors.

The end

   
© ALLROUNDER