in einer meiner Webseiten, habe ich Initiale, sowie im p-Tag erste Zeile anders formatiert. Sieht kuul aus.
Jetzt habe ich es auf CMSimple übertragen und es ist auch simpel.
in einer CSS-der eigenen Wahl (ich nehme dazu meine zentrale Datei) folgendes eintragen:
Code: Select all
/*+++++ INITIALE +++++*/
/* hinzugefuegt und dem geht - https://wiki.selfhtml.org/wiki/CSS/Tutorials/Initialen 1 - 4
Zeilenafressierung: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type
*/
div.dor_initiale p::first-line {
line-height: 1.2em; /* angepasst */
font-weight: 600;
color: rgba(68,68,68,.8); /* angepasst #444 */
}
div.dor_initiale p:nth-of-type(1)::first-letter { /* Erste Zeile - Erster Buchstabe - Ü und I oder die 1 spucken mir in die Suppe */
display: block; /* hinzugefuegt */
height: 1.3em; /* hinzugefuegt - nix */
width: 3em; /* hinzugefuegt - nix */
/*color: rgba(68,68,68,.7); #444 */
color: rgba(225, 220, 202,1); /* (#e1dcca grau-ton - Kein gruen-ton! -> sieht scheisse aus */
text-shadow: 2px 2px rgba(68,68,68,.8); /* hinzugefuegt #444 -> grau-ton */
text-transform: uppercase; /* hinzugefuegt */
background: rgba(225, 220, 202,.3); /* angepasst */
font-size: 300%;
font-style: italic; /* hinzugefuegt */
float: left;
line-height: 1.3em; /* weniger */
font-weight: 600; /* vorher bold */
padding: 0.1em 0.2em 0.15em 0.2em; /* angepasst */
margin: 0.06em 0.2em 0.06em 0; /* angepasst */
border: 0.04em dashed rgba(68,68,68,.8); /* #444;*/
/*border-radius: 10% / 50%;*/
border-radius: .15em;
box-shadow: 0 0 0 .06em rgba(235, 230, 212,1); /* angepasst */
font-family: Rubik, "Noto Serif Cond", Consolas, "Edwardian Script ITC", "Brush Script MT", cursive;
}
Im Editor auf '</>' klicken und ein, zwei, drei,... p-Tags in ein div-Tag einbetten. dem div-Tag (hier) 'class="dor_initiale"' zuweisen (Leider hat es mit einem span-Tag nicht funktioniert. Da hat TinyMCE mir immer in die Suppe gespuckt, auch wenn ich noch so sehr in der 'init-Datei' herumgewurschtelt habe) - z.B.:
Code: Select all
<div class="dor_initiale">
<p>Ehne Mehne Muh und was die anderen Kühe so sagen ist mir furz egal! und wenn ich es sage, dann darf ich es sagen. Riggs! Sehen sie, was auf diesem Schild steht? Ja. Das gleiche, wie auf diesem, aber das ist mir furz egal (Adaptiert aus 'Leathel Weapon').</p>
</div>
Code: Select all
<!-- Gefunden auf 'https://www.gedichte-lyrik-online.de/fruehling-kempner.html' -->
<div class="dor_initiale">
<p>1 Wenn der holde Frühling lenzt<br>Und man sich mit Veilchen kränzt<br>Wenn man sich mit frischem Mut<br>Schnittlauch in das Rührei tut<br>Wallen durch des Menschen Säfte<br>Neue, ungeahnte Kräfte –<br>Jegliche Verstopfung weicht<br>Alle Herzen werden leicht<br>Und das meine fragt sich still<br>Ob mich dies Jahr einer will?</p>
</div>
<div class="dor_initiale">
<p>2 Ströme, milde Frühlingsluft<br>In das Haus hinein,<br>Ströme, milder Frühlingsstrahl<br>Auch ins Herz hinein. –<br>In die Herzen hart wie Stein,<br>kalt wie Kupfergeld,<br>Schmelze drei Lawinen drein,<br>Hochmut, Selbstsucht, Geld</p>
</div>
<p>Das Gedicht „Frühling“ stammt aus der Feder von <a href="https://de.wikipedia.org/wiki/Friederike_Kempner" target="_blank" rel="noopener">Friederike Kempner</a> (* 25. Juni 1828, † 3. Februar 1904).</p>
Ich hoffe nix vergessen zu haben.
Ich weiß, dass das CSS nicht perfekt ist, sieht aber gut aus und macht 'nen schmalen Schuh.
Ach ja, die gewünschte Schrift kann man sich natürlich über folgenden Eintrag im CSS einbinden und dann lobend an der richtigen Stelle erwähnen (Meine Schriftarten habe ich in einem zentralen Ordner in CMSimple abgelegt (https://cmsimple.org/forum/viewtopic.php?t=1244):
Code: Select all
/*#####################################################*/
/* Schriften DOR: hinzuhefuegt
/*#####################################################*/
@font-face {font-family: 'Schrift Name'; font-style: normal; font-weight: 400; src:url("../../fonts/[Schriftname].ttf") format("truetype");}
Gonzo
Anmerkung: Ich weiß, das hier kein CSS-Untericht gegeben wird, aber ich wollte die Übertragung auf das CMS mal los weden.
Anmerkung2: Ich bin auf 'https://www.ge-webdesign.de/demotpl/?Pl ... rst_Letter' gestoßen, aber da werden die Initiale in ein span-Tag eingebaut und man muss den erten Buchstaben, die Ziffer oder die Zahl extra mit einem Style versehen. Meine (https://wiki.selfhtml.org/wiki/CSS/Tutorials/Initialen 1 - 4 und https://developer.mozilla.org/en-US/doc ... th-of-type) Variante holt sich den 1. Buchstaben und die erste Zeile per CSS in einem p-Tag und man kann mit einem span- oder div-Tag separieren, welcher Absatz eine Initiale bekommen soll. Habe ich auch schon in CMSimple ausprobiert und dem geht!
Zu meinem (Miss)Erflog bzgl. span-Tag und Tiny kann man in https://cmsimple.org/forum/viewtopic.php?t=1250 nachlesen