Notiz-Box
Hier wird mein Plugin SimplePlugins_XH Edition KRL mit der Funktion "eingliedern" genutzt, um den HTML-Baustein /templates/krl-3col-flex/_optionaler-HTM-Content/Notiz-Box-Version3.htm in dieser Seite einzubinden.
Rechts in der News-Boxen-Spalte wird die verdeckte Seite _NotizBox mit dem gleichen Inhalt angezeigt (dieses mal allerdings als Teil des Contents des Web).
Verwendung: Im Backend eine neue News-Box - Seite erstellen (verdeckte Seite) und im Editorfenster den Quellcode / HTML-Codeeditor öffnen, den Inhalt der Datei Notiz-Box-VersionX_x.htm in die Zwischenablage kopieren und im Quellcode-Editorfenster einfügen und speichern.
Auf der Seite, auf der die Notiz-Box angezeigt werden soll, im Editorfenster oben unter dem Reiter Mehr bei "Snipets-Box" den News-Box - Namen der Notiz-Box auswählen und speichern.
Name | Größe | Änderungsdatum | Hits |
---|---|---|---|
11 KB | 22.08.2022 22:11 | 13 | |
11 KB | 19.12.2021 13:13 | 15 | |
10 KB | 29.11.2021 11:29 | 9 |
Notiz - Box zum Copy & Paste
Letztes Update am 24.08.2022
Akkordeon
HTML:
<details>
<summary>Das ist die Kopfzeile.</summary>
<p>Das ist der Boddy des Absatzes.</p>
</details>
Frontend (zum Kopieren vorher ausklappen, <details ....> durch <details> ersetzen!):
⇒
Das ist die Kopfzeile.
Das ist der Boddy des Absatzes.
⇐
Codeschnipsel zum Einfügen
DIV-Block mit zwei Absätzen
⇒
Das ist ein erster Absatz.
Das ist ein zweiter Absatz.
⇐
Codeeditor Tastenkürzel
Funktion | PC |
---|---|
Speichern | Ctrl-S |
Suchen | Ctrl-F |
Weitersuchen | Ctrl-G |
Rückwärts suchen | Shift-Ctrl-G |
Ersetzen | Shift-Ctrl-F |
Alle ersetzen | Shift-Ctrl-R |
Vollbild umschalten | Esc |
Faltung umschalten | Ctrl-Q |
Zeilenumbrechen umschalten | Alt-W |
Vorschau umschalten | Crtl-P |
Bilder durchsuchen | Ctrl-I |
Downloads durchsuchen | Ctrl-L |
Mediadateien durchsuchen | Ctrl-M |
Benutzerdateien durchsuchen | Ctrl-U |
Template Tags
Funktion | Status | Beschreibung |
---|---|---|
editmenu() | obsolet1) | Erzeugt im Admin-Modus das Admin-Menü. |
content() | erforderlich | Inhalt der Seite(n). |
head() | erforderlich | Erzeugt Tags zu Stylesheet, Meta-Daten und Seiten-Titel. |
languagemenu() | empfohlen | Liefert Links für mehrsprachige Seiten. |
lastupdate() | empfohlen | Liefert Zeit/Datum der letzen Änderung. |
li($hc,'menulevel') | optional | Erzeugt Menü inkl. Untermenü's. |
locator() | optional | Erzeugt den Locator (Breadcrumbs). |
loginlink() | empfohlen | Zeigt den 'Login'-Link an (sofern nicht angemeldet). |
mailformlink() | optional | Erzeugt einen Link für das Mailformular. |
newsbox() | zusätzlich | Liefert den Inhalt einer versteckten ('hidden') Seite. |
nextpage() | optional | Erzeugt einen Link zur nächsten Seite. |
onload() | erforderlich | Erforderlich im Body-Tag für die Funktionen des Editors. |
pagename() | optional | Zeigt den Inhalt der Konfigurationsvariable $cf['site']['title']. Diese Variable wird aus der Sprachvariable $tx['site']['title'] erzeugt. Wenn der Titel für eine bestimmte Seite per meta_tags Plugin verändert wird, wird für diese Seite der geänderte Titel angezeigt. |
previouspage() | optional | Erzeugt einen Link zur vorherigen Seite. |
printlink() | optional | Erzeugt einen Link für die Druckansicht. |
searchbox() | optional | Erzeugt das Suchfeld. |
sitename() | optional | Zeigt den Inhalt der Sprachvariable $tx['site']['title']. |
sitemaplink() | optional | Liefert einen Link zur Sitemap. |
submenu() | optional | Erzeugt Links zu Unterseiten (sofern vorhanden). |
toc() | erforderlich | Erzeugt das Menü. |
top() | optional | Erzeugt einen Link zum Anfang der Seite (#TOP). |
Core Funktionen
Eine grobe Übersicht über die wichtigsten Funktionen:
Funktion(Wert) | Beschreibung |
---|---|
a($nummer,$zusatz) | liefert einen (öffnenden) Link zu einer CMS-Seite ($nummer) |
amp() | gibt & oder (XHTML-konform) & zurück; deprecated seit 1.5.4 |
autogallery($url) | zeigt eine Galerie an; deprecated seit 1.5.4 |
chkdl($datei) | überprüft Download (Existenz, Berechtigungen etc.); deprecated seit 1.6 |
chkfile($key,$schreibbar) | überprüft eine Datei (Berechtigungen etc.); deprecated seit 1.6 |
cmscript($script,$text) | ob gesuchtes CMSimple-Skript im Text vorhanden ist |
download($datei) | stellt eine Datei zum Download bereit |
e($fehler,$typ,$datei) | erzeugt Fehlermeldung |
evaluate_scripting($text,$compat) | liefert Text mit evaluiertem Scripting zurück |
gc($name) | liest ein Cookie |
geturl($url) | liest eine externe Ressource |
geturlwp($url) | liest eine externe Ressource mit Parametern |
h($nummer) | liefert die Überschrift einer Seite |
hide($nummer) | ob die Seite versteckt ('hide') ist |
initvar($name) | initalisiert eine Variable aus POST oder GET |
l($nummer) | liefert die Menüebene einer Seite |
logincheck() | überprüft Anmeldung am CMS |
meta($name) | liefert <meta> Element |
ml($key) | liefert einen Link zu einer Sonderseite |
plugin_admin_common($action, $admin, $plugin) |
behandelt Standardaktionen der Pluginadministration |
print_plugin_admin($main) | liefert das Pluginmenu |
rf($datei) | liest eine Datei; deprecated seit 1.6 |
rfc() | liest content.htm und initialisiert die entsprechenden globalen Variablen |
rmanl($text) | entfernt alle Zeilenumbrüche (\n, \r) aus einem Text |
rmnl($text) | ersetzt mehrfache Zeilenumbrüche durch einen einzelnen |
rp($datei) | liefert absoluten Dateipfad; deprecated seit 1.5.4 |
selectlist(…) | erzeugt eine Selectbox; entfernt seit 1.6 |
shead($code) | erzeugt eine HTTP Fehlermeldung |
sortdir($ordner) | liefert ein Array mit allen Einträgen eines Verzeichnisses (alphabetisch sortiert) |
stsl($text) | demaskiert GPC Parameter |
sv($name) | liefert eine Server-Variable |
tag($tag) | liefert einen (X)HTML konformen Tag |
uenc($ueberschrift) | kodiert eine Seiten-URL |
writelog($nachricht) | hängt einen Eintrag an die Protokolldatei an |
Core Variable und Konstanten
Variable | Typ | Description |
---|---|---|
$adm | boolean | whether the CMS is in admin mode or not |
$bjs | string | JavaScript area at the end of the <body> element |
$c | array | content-array (content, divided according to headings h1-hn) |
$cf | array | contains all config data from config.php |
$cl | integer | number of all pages |
$description | string | variable that overwrites the existing meta description from the config |
$download | string | whether a download is requested, and if so contains the name of the file to be made available for download |
$e | string | error messages |
$edit | boolean | indicates whether the CMS is in edit mode |
$f | string | the requested special function, e.g. 'search', 'mailform', 'sitemap' |
$fh | resource | a temporary file handle |
$function | string | GET or POST parameter designating a special function |
$h | array | headings-array |
$hjs | string | JavaScript and CSS area within the <head> element of a page |
$i and $j | integer | temporary loop variables |
$keywords | string | variable that overwrites the existing meta keywords from the config |
$l | array | array of menu levels |
$login | boolean | indicates if login has been requested/taken place |
$mailform | boolean | whether the mailform is requested (becomes $f='mailform') |
$normal | boolean | indicates whether the CMS is in view (normal) mode |
$o | string | output for the contents area |
$onload | string | value of the onload attribute of the <body> element of the page |
$pd_current | array | contains the page data of the current page |
boolean | whether a print view is requested | |
$pth | array | contains all paths/filenames used by CMSimple (details see below) |
$s | integer | pagenumber of the requested page |
$sitemap | boolean | whether the sitemap is requested (becomes $f='sitemap') |
$sl | string | active language (short form, e.g. 'de' or 'dk') |
$sn | string | contains name of directory in which CMSimple is installed |
$su | string | choosen URL (of present page) |
$temp | mixed | temporary variable |
$u | array | URL-array (links to all pages of the content) |
$title | string | title of the page |
$tx | array | contains all texts from the language system files of the used language |
$pth
$pth ist ein zweidimensionales Array, das die relativen Pfade zu Systemdateien und Ordnern enthält. Die erste Dimension enthält die Schlüssel 'file' und 'folder'. Die folgenden Pfade sind im gesamten System verfügbar:
$pth['folder']['base'] $pth['folder']['cmsimple'] $pth['folder']['language'] $pth['file']['language'] $pth['folder']['langconfig'] $pth['file']['langconfig'] $pth['file']['adm'] $pth['file']['cms'] $pth['file']['config'] $pth['file']['log'] $pth['file']['login'] $pth['file']['mailform'] $pth['file']['search'] $pth['file']['corestyle'] $pth['folder']['content'] $pth['file']['content'] $pth['file']['pagedata'] $pth['folder']['downloads'] $pth['folder']['images'] $pth['folder']['flags'] $pth['folder']['userfiles'] $pth['folder']['media'] $pth['folder']['plugins'] $pth['folder']['templates'] $pth['folder']['template'] $pth['folder']['menubuttons'] $pth['folder']['templateimages'] $pth['file']['template'] $pth['file']['stylesheet']
Zusätzlich werden die folgenden Schlüssel richtig gesetzt, wenn das Plugin geladen wird, sodass sie im globalen Bereich der index.php und admin.php des Plugins verfügbar sind:
$pth['folder']['plugin'] $pth['file']['plugin_index'] $pth['file']['plugin_admin'] $pth['folder']['plugin_classes'] $pth['file']['plugin_classes'] $pth['folder']['plugin_config'] $pth['file']['plugin_config'] $pth['folder']['plugin_content'] $pth['folder']['plugin_css'] $pth['file']['plugin_stylesheet'] $pth['folder']['plugin_help'] $pth['file']['plugin_help'] $pth['folder']['plugin_includes'] $pth['folder']['plugin_languages'] $pth['file']['plugin_language']
Constants
Eine grobe Übersicht über die wichtigsten Konstanten. Für CMSimple_XH 1.6+ konsultieren Sie die Entwicklerdokumentation, wo die Konstanten im Abschnitt constants der Datei cms.php aufgeführt sind.
Constant | Description |
---|---|
CMSIMPLE_ROOT | absolute filepath of the installation folder |
CMSIMPLE_XH_BUILD | build number in format YYYYMMDDNN |
CMSIMPLE_XH_VERSION | version number (e.g. “CMSimple_XH 1.5.9”) |
CMSIMPLE_XH_DATE | build date in format YYYY-MM-DD |
PLUGINLOADER | plugin loader has been loaded |
PLUGINLOADER_VERSION | version number of the plugin loader (e.g. 2.111); unmainted since early CMSimple_XH versions; use CMSIMPLE_XH_VERSION instead |
XH_ADM | whether the CMS is in admin mode or not (use instead of $adm since CMSimple_XH 1.5.4) |
CSS Selektoren.
Der folgende Inhalt beruht auf https://www.w3.org/TR/CSS21/selector.html%23id-selectors und https://code.tutsplus.com/de/tutorials/the-30-css-selectors-you-must-memorize--net-16048 und https://drafts.csswg.org/selectors-3/
Musterabgleich
In CSS legen Mustervergleichsregeln fest, welche Stilregeln für Elemente im Dokumentenbaum gelten. Diese als Selektoren bezeichneten Muster können von einfachen Elementnamen bis hin zu umfangreichen kontextbezogenen Mustern reichen. Wenn alle Bedingungen im Muster für ein bestimmtes Element wahr sind, stimmt der Selektor mit dem Element überein.
Die Groß-/Kleinschreibung von Dokumentsprachenelementnamen in Selektoren hängt von der Dokumentsprache ab. In HTML wird bei Elementnamen beispielsweise die Groß-/Kleinschreibung nicht beachtet, in XML hingegen muss die Groß-/Kleinschreibung beachtet werden.
Die folgende Tabelle fasst die CSS3 - Selektorsyntax zusammen:
Muster | Bedeutung | ext. Beschreibung ⇒ URL |
---|---|---|
* |
* { margin: 0; padding: 0;} Das Sternsymbol zielt auf jedes einzelne Element auf der Seite ab. |
Universal selector |
E |
a { color: red; } Der Typ-Selektor zielt auf alle Elemente des angegebenen Typs, unabhängig von ID oder Klasse. |
Type selectors |
E F |
li a { text-decoration: none;} Dieser Selector ist der Nachfahre Selektor. Er zielt auf jedes gleichnamige Element innerhalb des ersten Elementes. Das Umschließt Kinder, Enkel, Urenkel ... |
Descendant selectors |
E > F |
div#container > ul { border: 1px solid black;} Der Kind-Selektor zielt nur auf direkte Kinder und nicht auf Kindeskinder usw. |
Child selectors |
E:root | Die Pseudoklasse :root steht für ein Element, das die Wurzel des Dokuments ist. In HTML 4 ist dies immer das HTML-Element. | Structural pseudo-classes |
E:first-child |
ul li:first-child { border-top: none;} Ein E Element, erstes Kind seines Elternteils. Diese strukturelle Pseudoklasse ermöglicht es, nur das erste untergeordnete Element des übergeordneten Elements des Elements anzusprechen. |
The :first-child pseudo-class |
E:last-child |
ul > li:last-child { color: green;} Ein E-Element, letztes Kind seines Elternteils. Als Gegenteil von first-child, zielt last-child auf das letzte Element des übergeordneten Elements des Elements ab. |
Structural pseudo-classes |
E:first-of-type |
li:first-of-type { font-weight: bold} Ein E-Element, erstes Geschwisterteil seines Typs. Diese strukturelle Pseudoklasse ermöglicht es, nur das erste unter gleichen Elementen anzusprechen. |
Structural pseudo-classes |
E:last-of-type |
li:last-of-type { color: red;} Ein E-Element, letztes Geschwisterteil seines Typs. Als Gegenteil zu first-of-type, zielt last-of-type aud das letzte unter gleichen Elementen ab. |
Structural pseudo-classes |
E:only-child |
div p:only-child { color: red;} Ein E-Element, einziges Kind seines Elternteils. Es ermöglicht, Elemente anzusprechen, die das einzige untergeordnete Element des übergeordneten Elements sind. |
Structural pseudo-classes |
E:only-of-type |
li:only-of-type { font-weight: bold;} Ein E-Element, einziges Geschwisterteil seines Typs. Es zielt auf Elemente ab, die keine Geschwister in seinem übergeordneten Container haben. |
Structural pseudo-classes |
E:empty |
p:empty { border-bottom: 1px dotted lightgray;} Ein E-Element, das keine Kinder hat (einschließlich Textknoten) und leer ist. Also z. B. <p></p> |
Structural pseudo-classes |
E:nth-child(n) |
li:nth-child(3) { color: red;} Ein E-Element, das n-te Kind seines Elternteils, beginnend mit dem ersten Element. Die Zählung beginnt bei 1!. Im zweiten Beispiel wird jedes dritte Element angesprochen. |
Structural pseudo-classes |
E:nth-last-child(n) |
li:nth-last-child(2) { color: red;} Ein E Element, das n-te Kind seines Elternteils, beginnend mit dem letzten Element. |
Structural pseudo-classes |
E:nth-of-type(n) |
ul:nth-of-type(3) { border: 1px solid black;} Ein E Element, das n-te Geschwisterteil seines Typs, vom ersten an gerechnet. Im Beispiel wäre das das dritte ul-Element. |
Structural pseudo-classes |
E:nth-last-of-type(n) |
ul:nth-last-of-type(3) { border: 1px solid black;} Ein E-Element, das n-te Geschwister seines Typs, vom letzten an gerechnet. Im Beispiel wäre das das drittletzte ul-Element. |
Structural pseudo-classes |
E:link E:visited |
a:link { color: red; } Die Pseudoklasse :link selektiert alle Anker-Tags, die noch nicht angeklickt wurden. Und :visited selektiert alle schon angeklickten (besuchten) Anker-Tags. |
The link pseudo-classes |
E:aktiv E:hover E:focus |
div:aktiv { background: #d3d3d3;} Die Pseudoklassen :aktiv und :hover werden z. B. in Menüs eine Website eingesetzt. Der Anker der aktuell angezeigten Seite ist :aktiv. Der Anker unter dem Mauszeiger ist :hover. |
The dynamic pseudo-classes |
E:lang(c) |
html:lang(fr-be) {color: blue} Die ersten beiden vorstehenden Selektoren stehen für ein HTML-Dokument, das in belgischem Französisch oder Deutsch verfasst ist. Die beiden nächsten Selektoren stehen für q-Zitate in einem beliebigen Element in belgischem Französisch oder Deutsch. |
The :lang() pseudo-class |
E[lang|= "de"] |
html:lang|="fr" {color: blue} Der Unterschied zwischen :lang(C) und dem '|='-Operator besteht darin, dass der '|='-Operator nur einen Vergleich mit einem bestimmten Attribut des Elements durchführt, während die :lang(C)-Pseudoklasse das Wissen der UA über die Semantik des Dokuments verwendet, um den Vergleich durchzuführen. In diesem HTML-Beispiel stimmt nur der BODY mit [lang|=fr] überein (weil er ein LANG-Attribut hat), aber sowohl der BODY als auch das P stimmen mit :lang(fr) überein (weil beide auf Französisch sind). Das P passt nicht zu [lang|=fr], weil es kein LANG-Attribut hat. <body lang=fr> |
Attribute selectors |
E + F |
ul + p { color: red;} Der Selektor für die unmittelbaren Nachbaren ziel nur auf das Element, dem das erstel Element unmittelbar vorausgeht. |
Adjacent selectors |
E ~ F |
ul ~ p { color: red;} Dieser Geschwisterkombinator ähnelt X + Y, ist jedoch weniger streng. Während ein benachbarter Selektor (ul + p) nur das erste Element auswählt, dem der frühere Selektor unmittelbar vorausgeht, ist dieses Element allgemeiner. Es wählt unter Bezugnahme auf obiges Beispiel alle p-Elemente aus, solange sie einem ul folgen. |
Subsequent-sibling combinator |
E[foo] |
a[title] { color: green;} Entspricht jedem E-Element mit dem Attributsatz "foo" (unabhängig vom Wert). |
Attribute selectors |
E[foo= "warning"] |
input[value="wertangabe"] { color: blue;} Entspricht jedem E-Element, dessen "foo"-Attributwert genau gleich "warning" ist. |
Attribute selectors |
E[foo*="xyz"] |
a[href*="cmsimple"] { color: #1f6053; /* cmsimple green */} Der Stern gibt an, dass der folgende Wert irgendwo im Wert des Attributs erscheinen muss. Auf diese Weise deckt dieser Selektor im Beispiel alle Links ab, deren Adresse irgendwo das Wort cmsimple enthält. |
Attribute selectors |
E[foo^="bar"] |
a[href^="http"] { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px;} Das Karat-Symbol (^) bezeichnet den Anfang des Wertes des Attributes foo, der zum Vergleich herangezogen wird. Er wird mit dem Parameter in den "" verglichen. |
Attribute selectors |
E[foo$="bar"] |
a[href$=".jpg"] { color: red;} Hier ist es umgekehrt wie zuvor. Das Dollarzeichen bezeichnet das Ende des Wertes des Attributes. |
|
E[foo*="bar"] |
a[data-filetype="image"] {color: red;} Entspricht jedem E-Element, dessen "foo"-Attributwert an bliebiger Stelle im String mindestens ein mal "bar" enthält. |
|
E[foo~= "Warnung"] |
a[data-info~="external"] { color: red;} Entspricht jedem E-Element, dessen "foo"-Attributwert eine Liste von durch Leerzeichen getrennten Werten ist, von denen einer genau "warning" entspricht. |
Attribute selectors |
div.class _selector or .class _selector |
p.absatz, .erorr{ color: red;} Dies ist ein class-Selektor. Der Unterschied zwischen id und class besteht darin, dass Sie mit letzteren mehrere Elemente ansprechen können. Verwenden Sie Klassen, wenn das Styling auf eine Gruppe von Elementen angewendet werden soll. Alternativ können Sie ids verwenden, um eine Nadel im Heuhaufen zu finden, und nur dieses bestimmte Element formatieren. |
Class selectors |
E#myid or #myid |
input#myid, #container { margin: auto;} Das Hash-Symbol vor einem Selektor: alle ID mit dem Namen des Selektors. |
ID selectors |
E:not(foo) |
a[href^="http"]:not([target="_blank"]):after { content: "\00a0\f045"; font: 0.889em FontAwesome; opacity: .35;} Die Negations-Pseudoklasse :not(X) ist eine funktionale Notation, die einen einfachen Selektor (außer der Negations-Pseudoklasse selbst) als Argument verwendet. Sie stellt ein Element dar, das nicht durch ihr Argument repräsentiert wird. Hier in diesen Template wird der Link ohne target="_blank"-Attribut so dargestellt: https://lembach-cmsimple.de Der gleiche Link mit dem target="_blank"-Attribut wird so dargestellt: https://lembach-cmsimple.de |
Negation pseudo-class |
E:checked |
input[type=radio]:checked {border: 1px solid blue;} Die Pseudoklasse selektiert ein Element E der Benutzeroberfläche, das angekreuzt/ausgeählt wurde (z. B. eine Optionsschaltfläche oder ein Kontrollkästchen) |
The UI element states pseudo-classes |
E:enabled E:disabled |
input:enabled { color: #22AA22;} <form action="url_of_form"> Ein Element E der Benutzeroberfläche, das aktiviert oder deaktiviert ist. |
The UI element states pseudo-classes |
E:after E:before |
a[target="_blank"]::after { content: "\00a0\f08e"; font: 0.889em FontAwesome; opacity: .75;} Diese Pseudoklassen fügen nach oder vor dem Element (durchaus mit zusätzlichen Selektoren wie z. B. [attribut="wert"]) Inhalt ein. |
|
p::first-line p::first-letter |
p::first-line { font-weight: bold; font-size: 1.2em;} Diese Pseudoelemente müssen auf Elemente auf Blockebene angewendet werden, um wirksam zu werden! Die angegebene Formatierung wirkt dann auf die erste Zeile bzw. den ersten Buchstaben des Absatzes. |
Scriptreihenfolge
Der Scriptimporter des Templates enthält folgende Script:
Zuordnung von Script-Namen zur Stelle in der Bit-Maske
Script-Name 1 | ||||||||||||||||
Script-Name 2 | ||||||||||||||||
Script-Name 3 | ||||||||||||||||
Script-Name 4 | ||||||||||||||||
Script-Name 5 | ||||||||||||||||
Script-Name 6 | ||||||||||||||||
Script-Name 7 | ||||||||||||||||
Script-Name 8 | ||||||||||||||||
Script-Name 9 | ||||||||||||||||
Script-Name 10 | ||||||||||||||||
Script-Name 11 | ||||||||||||||||
Script-Name 12 | ||||||||||||||||
Script-Name 13 | ||||||||||||||||
Script-Name 14 | ||||||||||||||||
Script-Name 15 | ||||||||||||||||
Script-Name 16 | ||||||||||||||||
0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | Bit-Maske für den scriptimporter.php |
Linksammlung
Spezialformate von Template krl-3col-flex: https://template.lembach-cmsimple.de/?Template-krl-3col-flex/Dateien-des-Templates/stylesheet.css
Blindtexte online Erzeugen lassen: https://www.blindtextgenerator.de/
seflhtml Zeichenreferenz: https://wiki.selfhtml.org/wiki/Zeichenreferenz