Ein paar Basics zur Postverschönerung

[ Nach unten  |  Zum letzten Beitrag  |  Thema abonnieren  |  Neueste Beiträge zuerst ]


Ysmeree
Administrator

-, Weiblich

  Lichtbefohlener Bote

entschuldigt

Haus da Lildain

Erzherzogin

Altblut

ehelich geb.

Gewalt II

Erotik II

Beiträge: 43

Ein paar Basics zur Postverschönerung

von Ysmeree am 17.10.2024 07:23

Hier möchte ich mit euch einige Basics teilen mittels derer ihr eure Beiträge ein wenig verschönern könnt. Wer mag, kann sie gerne ergänzen.



Wo füge ich Codes im Forum ein?
Jegliche Codes, die ihr im Forum oder für eure Signatur nutzt, müssen mit dem folgendem Symbol eingefügt werden, dass ihr in der Zeile über dem Schreibfeld sehen könnt ().

Wichtig ist, dass ihr eure Codes nur einmal bearbeiten könnt. Das bedeutet, ihr seid nur in der Lage diesen Code in der auftauchenden Leiste zu bearbeiten, nicht aber danach. Bedenkt das bitte.


Auch wenn das vielleicht etwas verwirrend klingen mag, möchte ich euch dazu ermutigen euch auszuprobieren und wünsche viel Spaß beim Gestalten eurer Beiträge.

Antworten Zuletzt bearbeitet am 17.10.2024 21:47.

Ysmeree
Administrator

-, Weiblich

  Lichtbefohlener Bote

entschuldigt

Haus da Lildain

Erzherzogin

Altblut

ehelich geb.

Gewalt II

Erotik II

Beiträge: 43

Re: Ein paar Basics zur Postverschönerung

von Ysmeree am 17.10.2024 22:13

Schriftarten
Beginnend mit den Schriftarten, stelle ich euch zuerst einen Code vor, mit dem ihr euren Text aufhübschen könnt:

<span style="font-family: 'Philosopher;">DEIN TEXT</span>


HIER könnt ihr die Schriftart bestimmen und HIER müsst ihr euren gewünschten Text eingeben.


Um euch ein wenig flexibler zu machen, was die Gestaltung eurer Post anbelangt, haben wir einige Schriftarten integriert, die ihr nutzen könnt (einfach mit Philosopher ersetzen):


Homemade Apple
Die Gabel verliebte sich unsterblich in den Löffel, doch der träumte nur vom Schneebesen.
(Homemade Apple - Wir nutzen diese Schriftart für viele unserer Überschriften)

Grey Qo
Die Gabel verliebte sich unsterblich in den Löffel, doch der träumte nur vom Schneebesen.
(Grey Qo)

Meie Script
Die Gabel verliebte sich unsterblich in den Löffel, doch der träumte nur vom Schneebesen.
(Meie Script)

WindSong
Die Gabel verliebte sich unsterblich in den Löffel, doch der träumte nur vom Schneebesen.
(WindSong)


Texte ausrichten
Euren Text ausrichten könnt ihr mit folgendem Code:

<div style="text-align: center;">DEIN TEXT</span>


HIER kommt der Ausrichtungsbefehl hin. In diesem Fall ist es center, was für mittig steht. HIER muss wieder euer Text hin. Eingefügt sieht der Code dann folgendermaßen aus:

DEIN TEXT


Um den Text anderweitig auszurichten könnt ihr statt center folgende Befehle eingeben:

right - macht euren Text rechtsbündig


justify - sorgt dafür, dass der Text im Blocksatz erscheint. Wirklichen Sinn macht dieser Befehl nur, so zumindest meine Meinung, wenn ihr etwas mehr Text habt. Wir nutzen diesen Befehl bei unseren Unterseiten.


Im Forum nutzen wir regulär left, also linksbündig. Solltet ihr euren Text nicht ausrichten, erscheint er automatisch linksbündig.

Antworten Zuletzt bearbeitet am 04.08.2025 12:30.

Ysmeree
Administrator

-, Weiblich

  Lichtbefohlener Bote

entschuldigt

Haus da Lildain

Erzherzogin

Altblut

ehelich geb.

Gewalt II

Erotik II

Beiträge: 43

Re: Ein paar Basics zur Postverschönerung

von Ysmeree am 17.10.2024 22:27

(Trenn-)Linien einfügen
Eine Trennline kann dabei helfen, Abschnitte zwischen mehreren Textabteilen visuell zu trennen. Es ist damit oft für den Leser leichter zu verstehen, wann ein Thema abgeschlossen ist. Eine einfache Trennlinie könnt ihr mit folgendem Code erzeugen:

<hr/>

Eingefügt sieht sie dann so aus:



Teilüberschriften integrieren
Wer zusätzlich auf mehrere Überschriften zurückgreifen möchte, kann das mit dem nun folgendem Code tun, den wir auch für viele Informationsbeiträge hier im Forum nutzen:

<div class="backgroundcolordark" style="margin:0px auto;margin-top:5px;width:auto;padding:2.5px;text-align:center;"><span style="color:#aa9b91;font-size:9px;text-transform:uppercase;letter-spacing:3.5px;line-height:135%;">DEIN TEXT</span></div>

An der markierten Stelle könnt ihr eure Teilüberschrift eingeben.

Selbstverständlich könnt ihr aber auch diesen Code nach eurem Belieben anpassen, damit die Teilüberschrift mehr eurem Geschmack entspricht.

Das hier ist ein Beispiel für eine Teilüberschrift

Antworten Zuletzt bearbeitet am 04.08.2025 12:39.

Ysmeree
Administrator

-, Weiblich

  Lichtbefohlener Bote

entschuldigt

Haus da Lildain

Erzherzogin

Altblut

ehelich geb.

Gewalt II

Erotik II

Beiträge: 43

Re: Ein paar Basics zur Postverschönerung

von Ysmeree am 10.11.2024 19:51

Texte in Kästchen setzen
Um einen Teil eures Textes besonders hervorzuheben, könnt ihr ihn in einen Kasten setzen:

<div style="background: #1B1311; border: 2px solid #140F0E; padding: 10px; width: 230px; text-align: center;">DEIN TEXT</div>


HIER könnt ihr die Hintergrundfarbe eures Kästchens einstellen. HIER könnt ihr die Dicke und die Farbe des Randes anpassen. HIER könnt ihr noch den Abstand zwischen dem Text und dem Rand einstellen. HIER könnt ihr die Breite des Kästchens bestimmen (um aber schön auszusehen, sollte sie nicht 500px übersteigen) und HIER könnt ihr, wie vorher beschrieben, euren Text ausrichten. Deinen Text kannst du HIER eingeben.

Die Gabel verliebte sich unsterblich in den Löffel, doch der träumte nur vom Schneebesen.



Border anpassen
Falls euch der Rand nicht gefällt, könnt ihr diesen auch mittels einiger Befehle verändern. Dafür müsst ihr beim oberen Code solid mit einen der folgenden Befehle ersetzen:

dotted - der Border ist gepunktet


dashed - der Border ist gestichelt


double - es erscheinen zwei Ränder

Antworten Zuletzt bearbeitet am 04.08.2025 12:22.

Ysmeree
Administrator

-, Weiblich

  Lichtbefohlener Bote

entschuldigt

Haus da Lildain

Erzherzogin

Altblut

ehelich geb.

Gewalt II

Erotik II

Beiträge: 43

Re: Ein paar Basics zur Postverschönerung

von Ysmeree am 10.11.2024 20:04

Bilder verkleinern
Manchmal sind Bilder zu groß, als das sie im Forum richtig zur Geltung kommen. Dann kann es helfen, diese zu verkleinern:

<img style="width: 200px;" src="DEIN BILDLINK" alt="" />



HIER muss die Grafikadresse (der Link eures Bildes, das ihr verkleinern wollt) hin und HIER die Größe eures Bildes. Je kleiner das Bild sein soll, umso geringer muss die Zahl sein.

Aussehen könnte das zum Beispiel so:


Um sich andere mögliche Größen vorzustellen, habe ich mit diesem Bild ein wenig rumprobiert:


50px



100px



300px



400px



Border hinzufügen
Der Border kann wieder so bearbeitet werden, wie ich es in meinem letzten Beitrag beschrieben habe.

<img style="width: 200px; border: 3px solid #140F0E !important;" src="DEIN BILDLINK" alt="" />




Das genutzte Bild ist mit der auf 'Bing' integrierten KI entstanden.

Antworten Zuletzt bearbeitet am 04.08.2025 12:13.

Cicely

18, Weiblich

  Zaghafter Schein

aktiv

Im Dienst des Schlosses

Hausmädchen

Trugling

ehelich geb.

Gewalt II

Erotik II

Beiträge: 18

Re: Ein paar Basics zur Postverschönerung

von Cicely am 02.12.2025 14:21

Hello hello,
vielleicht habe ich einen kleinen Hinweis parat, der zumindest für den ein oder anderen praktisch ist :)

Ganz zu Beginn dieses Threads steht, dass man Codes immer mit diesem Papier/-rote Klammern-Symbol einbetten muss und die nachträglich dann gar nicht mehr bearbeitet werden können. Da es ja aber durchaus praktisch sein kann, Codes später noch zu editieren, möchte ich gerne einen Tipp geben, wie zumindest ich das Problemchen umgehe:

Vorab: Ich weiß nicht, ob es auf allen Geräten so ist.
Aber ich persönlich bin meistens übers iPad online.
Bin ich über Safari, also den iOS-Standardbrowser, eingeloggt, verhält es sich wie beschrieben:
Man muss Codes über dieses Symbol-Ding einfügen und kann den Code nachträglich nicht mehr bearbeiten.
ABER ich habe auf meinem Gerät auch Google Chrome und Brave installiert (mehrere Browser zu haben ist bspw. praktisch um mit mehreren Accounts gleichzeitig eingeloggt zu sein), und diese Browser haben - zumindest wenn sie auf dem iPad benutzt werden, ich kann eben leider nicht sagen ob das bei Android- oder Windows-Geräten genauso ist - keine perfekte Kompatibilität mit dem Yooco-System.
Heißt: Man kann die Seite an sich komplett normal benutzen, der Unterschied ist aber das Textfeld. Da werden einem die ganzen Optionen wie Text fett oder kursiv schreiben, Emojis benutzen usw. nicht angezeigt, es ist einfach nur ein Textfeld. Es fehlt also auch dieses Code-einfügen-Icon. D.h. wenn man seinen Text verschönern möchte, kann man das tun, indem man einfach die entsprechenden Codes direkt ins Textfeld eintippt. Gleiches gilt für das spätere Bearbeiten von Codes in einem Beitrag. Du siehst also beim Bearbeiten immer den kompletten von dir benutzten Code und kannst ihn jederzeit hinterher bearbeiten!
Gleiches gilt übrigens auch für die Forensignatur, wenn ich eine erstelle dann füge ich sie immer über Chrome oder Brave ein.
Vielleicht entdeckt ihr ja auch andere Browser, bei denen das funktioniert.

Viel Erfolg :)


Edit:
Noch zu nem anderen Aspekt: Ich persönlich tue mir irgendwie waahnsinnig schwer, mir so div-Codes zu merken und da keine Fehler reinzuhauen, wenn ich das aus dem Kopf mache. Es ist iwi total dumm weil ich es schon so oft gemacht habe, aber jedes Mal aufs Neue muss ich den Code googeln. Bei manchen Codes funktioniert aber auch eine einfachere Version. Das Beispiel, das in einem der ersten Posts hier im Thread gezeigt wurde, war wie man Text zentrieren kann über den Code

Tatsächlich funktioniert es aber auch, ein einfaches < center > zu setzen. Ohne Leerzeichen, die hab ich nur gesetzt weil ich diesen Post hier auf die oben beschriebene Weise eintippe (über Chrome) und da Codes ja umgewandelt werden ^^'
Dieser Post ist auf zentriert gesetzt, um das zu zeigen :)

Antworten Zuletzt bearbeitet am 02.12.2025 14:42.

« zurück zum Forum