richu183_de

© 2018 by Kircher Richard richukunst.
Das Template ist ab Internet Explorer 9 kompatibel.
Das responsive Template ist für CMSimple_XH 1.7.0 und höher optimiert.
Das Template ist auch für CMSimple_XH 1.6.9 kompatibel, ältere Versionen habe ich nicht getestet.
Navigation Hamburger full-screen Navigation level 1-9. (CMSimple_XH 1.6.9 Menu level 1-3)
Icons, Bearbeitet Google Material Icons. / www.google.github.io/material-design-icons
Das Sprach Icon zur Auswahl der Sprache. / www.languageicon.org
Standard-Schriftart Roboto, Überschriften Quantico. / www.google-webfonts-helper.herokuapp.com/fonts
License ©: Das Template darf privat sowie kommerziell verwendet werden. Lizensiert unter der Creative Commons Attribution 3.0 Unported. / www.creativecommons.org / Die Templates dürfen nicht weiterverkauft werden.
Sie können ein Template von richukunst.ch modifizieren, wie und wo Sie dann Ihren modified by your link einfügen ist im Accordion Footer Buttons erklärt.
W3C-validiertes HTML und CSS, keine Fehler, in UTF-8 ohne BOM. / Developer Tools W3C Developers
Fragen zu den Templates, bitte im CMSimple_XH Forum posten. Vielen Dank dem CMSimple_XH–Forum, ohne dessen Hilfe, Tipps und Tricks in den letzten Jahren wären diese Templates nicht entstanden. Das Forum ist eine riesige Auswahl an Tipps und Tricks, lehrreich, lösungsorientiert und inspirierend, einfach absolut TOP!
Browser Test mit den Version: Internet Explorer 9-11, Microsoft Edge 42.17134.1.0, Firefox 62.0.3, Opera Version 56.0.3051.36, Google Chrome Version 69.0.3497.100. Die drei Templates konnten natürlich nicht mit allen Browsern, Smartphones, Tablets, Computers, Laptops und PCs getestet werden. Testen Sie ausgiebig die Templates bevor Sie diese für Ihr Projekt verwenden.
Falls Sie eines meiner Templates für Ihre Webpräsenz im World Wide Web verwenden, freue ich mich sehr, wenn Sie mir einen Link zu Ihrer Seite senden.

Browserpräfix

Browserpräfix oder Vendorpräfix bezeichnet man eine kurze Zeichenkette, die Browserhersteller den eigentlichen Bezeichnern voranstellen, wenn sie experimentelle Funktionen implementieren. Beachten Sie in der Live Demo, wenn Sie auf eine der Flaggen klicken und die Sprache ändern, müssen Sie oberhalb des Seitentitels das endsprechende (_de_en_fr) Template wählen, sonst wird der Footer nicht der Sprache entsprechende angezeigt. Quelle
Mit einem Prefix vor dem eigentlichen CSS-Code spricht man die browserspezifische Implementierung an. Zum Beispiel in Firefox, -moz-border-radius:8px; oder für Safari/Chrome -webkit-border-radius:8px;. In meinen Templates verzichte ich auf Browserpräfix Einträgen in meiner CSS-Datei. Ich verwende dafür die JavaScript Datei (.js) prefixfree.min.js von Lea Verou, leaverou.github.io. Prefixfree.min funktioniert hinter den Kulissen und fügt dem aktuellen Browser mittels dem prefixfree.min.js das passende Browserpräfix hinzu.

Template Live Demo

Besuchen Sie meine Templates Demo Homepage mit allen Templates von richukunst. Wählen sie oberhalb des Seitentitels eines der Templates aus und testen die Templates. Templates Demo-Seite

Einsprachige Webseite

Verwenden Sie nur eine Sprache auf Ihrer Webseite müssen Sie noch das Language Icon löschen. Das Language Icon löschen Sie in der template.htm Datei oder in Ihrer CMSimple_XH Installation unter Einstellungen auf Template klicken und den folgenden Code löschen. Löschen Sie die Zeilen 26 bis 29. Das language.png Icon wird jetzt nicht mehr angezeigt.

<div class="languagemenu">

<img src="<?php echo $pth['folder']['templateimages'];?>language.png" alt="language Mark"><span><?php echo languagemenu();?></span>
</div>

Mehrsprachige Webseiten

Verwenden Sie für deutschsprachige, englische oder französische Webseiten die Templates mit dem sprachlich angepassten Header Icon und dem Footer Buttons mit den Endungen _de, _en oder _fr. (Impressum Datenschutz) Alternativ kopieren Sie ein Template, ändern die Endungen _xx mit der von Ihnen gewählten Sprache und ergänzen in der template.htm Datei den Header Icon und die Footer Buttons mit der neuen Sprache.(Impressum Datenschutz) Beachten Sie bei Mehrsprachige Webseiten, klicken Sie in Ihrer en Webseite unter Settings auf Language Subsite Template und wählen richu183_en. In Ihrer fr Webseite CMS Langue klicken und Template und wählen richu183_fr. Jetzt können Sie den Header Icon und die Footer Buttons klicken und die sprachlich korrekte Seite wird angezeigt.

Template bestimmte Styles / Anleitung

Beispiele für Styles, die in diesem Template speziell enthalten sind. Bei allen unten beschriebenen Anwendungen ist der CSS Code bereits in der stylesheet.css Datei der Templates eingefügt. Sie müssen nur noch den Einbettcode der jeweiligen Anwendung in Ihre Seite einfügen, beachten Sie die jeweiligen Anleitungen.

Header Icons Navigation

Im Header auf der linken Seite sind sechs Icons platziert die durch das anklicken des gewählten Icons die entsprechenden Seiten öffnen.

Das Impressum Icon (i) und der Impressum Link des Footer Buttons benötigt eine Impressum Seite in Ihrer Webseite.

Das siebte, sprach Icon, zur Auswahl der Sprachen wird im Header zuoberst angezeigt. Bei mehrsprachigen Installationen kann durch das klicken auf die gewählte Flagge die Sprache gewechselt werden.

Überschriften

Überschriften Seiten, h1 bis h6. Da die Newsboxen in einer herkömmlichen Inhaltseite geöffnet werden hat das Template keine eigenen Newsboxen Überschriften.

Überschrift <h1>

Überschrift <h2>

Überschrift <h3>

Überschrift <h4>

Überschrift <h5>

Überschrift <h6>

Horizontale Linie

Im Editor horizontale Linie anklicken.

Zitate (Blockquote)

Im Editor zweite Zeile ganz rechts ʽʽ Zitat anklicken und Ihren Text einfügen.

Code Styles

Im Editor erste Zeile ganz rechts Formate anklicken, wählen Sie nun span.code mit erneutem klicken aus.

Template by <a title="richukunst Webdesign Homepages Templates" href="https://www.richukunst.ch/" target="_blank" rel="noopener noreferrer">richukunst</a>

Bilder

Um ein Bild über die maximale Seitenbreite anzuzeigen auf Desktop Displays (breite 1920 x Pixel) benötigen Sie ein Bild mit einer Breite von 950 Pixel.

Bilder mit umfliessendem Text und Lightbox

Bild mit umfliessendem Text einbinden und per Bild-Klick vergrössern mit Lightbox. Beispiel:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.

Beispiel linkes Bild, Bild mit Lightbox Code einfügen.

Im Editor auf <> Quelltext klicken und kopierten Lightbox Code einfügen und auf Ok klicken. Auf Bild klicken und im Editor erste Zeile ganz rechts Formate anklicken, wählen Sie nun span.imgL mit erneutem klicken aus. Jetzt können Sie neben das Bild klicken und den Text einfügen. Rechtes Bild einfach span.imgR auswählen.

Lightbox Bildergalerie

Bildergalerie mit Lightbox in Ihre Seite einfügen. Beispiel:

Eine detaillierte Anleitung wie Sie die Lightbox Bildergalerie in den beiden Templates verwenden finden Sie hier.

Accordions

Eine detaillierte Anleitung wie Sie Accordions in den Templates verwenden finden Sie hier. Die Bildergalerie Lightbox kann in den Accordions nicht verwendet werden.

Videos

Das Video ist mit dem CMSimple_XH Editor TinyMCE eingefügt, das Video wird responsive angezeigt.

YouTube Video responsive in die Templates einfügen.

Das Video wird auf der kompletten Inhaltsseite Ihrer Webseite angezeigt.

Das Video wird nicht auf der kompletten Inhaltsseite Ihrer Webseite angezeigt.

Eine detaillierte Anleitung wie Sie die YouTube Videos responsive in den Templates verwenden finden Sie hier.

Google Maps

Eine detaillierte Anleitung wie Sie Google-Maps responsive in die Templates einbinden finden Sie hier.

Newsboxen

Die Newsboxen, News01 und News02 werden mit den Footer Buttons geöffnet und in der Inhaltsseite angezeigt. Da die Newsboxen in einer herkömmlichen Inhaltseite geöffnet werden hat das Template keine eigenen Newsboxen Überschriften. Die Newsboxen können beliebig erweitert werden. (News03 News04) Eine detaillierte Anleitung im Accordion Footer Buttons.

Footer Buttons

<div class="container_news">
<a class="news_button btn-1" href="?News01">News01</a>
<a class="news_button btn-2" href="?News02">News02</a>
<a class="news_button btn-3" href="?Impressum">Impressum </a>
<a class="news_button btn-4" href="?Datenschutz">Datenschutz</a>
</div>

Die Footer Buttons ändern Sie in der template.htm Datei oder in Ihrer CMSimple_XH Installation unter Einstellungen auf Template klicken. Die Anzahl der Footer Buttons kann beliebig erweitert werden. Im Code news_button btn-1 wird die Farbe des Buttons bestimmt, wählen Sie btn-1 bis btn-10. (Zeile 85) Die Buttons Farben ändern Sie in der stylesheet.css oder in Ihrer CMSimple_XH Installation unter Einstellungen auf Stylesheet klicken. In der stylesheet.css ab Zeile 1174. Die Seite die Sie öffnen möchten fügen Sie hier im Code ein href="?News01". Die Überschrift des Footer Buttons ändern Sie hier, News01</a>. (Zeile 85)

Sie können auch externe Links mit den Footer Buttons in einem neuen Fenstern öffnen, Bearbeiten Sie den folgenden Code wie im Beispiel unten. Die neue Webseite wird dann in einem neun Tab geöffnet.

<a class="news_button btn-5" href="https://www.cmsimple-xh.org/" target="_blank" rel="noopener noreferrer">CMSimple_XH</a>

Link, Powered by CMSimple_XH und Link, Template by richukunst.
Wenn Sie CMSimple_XH verwenden, entfernen Sie den Link bitte nicht.
Der Link im Footer auf Template by richukunst muss zwingend beibehalten werden. (Namensnennung 3.0 Schweiz)
Sie können ein Template von richukunst.ch verändern, Ihr Link kann dann wie im Beispiel unten verlinkt werden. In der dafür bestimmten freien Zeile können Sie Ihren Link eintragen. Ändern in der template.htm Datei oder in Ihrer CMSimple_XH Installation unter Einstellungen auf Template klicken.

modified by <a title="your name" href="http://www.your_link" target="_blank" rel="noopener noreferrer">your name</a>

Free Template Download richu183_de für CMSimple_XH.

richu183_de mit Header Icons Impressum und Footer Buttons Impressum und Datenschutz.

Free Template Download richu183_en für CMSimple_XH.

richu183_en with header icons Legal Notice and Footer Buttons Legal Notice and Privacy.

Free Template Download richu183_fr für CMSimple_XH.

richu183_fr avec les icônes d'en-tête Mentions Légales et Footer Mentions Légales et Protection des données.