'WebLog', 'last_edit'=>'1322055182', 'description'=>'', 'keywords'=>'', 'title'=>'', 'robots'=>'', 'template'=>'', 'published'=>'', 'show_last_edit'=>'', 'linked_to_menu'=>'1', 'header_location'=>'', 'use_header_location'=>'' ); ?>
'Ueber-das-Template', 'last_edit'=>'1573044294', 'description'=>'', 'keywords'=>'', 'title'=>'', 'robots'=>'', 'template'=>'0', 'published'=>'1', 'show_last_edit'=>'0', 'linked_to_menu'=>'1', 'header_location'=>'', 'use_header_location'=>'0', 'publication_date'=>'', 'expires'=>'', 'MainColor2019'=>'navy', 'SliderFolder2019'=>'headerimages', 'NewsBox2019A'=>'News01', 'NewsBox2019B'=>'News02' ); ?>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.
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.
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)
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:
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', 'last_edit'=>'1573044597', 'description'=>'', 'keywords'=>'', 'title'=>'', 'robots'=>'', 'template'=>'0', 'published'=>'1', 'show_last_edit'=>'0', 'linked_to_menu'=>'1', 'header_location'=>'', 'use_header_location'=>'0', 'publication_date'=>'', 'expires'=>'', 'MainColor2019'=>'navy', 'SliderFolder2019'=>'headerimages', 'NewsBox2019A'=>'News01', 'NewsBox2019B'=>'News02' ); ?>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.
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 sooption 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 nurquoteoftheday()
. 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
$slideshow
etwa 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;
}
'Aenderungen-am-Template', 'last_edit'=>'1573045006', 'description'=>'', 'keywords'=>'', 'title'=>'', 'robots'=>'', 'template'=>'0', 'published'=>'1', 'show_last_edit'=>'0', 'linked_to_menu'=>'1', 'header_location'=>'', 'use_header_location'=>'0', 'publication_date'=>'', 'expires'=>'', 'MainColor2019'=>'navy', 'SliderFolder2019'=>'headerimages', 'NewsBox2019A'=>'News01', 'NewsBox2019B'=>'News02' ); ?>
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>
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;
}
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
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.
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
).
listUnordered
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
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
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.
Rolle | Schauspieler | Hauptrolle (Episoden) |
Nebenrolle (Episoden) |
---|---|---|---|
Dr. Leonard Leakey Hofstadter | Johnny Galecki | 1.01– | |
Dr. Dr. Sheldon Lee Cooper | Jim Parsons | 1.01– | |
Penny Hofstadter | Kaley Cuoco | 1.01– | |
Howard Joel Wolowitz, M.Eng. | Simon Helberg | 1.01– | |
Dr. Rajesh „Raj“ Ramayan Koothrappali |
Kunal Nayyar | 1.01– | |
Dr. Bernadette Maryann Rostenkowski-Wolowitz |
Melissa Rauch | 4.04– | 3.05–3.14 |
Dr. Amy Farrah Fowler | Mayim Bialik | 4.08– | 4.01–4.05 |
Stuart Bloom | Kevin Sussman | 6.01–6.17, 8.01– | 2.20–5.24, 7.02–7.24 |
Debbie Wolowitz † | Carol Ann Susi (nur Stimme) |
1.07–8.08 | |
Barry Kripke | John Ross Bowie | 2.12, 2.13, 3.01, 3.09, 4.17, 5.14, 5.17, 5.22, 6.14, 6.20, 7.10, 7.20, 8.10, 8.15, 9.05, 9.06, 9.15, 9.17, 10.09, 11.08 |
(Daten nur zur Illustration/Demonstration. Quelle: Wikipedia)
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.
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.
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.
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.
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.
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!
'Menu-Levels', 'last_edit'=>'1492787515', 'description'=>'', 'keywords'=>'', 'title'=>'', 'robots'=>'', 'template'=>'0', 'published'=>'1', 'show_last_edit'=>'0', 'linked_to_menu'=>'1', 'header_location'=>'', 'use_header_location'=>'0', 'publication_date'=>'', 'expires'=>'', 'MainColor2019'=>'gray', 'SliderFolder2019'=>'headercampen', 'NewsBox2019A'=>'News05', 'NewsBox2019B'=>'News06' ); ?>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
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.
'Menu-Level-2-Page-1', 'last_edit'=>'1492088845', 'description'=>'', 'keywords'=>'', 'title'=>'', 'robots'=>'', 'template'=>'', 'published'=>'', 'show_last_edit'=>'', 'linked_to_menu'=>'1', 'header_location'=>'', 'use_header_location'=>'', 'publication_date'=>'', 'expires'=>'', 'MainColor2019'=>'#808011', 'SliderFolder2019'=>'headerlesen', 'NewsBox2019A'=>'News11', 'NewsBox2019B'=>'News12' ); ?>This page demonstrates only a menu level.
'Menu-Level-3-Page-1', 'last_edit'=>'1492088884', 'description'=>'', 'keywords'=>'', 'title'=>'', 'robots'=>'', 'template'=>'', 'published'=>'', 'show_last_edit'=>'', 'linked_to_menu'=>'1', 'header_location'=>'', 'use_header_location'=>'', 'publication_date'=>'', 'expires'=>'', 'MainColor2019'=>'', 'SliderFolder2019'=>'', 'NewsBox2019A'=>'', 'NewsBox2019B'=>'' ); ?>This page demonstrates only a menu level.
'Menu-Level-4-Page-1', 'last_edit'=>'1492089190', 'description'=>'', 'keywords'=>'', 'title'=>'', 'robots'=>'', 'template'=>'0', 'published'=>'1', 'show_last_edit'=>'0', 'linked_to_menu'=>'1', 'header_location'=>'', 'use_header_location'=>'0', 'publication_date'=>'', 'expires'=>'', 'MainColor2019'=>'', 'SliderFolder2019'=>'', 'NewsBox2019A'=>'', 'NewsBox2019B'=>'' ); ?>This page demonstrates only a menu level.
'Menu-Level-5-Page-1', 'last_edit'=>'1492089207', 'description'=>'', 'keywords'=>'', 'title'=>'', 'robots'=>'', 'template'=>'0', 'published'=>'1', 'show_last_edit'=>'0', 'linked_to_menu'=>'1', 'header_location'=>'', 'use_header_location'=>'0', 'publication_date'=>'', 'expires'=>'', 'MainColor2019'=>'', 'SliderFolder2019'=>'', 'NewsBox2019A'=>'', 'NewsBox2019B'=>'' ); ?>This page demonstrates only a menu level.
'Menu-Level-6-Page-1', 'last_edit'=>'1492089228', 'description'=>'', 'keywords'=>'', 'title'=>'', 'robots'=>'', 'template'=>'0', 'published'=>'1', 'show_last_edit'=>'0', 'linked_to_menu'=>'1', 'header_location'=>'', 'use_header_location'=>'0', 'publication_date'=>'', 'expires'=>'', 'MainColor2019'=>'', 'SliderFolder2019'=>'', 'NewsBox2019A'=>'', 'NewsBox2019B'=>'' ); ?>This page demonstrates only a menu level.
'Menu-Level-7-Page-1', 'last_edit'=>'1492089249', 'description'=>'', 'keywords'=>'', 'title'=>'', 'robots'=>'', 'template'=>'0', 'published'=>'1', 'show_last_edit'=>'0', 'linked_to_menu'=>'1', 'header_location'=>'', 'use_header_location'=>'0', 'publication_date'=>'', 'expires'=>'', 'MainColor2019'=>'', 'SliderFolder2019'=>'', 'NewsBox2019A'=>'', 'NewsBox2019B'=>'' ); ?>This page demonstrates only a menu level.
'Menu-Level-8-Page-1', 'last_edit'=>'1492089272', 'description'=>'', 'keywords'=>'', 'title'=>'', 'robots'=>'', 'template'=>'0', 'published'=>'1', 'show_last_edit'=>'0', 'linked_to_menu'=>'1', 'header_location'=>'', 'use_header_location'=>'0', 'publication_date'=>'', 'expires'=>'', 'MainColor2019'=>'', 'SliderFolder2019'=>'', 'NewsBox2019A'=>'', 'NewsBox2019B'=>'' ); ?>This page demonstrates only a menu level.
'Menu-Level-9-Page-1', 'last_edit'=>'1492089298', 'description'=>'', 'keywords'=>'', 'title'=>'', 'robots'=>'', 'template'=>'0', 'published'=>'1', 'show_last_edit'=>'0', 'linked_to_menu'=>'1', 'header_location'=>'', 'use_header_location'=>'0', 'publication_date'=>'', 'expires'=>'', 'MainColor2019'=>'', 'SliderFolder2019'=>'', 'NewsBox2019A'=>'', 'NewsBox2019B'=>'' ); ?>This page demonstrates only a menu level.
'Menu-Level-3-Page-2', 'last_edit'=>'1492089039', 'description'=>'', 'keywords'=>'', 'title'=>'', 'robots'=>'', 'template'=>'', 'published'=>'', 'show_last_edit'=>'', 'linked_to_menu'=>'1', 'header_location'=>'', 'use_header_location'=>'', 'publication_date'=>'', 'expires'=>'', 'MainColor2019'=>'', 'SliderFolder2019'=>'', 'NewsBox2019A'=>'', 'NewsBox2019B'=>'' ); ?>This page demonstrates only a menu level.
'Menu-Level-3-Page-3', 'last_edit'=>'1492089062', 'description'=>'', 'keywords'=>'', 'title'=>'', 'robots'=>'', 'template'=>'', 'published'=>'', 'show_last_edit'=>'', 'linked_to_menu'=>'1', 'header_location'=>'', 'use_header_location'=>'', 'publication_date'=>'', 'expires'=>'', 'MainColor2019'=>'', 'SliderFolder2019'=>'', 'NewsBox2019A'=>'', 'NewsBox2019B'=>'' ); ?>This page demonstrates only a menu level.
'Menu-Level-2-Page-2', 'last_edit'=>'1492088900', 'description'=>'', 'keywords'=>'', 'title'=>'', 'robots'=>'', 'template'=>'', 'published'=>'', 'show_last_edit'=>'', 'linked_to_menu'=>'1', 'header_location'=>'', 'use_header_location'=>'', 'publication_date'=>'', 'expires'=>'', 'MainColor2019'=>'#0F5054', 'SliderFolder2019'=>'headerpc', 'NewsBox2019A'=>'News13', 'NewsBox2019B'=>'News07' ); ?>This page demonstrates only a menu level.
'', 'title'=>'', 'robots'=>'', 'template'=>'', 'published'=>'', 'show_last_edit'=>'', 'linked_to_menu'=>'1', 'header_location'=>'', 'use_header_location'=>'', 'publication_date'=>'', 'expires'=>'', 'description'=>'', 'last_edit'=>'1573057468', 'url'=>'Download', 'MainColor2019'=>'black', 'SliderFolder2019'=>'headerpc', 'NewsBox2019A'=>'News13', 'NewsBox2019B'=>'News02' ); ?>
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/
'', 'title'=>'', 'robots'=>'', 'template'=>'', 'published'=>'', 'show_last_edit'=>'', 'linked_to_menu'=>'1', 'header_location'=>'', 'use_header_location'=>'', 'publication_date'=>'', 'expires'=>'', 'description'=>'', 'last_edit'=>'1573046287', 'url'=>'Kontakt', 'MainColor2019'=>'black', 'SliderFolder2019'=>'headerpc', 'NewsBox2019A'=>'News13', 'NewsBox2019B'=>'' ); ?>
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.
'', 'title'=>'', 'robots'=>'', 'template'=>'', 'published'=>'', 'show_last_edit'=>'', 'linked_to_menu'=>'1', 'header_location'=>'', 'use_header_location'=>'', 'publication_date'=>'', 'expires'=>'', 'description'=>'', 'last_edit'=>'1573046412', 'url'=>'Impressum', 'MainColor2019'=>'#9C0E38', 'SliderFolder2019'=>'headerkochen', 'NewsBox2019A'=>'News09', 'NewsBox2019B'=>'News10' ); ?>
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.
'News01', 'last_edit'=>'1572985582', 'description'=>'', 'keywords'=>'', 'title'=>'', 'robots'=>'', 'template'=>'0', 'published'=>'1', 'show_last_edit'=>'0', 'linked_to_menu'=>'0', 'header_location'=>'', 'use_header_location'=>'0', 'publication_date'=>'', 'expires'=>'', 'MainColor2019'=>'', 'SliderFolder2019'=>'', 'NewsBox2019A'=>'', 'NewsBox2019B'=>'' ); ?>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
'News02', 'last_edit'=>'1573057897', 'description'=>'', 'keywords'=>'', 'title'=>'', 'robots'=>'', 'template'=>'0', 'published'=>'1', 'show_last_edit'=>'0', 'linked_to_menu'=>'0', 'header_location'=>'', 'use_header_location'=>'0', 'publication_date'=>'', 'expires'=>'', 'MainColor2019'=>'', 'SliderFolder2019'=>'', 'NewsBox2019A'=>'', 'NewsBox2019B'=>'' ); ?>
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:
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.
'News03', 'last_edit'=>'1572988260', 'description'=>'', 'keywords'=>'', 'title'=>'', 'robots'=>'', 'template'=>'0', 'published'=>'1', 'show_last_edit'=>'0', 'linked_to_menu'=>'0', 'header_location'=>'', 'use_header_location'=>'0', 'publication_date'=>'', 'expires'=>'', 'MainColor2019'=>'', 'SliderFolder2019'=>'', 'NewsBox2019A'=>'', 'NewsBox2019B'=>'' ); ?>
'News04', 'last_edit'=>'1572990629', 'description'=>'', 'keywords'=>'', 'title'=>'', 'robots'=>'', 'template'=>'0', 'published'=>'1', 'show_last_edit'=>'0', 'linked_to_menu'=>'0', 'header_location'=>'', 'use_header_location'=>'0', 'publication_date'=>'', 'expires'=>'', 'MainColor2019'=>'', 'SliderFolder2019'=>'', 'NewsBox2019A'=>'', 'NewsBox2019B'=>'' ); ?>
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
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
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:
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.
'News07', 'last_edit'=>'1573033580', 'description'=>'', 'keywords'=>'', 'title'=>'', 'robots'=>'', 'template'=>'0', 'published'=>'1', 'show_last_edit'=>'0', 'linked_to_menu'=>'0', 'header_location'=>'', 'use_header_location'=>'0', 'publication_date'=>'', 'expires'=>'', 'MainColor2019'=>'', 'SliderFolder2019'=>'', 'NewsBox2019A'=>'', 'NewsBox2019B'=>'' ); ?>'News08', 'last_edit'=>'1573033852', 'description'=>'', 'keywords'=>'', 'title'=>'', 'robots'=>'', 'template'=>'0', 'published'=>'1', 'show_last_edit'=>'0', 'linked_to_menu'=>'0', 'header_location'=>'', 'use_header_location'=>'0', 'publication_date'=>'', 'expires'=>'', 'MainColor2019'=>'', 'SliderFolder2019'=>'', 'NewsBox2019A'=>'', 'NewsBox2019B'=>'' ); ?>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.
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
'News10', 'last_edit'=>'1573034525', 'description'=>'', 'keywords'=>'', 'title'=>'', 'robots'=>'', 'template'=>'0', 'published'=>'1', 'show_last_edit'=>'0', 'linked_to_menu'=>'0', 'header_location'=>'', 'use_header_location'=>'0', 'publication_date'=>'', 'expires'=>'', 'MainColor2019'=>'', 'SliderFolder2019'=>'', 'NewsBox2019A'=>'', 'NewsBox2019B'=>'' ); ?>Welcome to the CMSimple_XH–Community!
'News11', 'last_edit'=>'1573034632', 'description'=>'', 'keywords'=>'', 'title'=>'', 'robots'=>'', 'template'=>'0', 'published'=>'1', 'show_last_edit'=>'0', 'linked_to_menu'=>'0', 'header_location'=>'', 'use_header_location'=>'0', 'publication_date'=>'', 'expires'=>'', 'MainColor2019'=>'', 'SliderFolder2019'=>'', 'NewsBox2019A'=>'', 'NewsBox2019B'=>'' ); ?>http://cmsimplexh.webdesign-keil.de
'News12', 'last_edit'=>'1573034861', 'description'=>'', 'keywords'=>'', 'title'=>'', 'robots'=>'', 'template'=>'0', 'published'=>'1', 'show_last_edit'=>'0', 'linked_to_menu'=>'0', 'header_location'=>'', 'use_header_location'=>'0', 'publication_date'=>'', 'expires'=>'', 'MainColor2019'=>'', 'SliderFolder2019'=>'', 'NewsBox2019A'=>'', 'NewsBox2019B'=>'' ); ?>'News13', 'last_edit'=>'1573035081', 'description'=>'', 'keywords'=>'', 'title'=>'', 'robots'=>'', 'template'=>'0', 'published'=>'1', 'show_last_edit'=>'0', 'linked_to_menu'=>'0', 'header_location'=>'', 'use_header_location'=>'0', 'publication_date'=>'', 'expires'=>'', 'MainColor2019'=>'', 'SliderFolder2019'=>'', 'NewsBox2019A'=>'', 'NewsBox2019B'=>'' ); ?>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 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.