Der FrostClan
Willkommen junger Krieger,
Stehe zu deinem Clan und kämpfe für diesen.
Sei deinem Clan treu.
Du fängst als Junges an, aber schon bald bist du
ein Schüler und kannst im Schülerbau mit deinen
Baugefährten lernen und trainieren.
Der FrostClan
Willkommen junger Krieger,
Stehe zu deinem Clan und kämpfe für diesen.
Sei deinem Clan treu.
Du fängst als Junges an, aber schon bald bist du
ein Schüler und kannst im Schülerbau mit deinen
Baugefährten lernen und trainieren.


Willkommen junger Krieger, schließe dich uns an und kämpfe für deinen Clan
 

 

 HTML-Anleitung: Postvorlagen

Nach unten 
AutorNachricht
Wächterpfote
Schüler
Wächterpfote


Anzahl der Beiträge : 158
Beute : 148
Anmeldedatum : 08.02.17

HTML-Anleitung: Postvorlagen Empty
BeitragThema: HTML-Anleitung: Postvorlagen   HTML-Anleitung: Postvorlagen EmptyDo Jul 13, 2017 9:26 pm

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

Nach oben Nach unten
 
HTML-Anleitung: Postvorlagen
Nach oben 
Seite 1 von 1
 Ähnliche Themen
-
» HTML-Anleitung: Boxen
» CSS-Anleitung: Runde Ecken
» Gimp-Anleitung: Neue Schriften + Brushes

Befugnisse in diesem ForumSie können in diesem Forum nicht antworten
Der FrostClan  ::  :: Grafische Tipps und anderes-
Gehe zu: