01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16
Sie sind hier: Startseite > Website bauen > CMSimple_XH > Codeschnipsel

Code snipets around CMSimple_XH

Eine unvollständige Sammlung zum Thema

Plugin TinyMCE

Wird der Editor im FireFox benutzt gibt es folgende (mich störende) Eigenheit:

Der Artikel, an dem man arbeitet, sei so lang, dass Anfang und Ende nicht ins Editorfenster passen.
Arbeitet man am Ende des Artikels und ändert z.B. den Typ einer Überschrift (also z.B. h2 nach h3) springt der Fensterinhalt des Editors an den Artikelanfang. Zwar bleibt der Editierfokus auf dem bearbeiteten Punkt, der ist jedoch außerhalb des Sichtbereiches. Man muss also jedes mal nach unten scrollen.

Im Forum ist dazu eine Lösung erarbeitet worden.

In das Template - Stylesheet folgendes einfügen:

#tinymce {
height: auto;
}

Plugin TinyMCE Menü-Leiste und Icon-Reihen anpassen

In der Tinymce4 – Konfiguration unter dem ersten Punkt (INIT) kann man die init_ Datei auswählen, die das Aussehen des Editors festlegt.

Das Verzeichnis mit diesen Dateien liegt in diesem Pfad: /plugins/tinymce4/inits

Für die folgende Kopfleiste muss diese init_fontawesome.js - Datei in der Konfiguration des TinyMCE aktiviert sein.

Datei:  init_fontawesome.js    hier als *.zip herunterzuladen.

Um ein Icon für die Funktion TOC (Tabel of Content, 3. Zeile von unten, ganz rechts: |    ) anzuzeigen musste ich diese Datei editieren:

Pfad: /plugins/tinymce4/tinymce/skins/lightgray

Datei: skin.min.css     hier als *.zip herunterladen.

Ganz unten muss sie lauten: .... .mce-i-toc:before{content:"\e00a"} .....
die notwendige Änderung betrifft den content, der neue Wert muss lauten "\e00a", damit angezeigt wird, statt eines Fehlers.

Wer es schafft das statt des Zeichens das Zeichen oder ein noch besser passendes Zeichen angezeigt wird, möge mir bitte zeigen, wie das geht.

 

Ein Submenu an beliebiger Stelle zusätzlich anzeigen

Forumsbeitrag zu diesem Thema

{­{{submenu()}}} erzeugt eine Navigation - wenn beim Bearbeiten der Seite im Tab "Seite" - "Veröffentlicht?" UND "In der Navigation anzeigen?" angehakt wurden.
Wenn die Seite nicht veröffentlicht oder in Navigationen verborgen ist, dann wird sie eben dort auch nicht angezeigt.

Responsive Schriftgrößen mit CSS calc() = Dynamische Schriftgröße (Quelle)

Mit Hilfe der CSS-Funktion calc() kann der Text automatisch zwischen einem minimalen und einem maximalen Wert skaliert werden.

Wenn ihr möchtet, dass der Text bei 320 Pixeln Viewport-Breite 16 Pixel groß ist und bei 1600 Pixeln Viewport-Breite 28 Pixel, dann ist folgende Formel notwenig:

body {
 font-size: calc(10px + (28 - 10) * ((100vw - 320px) / (1920 - 320)));
}

Beispiel anschauen

Erklärung der Formel

Die oben gezeigte calc()-Funktion basiert auf folgender Formel:

body {
  font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}

Eine detaillierte Erklärung der Formel findet ihr u.a. beim Smashing Magazine.

Text als nicht markierbar und nicht kopierbar formatieren

Quelle: https://cmsimplexh.de/?Besonderheiten/Inhalt-nicht-markierbar

Inhalte nicht markier- und kopierbar

Der erste Satz ist per CSS geschützt und nicht markierbar! — Der zweite Satz ist wieder normal.

Ich bin auf herkömmlichen Seiten kein Freund davon, Texte nicht markieren und kopieren zu können oder nur mit Umweg.

Das ist aber kein Problem der Technologie, sondern entspricht den Intentionen des Seitenbetreibers. Diese Anweisung sollte ganz sparsam eingesetzt werden und nur dort, wo es notwendig ist, man möchte den Benuter der Website ja nicht verärgern!

Im Bereich von Home-Schooling (2020, wegen der Corona-Pandemie) kann dies aber schon als sinnvoll erachtet werden. Und somit sind solche Lösungen auch für uns Lehrkräfte sinnvoll.

Weiterführende Infos


Wie wird das nun realisiert?

1) Füge in der stylesheet.css des (Standard-) Templates (damit es nicht zu unübersichtlich wird am besten bei den den Anweisungen für Styles) diese Zeilen ein. Den Kommentar zwischen /* Kommentar */ kann man auch weglassen.

/* Start: Besondere Styles: Inhalte lassen sich nicht markieren */

div#nichtmarkieren {
-ms-user-select: None;
-moz-user-select: None;
-webkit-user-select: None;
user-select: None;
}

/* Ende: Besondere Styles: Inhalte lassen sich nicht markieren */

2) Abspeichern und auf den Server hochladen.

3) Auf der Webseite fügt man vor dem zu markierenen Inhalt den Funktionsaufruf im HTML-Modus <div id="nichtmarkieren"> ein. Nach dem Inhalt (Text, Bilder ...) kommt dann das abschließende </div>.

Abspeichern nicht vergessen. Das war es eigentlich schon.

 Das kann man natürlich auch inline deklarieren, wenn man es nur an einer einzigen Stelle benötigt:
<div style="-ms-user-select: None; -moz-user-select: None; -webkit-user-select: None; user-select: None;">text</div>

Kurzform der PHP - Anweisung If / else

Linkliste

http://php.lernenhoch2.de/lernen/php-anfaenger/bedingungen/ternaerer-operator-kurzform-fur-if-then-else/

https://mizine.de/html/php-if-else-kurzschreibweise-string-concatenation/

http://www.kubuzibu.de/ternaerer-operator-if-else-in-kurzform/

http://foobarblog.net/blog/alternative-kurz-schreibweisen-fuer-if-anweisungen-in-php-18/

Kurze Darstellung

Die Syntax für die Kurzform von if else sieht folgendermaßen aus:

1 <?php
2     (wenn Ausdruck wahr) ? (mache das hier) : (ansonsten das hier)
3 ?>

Das könnte dann so verkürzt werden:

<?php echo ($a != $b) ? 'Werte sind ungleich' : 'Werte sind gleich' ; ?>

Mit dem ternären Operator lassen sich auch If, ElseIf, Else Abfragen verkürzen. Das ist der Lesbarkeit des Codes nicht förderlich, aber innerhalb des HTML-Codes eines Templates macht es durchaus Sinn die Verkürzung so zu maximieren.

<?php
    $auswahl = 1;
    echo $geschlecht = ($auswahl == 1) ? "männlich" : (($auswahl == 2) ? "weiblich" : "unbekannt");
?>

Ein reiner Entscheidungsbaum mit drei Zweigen kann dann so aussehen:

<?php echo ($a == '') ? 'Die Variable ist leer.' : (($a == 'true') ? 'Die Variable hat den Wert true.' :  'Der Variablenwert ist nicht true.') ; ?>

In ein HTML-Template eingebettet, mit einer ganzen Reihe von HTML-Code-Zeile Ausgaben, wenn die Bedingung wahr ist, sieht dan z. B. so aus:

<?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;?>

Es lassen sich dann natürlich auch verschachtelte Konstrukte bilden.


Bildquellen

Slideshowbilder von James Osborne , Daniel Agrelo , fancycrave1 , Boskampi , Gerd Altmann 

Letzte Bearbeitung:

Seitenanfang |  - - - By CrazyStat - - -

Please activate JavaScript in your browser.

» Sitemap