richu181_de/_en/_fr

 

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
Die Templates mit dem Business Footer richu181_de, richu181_en und richu181_fr sind bis auf die unterschiedlich eingesetzten Sprachen im Footer identisch. 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. Alle Templates, Templates Demo-Seite
 
Mehrsprachige Webseiten

Verwenden Sie für deutschsprachige, englische oder französische Webseiten die Templates mit dem sprachlich angepassten Footer mit den Endungen _de, _en oder _fr. 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 Footer mit der neuen Sprache. Beachten Sie bei Mehrsprachige Webseiten, klicken Sie in Ihrer en Webseite unter Settings auf Language Subsite Template und wählen richu181_en. In Ihrer fr Webseite CMS Langue klicken und Template und wählen richu181_fr. Jetzt können Sie im Footer auf das Kontakt-Formular, Mailform oder Formulaire de contact klicken und der sprachlich korrekte Footer wird angezeigt. Nur richu181_de, Demo-Seite

 
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 beiden Templates eingefügt. Sie müssen nur noch den Einbettcode der jeweiligen Anwendung in Ihre Seite einfügen, beachten Sie die jeweiligen Anleitungen.

 
Eigeblendete Icon Navigation

Im Header auf der linken Seite durch den Hover Effekt oder durch Anklicken des Ausrufezeichen Icon werden sechs Icons eingefahren mit denen Sie durch das anklicken des gewählten Icons die entsprechenden Seiten öffnen.

impressum.png Das Impressum Icon (i) und der Impressum Link im Footer benötigten eine Impressum Seite auf Ihrer Webseite. Auch der Datenschutz Link im Footer benötigt eine Seite. Erstellen Sie in Ihrer CMSimple_XH Installation unter Seiten eine Impressum und eine Datenschutz Seite. Sie können nun den grünen Hacken im Kästchen entfernen wenn Sie möchten und Speichern. Nun wird die Impressum und Datenschutz Seite nicht mehr in dem Navigations-Menü angezeigt. Ihre Impressum Seite öffnet sich durch das anklicken des Icon oder im Footer auf den Link Impressum oder Datenschutz klicken und die ausgewählten Seiten werden geöffnet. Mehrsprachige Webseiten mit der Sprache en benötigt eine Legal-Notice und eine Privacy Seite. Webseiten mit der Sprache fr benötigt eine Mentions Légales und eine Protection des données Seite.

 
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.

teneriffa_950_text.jpg
 
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. 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.

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.

<a href="./userfiles/images/img1.jpg" data-lightbox="example-1" data-title="Velotour 2017"><img src="./userfiles/images/img1_s.jpg" alt=""></a>

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.

 
 
Vier Newsboxen

Vier Newsboxen

Jeder der vier Newsboxen öffnet sich erst wenn auf das News-Button geklickt wird. Bei einem Seiten wechsle werden die vier Newsboxen erneut geschlossen angezeigt. Die Höhe der Newsboxen passt sich flexibel Ihrem Inhalt an. Sie können auch Videos, Google Maps, Lightbox oder Accordions in den Newsboxen installieren. Die Standard Überschriften der News-Button News01 bis News04 ändern Sie in der template.htm Datei oder in Ihrer CMSimple_XH Installation unter Einstellungen auf Template klicken.

<!-- newsbox Begin öffnen nach unten -->
<div class="tab">
<button class="newslinks" onclick="newslevels (event, 'News01')" id="defaultOpen">News01</button>
<button class="newslinks" onclick="newslevels (event, 'News02')">News02</button>
<button class="newslinks" onclick="newslevels (event, 'News03')">News03</button>
<button class="newslinks" onclick="newslevels (event, 'News04')">News04</button>
 
Letztes News01, News02, News03 oder News04 im Code vor </button> schreiben Sie Ihren Überschriften Namen ein.
 
Die Newsboxen Farben ändern Sie in der stylesheet.css oder in Ihrer CMSimple_XH Installation unter Einstellungen auf Stylesheet klicken. In der stylesheet.css ab Zeile 1058 bis 1217 oder in Ihrer Installation ab /* Newsbox öffnen nach unten Start */ bis /* Newsbox öffnen nach unten End */.

 

 
 
Footer

Footer

Die Templates mit dem Business Footer müssen Sie noch mit Ihren Angaben ergänzen. Löschen Sie im Ordner images das logo_footer.png und fügen Ihr eigenes ein. Das Beispiel Logo hat eine Grösse von 400 Pixel x 144 Pixel. Das logo_footer_700.png mit der Grösse 700 Pixel x 200 Pixel endspricht der maximalen breite die Sie verwenden sollten. Die Höhe des Logos können Sie variieren.

Namens und Dateityp Änderungen Ihres Logos ändern Sie in der template.htm Datei oder in Ihrer CMSimple_XH Installation unter Einstellungen auf Template klicken.
<!-- Footer mit diversen Angaben Begin -->
<footer class="footer_container">
<div class="footer_leftlogo">
<img src="<?php echo $pth['folder']['templateimages'];?>logo_footer.png" alt="logo"/>
 
Die Links unterhalb des Logos, Willkommen, Impressum, Datenschutz, Kontakt-Formular, Ihre Seite und CMSimple_XH können Sie ändern. Der Impressum und Datenschutz Link benötigt eine Impressum Seite in Ihrer CMSimple_XH Installation.
<!-- Diverse Links auf eigene Seiten oder externe Webseiten. Begin -->
<a title="Willkommen" href="./?&amp;Willkommen">Willkommen</a>
· <a title="Impressum" href="?Impressum">Impressum</a>
· <a title="Datenschutz" href="?Datenschutz">Datenschutz</a>
· <?php echo mailformlink();?> &#32;
· <a title="Ihre Seite" href="?Interne-Links-auf-Ihrer-Seite">Ihre Seite</a>
<!-- Links in neuen Fenstern öffnen. Begin -->
· <a title="CMSimple_XH" href="http://www.cmsimple-xh.org/" target="_blank" rel="noopener noreferrer">CMSimple_XH</a>
<!-- Open links in new windows. End -->
<!-- Various links on own sides pages or external web pages. End -->
 
Interne Links auf Ihrer Seite ändern Sie so.
 
· <a title="Ihre Seite" href="?Interne-Links-auf-Ihrer-Seite">Ihre Seite</a>
Ihre Seite nach <a title= zeigt den Titel per Hover an wenn Sie mit der Maus über Ihre Seite fahren.
Den Link auf Ihre Interne Seite wie z.B. meine Seite https://www.richukunst.ch/?Webdesign nur den Teil ab ?Webdesign verwenden. Letzter Ihre Seite Eintrag vor </a> zeigt den Link Namen an, der die neue Seite öffnet.
Vollständiger Code:
· <a title="Webdesign richukunst"href="?Webdesign">Webdesign</a>
 
Externe Links in neuen Fenstern öffnen ändern Sie so.
 
Bearbeiten Sie den folgenden Code wie im Beispiel unten. Die neue Webseite wird dann in einem neun Tab geöffnet.
<!-- Links in neuen Fenstern öffnen. Begin -->
· <a title="CMSimple_XH" href="https://www.cmsimple-xh.org/" target="_blank" rel="noopener noreferrer">CMSimple_XH</a>
<!-- Open links in new windows. End -->
 
Unterhalb der internen und externen Links werden das Copyright Zeichen, das Jahr und der Seitentitel angezeigt. Den Seitentitel müssen Sie in Ihrer CMSimple_XH Installation eingeben in Einstellungen, Sprach-Datei, Seitentitel in der Browseranzeige.
 
Footer center
Ergänzen Sie den Unteren Code mit Ihren Angaben. Ändern in der template.htm Datei oder in Ihrer CMSimple_XH Installation unter Einstellungen auf Template klicken.
<!-- Center, Ihre Angaben einfügen. Begin -->
<i class="footer_adresse"></i>
<p><span>Muster Firma</span><span>Musterstrasse 1</span>36XX Musterstadt, Schweiz</p>
</div>
<div>
<i class="footer_telefon"></i>
<p>Tel.: +41 33 438 XX XX</p> &nbsp;
<p>Mobile: +41 79 XX XX XX</p>
</div>
<div>
<i class="footer_mail"></i>
<p>E-Mail: mustermann@example.ch</p>
<!-- Center, insert your information. End -->
 

Footer rechts
Ergänzen Sie den Unteren Code mit Ihren Angaben. Ändern in der template.htm Datei oder in Ihrer CMSimple_XH Installation unter Einstellungen auf Template klicken.<!-- Rechts, Überschrift ihr Firmennamen. Begin -->
<div class="footer_right">
<p class="footer_firma_über">
<span>Über die Firma</span>
<!-- Heading her company name. End -->
<!-- Text über ihr Firma. Begin -->
Lorem ipsum dolor sit amet, consectateur adispicing elit. Fusce euismod convallis velit, eu auctor lacus vehicula sit amet.
<!-- Right, text about her company. End -->

Im Footer mit Google Maps Ihren Standort anzeigen. Google Maps wird über die gesamte Template Breite angezeigt.
Ändern in der template.htm Datei oder in Ihrer CMSimple_XH Installation unter Einstellungen auf Template klicken.
 
Nach <!-- Footer mit diversen Angaben End --> fügen Sie den Code <div class="google_maps_footer"> ein.
<!-- Footer mit diversen Angaben End -->
 
<div class="google_maps_footer">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3062.967514944839!2d7.6351885156614525!3d46.78215435255625!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x478fb314f32177b7%3A0x4bcfaf1df957312c!2sKlosternhalde+1A%2C+3612+Steffisburg!5e1!3m2!1sde!2sch!4v1458131361730" allowfullscreen="allowfullscreen"></iframe>
</div>
 
Sie müssen dem Beispiel Einbettungscode noch Ihren Google Maps Standort zuordnen, die Anleitung finden Sie hier.
 
In der stylesheet.css Datei oder in Ihrer CMSimple_XH Installation unter Einstellungen auf Stylesheet klicken. Sie müssen noch den CSS Code einfügen. Vor /* Footer footerlast End */ können Sie den unteren CSS Code einsetzen.
/* google_maps responsive footer Begin */
.google_maps_footer iframe {
width: 100%;
height: 300px;
margin-top: 30px;
margin-bottom: 10px;
}
/* google-maps responsive footer End */

 

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.

<!-- modifiziert durch Ihren Link -->
modified by <a title="your name" href="http://www.your_link" target="_blank" rel="noopener noreferrer">your name</a>
<!-- modified by your link -->

 

 

 
Free Template Download richu181_de für CMSimple_XH.

richu181_de mit dem Business Footer.

 
 
Free Template Download richu181_en für CMSimple_XH.

richu181_en mit dem Business Footer.

 
 
Free Template Download richu181_fr für CMSimple_XH.

richu181_fr mit dem Business Footer.