Logo
Template Coding
CMSimple_XH Template
You are here: Home > Templates > TEMPLATE overlay_03 > Template specific styles

Template specific styles

This page demonstrates some styles that are specifically available in “overlay_03”.

de Template spezifische Styles

Diese Seite demonstriert einige Styles, die speziell in „overlay_03“ verfügbar sind.


Responsive Tables

Sample Table (a viewport width less than 600px changes the table’s layout).

de Responsive Tabelle

Beispiel-Tabelle (ab einer Viewport-Breite kleiner 600px verändert sich die Tabelle)

 

Name
Age
Profession
Location
Henriette Hummel
35
Schauspielerin
Hummelstadt
Werner Wespe
53
Feuerwehrmann
Feuerdorf
Beate Biene
27
Stewardess
Bienenbrunn
Ferdinand Fliege
45
Web-Designer
Fliegersheim

 

en Unordered List / de Ungeordnete Listen

  • 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.

en Ordered List / de Geordnete Listen

  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.

 

Images / de Bilder (responsive)

demo-img-full.png

Image responsive full width

… with text flow / de … mit umfließenden Text

demo-img-small.png

DIV class "right_30"

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. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec facilisis. Fusce imperdiet, augue at dignissim ultricies, tortor libero vehicula neque, ac malesuada lorem dolor et arcu. Quisque accumsan metus vel diam. 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. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec facilisis. Fusce imperdiet, augue at dignissim ultricies, tortor libero vehicula neque, ac malesuada lorem dolor et arcu. Quisque accumsan metus vel diam. Fusce pulvinar ante non sapien. Aliquam iaculis, wisi ac tristique ornare, ante est lacinia urna, quis tempor neque dui id tortor. Vivamus posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec facilisis. Aliquam iaculis, wisi ac tristique ornare, ante est lacinia urna, quis tempor neque dui id tortor. Vivamus posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec facilisis. Aliquam iaculis, wisi ac tristique ornare, ante est lacinia urna, quis tempor neque dui id tortor. Vivamus posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec facilisis. Aliquam iaculis, wisi ac tristique ornare, ante est lacinia urna, quis tempor neque dui id tortor. Vivamus posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec facilisis.

demo-img-full.png

DIV class "left_50"

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. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec facilisis. Fusce imperdiet, augue at dignissim ultricies, tortor libero vehicula neque, ac malesuada lorem dolor et arcu. Quisque accumsan metus vel diam. Fusce pulvinar ante non sapien. Aliquam iaculis, wisi ac tristique ornare, ante est lacinia urna, quis tempor neque dui id tortor. Vivamus posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec facilisis.

… with middle centered text /
de … mit Text mittig zentriert

demo-img-small.png

DIV class "tpllck_tbl-middle"
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.

 

DIV class "tpllck_tbl-middle"
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.

demo-img-small.png

Responsive Video

DIV class "responsive-video-wrapper" + "responsive-video"

 

Code & Blockquote

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque cursus, mauris nec sagittis dictum, <code>inline text</code> 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.

<p class="code">Hello World!</p>

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.
The following text is <blockquote>.

Dumme Gedanken hat jeder, aber der Weise verschweigt sie.

Wilhelm Busch

p class "highlight"
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. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec facilisis. Fusce imperdiet, augue at dignissim ultricies, tortor libero vehicula neque, ac malesuada lorem dolor et arcu. Quisque accumsan metus vel diam.

 

en Newsboxes

Newsboxes should normally start with an h2 header. The content then contains text and other headings as required.

de Newsboxen

Die Newsboxen sollten normalerweise mit einer h2-Überschrift beginnen. Im Inhalt folgen dann je nach Bedarf Text und weitere Überschriften.