header-xh-01 header-xh-02 header-xh-03 header-xh-04 header-xh-05 header-xh-06 header-xh-07 header-xh-08 header-xh-09 header-xh-10 header-xh-11 header-xh-12 header-xh-13 header-xh-14
Lembach's nichtkommerzielle Website rund um CMSimple_XH
Templates, Plugins, Tools, Programme
und Tips und Tricks die mir wichtig sind
Sie sind hier: Startseite > Tools - Werkzeuge > Notiz-Box

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-Version2.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).

NameGrößeÄnderungsdatumHits
ZIP Datei11 KB19.12.2021 13:135
ZIP Datei10 KB29.11.2021 11:294

 

 

Notiz - Box zum Copy & Paste

Akkordeon

HTML:
<details>
<summary>Das ist die Kopfzeile.</summary>
<p>Das ist der Boddy des Absatzes.</p>
</details>

Immer den gesamten Frontend-Bereich kopieren (alles zwischen ⇒ und ⇐, bzw. wenn das schwierig ist, dann die beiden Pfeile mit kopieren und im Editorfenster wieder löschen.

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
In CMSimple_XH eingebaute Funktionen und deren Funktion
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 Variable und Konstanten
In CMSimple_XH verwendete Variablen 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
$print 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; }
ul { margin-left: 0; }

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;}
li:nth-child(3n) { 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; }
a:visted { color: purple; }

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;}
div:hover { background: #e3e3e3;}
div:focus{ border-color: #f3f3f3;}

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.
Springt man in einem Formular z. B. mit dem Tabulator von Eingabe zu Eingabe, hat das so angewählte <form> - Tag den :focus.

The dynamic pseudo-classes
E:lang(c)

html:lang(fr-be) {color: blue}
html:lang(de) {color: red}
:lang(fr-be) > q {background: lightblue;}
:lang(de) > q {background: lightgray;}

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>
<p>Je suis français.</p>
</body>

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).
Im obigen Beispiel ziel der Selektor nur auf die Anker-Tags die ein title Attribut haben.

Attribute selectors
E[foo="warning"]

input[value="wertangabe"] { color: blue;}
a[href="https://net.tutsplus.com"] { color: #1f6053; /* nettuts green */}

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.
Hier im Beispiel wird also der Anfang des Wertes des Attributes href mit "http" verglichen. Bei Übereinstimmung wird die Formatauszeichnung aktiv. Es sind also alle externen Links (egal ob http oder https) erfasst.

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.
Hier im Beispiel werden also alle Links zu JPG-Bildern selektiert.

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;}
a[data-info~="image"] { border: 1px solid black;}

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.
Negationen dürfen nicht verschachtelt werden; :not(:not(...)) ist ungültig. Da Pseudo-Elemente keine einfachen Selektoren sind, sind sie auch kein gültiges Argument für :not().

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: htths://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;}
input:disabled { color: #D9D9D9;}

<form action="url_of_form">
<label for="FirstField">First field (enabled):</label> <input type="text" id="FirstField" value="Lorem"><br />
<label for="SecondField">Second field (disabled):</label> <input type="text" id="SecondField" value="Ipsum" disabled="disabled"><br />
<input type="button" value="Submit" />
</form>

Ein Element E der Benutzeroberfläche, das aktiviert oder deaktiviert ist.
Die :enabled CSS Pseudoklasse repräsentiert alle aktivierten Elemente. Ein Element ist aktiviert, falls es aktiviert werden kann (z. B. markierte, angeklickte Elemente oder solche, die Texteingaben akzeptieren) oder die fokussiert werden können. Das Element hat auch einen deaktivierten Zustand, in welchem es nicht aktiviert werden oder fokussiert werden kann.

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.

The ::before pseudo-element

The ::after pseudo-element

p::first-line
p::first-letter

p::first-line { font-weight: bold; font-size: 1.2em;}
p::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px;}

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.
Die folgenden CSS-Eigenschaften gelten für ein ::first-line-Pseudoelement: Schrifteigenschaften, Farbeigenschaften, Hintergrundeigenschaften, 'word-spacing', 'letter-spacing', 'text-decoration', 'text-transform', 'line-height'.

The ::first-line pseudo-element

The ::first-letter pseudo-element


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

Blindtexte online Erzeugen lassen: https://www.blindtextgenerator.de/

seflhtml Zeichenreferenz: https://wiki.selfhtml.org/wiki/Zeichenreferenz



| Seitenanfang | |  - - - By CrazyStat - - -