Codeinfothread

Benutzeravatar
Toshiro Rengoku
||
||
Beiträge: 4774
Registriert: Mi 31. Dez 2008, 18:56
Im Besitzt: Locked
Discord: iKirin#0001
Vorname: Toshiro
Nachname: Rengoku
Alter: 23
Größe: 1.78m
Gewicht: 73 kg
Stats: 39/39
Chakra: 10
Stärke: 1
Geschwindigkeit: 4
Ausdauer: 9
Ninjutsu: 10
Genjutsu: 1
Taijutsu: 4
Lebenspunkte: 100
Abwesend?: Nein

Codeinfothread

Beitragvon Toshiro Rengoku » So 20. Feb 2011, 23:36

[align=center]Bild

Vorwort:
Auf dem "eternal-narutorpg.de"-Forum gibt es eine Vielzahl der unterschiedlichsten Codes, die nicht auf jedem anderen Forum nutzbar sind. Einige Codes, wie z.B fett, kursiv, oder unterstrichen kennt wahrscheinlich jeder und auch die selteneren Codes, wie der [s]durchgestrichen[/s], oder der Trennliniencode "[ hr ]", sind für die meisten Alltag.
Doch welche Codes gibt es neben den gennanten?
An dieser Stelle, gibt es einen kleinen Infothread, welcher mit der Zeit immer mehr Codes veröffentlicht und somit euch Usern zugänglich macht.

Allgemeines:
Was sind denn eigentlich diese "Codes"?
Codes sind spezielle Befehle innerhalb einer Plattform, in unserem Fall das "eternal-narutorpg.de"-Forum, wodurch man einen gewünschten Effekt erzielt. Solche Effekte reichen von einer einfachen Dickschrift, über Farbveränderungen, bis hin zu Tabellen und Ankern. Natürlich gibt es noch viele weitere, selbst einige die unser Forum nicht bieten kann, doch bleibt ihre Umsetzung bis auf kleine Änderung grundsätzlich gleich. So werden diese Codes meist mit einer eckigen Klammer "[ ]" umhüllt um sie einzuleiten, sowie in einer eckigen Klammer mit Slash-Zeichen "[/ ]" gesetzt um sie abzuschießen.


Bild
Die Farb-Codes
Der [size]-Code
Die verschiedenen Spoiler
Die Verlinkungen
Ahoi! Der Anker
Der Statbalken
[/align]

Bild

Als Erstes wittmen wir uns der Farbgebung von Texten.
Dabei gibt es zwei verschiedene Möglichkeiten:
  1. Man benutzt einen englischen Farbnamen, oder
  2. Man benutzt einen sogenannten Farbcode.
Zur kurzen Erläuterung ist zu sagen; Farbcodes bestehen aus einem Hexadezimal-Code, welcher jeweils eine Farben ergibt. Dies erzielt den Effekt beinahe unendlich Farbvarianten zur Verfügung zu stellen, ohne auf Benennungsschwierigkeiten zu stoßen. Denn wenn man sich für jede Farbe einen neuen Namen ausdenken müsste, würden wir bald in einem totalen Chaos landen und Farben mit Namen wie "dunkelbundhelllila" bezeichnen, natürlich nur scherzeshalber.

Nach dieser kurzen Erläuterung, kommen wir schon zur Anleitung, in welcher wir euch Schritt für Schritt den Umgang mit den Codes erklären und zeigen:

Um den Farbcode zu beginnen, muss der Befehl eingeleitet werden. Wie ihr schon aus dem "Allgemeinen" entnehmen konntet wird dies durch eine eckige Klammer geschehen. Da wir eine Farbveränderung wünschen und Codes immer in englischer Sprache verfasst werden, müssen wir den Inhalt der Klammer mit dem Wort "color" füllen und ein "=" anschließen:

Code: Alles auswählen

[color=]

Nach dem "=" fügt ihr den Namen eurer gewünschten Farbe ein. Nehmen wir zum Beispiel "royalblue" sollte es so aussehen:

Code: Alles auswählen

[color=royalblue]

Nun folgt euer Text den ihr farbig gestalten wollt. An der Stelle wo die Farbe aufhören soll, müsst ihr den Befehl abschließen, dies macht ihr über

Code: Alles auswählen

[/color]

Wenn ihr alles richtig gemacht habt, sieht es wie folgt aus:
Dies ist die Farbe "Royalblue".
Spoiler für die uns bekannten Farben:
A
aliceblue
antiquewhite
aqua
aquamarine
azure

B
beige
bisque
black
blanchedalmond
blue
blueviolet
brown
bronze
burlywood

C
cadetblue
chartreuse
coral
cornflowerblue
cornsilk
crimson
cyan

D
darkgoldenrod
darkcyan
darkblue
darkgray
darkgreen
darkkhaki
darkmagenta
darkolivegreen
darkorange
darkorchid
darkred
darksalmon
darkseagreen
darkslateblue
darkslategray
darkturquoise
darkviolet
deeppink
deepskyblue
dimgray
dodgerblue

E
-----

F
firebrick
floralwhite
forestgreen
fuchsia

G
ghostwhite
gainsboro
gold
goldenrod
gray
green
greenyellow

H
honeydew
hotpink

I
indianred
indigo
ivory

J
-----

K
khaki

L
lavender
lavenderblush
lawngreen
lemonchiffon
lightblue
lightcoral
lightcyan
lightgoldenrodyellow
lightgreen
lightgrey
lightpink
lightsalmon
lightseagreen
lightskyblue
lightslategrey
lightsteelblue
lightyellow
lime
limegreen
linen

M
magenta
maroon
mediumaquamarine
mediumblue
mediumorchid
mediumpurple
mediumseagreen
mediumslateblue
mediumspringgreen
mediumturquoise
mediumvioletred
midnightblue
mintcream
mistyrose
moccasin

N
navajowhite
navy

O
oldlace
olive
olivedrab
orange
orangered
orchid

P
palegoldenrod
palegreen
paleturquoise
palevioletred
papayawhip
peachpuff
peru
pink
plum
powderblue
purple

Q
-----

R
red
rosybrown
royalblue

S
saddlebrown
salmon
sandybrown
seagreen
seashell
sienna
silver
skyblue
slateblue
slategrey
snow
springgreen
steelblue

T
tan
teal
thistle
tomato
turquoise

U
-----

V
violet

w
wheat
white
whitesmoke

X
-----

Y
yellow
yellowgreen

Z
-----

Die zweite Variante könnt ihr benutzen, indem ihr einfach anstatt einem Farbnamen wie "royalblue", einfach einen Farbcode verwendet. Farbcodes findet ihr hier unter "HEX Code".
Dabei fügt ihr einfach den "HEX Code" eurer Wahl hinter dem "=" ein:

Code: Alles auswählen

[color=#800000]

Wichtig ist, dass ihr das Rautezeichen "#" nicht vergesst. Abgeschlossen wird Befehl wie gehabt durch:

Code: Alles auswählen

[/color]

Letztendlich würde es nach unserem Beispiel so aussehen.


Bild

Obwohl er auf jedem Forum vorhanden ist, denken wir uns, dass er an dieser Stelle doch noch einmal angesprochen gehört, vor allem da er sich auf unserem Forum von den meisten anderen unterscheidet. Hinter dem "=" muss ein Zahlenwert zwischen "5" und "200" stehen; höhere oder niedrigere Werte gehen nicht:

Minimum - Maximum - Kleiner als "5" geht nicht, und wird als Minimum angezeigt. - Größer als 200 geht nicht, und führt beim "Absenden" zu einer Fehlermeldung ["Die Schriftgröße darf maximal 200 betragen."].

Hier noch die Codeübersicht zum Nachvollziehen:

Code: Alles auswählen

[size=5]Minimum[/size] - [size=200]Maximum[/size] - [size=4]Kleiner als "5" geht nicht, und wird als Minimum angezeigt.[/size]


Bild

Die sogenannten "Spoiler", Fenster zum Verdecken spezieller Texte, kennt man auf jedem Forum. Mal sind sie klein, mal groß, und immer schauen sie unterschiedlich aus. Im "eternal-narutorpg.de"-Forum haben wir drei unterschiedliche Arten von Spoilern:

Der erste Spoiler wird durch den Code "[ spoil ]" gestartet und dementsprechend mit "[/ spoil ] geschlossen. Möglich wäre auch die etwas längere Variante "[ spoiler ]" ... "[/ spoiler ]:

Code: Alles auswählen

[spoil]Das ist ein Text, der im Spoiler steht.[/spoil]

[spoil]Dies ist ein Text, welcher im Spoiler steht.[/spoil]

Der zweite Spoiler, welcher ungefähr so groß wie der erste ist, allerdings zusätzlich über eine "Überschrift" verfügt, wird mit [ spoiler = Überschrift ] aufgerufen. Ausserdem wird er automatisch um "1", wie bei dem Befehl "[ list ]", nach rechts eingerückt.

Code: Alles auswählen

[spoiler=Testüberschrift]Und wieder ein Spoilertext[/spoiler]

Spoiler für Testüberschrift:
Ein weiterer Spoilertext.

Der dritte Spoiler: Er stellt lediglich einem Knopf dar, welcher so groß ist wie der Beschriftungstext ist. Der Spoiler wird durch [ spoil = Beschriftung ] aufgerufen. Diese Variante ist besonders hilfreich, wenn der Spoiler nicht auffallen, oder der Spoiler klein bleiben soll.

Code: Alles auswählen

[spoil=Kurz]Der Text ist immer gleich lang, und es gibt bei diesem Code keinen Rahmen.[/spoil]
[spoil=Lange Beschriftung mit großem Knopf]Der Knopf ist größer, wenn der Text länger ist. Bedenkt dies bei der Beschriftung![/spoil]

Der Text ist immer gleich lang. Außerdem gibt es bei diesem Code keinen Rahmen.

Der Knopf wird länger wenn auch der Text länger wird. Bedenkt dies bei der Beschriftung!


Bild

Die Verlinken, ein A&O in der Forenwelt. Und auch bei den Verlinkungen gibt es verschiedene Möglichkeiten diese zu gestalten.
Der standardmäßige Link wird durch "[ url = Link ] Name [ / url ]" in einem Beitrag eingefügt.
Wenn man beispielsweise "google" verlinken möchte, könnte es so aussehen:

Code: Alles auswählen

[url=www.google.de]Die Suchmaschine![/url]

Die Suchmaschine!

Da dieser Code allerdings automatisch einen "Unterstrich" beim Linktext einfügt, gibt es eine stylische Alternative, wie sie gerne in Signaturen verwendet wirde: "[ urlnew ]". Er ist gleich wie der "[ url ]"-Code, doch positiver Weise entsteht kein nerviger Unterstrich. Worauf man besonders achten sollte, wäre dass man den [ urlnew ] Code nicht mit einem "[ /url ]" beendet - Ansonten wird der Link nicht aktiviert.
Hier sieht man die Veränderungen: Der Code mit Unterstrich - Der Code ohne Unterstrich.

Code: Alles auswählen

[url=www.google.de][url=http://www.google.de]Der Code mit Unterstrich[/url] - [urlnew=http://www.google.de]Der Code ohne Unterstrich[/urlnew]

Für Leute, die gerne in der Signatur stylen, kann man empfehlen den Text innerhalb des "[ urlnew ]"-Codes noch eine Farbe zu geben: Zum Beispiel "rosa" - Oder "blau".

Code: Alles auswählen

[urlnew=http://www.google.de][color=pink]Zum Beispiel "rosa"[/color][/urlnew] - [urlnew=http://www.google.de][color=royalblue]Oder "blau"[/color][/urlnew]


Bild

Der Anker: Ein wirklich nützlicher Kumpane, der nicht nur ewiges Scrollen vermeidet, sondern welcher einfach Spaß macht. Leider wird der Anker von den meisten noch nicht genutzt, hiermit wird sich das hoffentlich bald ändern:

Der Anker besteht aus zwei verschiedenen Teilen - Gut zu merken, wenn man sich einen Anker bildlich vorstellt, denn dort zeigen die beiden Haaken ebenfalls in unterschiedliche Richtungen.
  • Der erste Teil besteht aus dem Definieren des Ankers, was bedeutet, dass man einen Text, oder ein Bild, oder eine Tabelle als "Anliegeplatz" auswählt.
  • Der zweite Teil besteht aus dem Link, durch welchen man zum "Anliegeplatz" kommt.
Anhand dieser Erläuterung kann man sich den Anker leicht vorstellen: An einer Stelle wirft man ihn ab, um durch einen Link zu diesem zurück zu kehren. Doch nun genug mit dem Quatsch, kommen wir zum praktischen Umsatz:
Wie beschrieben brauchen müssen wir als erstes den Anker definieren. In unserem Beispiel erstellen wir eine kleine Gliederung, wodurch man durch einen Klick zum jeweilgen Unterpunkt kommt und durch einen weiteren zurück zur Gliederung. Hier erst einmal der Rohling unserer Gliederung:
Inhaltsverzeichnis:
Thema 1 - Muscheln
Thema 2 - Steine

Code: Alles auswählen

[color=foresgreen][b]Inhaltsverzeichnis:[/b][/color]
[color=dodgerblue]Thema 1 - Muscheln[/color]
[color=grey]Thema 2 - Steine[/color]

Nun endlich zum Ankerdefinieren: Dies beginnt durch den Befehl "[ anker= ]" und endet durch "[ /anker ]. Hinter dem Anker gebt ihr einen passenden Namen ein. Da wir in unserem Beispiel als erstes unser "Inhaltsverzeichnis:" verankern wollen, bennen wir das ganze mit "inhalt". Dies würde dann eingetragen so aussehen:

Code: Alles auswählen

[anker=inhalt] [color=forestgreen][b]Inhaltsverzeichnis:[/b][/color] [/anker]

Der erste Anker ist nun definiert, nun folgt der zweite Schritt, durch welchen man zum Anker springt. Dies erfolgt über einen leicht abgewandelten "[ url ]"-Code. Dabei bleibt es euch überlassen, ob ihr lieber den normalen "[ url ]"-, oder den "[ urlnew ]"-Code verwenden wollt. Bedenkt allerdings das der "[ urlnew ]"-Code mit "[ /urlnew ]" abgeschlossen werden muss.
Nun zur Umsetzung: Hinter dem "=" beim Url-Code ("[ url= ]") gebt ihr als erstes den Link zur Seite, in welchem sich dieser Anker befindet an. In unseren Fall ist es "http://www.eternal-narutorpg.de/forum-f2/codeinfothread-t5819.html" und daher [ url=http://www.eternal-narutorpg.de/forum-f2/codeinfothread-t5819.html ]. Hinter dem Link folgt ohne Leerzeichen ein Rautezeichen "#" und anschließend der Name des Ankers:

Code: Alles auswählen

[url=http://www.eternal-narutorpg.de/forum-f2/codeinfothread-t5819.html#inhalt]

Anschließend kommt der jeweilige Text, bei uns "Muscheln", und dann wird das ganze durch "[ /url ]" abgeschlossen. Schon habt ihr eure erste Kette:

Inhaltsverzeichnis:

-----

Muscheln

Soweit so gut - Mit vorhandenen Wissen geht es weiter zur nächsten Kette, wobei wir "Muscheln" als einen weiteren Anker definieren und das "Thema 1 - Muscheln" als einen Link zum Anker:

Code: Alles auswählen

[anker=inhalt][color=forestgreen][b]Inhaltsverzeichnis:[/b][/color][/anker]
[url=http://www.eternal-narutorpg.de/forum-f2/codeinfothread-t5819.html#muscheln][color=dodgerblue]Thema 1 - Muscheln[/color][/url]

-----

[anker=muscheln][url=http://www.eternal-narutorpg.de/forum-f2/codeinfothread-t5819.html#inhalt][u]Muscheln[/u][/url][/anker]

Inhaltsverzeichnis:
Thema 1 - Muscheln

-----

Muscheln

Nun fügen wir noch das letzte Thema "Thema 2 - Steine" mit hinzu:

Code: Alles auswählen

[anker=inhalt][color=forestgreen][b]Inhaltsverzeichnis:[/b][/color][/anker]
[url=http://www.eternal-narutorpg.de/forum-f2/codeinfothread-t5819.html#muscheln][color=dodgerblue]Thema 1 - Muscheln[/color][/url]
[url=http://www.eternal-narutorpg.de/forum-f2/codeinfothread-t5819.html#steine][color=grey]Thema 2 - Steine[/color][/url]

-----

[anker=muscheln][url=http://www.eternal-narutorpg.de/forum-f2/codeinfothread-t5819.html#inhalt][u]Muscheln[/u][/url][/anker]

-----

[anker=steine][url=http://www.eternal-narutorpg.de/forum-f2/codeinfothread-t5819.html#inhalt]Steine[/url][/anker]

Und schon haben wir unsere vollständige Inhaltsangabe:

Inhaltsverzeichnis:
Thema 1 - Muscheln
Thema 2 - Steine

-----

Muscheln

-----

Steine


Bild

Kaum in Verwendung, aber dennoch vorhanden: Der sogeannten "Statbalken"-Code. Es gibt zwei Arten von Balken, die entweder mit "[ statsleft ]" oder mit "[ statscenter ]" aufgerufen werden. Geschlossen wird der "[ statleft ]"-Code natürlich mit einem einfachen [ /statleft ]. Es sei angemerkt, dass es nicht ratsam ist die Statbalken zu zentrieren - Zur Zeit ergibt dies noch einen unschönen Fehler.
Nun kommen wir zu den sogenannten "Parameter", also Werten, die eingestellen wie es am Ende aussehen soll. Es sind insgesamt fünf Parameter, die ihr eingeben müsst:

Code: Alles auswählen

[statsleft]...-...-...-...-...[/statsleft]


  • Der erste ist eine Farbe, also "red", "royalblue", oder ähnliches. Natürlich könnt ihr auch die Farbcodes dafür verwenden. Eingegebenes stellt anschließend die Hintergrundfarbe des Balkens dar. Mit einem " - " wird der Wert vom nächsten getrennt.

    Code: Alles auswählen

    [statsleft]red-...-...-...-...[/statsleft]
  • Der zweite Wert stellt die Füllfarbe, also der Farbe mit welcher der Balken aufgefüllt wird dar. Auch hier wird wieder mit einem " - " vom 3. Wert getrennt.

    Code: Alles auswählen

    [statsleft]red-blue-...-...-...[/statsleft]
  • Auch der dritte Wert ist eine Farbe. Dieser taucht die Zahl, welche sich im Balken befindet, in eine gewünschte Auswahl. Wieder wird mit einem " - " vom nächsten Wert getrennt.

    Code: Alles auswählen

    [statsleft]red-blue-darkred-...-...[/statsleft]
  • Der vierte Wert ist eine Zahl mit dem Nachsatz "px". Er stellt die Breite eures Statbalkens dar und sollte idealerweise bei allen Stats gleich lang sein, außerdem wird geraten einen geraden Wert von "100" bis "1000" zu verwenden. Mit einem " - " wird er vom letzten Wert getrennt.

    Code: Alles auswählen

    [statsleft]red-blue-darkred-500px-...[/statsleft]
  • Der fünfte und letzte Wert ist der Statwert, welcher in Form einer Zahl von "0" bis "10" eingetragen wird. Dementsprechend wird der Balken bei einer "5" bis zur Hälfte in der zweiten eingetragenen Farbe gefüllt. Bei einer "2" nur die ersten "2/10". Es ist anzumerken, dass bei einem Wert über "10" zwar die Zahl angezeigt wird, doch der Balken nicht über sein Maximum herausstößt - Er wird einfach als "voll" angezeigt.

    Code: Alles auswählen

    [statsleft]red-blue-darkred-500px-7[/statsleft]
Unser Ergebnis:
   7


Weitere Beispiele:

[align=center]Article by Nana & Makoto Chikara
[copyright=http://www.eternal-narutorpg.de/forum.php]Eternal-NarutoRPG[/copyright][/align]

[hr]

Zum Schluss dieses kleinen Guides, oder besser Info-Threads, sei gesagt, dass wir immer wieder weitere nützliche Codes zum Thema hinzufügen werden.
Falls es Fragen zu einem vorhandenen "Code" gibt, werden wir uns die Mühe machen und ein extra Kapitel dazu verfassen!

Die To-Do-Liste

Code: Alles auswählen

[col]{TEXT1}|{TEXT2}[/col]
[br][/br] {[zeilenumbruch][/zeilenumbruch]}
[float={ALIGNPOS}]{TEXT}[/float]
[moimg={URL1}]{URL2}[/moimg]
[skypestat]{SIMPLETEXT}[/skypestat]

Benutzeravatar
Minato Uzumaki
||
||
Beiträge: 13546
Registriert: Mi 11. Feb 2009, 17:35
Im Besitzt: Locked
Discord: Nefaras#3621
Vorname: Minato
Nachname: Uzumaki
Alter: 25 Jahre
Größe: 1,77 Meter
Gewicht: 68 Kilogramm
Stats: 46/46
Chakra: 8
Stärke: 6
Geschwindigkeit: 6
Ausdauer: 10
Ninjutsu: 9
Genjutsu: 1
Taijutsu: 6
Passiver Statboost: Ausdauer +25%
Wissensstats: Alle 10 durch Bijuu
Lebenspunkte: 250
Abwesend?: Nein

Re: Codeinfothread

Beitragvon Minato Uzumaki » So 20. Feb 2011, 23:37

Da ich das Ganze super finde wird er als Ankündigung makiert und auf evtl. Fehler untersucht.
Verbesserungsvorschläge an Peder senden.

Mfg Minato
aka Chris

Benutzeravatar
Toshiro Rengoku
||
||
Beiträge: 4774
Registriert: Mi 31. Dez 2008, 18:56
Im Besitzt: Locked
Discord: iKirin#0001
Vorname: Toshiro
Nachname: Rengoku
Alter: 23
Größe: 1.78m
Gewicht: 73 kg
Stats: 39/39
Chakra: 10
Stärke: 1
Geschwindigkeit: 4
Ausdauer: 9
Ninjutsu: 10
Genjutsu: 1
Taijutsu: 4
Lebenspunkte: 100
Abwesend?: Nein

Re: Codeinfothread

Beitragvon Toshiro Rengoku » Sa 12. Mär 2011, 00:41

Ich möchte am heutigen Tag 2 Dinge vermerken:

  1. Es wurde der komplette Thread nochmal überarbeitet & neu designt.
  2. Ab heute wird Makoto Chikara zusammen mit mir für die Weiterausarbeitung des Threads zuständig sein
"Toshiro redet" <> Toshiro denkt <> "Puck redet" <> Puck spricht mental <> Toshiro spricht mental

CharaBW <> Offene NBWs

ZA of Chiba & Ruby & Setsu
Ehemalig Tsuki Shimizu / Nana Suzumiya

2x Nekofuuin: Kokono Seiki: Kakushi Gin

Benutzeravatar
Winry Rokkuberu
||
||
Beiträge: 6935
Registriert: Mi 23. Dez 2009, 13:00
Im Besitzt: Locked
Discord: Lyusaki#5281
Vorname: Winry
Nachname: Rokkuberu
Alter: 20
Größe: 1,67 Meter
Gewicht: 63 Kilogramm
Stats: 39/42
Chakra: 5
Stärke: 6
Geschwindigkeit: 6
Ausdauer: 8
Ninjutsu: 7
Genjutsu: 0
Taijutsu: 7
Wissensstats: Alle 10 durch Bijuu
Lebenspunkte: 250
Abwesend?: Nein

Re: Codeinfothread

Beitragvon Winry Rokkuberu » Sa 31. Mär 2018, 14:48

Archiv da veraltet
Handeln | Reden | Denken | Hachibi redet | Reden im Geiste | Mavis |Jutsu
*Reden über geistige Ebene*

"Her Will, Her Decision , Her Fate
Charakter Bewerbung | Battle Theme
Bild
Bild


Zurück zu „Archiv [Vorschlag | Verbesserung | Kritik]“

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 3 Gäste