Primary Color:
Primary Text:
Secondary Color:
Secondary Text:
Tertiary Color:
Tertiary Text:
Color Picker
Preview
FeaturesTypographyTutorials
Module Title
Home
Module Title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut non turpis a nisi pretium rutrum. Nullam congue, lectus a aliquam pretium, sem urna tempus justo, malesuada consequat nunc diam vel justo. In faucibus elit at purus. Suspendisse dapibus lorem. Curabitur luctus mauris.

Module Title
Module Title
Instructions

Select a predefined style from the drop-down or choose your own colors via the handy mooRainbow based color-chooser. When you are satisfied with your selection, click the "Apply Colors" button below to store your selection in a cookie.

Apply Colors
Typography Chromatophore
Geschrieben von: Klaus Frei   

Unendliche Farb- und Mustervariationen

Chromato ist eine Benutzeroberfläche, auch Template genannt, die farblich sehr variabel ist und, sofern man das wünscht, sogar von den Besuchern selbst angepasst werden kann. Versuchen Sie es einfach mal aus.

  1. Ganz oben rechts auf den Botton "Color Chooser" klicken
  2. Oben links den Hintergrund und die Farbe wählen
  3. Rechts auf "Apply Colors" klicken

Staunen Sie, wie sich die Seite komplett verändert! Der Inhalt und das Layout bleibt aber bestehen. Magic von Joomla! und Rocket Themes.

Typorgraphische Möglichkeiten der Seite:

This page shows all of the typography styles and settings for Chromatophore in action. If you would like to read more detailed information on inserting the included typography into your content, check out the Chromatophore Typography Tutorial.

Schriften Kontrolle

Chromato erlaubt Ihnen die Schrift der ganzen Seite mit einer einfach Änderung im Code zu ändern. Sie können zwischen folgenden Schriften wählen: geneva | optima | helvetica | trebuchet | lucida | georgia | palatino

Dies ist eine grosse Überschrift

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. Sed euismod magna a nibh.

Dies ist eine Kategorienüberschrift

Proin ac nunc eu nunc condimentum accumsan. Phasellus odio justo, euismod vitae, egestas a, porttitor in, urna. Maecenas vitae mauris. Donec vestibulum, nunc eu varius pharetra, massa est sagittis odio, sit amet eleifend elit dolor id tortor.

Dies ist ein H1 Titel

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sit amet odio quis sapien molestie ultrices. Vivamus quis lectus. Praesent eu mi. Curabitur pharetra leo sed nisl. Nunc vel nisi. Aliquam nulla. Etiam at est. Pellentesque arcu diam, tempus nec, sodales eu, ullamcorper quis, risus.

Falls Sie Ihren Text speziell hervorheben wollen:
This is a sample of the 'alert' style. Use this style to denote very important information to your users. To use this use the folllowing html: <span class="alert">....</span> This is a sample of the 'info' style. Use this style to denote pieces of information or tips for your readers and visitors. To use this use the folllowing html: <span class="info">....</span> This is a sample of the 'note' style. Use this style to denote items in your content that you would like your users to note or pay attention to. To use this use the folllowing html: <span class="note">....</span> This is a sample of the 'download' style. Use this style to denote information containing a download or information about an available download on your site. To use this use the folllowing html: <span class="download">....</span>

Ein H2 Titel

Proin ac nunc eu nunc condimentum accumsan. Phasellus odio justo, euismod vitae, egestas a, porttitor in, urna. Maecenas vitae mauris. Donec vestibulum, nunc eu varius pharetra, massa est sagittis odio, sit amet eleifend elit dolor id tortor.

Ein H3 Titel

Mauris euismod. In ac massa vitae quam tincidunt dapibus. Ut at tortor nec mi mattis blandit. Maecenas venenatis lorem at nulla. Phasellus a libero. Sed odio odio, eleifend dignissim, feugiat vel, tempor nec, ligula. Suspendisse lacinia convallis nulla. Vestibulum posuere, lacus aliquet pulvinar faucibus, tortor urna luctus diam, vitae ultrices ante magna non tellus.

Ein H4 Titel

Beispiel eines <pre>...</pre> Tags:

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

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

div.modulebox-black div.bx3 {
background: url(../images/black/box_tl.png) 0 0 no-repeat;
padding: 0;
margin: 0;
}

Oder Sie möchten einen Text grau hinterlegen: (use <blockquote><p>....</p></blockquote>)

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. Sed euismod magna a nibh.

Auch Listen lassen sich individuell gestalten

Hier finden Sie eine Liste mit so genannten bullets. Mit folgendem Code, der einfach in den Text eingefügt wird, lassen sich spezielle Listen anlegen: <ul class="class name"><li>....</li><li>....</li>...</ul>

  • To use this style create a list in the following format: <ul class="bullet-1"><li>....</li><li>....</li>...</ul>.
  • To use this style create a list in the following format: <ul class="bullet-2"><li>....</li><li>....</li>...</ul>.
  • To use this style create a list in the following format: <ul class="bullet-3"><li>....</li><li>....</li>...</ul>.
  • To use this style create a list in the following format: <ul class="bullet-4"><li>....</li><li>....</li>...</ul>.
Die Zeichen lassen sich natürlich auch individuel gestallten. Es können auch weitere Zeichen eingefügt werden. Sehen Sie sich das Bespiel hier einmal an.
 
Kaffee hält uns bei der harten Arbeit am Leben. Unterstützen Sie uns mit einer Tasse...

Google Maps als Seitenmodul

Größere Kartenansicht
RocketTheme Joomla Templates