Wilkommen zu meiner Coding-Hilfe-PP

Wenn du gerne mal eine PP, einen User-LookUp oder Pet-LookUp selber machen willst bist du hier genau richtig!
Es ist egal ob du schon ein paar Vorkenntnisse hast oder ob du ein "frischling" bist...hier erkläre ich alles was du wissen muss, und hoffentlich so das es jeder versteht ^^

leider ist die PP noch nicht fertig, aber ich arbeite drann XD ... aktualisiert wurde sie am: 29.10.2009 das letzte mal.

falls du trotzdem noch Fragen oder Anmerkungen hast kannst du mir gerne eine Neomail schreiben.

Ich würde mich auch freuen wenn du meine PP vielleicht auf deinem Zukünftigen Looki oder deiner PP verlinken würdest :)

<a href="http://www.neopets.com/~ailep"><img border="0" src=http://i95.photobucket.com/albums/l135/rshiel_tenragan/Rshiel_banner.gif></a>

Noch eine kurze Sache zum verwenden dieser PP, ich habe mir mühe gegeben alle Codes in Textareas zu schreiben so das sie einfach durch Kopieren und Einfügen verwendbar sind...leider geht das nicht immer. Deswegen sind manche Codes leider nur als Bilder auf dieser PP und ihr müsst sie wohl oder übel abtippen ;)

Ok,dann lass uns mal anfangen. Du hast dich bestimmt schon mal gefragt was CSS überhaupt ist, oder? CSS heist "Cascading Style Sheets" und ist eine Programmiersprache mit der du PP's und Lookups "schreiben" kannst. Klingt erstmal kompliziert, aber keine Angst es ist eigentlich ganz einfach XD.
Um einen Code für eine PP oder einen LookUp anzufangen brauchst du ersteinmal einen eröffnungs-Befehl (denn genau das ist es was du mit CSS machst, du gibst deinem Computer oder deinem Internet Browser Befehle ^^) und einen beendigungs-Befehl. Zwischen diese beiden Befehle kommt alles andere. Diese Befehle sehen für eine PP so aus:
<style /> </style />
....und für einen LookUp so:
<style> < /style>
...Warum zwei verschiedene Sachen für PP und LookUp? ganz einfach, das hat was mit den Filtern von Neopets zu tun. Du könntest Zwar auch den Eröffnungs-Befehl von der PP für dein UserLookUp benutzen, aber dann würdest du später Problem beim coden bekommen. Also besser gleich Richtig! ^^
Soweit alles klar? Achso, du willst wissen wo man den Code überhaubt rein schreibt? ganz einfach! Wenn du dein User-LookUp machen möchtest musst du HIER hin gehen, unten findest du eine große Box "Über mich" da kommt dein ganzer Code rein. Wenn du ein PP oder ein Pet-Looki machen möchtest gehe HIER hin, da siehst alle deine Pets in kleinen Kästchen, wenn du auf den Pfeil links (von dem Pet was du bearbeiten möchtest) clickst hast du folgende Optionen
* » Zum aktiven Neopet machen
* » Gestalte dein Neopet
* » Sende ein Foto
* » Profil ansehen
* » Fähigkeiten ansehen
* » Zum Kampf ausrüsten
* » Homepage bearbeiten
* » Beschreibung bearbeiten
bei "Beschreibung bearbeiten" kannst du den Pet-LookUp und bei "Homepage bearbeiten" kannst du die PP deines Pets ändern.

Wenn du einen schönen LooukUP machen möchtest werden dich vermutlich eingige der Sachen vom Neopets Standard LookUp stören, wie zum Beispiel "Header" und "Footer" das sind die Balken ganz Oben und ganz Unten. Aber die kann man ganz leicht entfernen, in dem du diesen Code...

#header, #footer {
   display: none;
}

... zwischen dein eröffnungs-Befehl und deinen beendigungs-Befehl setzt. ganz einfach, oder? XD

Vielleicht möchtest jetzt auch noch die "hr" - das sind die hässlichen quer-linien zwischen deinen Trophäen und unter den Bildern deiner Pets - entfernen. das macht man hiermit:

hr {
   display: none;
}

...sieht fast genauso aus wie der Code zum entfernen vom Header und Footer, oder? genau XD
der eigentlich Befehl also das was zwischen diesen klammern: "{" und "}" steht ist der selbe Befehl "display: none;" ... und damit dein LookUp Code übersichtlicher wird und du auch Platz sparst, kannst du die beiden Codes zusammenfassen. Dazu musst du nur die namen der Dinge die du entfernen möchtest, also: #header, #footer und hr hinter einander stellen und mit einen Komma (,) trennen, so:

#header, #footer, hr {
   display: none;
}

Super! Jetzt fehlt nur noch dieses "Benutzter Name: ...." umd das los zu werden bruachst du folgenden Code:

.content div a img, .content div b {
   display: none;
}

.contentModule div a img, .contentModule div b {
   display: inline;
}

Ja, ich weis...so ein langer Code nur um den Benutzter Namen zu entfernen XD
Ok, geschafft! nach dem du dein Looki erstmal frei geschaufelt hast, können wir ihn nun ganz nach deinen wünschen wieder füllen ^^

Achtung!mit dem entfernen der Header's ist auch unsere Navigation verschwunden...jetzt können wir uns selber eine neue basteln...das müssen wir sogar, denn die Naviagtion ist Pflicht! wenn du keine auf deinem LookUp hast, kannst du deswegen gefrohren werden, und das wollen wir doch nicht ^^
wenn du es dir leicht machen willst kannst du einfach folgenden Code kopieren und ihn, bei deinem LookUp diesmal vor dem eröffungs-Befehl! oder bei deiner PP nach dem eröffungs-Befehl! einfügen:

<a href=/myaccount.phtml>Mein Konto</a> | <a href=/customise/>Gestalten</a> | <a href=/petcentral.phtml>Neopet-Zentrale</a> | <a href=/explore.phtml>Erkunden</a> | <a href=/games/arcade.phtml>Spiele</a> | <a href=/neoboards/index.phtml>Foren</a> | <a href=/objects.phtml>Geschäfte</a> | <a href=/nf.phtml>Neuigkeiten</a> | <a href=/mall/index.phtml>nc mall</a>
...damit bekommst du eine neue Navigation, die aber noch sehr schlicht und nicht besonders schön ist. Aber das lässt sich ja ändern! XD

Also, los gehts! alles was wir jetzt schreiben um das aussehen der Links zu ändern kommt wieder vor den beendigungs-Befehl.
Und so fängst du den Code an, mit dem du deine "links" gestalten kannst

a:link, a:active, a:visited {
}

...das ist aber noch kein vollständiger Code, denn wie du siehst ist zwischen den klammern "{}" noch alles leer, da schreiben wir alle eigenschaften rein die unsere Links bekommen sollen. Also zum Beipiel: Schriftart, Farbe, größe der schrift und so weiter. Das sieht dann so aus:

a:link, a:active, a:visited {
   font: 12px verdana;
   color: #FF6699;
}

... in diesem fall würde dein Link Schriftart Verdana, größe 12 und schön rosa sein. So hier: Verdana
Farben werden durch eine sechstellige Hexadezimal-Zahl mit vorangestelltem #-Zeichen dargestellt. Hier hast du eine farbtabelle wo die wichtigsten Hexa-codes eingtragen sind ^^


.... und noch eine kleine Übersicht was für Schriftarten du so nehmen kannst...

Arial   Broadway   Centaur   Chiller  Comic Sans MS  Courier  Elephant   
fixedsys   Garamond   Georgia  Haettenschweiler   Harrington    Impact   Jester   
Jokerman  Magneto   Mistral   Onyx  Papyrus   Parchment   
Perpetua   Pristina    Rockwell   Tahoma  Verdana   Vivaldi  
Webdings  (Webdings)Wingdings  (Wingdings)

Ok, jetzt weist du wie man Schriftart, größe und farbe festlegen kann, aber das ist noch nicht alles! Muahahaharrrr!
Damit deine Navigation noch toller wird, kannst du noch ganz viele sachen machen. Hier ein kleines Beispiel:

a:link, a:active, a:visited {
   font: 12px verdana;
   color: #FF6699;
   background-color: #FFCCFF;
   font-weight: bold;
   font-style: italic;
   text-transform: uppercase;
   text-decoration: underline;
   letter-spacing: 2px;
}

... wie su siehst haben wir nun sechs Befehle mehr. Der erste neue Befehl ist "background-color", damit gibst du deinen Link eine neue eigene Hintergrund Farbe...ich hab natürlich ein schönes helles rosa genommen XD ...aber du kannst jede farbe nehmen die du willst.

Der Zweite neue Befehl ist "font-weight" und damit änderst du die Schriftstärke deiner Schrift. In unserem Fall hier haben wir "bold" als Schriftstil angegeben, das macht deine Schrift Fett.

Der Dritte Befehl ist "font-style", damit änderst du den Schriftstil der Schrift. "italic" macht deine Schrift Kursive.

Befehl Nummer Vier ist "text-transform" damit kannst du Groß-oder Klein-Schreibung erzwingen... Mit "uppercase" wird alles in "GROSSBUCHSTABEN" geschrieben. Mit "lowercase" wird alles in "kleinbuchstaben" geschrieben und mit "capitalize" wird "Jedes Wort Mit Einem Großen Buchstaben Angefangen" ^^

Ok, nun zum fünften Befehl "text-decoration", damit können wir die Schrift dekorieren. In unserem Fall haben wir mir "underline" den Text unterstrichen oder setzt die linie mit "overline" über den Text. Und Mit "line-through" kannst du den text in der mitte durchstreichen ^^

Der sechste und letzte befehl bei uns ist "letter-spacing" und mit dem änderst du den Abstand zwischen den B u ch s t a b e n, an Stelle der 2px kannst du auch irgend einen anderen wert nehmen (zum beispiel 12px) ... je höher die zahl vor "px" (das heist übrigens "Pixel") ist desto größer wird der Abstand.

Ok, erst mal zur erklärung, ein Hover Effekt ist wenn sich das Aussehen eines Links verändert wenn du mit dem Maus-Zeiger darüber gehst
das machst du mit diesem code:

a:hover {
   color: #663366;
   text-transform: lowercase;
   text-decoration: underline overline;
   letter-spacing: 4px;
}

... mit "a:hover" gibst du an das du den Hover-effeckt von deinem Link gestalten möchtest, das kannst du wieder genauso machen wie wir es bei "Die Naviation Gestalten" gemacht haben, nur das du diesmal sachen die gleich bleiben sollen (wenn du mit deiner maus über den Link gehst) hier einfach weglässt.
Also wenn du willst das sich die Farbe aber nicht die Schriftart ändern soll musst du "color: #00CCCC;" (mit der farbe deiner wahl natürlich ^^) zwischen die {} - Klammern schreiben aber die Angabe "font: 12px verdana;" kannst du dann zum Beispiel weglassen.
Hier in unserem Fall ändern wir die Farbe der Schrift zu einem dunklen Lila (color: #663366;), außerdem ändern wir die Schrift von Großbuchstaben zu Kleinbuchstaben (text-transform: lowercase;), der link bekommt nun auch noch eine Oberlinie zusätzlich zur Unterlinie (text-decoration: underline overline;) und der Abstand zwischen den Buchstaben wurde vergrößert (letter-spacing: 4px;).

Aber das ist noch nicht alles was wir mit "hover" machen können! Muahahahaharrrr! Eine Sache hab ich noch für dich ^^
Wir Können den Mauszeiger ändern, geh einfach mal mit deiner Maus über das kleine Kästchen neben dem "zurück" steht -Achtung nicht clicken ^^ - wie du siehst ändert sich dann der Mauszeiger zu einem Kreuz das aus vier Pfeilen besteht. Das kannst du mit diesem Code machen:

   cursor: move

...das kommt natürlich wieder mit dahin wor die ganzen anderen angaben für deinen "hover" stehen:

a:hover {
   color: #663366;
   text-transform: lowercase;
   text-decoration: underline overline;
   letter-spacing: 4px;
   cursor: move;
}

...aber es gibt noch mehr Mauszeiger die du verwenden kannst:

   cursor: crosshair
   cursor: hand
   cursor: wait
   cursor: text
   cursor: help

...du hast also die Qual der Wahl XD
Puhh! das wars nun erstmal mit den Links, reicht ja aber auch ^^

In letzter Zeit gab es öfter Probleme mit den Filtern von Neopets, meistens war das Problem das die neuen Filter das wort "position" nich erlauben.
Wie du dieses Problem umgehen kannst zeig ich dir hier.

Bei deinem LookUp läst sich das Problem ganz leicht beheben, du musst nur diese Befehle:
durch diese hier ersetzen:

und anschließend alles was du früher nach dem beendigungs-Befehl geschrieben hast einfach jetzt vor dem eröffungs-Befehl schreiben. so hier:



so, das war die Problem-Lösung für dein LookUp, jetzt kommen wir zur Problem-Löung von deiner PP.

Wenn du früher etwas auf deiner PP positionieren wolltest sah der code dafür so aus:


...leider hat TNT mal wieder an den Filtern rumgeschraubt, deswegen funktioniert das jetzt nicht mehr. Um jetzt etwas zu positionieren musst du folgenden Code verwenden:


... wie du siehst haben wir nun einfach den Befehl "position:absolute;" durch einen "style" Befehl direkt in die Box geholt. "mybox" ist natürlich nur ein Beispiel Name, den ihr durch andere Bezeichnungen ersetzten könnt ;)

Viel Glück und viel Spaß beim Coden!
Eure Rshiel