Forum Wegweiser Mitglieder FAQ Suche Regelwerk Registrierung
Liebe Krieger groß und klein, Regeln müssen immer sein. Drum bitten wir einen Besuch beim Schimmerfelsen zu begehn, um das Gesetz der Krieger zu lesen und zu verstehn. Haltet euch stets an das Gesetz und eure Pflichten, sonst wird der SternenClan über euch richten.
Diese liebenswerten User helfen dir bei jedem Problem was in ihrem Bereich der Möglichkeiten liegt.

Klick auf den Button um sie näher kennen zu lernen!

 HTML-Anleitung: Postvorlagen

©Polarfuchs
Mi Jun 21 2017, 13:31
Polarfuchs
Erfahrener Krieger
Anzahl der Beiträge : 2157
Anmeldedatum : 02.05.16

HTML-Anleitung: Postvorlagen Empty
Hallo Gast!

Es freut mich, dass du den Weg hergefunden hast. Hier möchte ich dir Schritt für Schritt erklären, wie ich meine Art von Postvorlagen mache. Sie sehen im übrigen so aus:
Postvorlagen fürs RPG:


Fangen wir nun also an zu erklären, wie sich diese Postvorlage zusammen setzt.
PS: Falls meine Art auf einige unprofessionell wirkt, tut es mir nicht Leid. Ich bin noch recht am Anfang und daher noch nicht all zu gut wie manch anderer ^^ Ich bitte daher um Verständnis.


Der Anfang
Den Anfang bildet bei mir immer die Einstellung für die breite der Vorlage und die Hintergrundsfarbe. In diesem Schritt kann man jedoch auch einstellen, ob man abgerundete Ecken haben möchte oder nicht. Der Code, den ich verwende, ist folgender:
Code:
<div style="background: #FARBCODE; width: BREITEpx;">
Nun ist dieser Befehl offen und gehört eigentlich geschlossen. Dies kommt aber erst ein wenig später.


Das Bild/Die Grafik
In fast jeder Postvorlage findet man ein Bild des Charakters. Bei mir, und vielen anderen, kommt das Bild nach oben. Hierzu kommt folgender Befehl gleich nach dem oberen Code, ohne etwas dazwischen zu setzen.
Code:
[img(500px,250px)]BILDLINK[/img]
Diese Einstellung ((500px,250px)), schneidet jedes Bild auf die angegebene Größe zu. Es erleichtert das Arbeiten somit, da man das Bild nicht selbst zuschneiden muss. Dieser Befehl kann jedoch entfernt werden, dann muss das Bild jedoch selbst zugeschnitten werden.


Der Name des gespielten Charakter und die Angabe des Clans und Rang
Es ist ja so, dass jeder in der Postvorlage den Namen, Clan und Rang haben möchte. Hierzu benutze ich immer folgenden Code, der ohne eine Lücke hinter den Bildcode gesetzt wird.
Code:
<link href='https://fonts.googleapis.com/css?family=NAMEDERSCHRIFTART' rel='stylesheet' type='text/css'><br/><div style="font-family: 'SCHRIFTART', cursive; font-size: SCHRIFTGRÖßEpx; text-align: center; color: #SCHRIFTFARBE; text-transform: none; text-shadow: 1px 1px 10px #FARBEDESSCHATTEN; background: #HINTERGRUNDFARBE">NAME</div>
<link href='https://fonts.googleapis.com/css?family=SCHRIFTART' rel='stylesheet' type='text/css'><br/><div style="font-family: 'SCHRIFTART', cursive; font-size: GRÖßEDERSCHRIFTpx; text-align: center; color: #SCHRIFTFARBE; text-transform: none; text-shadow: 1px 1px 10px #FARBSCHATTEN;">RANG | CLAN</div>
Alle groß geschriebenen Dinge müssen durch den passenden Teil ersetzt werden.

So und nun ist der obere Teil schon fertig. Nun folgt das Schriftfeld und der letzte Teil.


Das Schriftfeld/Textfeld
Sofern es gewünscht wird, baue ich eine Scrollbox ein. Diese hat den Vorteil, dass sie den Post nicht extra in die länge zieht (siehe oben das Beispiel). Der Befehl für eine Scrollbox sieht so aus.
Code:
<div style="width: 500px; height: 150px; overflow: auto; padding: 5px;">
Text in der Scrollbox
</div>
Mit dem
wird die Scrollbox geschlossen und umfasst nur den Inhalt, der drinne steht.


Ort / Erwähnt / Angesprochen
In einem RPG unserer Art ist es typisch anzugeben, wer angesprochen wurde, wer erwähnt wurde und an welchen Ort sich der gespielte Charakter befindet. Hierzu gibt es in meinen Vorlagen keinen bestimmten Code. Der Verfasser schreibt einfach mit einer Zeile Abstand unter den
Befehl:
Erwähnt:
Angesprochen:
Ort:

und ist somit schon fertig.


Copyright und Zitat
Jeder Ersteller will natürlich seinen Copyright drauf haben. Den Code den ich dazu verwende ist folgender:
Code:
<div style="background: transparent; width: 490px;"><div style="font-family: 'Kalam', cursive; font-size: 10px; text-align: center; color: #000000; text-transform: none; text-shadow: 1px 1px 10px #000000; background: #223D63">[url=http://teeeeeeeeeeeeeeeeees.forumkostenlos.com/]©Takumi[/url] | 2017</div>

In der Überschrift habe ich "Zitat" angegeben. Es ist natürlich nicht Pflicht, aber wer das Zitat seines Charakters drin haben möchte, kann es gerne tun. Ich habe den Code dafür nach ganz unten gesetzt, damit es nicht zu voll aussieht. Hierzu verwende ich folgenden Code:
Code:
<link href='https://fonts.googleapis.com/css?family=SCHRIFTART' rel='stylesheet' type='text/css'><br/><div style="font-family: 'SCHRIFTARRT', cursive; font-size: GEÖ?Epx; text-align: center; color: #FARBE; text-transform: none; text-shadow: 1px 1px 10px #SCHATTEN;">ZITAT</div>


Schluss
Natürlich hat jeder Code auch einen Schluss. Dieser setzt sich bei meinen aus folgenden beiden Schließungscodes zusammen:
Code:
</div></Center>
Dies schließt den oben genannten ersten Code.

Das wars auch schon, denn nun ist die Postvorlage (meiner Art) fertig.
Ich hoffe ich konnte euch mit diesem kleinen Tutorial helfen.
Bei Fragen einfach hier schreiben oder mir eine PN senden.

Mit freundlichen Grüßen
~Takumi




 Ähnliche Themen

-
» HTML-Anleitung: HTML-Vorstellung für Foren» HTML-Anleitung: Boxen» HTML Vorstellung (08.01.2019)» HTML und CSS für Anfänger - Anmeldung» HTML-Versuche made by Pumafell
Seite 1 von 1


Finsterkatzen :: Probleme :: Scharfkrallen Bau :: Codes für Beiträge