Die Plattform für Hard- & Software in Kleinsteuerung

Creating Beautiful Content With Simple Code

Typography is a fundamental part of a template, providing you with the tools to characterise your content and bring it to life. There is a vast array of typography available with the template, as is with our previous releases, from list styles, notice blocks and a diverse number of other elements.

If you are using the TinyMCE editor for HTML typography, go to Extensions → Plugin Manager → TinyMCE 2.0 → Set Code Clean-up on Save to Never.

<h1> Heading Styles

H1. Heading 1

H2. Heading 2

H3. Heading 3

H4. Heading 4

H5. Heading 5

H1. Page Title

H1. Content Title

<ul> List Styles

  • This is an example of a standard list style. Lorem ipsum dolor sit amet, consecetur adipiscing elit. Donec sit amet nibh.
  • This is an example of a standard list style. Lorem ipsum dolor sit amet, consecetur adipiscing elit. Donec sit amet nibh.
  • This is an example of a standard list style. Lorem ipsum dolor sit amet, consecetur adipiscing elit. Donec sit amet nibh.
  • This is an example of a standard list style. Lorem ipsum dolor sit amet, consecetur adipiscing elit. Donec sit amet nibh.
  • This is an example of a standard list style. Lorem ipsum dolor sit amet, consecetur adipiscing elit. Donec sit amet nibh.
 

<p> DropCap Styles

Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibu. Pellentesque vel enim urna, sit amet blandit ipsum. Maecenas quis sem sit amet nunc pretium mattis. Sed dapibus semper est, sed pretium erat.

Use the following format: <p class="dropcap">...</p> (HTML) or [dropcap class="dropcap"]...[/dropcap] (ROKCANDY). You can use any letter, symbol or number.

Praesent rutrum sapien ac felis. Use this format: <p class="dropcap2">...</p> (HTML) or [dropcap class="dropcap2"] ... [/dropcap] (ROKCANDY)

Praesent rutrum sapien ac felis. Use this format: <p class="dropcap3">...</p> (HTML) or [dropcap class="dropcap3"] ... [/dropcap] (ROKCANDY)

Praesent rutrum sapien ac felis. Use this format: <p class="dropcap4">...</p> (HTML) or [dropcap class="dropcap4"] ... [/dropcap] (ROKCANDY)

Praesent rutrum sapien ac felis. Use this format: <p class="dropcap5">...</p> (HTML) or [dropcap class="dropcap5"] ... [/dropcap] (ROKCANDY)

<blockquote> Styles

To replicate, use the following formatting: <blockquote><p>....</p></blockquote> (HTML) or [blockquote class="default"]...[/blockquote] (ROKCANDY).

Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis.

To replicate, use the following formatting: <blockquote class="alignleft"><p>....</p></blockquote> (HTML) or [blockquote class="alignleft"]...[/blockquote] (ROKCANDY).

Lorem ipsum dolor sit amet, consecetur adipiscing elit. Mauris metus tortor.

Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis.

To replicate, use the following formatting: <blockquote class="alignright"><p>....</p></blockquote> (HTML) or [blockquote class="alignright"]...[/blockquote] (ROKCANDY).

Lorem ipsum dolor sit amet, consecetur adipiscing elit. Mauris metus tortor.

 

<pre> Code Styles

This is a sample <pre class="lines">...</pre> (HTML) or,
[pre2 class="{lines}"] ... [/pre2] (ROKCANDY) tag:

div.modulebox-black div.bx1 {
  background: url(../images/box_bl.png) 0 100% repeat;
}

div.modulebox-black div.bx2 {
  background: url(../images/box_tr.png) 100% 0 repeat;
}
This is a sample <pre>...</pre> (HTML) or,
[pre class="{lines}"] ... [/pre] (ROKCANDY) tag:

div.modulebox-black div.bx1 {
  background: url(../images/box_bl.png) 0 100% repeat;
}

div.modulebox-black div.bx2 {
  background: url(../images/box_tr.png) 100% 0 repeat;
}

<p> Notice Styles

This is a sample of the Approved style. To replicate, use the following syntax: <p class="approved">....</p> (HTML) or [notice class="approved"] ... [/notice] (ROKCANDY).

This is a sample of the Attention style. To replicate, use the following syntax: <p class="attention">....</p> (HTML) or [notice class="attention"] ... [/notice] (ROKCANDY).

This is a sample of the Notice style. To replicate, use the following syntax: <p class="notice">....</p> (HTML) or [notice class="notice"] ... [/notice] (ROKCANDY).

This is a sample of the Alert style. To replicate, use the following syntax: <p class="alert">....</p> (HTML) or [notice class="alert"] ... [/notice] (ROKCANDY).

 

<span> Text Icon

To replicate, the following format: <span class="text-icon iconname">...</span> (HTML) or [icon class="icon name"]...[/icon] (ROKCANDY). The class names are listed below, such as "text-icon email".

Text with a phone icon Text with a quote icon Text with a cart icon Text with a rss icon Text with a tags icon Text with a write icon Text with an info icon Text with a sound icon Text with a rightarrow icon Text with a leftarrow icon Text with a circlearrow icon Text with a downarrow icon Text with an uparrow icon
Text with a person icon Text with a calendar icon Text with a doc icon Text with a bulb icon Text with a youtube icon Text with a skype icon Text with a video icon Text with a dropbox icon Text with a vimeo icon Text with a paypal icon

<em> Emphasis Styles

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="italic">...</em> (HTML) or [emphasis]...[/emphasis] (ROKCANDY)

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="bold">...</em> (HTML) or [emphasisbold]...[/emphasisbold] (ROKCANDY)

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="bold2">...</em> (HTML) or [emphasisbold2]...[/emphasisbold2] (ROKCANDY)

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="highlight">...</em> (HTML) or [highlight class="default"]...[/highlight] (ROKCANDY)

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="highlight white">...</em> (HTML) or [highlight class="white"]...[/highlight] (ROKCANDY)

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="highlight black">...</em> (HTML) or [highlight class="black"]...[/highlight] (ROKCANDY)

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="highlight green">...</em> (HTML) or [highlight class="green"]...[/highlight] (ROKCANDY)

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="highlight yellow">...</em> (HTML) or [highlight class="yellow"]...[/highlight] (ROKCANDY)

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="highlight blue">...</em> (HTML) or [highlight class="blue"]...[/highlight] (ROKCANDY)

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="highlight red">...</em> (HTML) or [highlight class="red"]...[/highlight] (ROKCANDY)

 

Font Awesome Icons

Font Awesome is a pictographic language of web-related actions which delivers 220 icons. The Font Awesome webfont, CSS, and LESS files are licensed under CC BY 3.0 and you can find the full examples of usage at Font Awesome - http://fortawesome.github.com/Font-Awesome

To replicate, use the following format: <span class="icon-name"></span> or [span class="icon-name"]...[/span] (ROKCANDY). The icons name are listed below, such as "icon-signal".

Text using icon-adjust Text using icon-asterisk Text using icon-calendar
Text using icon-flag Text using icon-external-link Text using icon-gift
Text using icon-print Text using icon-group Text using icon-signal
Text using icon-shopping-cart Text using icon-leaf Text using icon-download-alt
 

<ul> List Styles (Icons)

To replicate, use the following format: <ul class="list-icon icon_name"><li>....</li><li>....</li>...</ul> (HTML) or [list class="list-icon icon_name"][li]....[/li][li....[/li][/list] (ROKCANDY). The icon names are listed below, such as "cart".

  • A list item using the list-icon phone class.
  • A list item using the list-icon phone class.
  • A list item using the list-icon quote class.
  • A list item using the list-icon quote class.
  • A list item using the list-icon youtube class.
  • A list item using the list-icon youtube class.
  • A list item using the list-icon cart class.
  • A list item using the list-icon cart class.
  • A list item using the list-icon tags class.
  • A list item using the list-icon tags class.
  • A list item using the list-icon write class.
  • A list item using the list-icon write class.
  • A list item using the list-icon info class.
  • A list item using the list-icon info class.
  • A list item using the list-icon sound class.
  • A list item using the list-icon sound class.
  • A list item using the list-icon rightarrow class.
  • A list item using the list-icon rightarrow class.
  • A list item using the list-icon skype class.
  • A list item using the list-icon skype class.
  • A list item using the list-icon rss class.
  • A list item using the list-icon rss class.
  • A list item using the list-icon leftarrow class.
  • A list item using the list-icon leftarrow class.
  • A list item using the list-icon circlearrow class.
  • A list item using the list-icon circlearrow class.
  • A list item using the list-icon dropbox class.
  • A list item using the list-icon dropbox class.
  • A list item using the list-icon vimeo class.
  • A list item using the list-icon vimeo class.
  • A list item using the list-icon downarrow class.
  • A list item using the list-icon downarrow class.
  • A list item using the list-icon video class.
  • A list item using the list-icon video class.
  • A list item using the list-icon uparrow class.
  • A list item using the list-icon uparrow class.
  • A list item using the list-icon person class.
  • A list item using the list-icon person class.
  • A list item using the list-icon calendar class.
  • A list item using the list-icon calendar class.
  • A list item using the list-icon bulb class.
  • A list item using the list-icon bulb class.
  • A list item using the list-icon paypal class.
  • A list item using the list-icon paypal class.
  • A list item using the list-icon doc class.
  • A list item using the list-icon doc class.
 

<ul> List Styles (CSS3)

These list styles are based on the latest CSS3 techniques and are designed to work in modern browsers (will not display properly in IE6-IE8).

To replicate, use the following format: <ul class="class name"><li>....</li><li>....</li>...</ul> (HTML) or [list class="class name"][li]....[/li][li....[/li][/list] (ROKCANDY). The class names are listed below, such as "checkmark red".

  • checkmark
  • checkmark
  • circle-checkmark
  • circle-checkmark
  • square-checkmark
  • square-checkmark
  • checkmark green
  • checkmark green
  • checkmark yellow
  • checkmark yellow
  • checkmark red
  • checkmark red
  • checkmark blue
  • checkmark blue
  • checkmark white
  • checkmark white
  • triangle-small
  • triangle-small
  • triangle
  • triangle
  • triangle-large
  • triangle-large
  • triangle green
  • triangle green
  • triangle yellow
  • triangle yellow
  • triangle red
  • triangle red
  • triangle blue
  • triangle blue
  • triangle white
  • triangle white
  • circle-small
  • circle-small
  • circle
  • circle
  • circle-large
  • circle-large
  • circle green
  • circle green
  • circle yellow
  • circle yellow
  • circle red
  • circle red
  • circle blue
  • circle blue
  • circle white
  • circle white
 

<span> Inset Styles

Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Inset Right TitleYou will need to use the following formatting: <span class="inset-right"> <span class="inset-right-title"> .... </span> ... some content ... </strong> (HTML) or [inset side="right" title="Inset Right Title"] ... some content ...[/inset] (ROKCANDY) Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod magna a nibh.

Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Inset Left TitleYou will need to use the following formatting: <span class="inset-left"> <span class="inset-left-title"> .... </span> ... some content ... </strong> (HTML) or [inset side="left" title="Inset Left Title"] ... some content ...[/inset] (ROKCANDY) Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod magna a nibh.

Sed euismod magna a nibh. Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

  • All
  • Hardware
  • Einsteigersetset Die SR-12MRAC ist  das Basismodul zur Realisierung einer Vielzahl verschiedener Steuerungsabläufe. Die SR-12MRAC besitzt  8 digitale Eingänge sowie 4 Relaisausgänge (potentialfrei), sowie eine  Echtzeitauswertung.  Damit können bereits eine Vielzahl
    weiterlesen

    Einsteigerset Basismodul

    • Hardware
  • Basismodul mit 230V AC Steuerspannung Die SR-12MRAC ist  das Basismodul aus der SR-Serie zur Realisierung einer Vielzahl verschiedener Steuerungsabläufe mittels speicherprogrammierbarer Steuerung (SPS oder in Kompaktform auch Logik-Relais genannt).  Die
    weiterlesen

    Logikrelais Basisgerät AC

    • Hardware
  • Basismodul mit 24V DC Steuerspannung Die SR-12MRDC ist  das Basismodul unserer Kleinsteuerung mit Versorgungsspannung 12-24V DC zur Realisierung einer Vielzahl verschiedener Steuerungsabläufe.  Insbesondere die Fähigkeit zur zusätzlichen Verarbeitung von Analogsignalen
    weiterlesen

    Logikrelais Basisgerät DC

    • Hardware
  • Großes Basismodul mit 230V AC Steuerspannung Die SR-22MRAC ist  das Basismodul aus der SR-Serie zur Realisierung einer Vielzahl verschiedener Steuerungsabläufe mittels speicherprogrammierbarer Steuerung (SPS oder in Kompaktform auch Logik-Relais genannt).
    weiterlesen

    Logikrelais Basisgerät groß AC

    • Hardware
  • Großes Basismodul mit 24V DC Steuerspannung Die SR-22MRDC ist  das Basismodul unserer Kleinsteuerung mit Versorgungsspannung 24V DC und einer erweiterten Anzahl von insgesamt 14 Eingängen (davon 8 analog nutzbar) und 8
    weiterlesen

    Logikrelais Basisgerät groß DC

    • Hardware
  • AC-Erweiterungsmodul Das Erweiterungsmodul ergänzt das Basisgerät SR-12MRAC (Art.-Nr. PLC-1Sr12Ac) oder SR-22MRAC (Art.-Nr. PLC-6-Sr22MRAc) um weitere 12 Eingänge und 8 Relais-Ausgänge. Die Lieferung erfolgt mit Verbindungsbrücke (siehe Abb.) zur Montage auf
    weiterlesen

    Erweiterungsmodul AC

    • Hardware
  • DC-Erweiterungsmodul Das Erweiterungsmodul ergänzt das Basisgerät SR-13MRDC (Art.-Nr. PLC-1Sr13Dc) oder SR-22MRAC (Art.-Nr. PLC-6-Sr22MRAc) um weitere 12 Eingänge und 8 Relais-Ausgänge. Die Lieferung erfolgt mit Verbindungsbrücke (siehe Abb.) zur Montage auf
    weiterlesen

    Erweiterungsmodul DC

    • Hardware
  • Fernsteuerung-Set für AC-Basismodule Die Fernbedienung für SR-Relais benützt ein mobiles Sendeteil und eine zugehörige Empfangsstation, welche als Erweiterungsgerät einer SR-Basisstation auf Hutschiene montiert werden kann. Die zu überbrückende Distanz beträgt
    weiterlesen

    Fernsteuerung AC

    • Hardware
  • Fernsteuerung-Set für DC-Basismodule Die Fernbedienung für SR-Relais benützt ein mobiles Sendeteil und eine zugehörige Empfangsstation, welche als Erweiterungsgerät einer SR-Basisstation auf Hutschiene montiert werden kann. Die zu überbrückende Distanz beträgt
    weiterlesen

    Fernsteuerung DC

    • Hardware
  • Stationäre Antenne kabelgebunden Zur externen Montage bei schwierigen Übertragungsverhältnissen. Die Antenne kann z. B. im Freien aufgestellt werden und mittels eines Antennenkabels mit dem Empfängerteil direkt verbunden werden. Zu beachten:
    weiterlesen

    Externe Antenne

    • Hardware
  • Sprachmodul mit Modem für AC-Basisgerät Sprachausgabe von Alarmfunktionen, Telefonanschluss mit Autowählfunktion und für ähnliche Anwendungen, ist das Sprach- und Telefonmodul die richtige Ergänzung zur Basisstation der SR-Kleinsteuerung. Passend zur PLC-1-SR12MRAc
    weiterlesen

    Modem u. Sprachmodul AC

    • Hardware
  • Sprachmodul mit Modem für DC-Basisgerät Sprachausgabe von Alarmfunktionen, Telefonanschluss mit Autowählfunktion und für ähnliche Anwendungen, ist das Sprach- und Telefonmodul die richtige Ergänzung zur Basisstation der SR-Kleinsteuerung. Passend zur PLC-1-SR12MRAc
    weiterlesen

    Modem u. Sprachmodul DC

    • Hardware
  • HMI-Display für SR- Logikmodul Passend für alle Basisgeräte (AC und DC-Ausführung). Monochromes Display, beleuchtet zur komfortableren Bedienung des SR-Relais. Das HMI-Display erlaubt Zustandsmeldungen im Klartext, Fehlermeldungen oder das Anzeigen und
    weiterlesen

    HMI-Display

    • Hardware
  • WRT-Display für SR- Logikmodul Passend für alle Basisgeräte (AC und DC-Ausführung). Monochromes Display, beleuchtet zur komfortableren Bedienung des SR-Relais. Das WRT-Display erlaubt Zustandsmeldungen im Klartext, Fehlermeldungen oder das Anzeigen und
    weiterlesen

    WRT-Programmierdisplay

    • Hardware
  • RS232 Transferkabel Passend für alle Basisgeräte (AC und DC-Ausführung). Für den Datentransfer von am Pc erstellten Programmen in den Logikbaustein SR-Relais. Verbindung eines PCs mit dem SR-Logikmodul über RS232 - Schnittstelle
    weiterlesen

    RS232 Transferkabel

    • Hardware
  • SrDusb Transferkabel Passend für alle Basisgeräte (AC und DC-Ausführung). Für den Datentransfer von am Pc erstellten Programmen in den Logikbaustein SR-Relais. Verbindung eines PCs mit dem SR-Logikmodul über USB - Schnittstelle
    weiterlesen

    USB Transferkabel

    • Hardware