fhs-basic-all

Ein Template für CMSimple_XH 1.7.x basierend auf fhs-basic von Frank Seidel

Das Template entstand auf ausdrücklichen Wunsch einer einzelnen Userin im Forum. Zugegebenermaßen hatte ich vor einiger Zeit damit schon angefangen, es aber nicht fertiggestellt. Es handelt sich um ein klassisches 3-Spalten-Layout mit einer Slideshow im Header. Die Gestaltung ist sehr einfach und klar gehalten. Deshalb der Name: „basic“. 

Frank Seidel zur Originalversion

Mit der Adaption des ursprünglichen Templates unter Verwendung des Plugin Morepagedata ist ein optisch sehr wandlungsfähiges Template entstanden. Ohne an der Struktur des zu Grunde liegenden Templates grosse Änderungen vorzunehmen bietet es einige ansprechende Einstellmöglichkeiten.

Die Header-Slideshow (wie in fhs-basic)

Für den Header wird das Plugin Slideshow_XH (hier in Version 1beta3) benötigt. Das Plugin ist im Originalzustand – nur mit angepasster Konfiguration – im Download enthalten. Außerdem werden drei Beispielbilder für den Header mitgeliefert, damit man das Template sofort funktionstüchtig vorliegen hat. Die Bilder stammen von Pixabay. Sie haben alle exakt die gleichen Maße 1920 x 300 px (wenn nicht werden auf 1920 px Breite gezoomt, was das Layout zerstört). Das ist schon eine gewaltige Datenmenge, die da übertragen werden muss. Man sollte schauen, inwieweit man komprimieren kann um eine noch ausreichende Qualität auf großen Bildschirmen zu erreichen (z. B. IrfanView mit dem RIOT-Plugin). Außerdem ist es sehr schwierig Motive zu finden, die bei diesem Format noch eine Aussagekraft haben. Wenn alles andere simple ist – die Motivauswahl ist nicht so einfach.

Unterschiede der Variante zum Ursprung

Voraussetzung für die Funktion ist ein weiteres Plugin: 
Morepagedata_XH 1.2.2 für CMSimple_XH ab XH 1.5.3 (ist im Paket enthalten)

Zusätzliche Features

Das Submenü steht bei breiten View-Ports rechts neben dem Content oberhalb der Newsboxen statt unter dem Content. Bei schmalen Viewports wird das Submenü als erste von drei Boxen unter dem Content angezeigt.

Für jede einzelne Seite können folgende Einstellungen separat vorgenommen werden:

1. Farbe der bildfüllenden Balken oberhalb und unterhalb der Slideshow, der Balken oberhalb des Foter-Menüs und das Standadformat der <hr> - Linien. Wird keine Farbe definiert wird die Farbe verwendet, die in der Stylesheet-Datei vordefiniert ist.
2. Verzeichnis der Slideshowbilder kann selektiert werden. Wird keine Auswahl getroffen, werden die Bilder aus dem Ordner "headerimages" verwendet.
3. Für den Inhalt der ersten und zweiten News-Box kann aus den versteckten Seiten ausgewählt werden. Wird keine Wahl getroffen blendet sich diese Box aus.

Die erste Version dieser Variante wurde von Karl Richard Lembach mit Hilfe von Frank Seidel, Ick und Tata (siehe dieser Beitrag im Forum) erstellt.

Implementierung von Morepagedata

laut help_de.html
Hinweis: Vor dem Zuweisen von Variablennamen lohnt es sich, die Pagedata über die CMSimple_XH-Standardfunktion zu bereinigen.

Damit ist gemeint in der Admin-Ansicht auf Einstellungen und dann auf Page-Data zu klicken.

Nach erfolgreicher Installation des Plugin "morpagedata" habe ich die Variablen für die Verwendung im Template definiert.

laut help_de.html
Nach Eintrag der Variabeln im Plugin-Backend, wird diese zu den Pagedata hinzugefügt und ist nicht mehr veränderbar, man kann sie nur noch löschen, was sie auch in den Pagedata löscht.

• Die Anzeige, der Typ und die Optionen können geändert werden.
• Um die Anzeige der Variablen Im Pagedata-Rieter zu gruppieren, kann man eine horizontale Linie (<hr>) nach einer Variablen einstellen.
• Um Variablen nur für bestimmte Templates zu zeigen, die Namen dieser Template im entsprechenden Feld eintragen. Mehrere Namen durch Komma trennen.
• Eingetragener Hilfetext wird als Tool-Tip in der Pagedataansicht gezeigt.

Mausover auf 'Plugins' in der Admin-Ansicht (Frontend),  Auswahl der Einstellungen von Morepagedata.



Ganz links: blauer Pfeil nach oben = verschiebt die Definitionszeile um eins nach oben, rotes X = löscht die Definitionszeile, grünes Plus = fügt eine leere Definitionszeile ein

Erste Spalte mit Eingabefeld = Unter der Rubrik Anzeige gibt man die Beschriftung des späteren Input-Feldes ein, also z.B. 'obere Newsbox', 'untere Newsbox', 'Template-Hauptfarbe' und 'Slideshow-Bilderordner'.

Zweite Spalte mit Eingabefeld = In der Rubrik Variablenname legt man den Namen der Variablen fest der dann im Template eingetragen wird (um nach Möglichkeiten Kollisionen mit im System vorhandenen Variablen zu vermeiden empfehle ich an den sinngebenden Namensteil irgend etwas kryptisches oder Ziffern anzuhängen, wie z. B. die Jahreszahl)

Dritte Spalte mit Auswahlfeld = hier wählt man den Feldtyp aus
(Zitat aus dem Hilfetxt über verfügbare Feld-Typen am Ende dieses Artikels)

Vierte Spalte mit Checkbox = In der Rubrik  br  legt man den Zeilenumbruch nach der Definitionszeile fest

Fünfte Spalte mit Checkbox = In der Rubrik  hr  legt man die Horizontallinie nach der Definitionszeile fest

über das  ?  auf blauem Grund blendet man das Eingabefeld für den Tooltip Hilfetext ein

über das rote Tpl blendet man das Eingabefeld ein, in dem die Templatenamen eingegeben werden (kommagetrennte Liste), für die die Variablen gelten sollen

Im Temlpate werden unmittelbar vor der Zeile
</head>
die nachfolgenden markierten Code-Zeilen eingefügt.

<script>
document.write('<style>#noScript { display: none; }<\/style>')
</script>
<!-- *** Wenn der Variablen $MainColor2019 ein Wert zugewiesen wurde wird der Default-Wert der stylesheet.css überschrieben *** -->
<?php if (isset($MainColor2019)):?>
<style type="text/css">
.secHeader, .secHeader #searchform input { background: <?=$MainColor2019?>; }
#footer { border-top-color: <?=$MainColor2019?>; }
hr, hr.hrdot, #header { border-bottom-color: <?=$MainColor2019?>; }
</style>
<?php endif;?>
<!-- *** end *** -->
</head>

Direkt nach dem Header kommt der modifizierte Code für den Slider:

</header>
<?php
if (XH_ADM && !$edit || !XH_ADM):?>
<div class="row-full-width slideshow">
<!-- *** Wenn der Variablen $SliderFolder2019 ein Wert zugewiesen wurde wird die Slideshow mit dem dadurch festgelegten Bilderordner ausgeführt, sonst mit dem Stanard-Ordner *** -->
<?php if (isset($SliderFolder2019)):?>
<?=slideshow($SliderFolder2019);?>
<?php else:?>
<?=slideshow('headerimages');?>
<?php endif;?>
<!-- *** end *** -->
</div>
<?php endif?>

Direkt nach dem "Ende" das  Bereichs für die mittlere Spalte, also unmittelbar nach der <hr> - Trennlinie befindet sich der Block für die News-Boxen-Ausgabe. Dort werden die markierten Codezeilen abgeändert.

<main class="maincont c12"><?=content();?>
<hr style="border-bottom: 1px solid #505050;">
<p><?php echo top()?></p>
<!-- wegen alternativer Darstellung des Submenüs auskommentiert
<div class="submenDiv"><?=submenu('<span>%s</span>');?></div>
-->
<aside id="newsboxes2" class="row clear">
<!-- alternative Position und Darstellung des Submenüs (class 'news' um .news ul {...} erweitert -->
<section class="news"><?=submenu('%s');?></section>
<!-- *** Die News-Boxen werden mit den durch $NewsBox2019A und $NewsBox2019B festgelegten versteckten Seiten dargestellt. Haben die Variablen keinen Wert, werden keine News-Boxen angezeigt. *** -->
<section class="news"><?=newsbox($NewsBox2019A);?></section>
<section class="news"><?=newsbox($NewsBox2019B);?></section>
</aside>
</main>
<aside id="newsboxes" class="c6">
<!-- alternative Position und Darstellung des Submenüs -->
<section class="news"><?=submenu('%s');?></section>
<section class="news"><?=newsbox($NewsBox2019A);?></section>
<section class="news"><?=newsbox($NewsBox2019B);?></section>
</aside>
</div>


Auf dem Reiter Seite des Editorfensters wird das modifizierte Template ausgewählt wenn es nicht schon sowieso das einzige Template ist und damit auch das Standard-Template.

Auf dem Reiter Mehr werden die gewünschten Werte ausgewählt:

Fährt man mit dem Mauszeiger über die Fragezeichen erscheinen die Hilfetexte.
Das erste Fragezeichen enthält die vorbelegten Hilfetexte, das zweite Fragezeichen
(wenn vorhanden) zeigt die Benutzerdefinierten Hilfetexte.

Zitat aus dem Hilfetext

Verfügbare Feld-Typen

Checkbox

Kann irgendetwas an- oder ausschalten, wie in obigem Beispiel die Breite des Inhaltsbereichs. Ein anderes Beipiel, um das Einlog-Feld von Memberpages zu zeigen oder nicht zu zeigen: 
<?php
if(isset($memberslogin)) {echo memberslogin();}
?>

---

Color picker

nutzt Jan Odvárko's jscolor. Color Picker erzeugt Farbcode der mit # anfängt. Statt Farbcode kann man auch englische Farbnamen (z.B.: white, red, blue, green, black) eingeben.

---

Image folder

zeigt eine Auswahlliste mit allen Bildern aus dem Ordner, der in der Pluginkonfiguration angegeben ist.

---

Input field

erzeugt einen selbstwachsenden Eingabebereich für Fälle, in denen die anderen Feldtypen zu begrenzt sind.

---

Option list

Bei Auswahl dieses Typs im Pluginbackend erscheint eine neue Zeile in der man die Optionswerte einträgt, entweder so
option 1||option 2||option 3 oder so
option 1|angezeigter Text 1|option 2|angezeigter Text 2|option 3|angezeigter Text 3 etc.
Kein | am Ende!

---

Plugin call

Hier kann man über eine Auswahlliste Plugin-Aufrufe voreinstellen. Einen Pluginaufruf ohne { { { PLUGIN: and following ; } } } eingeben, z.B. einfach nur quoteoftheday(). Dahinter ein | einfügen sowie den Text, den der Nutzer in der Auswahlliste zu sehen bekommt (z.B. quoteoftheday()|Zitat des Tages).
Hinter einem weiteren | kann man einen weiteren Pluginaufruf gefolgt von | und Text schreiben.
Diese vorgefertigten Pluginaufrufe sind praktisch für unerfahrene Nutzer oder für komplizierte Aufrufe. Die so aufgerufenen Plugins erscheinen immer am Seitenende.

---

Select hiddenpages

erzeugt eine Auswahlliste mit allen versteckten Seiten für die Auswahl des Inhalts einer Newsbox. Der Code mit der Beispielvariablen $news sähe folgendermaßen im Template aus:
<?php if (isset($news)){echo '<div>'.newsbox($news).'</div>';}
else{echo '<div>'.newsbox('News').'</div>';} ?>

Ein anderes Beispiel für Newsboxen innerhalb eines doppelten divs:
<?php if (isset($news)):?>
<div class="news">
   <div class="newsin">
      <?php echo newsbox($news);?>
      <div style="clear: both;"></div>
   </div>
</div>
<?php else:?>
<div class="news">
   <div class="newsin">
      <?php echo newsbox('News');?>
      <div style="clear: both;"></div>
   </div>
</div>
<?php endif;?>

---

Template image

erzeugt eine Auswahlliste mit allen Bildern des Template Ordners. Den Pfad in der Pluginkonfiguration eingeben.

---

Slide show

nutzt das jQuery Plugin cycle.lite von malsup. Der Fade-Effect erscheint, wenn mindestens 2 Bilder ausgewählt wurden. Dieses jQuery Plugin wird nur geladen, wenn die Diashow auch tatsächlich genutzt wird. Wenn Sie die Diashow nicht wollen, wird das Plugin nicht geladen.

Die Diashow ins Template einbauen

Den Pfad zu den Bildern in der Pluginkonfiguration einstellen. Angenommen Ihre Variable lautet $slideshowetwa folgenden Code an die gewünschte Stelle im Template-Body einfügen:
<?php
if(isset($slideshow)) {
   echo '<div class="slideshow">'.slideShowImages($slideshow).'</div>';}
?>

Um die Bilder zu zentrieren oder rechtsbündig darstellen zu können (voreingestellt ist linksbündig), stellt Morepagedata alle Bilder in ein <div>. Morepagedata erzeugt folgenden Code: 
<div class="slideshow">
   <div><img src="./images/image1.jpg" ></div>
   <div><img src="./images/image2.jpg" ></div>
</div>

Um die Bilder zu zentrieren oder rechtsbündig darzustellen benötigt man folgende CSS-Anweisungen: 
/* ============= Slideshow ============= */
.slideshow {
   float:right;
   width:350px;
   height:300px;
   margin-left:10px;
}
.slideshow div {
   width:350px;
   height:300px;
   overflow: hidden;
}
.slideshow div img {
   margin: 0 0 0 auto; /* this line for right aligned images */
   margin: auto; /* or this line for centered images */
   display:block;
}

Änderungen am Template

Am Template von fhs-basic waren Änderungen notwendig:

Unmittelbar vor der Zeile
</head>
wurden die nachfolgenden markierten Code-Zeilen eingefügt.

<script>
document.write('<style>#noScript { display: none; }<\/style>')
</script>
<!-- *** Wenn der Variablen $MainColor2019 ein Wert zugewiesen wurde wird der Default-Wert der stylesheet.css überschrieben *** -->
<?php if (isset($MainColor2019)):?>
<style type="text/css">
.secHeader, .secHeader #searchform input { background: <?=$MainColor2019?>; }
#footer { border-top-color: <?=$MainColor2019?>; }
hr, hr.hrdot, #header { border-bottom-color: <?=$MainColor2019?>; }
</style>
<?php endif;?>
<!-- *** end *** -->
</head>

Direkt nach dem Header kommt der modifizierte Code für den Slider:

</header>
<?php
if (XH_ADM && !$edit || !XH_ADM):?>
<div class="row-full-width slideshow">
<!-- *** Wenn der Variablen $SliderFolder2019 ein Wert zugewiesen wurde wird die Slideshow mit dem dadurch festgelegten Bilderordner ausgeführt, sonst mit dem Stanard-Ordner *** -->
<?php if (isset($SliderFolder2019)):?>
<?=slideshow($SliderFolder2019);?>
<?php else:?>
<?=slideshow('headerimages');?>
<?php endif;?>
<!-- *** end *** -->
</div>
<?php endif?>

Direkt nach dem "Ende" das  Bereichs für die mittlere Spalte, also unmittelbar nach der <hr> - Trennlinie befindet sich der Block für die News-Boxen-Ausgabe. Dort wurden die markierten Codezeilen abgeändert.

<main class="maincont c12"><?=content();?>
<hr style="border-bottom: 1px solid #505050;">
<p><?php echo top()?></p>
<!-- wegen alternativer Darstellung des Submenüs auskommentiert
<div class="submenDiv"><?=submenu('<span>%s</span>');?></div>
-->
<aside id="newsboxes2" class="row clear">
<!-- alternative Position und Darstellung des Submenüs (class 'news' um .news ul {...} erweitert -->
<section class="news"><?=submenu('%s');?></section>
<!-- *** Die News-Boxen werden mit den durch $NewsBox2019A und $NewsBox2019B festgelegten versteckten Seiten dargestellt. Haben die Variablen keinen Wert, werden keine News-Boxen angezeigt. *** -->
<section class="news"><?=newsbox($NewsBox2019A);?></section>
<section class="news"><?=newsbox($NewsBox2019B);?></section>
</aside>
</main>
<aside id="newsboxes" class="c6">
<!-- alternative Position und Darstellung des Submenüs -->
<section class="news"><?=submenu('%s');?></section>
<section class="news"><?=newsbox($NewsBox2019A);?></section>
<section class="news"><?=newsbox($NewsBox2019B);?></section>
</aside>
</div> 

Änderungen am Stylesheet

Am Stylesheet von fhs-basic war nur eine Änderungen notwendig:

Unmittelbar nach der Zeile 472, am Ende der .news Definitionen wurden diese Zeilen zusätzlich eingefügt:

/* fuer das Submenu innerhalb des zusaetzlichen News-Box Containers */
.news ul{
list-style-type:none;
padding: .75em 0 .75em 0;
}

Template-Styles

Hier einige Beispiele für Styles, wie sie das Template bietet. Vieles ist gleich, wie auch bei anderen meiner Templates. Die Beschreibungen sind teilweise ebenfalls identisch, sodass sie DC erzeugen. Ismiregal, zumindest hier.

Frank Seidel

Sitelogo

Das Logo der Website (das modifizierte Logo von fhs-basic) wird in der Stylesheet.css ab Zeile 202 definiert:

#logo a {
background: url(images/logo.png) no-repeat;
height: 70px;
width: 300px;
display: inline-block;
float: left;
margin: 10px 20px;
text-decoration: none;
border: 0;
}

Dabei liegt die Bilddatei im Verzeichnis: /templates/fhs-basic-all/images. Der Dateiname muß in der Zeile 203 angepasst werden (background: url(images/logo.png) no-repeat;). Die Höhe und Breite des Logos müssen in Zeile 204 und 205 eingetragen werden.

Schriften

Das Template verwendet als Standard-Schriftart „Open-Sans“ mit erweiterter Unterstützung für Latin-Zeichensätze und Kyrillisch. Для наших русских друзей. ;-))

Die verfügbaren Schnitte sind: 300 Light (CSS-Klasse: OS-Light), 400 Regular (normal im Editor), 600 Semibold (bold im Editor) und 700 Fett (CSS-Klasse: OS-Bold).

Unordered List – CSS-Class listUnordered

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

Ordered List

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.

Bilder

My car needs a wash.

Bilder im Text rechts erhalten die CSS-Klasse imgR und nehmen damit normalerweise eine maximale Breite von 30% ihres übergeordneten Containers ein. Ist der Viewport kleiner als 640px, wird das Bild 100% einnehmen. Will man hier (wie beim Beispielbild) eine Bildunterschrift haben, setzt man zuerst einen <div> in den das Bild platziert wird. Dann erhält nur der <div> die Klasse imgR – nicht das Bild! Der BU-Text wird dann normal in einem Absatz <p> unter das Bild, aber innerhalb des <div> gesetzt. Selbstverständlich gibt es eine entsprechende Klasse imgL für Bilder im Text links.

Alle anderen Bilder im Text werden normal in ihrer tatsächlichen Größe eingefügt. Aber auch hier gilt: Sie werden nie größer sein, als der Container, in dem sie sich befinden (max-width: 100%).

Schaue bitte in den Quellcode um die Styles für die folgenden drei Bilder herauszufinden. Ich kann doch nicht alles beschreiben. Dafür habe ich hier nicht genug Lust Platz. ;-)

- Frank Seidel

John Doe jun.

Juniorchef

kocht Kaffee für alle

Jane Doe

graue Eminenz

verwaltet die Finanzen

John Doe sen.

Seniorchef

ist selten anwesend

Zitate

Du kannst Zitate innerhalb eines <blockquote>-Tags setzen. Das sieht dann so aus wie unten. Autor und/oder Quellenangabe erhalten innerhalb des Blocks die Klasse blockAuth.

Menschen mit einer neuen Idee gelten solange als Spinner, bis sich die Sache durchgesetzt hat.

— Mark Twain

Tabellen

Wenn Tabellen die Klasse respTable erhalten, werden sie (einigermaßen) responsive. Das heißt, die maximal angezeigte Breite ist 100% – alles darüber hinaus wird scrollbar. Mit Tabellen ist das so eine Sache. Richtig responsive bekommt man sie eigentlich nur mit JS und/oder anderen Tricks. Mit reinem CSS, was wünschenswert wäre, bekommt man allerdings wiederum Probleme bei den Editoren, die zurzeit das Setzen von Data-Attributen nicht standardmäßig unterstützen. Bei der hier gezeigten Variante genügt es die Klasse zu vergeben. In allen anderen Fällen ist Handarbeit im Quelltext gefragt.

(Daten nur zur Illustration/Demonstration. Quelle: Wikipedia)

Favicon, Apple-Touch-Icon & Co

wichtig Im Template, im Abschnitt head, gibt es die üblichen Festlegungen für die Icons usw. Die gelten natürlich nicht für deine Website! Du musst dir diese Angaben passend für deine neue Website neu generieren! Der betreffende Abschnitt ist in der template.htm durch Kommentare markiert und es steht dort auch ein Link, wo du das machen kannst.

Die generierten Icons (und alles andere) befinden sich im Template-Images-Ordner. Dort muss der neu generierte Kram auch wieder hin und die Pfade müssen im head-Bereich entsprechend angepasst werden.

Bitte nicht vergessen!

Ja, ja. Jeden Tag wird es ein bisschen komplizierter.
Wie schön einfach war es doch in den 90ern des letzten Jahrhunderts. Da brauchte das keiner. ;-)

- Frank Seidel

Menu Levels

This page exists solely for historical reasons. However, there is an important message for users of earlier versions of CMSimple_XH:

Since version 1.7 higher there are no restrictions for menu levels anymore.

Using menu levels from 1 to 9 is now possible. (Levels 7 to 9 will probably not be used regularly in practice. CMSimple_XH’s url-length may be limiting deep nesting. CMSimple_XH will notice users about it.)

This means you’ll manage your pages (create, delete, rename, move) in a program responsible for that task like many other CMS. In CMSimple_XH, it’s called “pagemanager”.

Admin menu ⇒ pages

In the pagemanager blank pages are created and are given a name. After creation they appear in the navigation menu. Newly created pages have neither headings nor content. Click on Admin menu ⇒ Edit to add content. All heading types from <h1> to <h6> can be used. Pages will not be seperated by headings like in older versions than CMSimple_XH 1.7.

The following pages are for demonstration purposes only.

Page 1.1 (menu level 2)

This page demonstrates only a menu level.

Page 1.1.1 (menu level 3)

This page demonstrates only a menu level.

Page 1.1.1.1 (menu level 4)

This page demonstrates only a menu level.

Page 1.1.1.1.1 (menu level 5)

This page demonstrates only a menu level.

Page 1.1.1.1.1.1 (menu level 6)

This page demonstrates only a menu level.

Page 1.1.1.1.1.1.1 (menu level 7)

This page demonstrates only a menu level.

Page 1.1.1.1.1.1.1.1 (menu level 8)

This page demonstrates only a menu level.

Page 1.1.1.1.1.1.1.1.1
(menu level 9)

This page demonstrates only a menu level.

Page 1.1.2 (menu level 3)

This page demonstrates only a menu level.

Page 1.1.3 (menu level 3)

This page demonstrates only a menu level.

Page 2.1 (menu level 2)

This page demonstrates only a menu level.

Download

1. Paket mit dem gesamten Test-Web mit allen verwendeten Bildern und Texten
   (ca. 8 MB)
   
   
2. Paket mit dem Template, der Stylesheet und den Plugins
   (ca. 2,2 MB)
    
3. Paket mit dem Template und dem Stylesheet und Links zu den Plugins
   (ca. 2,1 MB)

Zum Testen oder offline Bearbeiten des Web verwende ich einen der folgenden portablen Webserver:

portable CMSimple_XH Testversion (von Christoph M. Becker): https://github.com/cmb69/portable_xh

USBWebserver is a combination of popular webserver software: Apache, MySQL, PHP and phpMyAdmin: https://www.usbwebserver.net/webserver/

UwAmp - Free Wamp Server with Apache MySQL PHP and SQLite: http://www.uwamp.com/en/

Kontakt

Hier geht es zum richtigen Kontaktformular!

Read our GDPR.

Datenschutzerklärung

Hier geht es zur richtigen Datenschutzerklärung!

Nachstehende Links werden hier ohne jegliche rechtliche oder inhaltliche Gewähr gelistet!

Bilden Sie sich unbedingt selbst ein Urteil über die Tauglichkeit und Vertrauenswürdigkeit der verlinkten Seiten!

https://www.e-recht24.de/muster-datenschutzerklaerung.html

https://www.activemind.de/datenschutz/generatoren/datenschutzerklaerung/

https://datenschutz-generator.de/

https://www.ratgeberrecht.eu/leistungen/muster-datenschutzerklaerung.html

https://www.mein-datenschutzbeauftragter.de/datenschutzerklaerung-konfigurator/

Weitere Treffer erziehlen Sie mit einer Suchanfrage mit "datenschutz generator online" als Suchbegriff.  

Impressum

Hier geht es zum richtigen Impressum!

Beispielimpressum

Your Name
XH-Boulevard 1.7
01234567 Simple City
Simpleland

Phone: +99 00 000 000
Mail: Kontaktformular
Internet: example.com

Nachstehende Links werden hier ohne jegliche rechtliche oder inhaltliche Gewähr gelistet!

Bilden Sie sich unbedingt selbst ein Urteil über die Tauglichkeit und Vertrauenswürdigkeit der verlinkten Seiten!

https://www.e-recht24.de/impressum-generator.html

https://www.impressum-generator.de/

https://www.juraforum.de/impressum-generator/

https://www.anwalt.de/vorlage/impressum-generator.php

Weitere Treffer erziehlen Sie mit einer Suchanfrage mit "impressum generator online" als Suchbegriff. 

CMSimple_XH

Nachstehende List von Links scheint mir hilfreich zu sein.

Homepage von CMSimple_XH: https://www.cmsimple-xh.org/de/
portable CMSimple_XH Testversion (von Christoph M. Becker): https://github.com/cmb69/portable_xh
Forum CMSimple_XH (mehrsprachig): https://cmsimpleforum.com/
Forum CMSimple_XH (detsch): https://cmsimpleforum.com/viewforum.php?f=16
Lister der Plugins für CMSimple_XH: http://cmsimplexh.webdesign-keil.de/?Erweiterungen_-_Plugins_und_anderes
Tips & Tricks (z.B. eigenes Stylesheet für jede Seite): https://wiki.cmsimple-xh.org/doku.php/de:tips_and_tricks

CMSimple_XH Wiki

fhs-basic-all

Mit der Adaption des ursprünglichen Templates unter Verwendung des Plugin Morepagedata ist ein optisch sehr wandlungsfähiges Template entstanden. Ohne an der Struktur des zu Grunde liegenden Templates grosse Änderungen vorzunehmen bietet es einige ansprechende Einstellmöglichkeiten.

Für jede einzelne Seite kann eingestellt / ausgewählt werden:

1. Ordner der Bilder für die Slideshow
2. Auswahl der versteckten Seiten, die in den News-Boxen angezeigt werden sollen (oder auch leer bleiben sollen)
3. Farben für die Balken über die ganze Breite des View-Ports (Fensterbreite), die sich unmittelbar über und unter der Slideshow befinden, Direkt über dem Footer-Menu und die horizontalen Linien, die mit <hr> erzeugt werden.

Abweichend vom zugrundeliegenden Template wird das Submenu nicht mehr unterhalb des Contents angezeigt. Es wird nun oberhalb der ersten rechten News-Box in einem neuen Container ausgegeben. Bei schmalen View-Ports wandert es wie die Newsboxen unterhalb des Seiteninhalts.
Die Überlegung, die dahinter stand, war folgende:
Ich nutze keine kleinen Geräte für das Surfen. Selbst mein Tablet hat einen View-Port von 1920 px. Ich nehme mal an das es sich in meiner Altersgruppe ähnlich verhält.
Enthält das linke Hauptmenü sehr viele Punkte (dazu neige ich), so ist es nicht selten notwendig weit nach unten zu scrollen, um zur nächsten Unterseite zu gelangen. So hat man schon am Anfang des aktuell angezeigten Artikels im Bilck, welche Unterthemen noch angeboten werden.

CMSimple_XH Wiki

Liste der für diese Template notwendigen Plugins

1. Codeeditor
   Nun ja, der ist nicht unbedingt NOTWENDIG, damit das Template funktioniert. Wenn man aber am "Herummachen" am Template und dem Stylesheet ist, geht einem der 'Basis-Editor' für diese Dateien sehr sehr schnell gewaltig auf die Nerven!
2. Fa
   Bestandteil von CMSimple_XH.
3. Filebrowser
   Bestandteil von CMSimple_XH.
4. Hi_updatecheck
   Bestandteil von CMSimple_XH.
5. Jquery
   Bestandteil von CMSimple_XH.
6. Morepagedata
   Ohne dieses Plugin gibt es die ganzen zusätzlichen Möglichkeiten nicht!
7. Pagemanager
   Bestandteil von CMSimple_XH.
8. Slideshow
   Schon für fhs-basic notwendig!
9. Tinymce4
   Bestandteil von CMSimple_XH.

CMSimple_XH Wiki

fhs-basic wird zu fhs-basic-all erweitert

Damit auch schon am Logo des Templates der Unterscheid (eine kleine Erweiterung) zu erkennen ist, habe ich mir erlaubt das Original-Logo etwas abzuwandeln:

wird zu

CMSimple_XH Wiki

fhs-basic-all

Ein Template für CMSimple_XH ab Version 1.7.x

Das Template

Basierend auf dem Template fhs-basic von Frank Seidel habe ich eine Variante erstellt (unter reger Hilfe von Frank und anderen).

Ausser den Eigenschaften von fhs-basic gibt es

Zusätzliche Features

Das Submenü steht bei breiten View-Ports rechts neben dem Content oberhalb der Newsboxen statt unter dem Content. Bei schmalen Viewports wird das Submenü als erste von drei Boxen unter dem Content angezeigt.

Für jede einzelne Seite können folgende Einstellungen separat vorgenommen werden:

1. Farbe der bildfüllenden Balken oberhalb und unterhalb der Slideshow, der Balken oberhalb des Foter-Menüs und das Standadformat der <hr> - Linien. Wird keine Farbe definiert wird die Farbe verwendet, die in der Stylesheet-Datei vordefiniert ist.
2. Verzeichnis der Slideshowbilder kann selektiert werden. Wird keine Auswahl getroffen, werden die Bilder aus dem Ordner "headerimages" verwendet.
3. Für den Inhalt der ersten und zweiten News-Box kann aus den versteckten Seiten ausgewählt werden. Wird keine Wahl getroffen blendet sich diese Box aus.

CMSimple_XH Wiki

Ich bin dabei des Template auf einer Subdomain online zu stellen. Dann wird man es voraussichtlich unter template.lembach-kr.de in Aktion erleben können. 

CMSimple_XH Wiki

CSS 4 you - die deutsche Seite für Cascading Stylesheets (CSS)

Dies ist eine nahezu komplette CSS-Referenz auf deutsch - ergänzt durch etliche Tipps, Tricks und andere Referenzen.

Für Anfänger ist zunächst der CSS-Workshop empfehlenswert.
Dort werden die Grundlagen Schritt für Schritt dargestellt.

Wir hoffen, dass Euch diese Seiten weiterhelfen.

 

Copyright-Hinweis: Dieses Archiv darf nur für den privaten Gebrauch offline verwendet werden. Möchtest Du das Archiv anderen Menschen zugänglich machen, verwende bitte den offiziellen Download-Link.

Informiere mich bitte über eventuelle Fehler, falsche Verknüpfungen etc. über das Kontaktformular online.

CMSimple_XH Wiki

pixabay

Beeindruckende kostenlose & lizenzfreie Bilder

Mehr als 1 Million hochwertige Stock-Bilder und -Videos; geteilt von unserer talentierten Community.

https://pixabay.com/de/

CMSimple_XH Wiki

selfhtml.org

… ist die offizielle Heimatadresse des Web-Projekts SELFHTML.

Unser Ziel

ist es, eine deutschsprachige Dokumentation zu HTML und verwandten Technologien zur Verfügung zu stellen. Die Dokumentation soll Anfänger gemäß dem aktuellen Stand der Technik an die Erstellung von Webseiten heranführen, aber auch Fortgeschrittenen und Profis als verlässliches Nachschlagewerk dienen. Ergänzt wird die Dokumentation durch ein Forum und ein Blog mit Fachartikeln, in denen verschiedenste Themen rund um die Erstellung von Webseiten zu Hause sind.

https://wiki.selfhtml.org/wiki/Startseite

CMSimple_XH Wiki

CMSimple_XH–Forum

Welcome to the CMSimple_XH–Community!

https://cmsimpleforum.com

CMSimple_XH Wiki

CMSimple_XH Dokumentation

— das kleine modulare Open-Source CMS ohne Datenbank

http://cmsimplexh.webdesign-keil.de

CMSimple_XH Wiki

TinEye

Reverse Image Search

Search by image and find where that image appears online

 

TinEye is an image search and recognition company. We are experts in computer vision, pattern recognition, neural networks, and machine learning.

Our mission is to make your images searchable. How to use TinEye

CMSimple_XH Wiki

CMSimple_XH – Stuff

CMSimple_XH ist ein kleines, schnelles und leicht zu bedienendes Content-Management-System das keine Datenbank benötigt – kann ich nur empfehlen! Die hier vorliegende gesamte Homepage wurde mit diesem CMS erstellt. Es folgen ein paar Beispiele meiner Arbeiten für dieses CMS.

— CMSimple_XH Templates

— CMSimple_XH Plugins

— CMSimple_XH experimental

CMSimple_XH Wiki