Einleitung

Das neue Layout gefällt dir nicht/lädt nicht? Hier ist die alte Version verfügbar.

Hallo guest. Es freut mich, dass du auf meine Petpage gefunden hast. Hier will ich dir versuchen zu erklären, wie man sich sein eigenes Userlookup bastelt.
Ich habe diese Seite deswegen gemacht, weil Anna in letzter Zeit häufig gefragt wurde, wie sie dieses oder jenes auf meinem Lookie gemacht hat oder ich auch öfters mal im Forum jemanden nach Hilfe fragen gesehen habe.
Somit habe ich mir gedacht, ich könnte ja versuchen mit dieser Petpage zu helfen und ich hoffe, dass mir das einigermaßen gelingen wird. :)

Wenn du irgendwelche Fragen/Anregungen/Beschwerden hast, dann kannst du Anna (asphyxiatiion) gerne ein Neomail schicken und sie wird versuchen dir so gut wie möglich zu helfen.

Außerdem würde ich mich echt freuen, wenn du mich verlinken würdest, falls dir die Seite geholfen hat und/oder sie dir gefällt, damit auch anderen geholfen werden kann.

Zwei kleine Regeln:
- es war echt viel Arbeit diese Seite zu dem zu machen, was sie jetzt ist, also klau nicht :K
- du kannst dir gerne den Code nehmen, den ich für mein Beispiel-Lookup verwendet habe, und damit herumexperimentieren. Aber bitte schreib irgendwohin, dass der Grundcode eigentlich von mir stammt. :)
Und jetzt: viel Spaß und ich hoffe, du findest was du suchst.

» weiter

Generelles

Worum gehts eigentlich? - Um Userlookups! - Ja, und was ist das?!

Das Userlookup ist das, was sich öffnet, wenn man auf einen Usernamen klickt. Zum Beispiel hier auf asphyxiatiion. Das, was sich hier öffnet ist mein Lookup, dort findest du alles, was man hier auf Neopets über mich wissen muss. Meinen Namen, mein Geschlecht, wie lange ich schon spiele, meine Neopets, Trophäen und so weiter...
Viele User gestalten es schön, weil es ihnen Spaß macht oder weil man damit einen guten Eindruck hinterlassen will. Schließlich sieht man ja nicht den Menschen hinter dem Bildschirm, man kann aber über das Lookup schon ein paar Eindrücke über ihn gewinnen. Zum Beispiel kann man darauf schreiben, was man gerne mag, so etwas wie: Tyrannia, Maraqua, Draiks, Aishas, was auch immer. Auch welche Ziele man hat, kann man hier auflisten.
Ich denke, dass es etwas sehr persönliches ist und dass es umso schöner ist, wenn man es selbst gemacht hat. :)
Und genau dabei will ich dir nun helfen, also keine Angst: es ist gar nicht so schwer, wenn man es einmal durchschaut hat!
Auch hierbei gilt: Übung macht den Meister! ;)

» weiter

Was man (nicht) darf

Man darf keine Photos verwenden, auf denen man selbst oder jemand anders abgebildet ist. Außerdem sollte man auch keine Anime-Lookups machen, da man dafür ja entweder ein Anime-Bild aus dem Internet nimmt (das dann natürlich copyrightgeschützt ist) oder selbst einen Anime-Charakter zeichnet, der ebenfalls dem Copyright unterliegt. (gilt auch für pokemon, etc.)
Es gibt so viele schöne Bilder auf Neopets, die von TNT bereitgestellt werden um sie hier zu verwenden. Also bleib lieber dabei und mach daraus etwas Tolles!

Weiters darf man die Standard-Informationen nicht überdecken (also dein Geschlecht, Land, usw.) und du darfst über deine Pets keine Bilder von UCs legen, wenn diese noch durch Tausch zu bekommen sind! (Was sind UCs? Schau hier.)

» weiter

Wo ändert man sein Lookup?

Mein Konto - Kontrollseite - Kontoinformationen bearbeiten
Bzw. hier ist der Direktlink.
Hier kann man dann in den Kasten ganz unten seinen Code schreiben. Mit dem Vorschau-Button (Profil-Vorschau, über dem weißen Kasten) kann man sich immer mal wieder davon überzeugen, ob eh alles so ist, wie man das gerne hätte. Drückt man auf diesen Button, dann öffnet sich eine neue Seite, wo dir eine Vorschau gezeigt wird von deinem Lookup, wie es ausschauen würde, wenn du deinen Code genauso speichern würdest.
Das ist sehr praktisch, weil dann nicht dein komplett kaputtes/unfertiges Lookup online geht. Ich schau mir eigentlich nach jeder kleinen Veränderung die Seite an, ob es passt.
Da darf man dann aber das Speichern nicht vergessen. (Ist mir schon mal passiert, das ist sehr ärgerlich ;D)
Um zu speichern, einfach auf "Details ändern" klicken und vorher aber noch dein Pw etwas weiter oben eingeben.

» weiter

Aufbau eines Lookups

Standardmäßig sieht ein Lookup folgendermaßen aus:
Man hat 8 Kästchen (in den Klammern stehen die Bezeichnungen, die später dann für den Code wichtig sind)


(für eine größere Ansicht des Bildes, einfach mit dem Mauszeiger draufklicken, es halten und in die Adresszeile deines Browsers ziehen)
- Benutzer-Info (#userinfo)
- Sammlungen (#usercollections)
- Geschäft & Gallerie (#usershop)
- Neopets (#userneopets)
- Neoheim (#userneohome)
- Spiele und Trophäen (#usertrophies)
- NC Mall (#ncmall)
- Habitarium (#habitarium)

Diese Kästchen kannst du beliebig anordnen auf deinem Lookup. Wobei viele Leute das Neoheim, die NC Mall und das Habitarium ausblenden. (Dazu unter "Filter" mehr)

Du solltest im Allgemeinen darauf aupassen, dass du dein Layout nicht zu groß gestaltest. Nicht jeder verwendet exakt die gleiche Bildschirm-Auflösung wie du, also solltest du darauf achten, dass dein Lookup erstens nicht zu groß wird und zweitens, du keine Sachen einbaust, die nur bei einer bestimmten Größe gut ausschauen.
(also ein Bild so platzierst, dass es zum Beispiel bei einer kleineren Auflösung dann etwas wichtiges überdeckt.)

Dein Lookup setzt sich weiters dann noch aus Folgendem zusammen:

Das ist der body, also mehr oder weniger der Hintergrund. Darauf liegt der main-Teil deines Lookups. Wie schon das Wort sagt, ist das der Hauptteil:

Jetzt kommt der content, der Inhalt. Das ist der Teil, der alle deine Daten enthält.

Und in diesem content sind noch weitere Tabellen vorhanden, wie dieses .contentModule:

Dieses .contentModule ist eigentlich nur der Hintergrund für den folgenden .contentModuleContent.

Und zu guter letzt gibt es noch die Überschriften. Im Code heißen sie .contentModulHeader bzw. .contentModuleHeaderAlt. Ersteres ist nur die Überschrift von der #userinfo und zweiteres sind die anderen Überschriften.

» weiter

HTML und CSS. Was ist das?

HTML und CSS sind dein Werkzeug, damit bekommst du deine Seite so hin, wie du das gerne hättest.
HTML steht für "hypertext markup language" und wird hauptsächlich zur Strukturierung verwendet. HTML ist eigentlich alles was du zwischen die spitzen Klammern schreibst. CSS hingegen steht für "cascading stylesheet" und wird für die Gestaltung verwendet. CSS steht zwischen den sogenannten style-tags.
Mit CSS definierst du etwas, das für die ganze Seite gilt. Damit sagst du der Seite mehr oder weniger, welche Textart du gerne auf der ganzen Seite verwenden würdest. Während du mit HTML es immer nur für den Teil definieren kannst, der gleich nach dem Befehl kommt.
Es tut mir leid, ich kann das leider nicht so gut erklären, aber du wirst später dann sehen, was ich damit meine. :P

» weiter

Wie fange ich an?

Also ich persönlich fange immer damit an mir zu überlegen, wie mein Lookup ausschauen soll, wenn es fertig ist.
Ich lege mir ein Grundkonzept bereit. Ich nehme mir ein Thema vor, zum Beispiel "Feen" und suche mir auf Neopets Bilder die mir gefallen.
Wenn ich mir das überlegt habe, fange ich an, die Bilder mit einem Bildbearbeitungsprogramm zurechtzuschneiden.
Da kann man sehr kreativ sein! Du hast sicher schon viele, schöne Lookups gesehen und hast eine ungefähre Vorstellung davon, was man machen kann, oder? Wenn nicht, dann schau dir mal die hübschen Userlookups an, die das Userlookup-Highlight gewonnen haben!

Es gibt verschiedene Möglichkeiten, wie du dein Lookup gestalten kannst.
Du kannst ein ganz schlichtes haben, das einfach nur ein schönes Bild oben hat, eine bunte Schriftart und einen netten Hintergrund. Oder du willst ein aufwendiges, wo du ein großes Bild hast, auf dem du dann deine Kästchen so verteilst, wie du sie gerne hättest.
Das musst du dir, wie gesagt, schon am Anfang überlegen. Das ist der erste Schritt zum neuen Userlookie. :)

Wenn du das erst einmal hast, dann geht es an das (für die meisten) eigentlich Schwierigste am Lookupmachen: das Coden.

» weiter

Der Grundcode

Es geht hier einmal darum die Farben, die Schriftarten, usw. anzupassen. Wir machen das mit CSS, du beginnst also so:

Aller Anfang ist schwer? Oder etwa doch nicht?! ;)

Alles, was jetzt nachfolgt, schreibst du zwischen diese beiden style-tags!

Hintergrund

Zuerst verändern wir einmal die Hintergrundfarbe, beziehungsweise siehst du hier auch, wie man ein Bild einfügen kann.

body {
background: #Farbe url(url);
}

Farbe: hier musst du einen Hex-Code eingeben. Das ist ein Farbcode, der aus einer Kombination von 6 Zeichen (Buchstaben und Zahlen) besteht. Für nähere Information schau mal auf dieser Petpage nach.
url: hier wird eine sogenannte url eingesetzt. Das ist die Adresse von einer Seite beziehungsweise von einem Bild. (also dieses http:-Zeugs ;)). Wenn du ein eigenes Hintergrundbild gemacht hast und dieses verwenden willst, dann musst du es zuerst hochladen auf einen Server um eine url zu bekommen. Das geht zum Beispiel bei imageshack und tinypic (die wahrscheinlich am häufigsten benutzen imagehosts hier bei Neo; finden kannst du sie in dem du sie bei einer Suchmaschine eingibst)!

Platzierung des gesamten Lookups

Main

Hier geht es darum, wo du den Hauptteil deines Lookups festlegen willst. Dieser main-Teil ist der Teil, der bei jeder Neopets-Seite so leicht hellgrau im Hintergrund liegt und links und rechts von dunkelgrauen Linien umgeben ist.
Dieser main-Teil enthält alles andere!

#main {
background-color: #Farbe;
margin-top: 0px;
width: Zahlpx;
border-left: Zahlpx solid #Farbe;
border-right: Zahlpx solid #Farbe;
}

background-color: hier kannst du dir wieder eine Farbe aussuchen, die dieser große Kasten haben soll.
Wenn du willst, dass man dein Hintergrundbild sieht oder du hier einfach keine Farbe haben willst, kannst du alternativ dazu auch folgendes schreiben:

background: transparent;

Damit sieht man deinen body-background.
margin-top steht für den Abstand, den dieses Element zu Nachbarelementen oben einhalten muss. Das ist also ein gewisser Leerraum. Wenn du mehr als 0px eingibts, dann hast du automatisch oben einen Abstand.
width: hier musst du dir eine Breite aussuchen. Wie groß willst du deinen Hauptteil haben? Er sollte am besten mindestens 800px breit sein. Aber hier musst du wieder darauf achten, ihn nicht zu breit zu machen!
border-left/right: Das sind die beiden hellgrauen Striche, die diesen Kasten links und recht begrenzen. Du kannst dir dafür sowohl eine Farbe als auch die Dicke aussuchen.
Zahl: hier musst du eine Zahl einsetzen, die für eine Breite steht. Umso größer die Zahl, umso breiter ist das, wofür es steht. Schreibst du zum Beispiel 10px bei border-left hin und nur 1px bei border-right, dann hast du links einen sehr dicken Strich und rechts einen ganz dünnen.

Willst du keinen border/Rand haben, dann schreibst du:

border: none;

anstelle von border-left und border-right. Oder du verwendest statt solid eines dieser Wörter: dashed (gestrichelt) oder dotted (gepunktet).

Content

Es geht um den Inhalt, also alles was in deinem main steht!

#content {
background-color: #Farbe;
width: Zahlpx;
margin-left: Zahlpx;
margin-top: Zahlpx;
border: 0px;
}

Was ich hierzu sagen kann. Puh. Du musst hier einfach etwas herumprobieren. Setze verschiedene Zahlen ein und schau was passiert. ^^ Die Zahl bei width sollt aber kleiner sein, als oben beim main!
Farbe: Auch hier kannst du die Farbe ändern.
margin-left: Damit kannst du deinen Abstand zum linken Rand des Hauptteils einstellen. Du kannst hier nicht nur positive Zahlen einsetzen, sondern auch negative!
margin-top: Auch wieder der Abstand zum Rand vom Hauptteil. Aber diesmal halt zum oberen Rand.
Du könntest zusätzlich auch noch ein margin-bottom festlegen, falls du das willst. Braucht man in den meisten Fällen aber eher nicht. Dieses würde dann den Abstand zum untersten Rand angeben.
Und was border zu bedeuten hat, haben wir ja schon etwas weiter oben geklärt ;)

Die acht Kästchen

Jetzt geht es an die acht kleinen Kasten, die alle auf Neopets wissenswerten Informationen über dich enthalten. Ist eigentlich genauso einfach wie alles andere bis jetzt auch. ;)

.contentModuleTable, .contentModuleContent {
border: 0px;
background: transparent;
}

Auch hier kannst du wieder, wie bei den anderen Sachen auch, dir eine Farbe aussuchen und die Rahmendicke ändern. Ich verwende meist das, was oben steht. Wenn du wieder eine Farbe haben willst, dann nimm statt background: transparent; einfach background-color: #Farbe;. So wie immer!
Besser ist es aber diesen Teil transparent zu lassen und dann diesen Teil erst färbig zu machen:

.contentModule {
border: Zahlpx solid #Farbe;
background-color: #Farbe;
}


Das ist mehr oder weniger der Hintergrund von .contentModuleTable und .contentModuleContent. Auch hier gilt wieder: einfach ausprobieren!
Hier noch mal der Unterschied zwischen .contentModule und .contentModuleContent:


Wie gesagt: am besten ist es die beiden gerade genannten transparent zu machen (der Code, der oben gerade war) und bei diesem .contentModule jetzt erst die Farbe zu ändern.

Zuletzt jetzt noch die Überschriften:

.contentModuleHeader, .contentModuleHeaderAlt {
background-color: #Farbe;
}


Du kannst hier wieder eine Farbe einsetzen, die dann den Hintergrund der Überschriften verändert. Wenn du für .contentModuleHeader eine andere Farbe willst, als für .contentModuleHeaderAlt, dann musst du es einfach trennen.

Zusammenfassung

So schaut der Code, der zwischen den beiden style-tags steht, jetzt aus, wenn man das alles zusammensetzt. (weiter unten ist ein Bild, wie das Lookup mit den von mir gewählten Eingaben ausschauen würde.)

body {
background: #99FF99;
}
#main {
background-color: #FFFFFF;
margin-top: 0px;
width: 996px;
border-left: 2px solid #C1C1C7;
border-right: 2px solid #C1C1C7;
}
#content {
background-color: #FFFFFF;
width: 890px;
margin-left: 50px;
margin-top: 5px;
border: 0px;
}
.contentModuleTable, .contentModuleContent, .contentModule {
border: 0px;
background: transparent;
}
.contentModuleHeader, .contentModuleHeaderAlt {
background-color: #009933;
}


So würde dein Lookup ausschauen, wenn du genau diesen Code verwenden würdest: (für ein größeres Bild, das Bild nehmen und in die Adressleiste deines Browsers ziehen)

Gratulation! Das war der erste Schritt zu deinem ersten eigenen Lookup. :)

Also das war jetzt erstmal das, was ich als Grundcode bezeichne. Damit kannst du dich eigentlich schon kreativ ein bisschen ausleben. Hehe ;)
Jetzt geht es dann weiter mit dem Verändern von Schriftarten und den Schriftfarben um deinem Lookup einen noch besser Schliff zu verpassen!

» weiter

Schrift verändern

Jetzt kommen wir zum Thema Schrift. Da kann man eigentlich sehr viel machen. Doch schaut es nicht gut aus, wenn alles bunt durcheinander in einer anderen Schriftart und -farbe ist.

Außerdem solltest du immer daran denken, dass du dunkle Farben auf hellem Untergrund, bzw. helle Farben auf einem dunklen Untergrund verwendest.
Ganz, ganz, ganz schlimm ist ein grelles Grün auf einem grellen Blau oder rosa mit rot! Das tut wirklich weh in den Augen. Also wenn du andere nicht quälen willst, dann wähle dir Farben vernünftig.

body, p, td, .medText{
color: #Farbe;
font-family: Schriftart;
font-size: Zahlpx;
}


Dieser Code ändert den Text auf deinem Lookup!
body, p, steht für den ganzen body und p-Text. Also alles im "Hintergrund" mehr oder weniger. Wichtiger ist der .medText denn der ändert den ganzen bereits vorgegebenen Text, während td für den Teil steht, wo du selbst etwas hinschreiben kannst! (td steht für die Spalten einer Tabelle! Und dieser Text steht eigentlich in einer Tabelle, daher td...)
Willst du alles in einer eigenen Schriftart/größe haben, dann einfach wieder trennen in z.B. body, p, td {...} und .medText {...}.
Für Zahl setzt du am besten eine Zahl zwischen 9 und 14 ein.
Die Farbe kannst du wählen, wie sie dir gefällt.
Was die Schriftart betrifft, sollte man nur Standard-Schriftarten verwenden, die aus einem Wort bestehen. Gängige Schriftarten sind: verdana, tahoma, georgia, arial.

Zusätzlich zu dem kann man auch noch andere Sachen eingeben zum Beispiel:

line-height: Zahlpx;
font-style: italic;
font-weight: bold;
text-align: Ausrichtung;
text-decoration: decoration;
text-transform: uppercase;
word-spacing: Zahlpx;
letter-spacing: Zahlpx;


Mit der line-height kannst du den Abstand zwischen zwei Zeilen vergrößern, wenn du eine Zahl nimmst die größer als deine font-size ist. Oder sie auch enger zusammenschieben, wenn du eine kleinere Zahl nimmst. Es ist die Zeilenhöhe. ;)
font-style: Wenn du deinen ganzen Text italic haben willst, also schräg-geschrieben, dann gib das ein.
font-weight: Hiermit kannst du festlegen, ob die Schrift dick (bold) geschrieben werden soll.
Mit text-align kann man die Ausrichtung des Textes festlegen. Es funktioniert center, left oder right. Auch justify kannst du nehmen, dann ist der Text im Blocksatz.
Nun gibt es zusätzlich auch noch eine text-decoration. Damit kann man den Text unterstreichen (underline), durchstreichen (line-trough), überstrichen (overline) oder schräg-schreiben (italic). (Auch none ist möglich, wenn man gar keine Dekoration möchte.)
Bei text-transform kannst du folgendes einstellen: uppercase (nur Großbuchstaben), lowercase (nur Kleinbuchstaben) und capitalize (alle Wortanfänge werden großgeschrieben)
Die Zahl beim word-spacing gibt an, wie viel Abstand zwischen den einzelnen Wörter ist, sowie letter-spacing den Abstand der einzelnen Zeichen zu einander angibt.

bold, italic

Das, was ich bis jetzt erzählt habe, ändert einmal nur den Haupttext. Jetzt kann man einzeln dazu aber auch noch den fettgeschrieben/unterstrichenen/schräg-geschriebenen Text und die Links verändern.

Um den bold (fetten) Text zu ändern nimm das hier:

b {
color: #Farbe;
}

Hier einfach wieder eine Farbe einsetzen. Du kannst zusätzlich dazu auch alles von oben dazu nehmen. Wobei Sachen wie line-trough und italic nicht funktionieren. Wenn du den Text nicht mehr bold haben willst, dann musst es mit font-weight: lighter; weggeben!

italic-Text kannst du hiermit bearbeiten: (beim Standard-Lookup gibt es keinen schrägen Text, aber wenn du zum Beispiel oben noch etwas über dich hinschreiben willst und einen i-Text einfügen willst, dann ist es ja nett, wenn er zum Layout passt. :D

i {
color: #Farbe;
font: italic Zahlpx Schriftart;
}


Das ist eine andere Möglichkeit den Text zu definieren. (Hier ist im Gegensatz zu oben alles (also text-decoration, font-size und font-family) in einer Zeile geschrieben. Zum Verändern wieder alles, wie immer ;))

Links

Jetzt kommen wir zu den Links. Es ist bei denen vernünftig, wenn man eine Farbe nimmt, die sich etwas vom restlichen Text abhebt, damit die Leute auch wissen, dass tatsächlich ein Link ist.
Da funktioniert alles genauso wie beim restlichen Text auch.

a:link {
color: #Farbe;
}
a:visited {
color: #Farbe;
}
a:hover {
color: #Farbe;
}

a:link ist der Link, wie man ihn sieht, wenn man nicht gerade mit der Maus darüber fährt.
a:visited: So sieht der Link aus, wenn man ihn schon besucht hat.
a:hover gibt das an, was mit dem Link passiert, wenn man mit der Maus über ihn darüberfährt. Da ist es immer wieder nett, eine andere Farbe zu verwenden als bei a:link. Schaut einfach gut aus. :) Auch die Schriftgröße ein bisschen zu ändern macht gleich ein bisschen mehr her.

Überschriftenfarbe

Oftmals ist es nötig die Schriftfarbe der Überschriften zu ändern, dafür verwendet man diesen Code:

.contentModuleHeader, .contentModuleHeaderAlt {
color: #Farbe;
}


Bei der Farbe wie immer einen Hex-Code einsetzen!
Man kann diesen Code jetzt übrigens mit dem von vorher zusammensetzen, bei dem wir die Hintergrundfarbe der Überschrift definiert haben. Dazu nimmst du einfach nur den color: #Farbe;-Teil und fügst ihn hier ein:


.contentModuleHeader, .contentModuleHeaderAlt {
background-color: #Farbe;
Hier einfügen
}


Damit sparst du Zeichen und es wird übersichtlicher ;)

Und nicht vergessen, du kannst hier auch wieder alle Dinge, wie beim normalen Text auch, ändern. (Schriftart, -größe, usw.)

Zusammenfassung


Das wars jetzt erstmal zu den Schriftfarben.
Hier wieder der Code, wenn man die Schriftarten zum Grundcode dazubaut.

body {
background: #99FF99;
}
#main {
background-color: #FFFFFF;
margin-top: 0px;
width: 996px;
border-left: 2px solid #C1C1C7;
border-right: 2px solid #C1C1C7;
}
#content {
background-color: #FFFFFF;
width: 900px;
margin-left: 50px;
margin-top: 5px;
border: 0px;
}
.contentModuleTable, .contentModuleContent {
border: 0px;
background: transparent;
}
.contentModule {
border: 0px;
background: transparent;
}
.contentModuleHeader, .contentModuleHeaderAlt {
background-color: #009933;
}
body, td, p {
color: #6A6C69;
font-family: verdana;
font-size: 12px;
line-height: 16px;
}
b {
color: #162113;
font-weight: lighter;
text-transform: uppercase;
font-size: 10px;
}
i {
color: #168913;
font: italic 11px verdana; }
a:link {
color: #333399;
font-weight: bold;
}
a:visited {
color: #669999;
}
a:hover {
color: #FF3315;
font-weight: bold;
}

Schaut ja schon nach richtig viel und kompliziert aus! Aber das war es doch eigentlich nicht oder? Eben! :)
Genau deswegen geht es jetzt auch zügig weiter.

Wir machen am besten mit dem Thema "Filter" weiter.

» weiter

Filter

Unter einem Filter versteh ich etwas, mit dem du etwas von deinem Lookup verschwinden lassen kannst, was du dort nicht haben willst.
Zum Beispiel deine #ncmall oder dein #habitarium.

So funktioniert es etwas verschwinden zu lassen:

.contentModuleHeader {
display: none;
}

Statt .contentModuleHeader kann man nun ganz viele andere Sachen einsetzen. Zum Beispiel alle einzelnen Kästchen wie #userinfo, #userneopets, usw. Jedoch wenn du diese wichtigen Informationen verschwinden lasst, dann musst du irgendwo auf der Page es auf irgendeine Weise wieder unterbringen. Du darfst diese Informationen nicht einfach überdecken/veschwinden lassen!!
Sachen, die oft von dem Lookup entfernt werden:
.contentModuleHeader: Überschrift von der User-Info
.contentModuleHeaderAlt: alle anderen Überschriften
#ban: Werbung oben
#userneohome: Neoheim
#footer: das Ding ganz unten ;)
#nst: die Uhr
.brand-mamabar: Nickelodeon-Zeile oben
#habitarium: Habitarium
#header: die Navigation, inkl. Willkommen "user", NP:, usw...
hr: Trennlinien
#ncmall: NCmall
#navigation: Die Navigations-Leiste
.user: entfernt nur das "Willkommen 'User', NP:,usw."
.sf: der Text, der am Footer unten steht
#userinfo table table table: lässt bei der Userinfo die Bilder (+ Beschriftung) von Tauschaktionen, Auktionen, Neomail, Neofreund verschwinden

Grundsätzlich reicht folgendes aus (um zu sehen, wie es sich aufs Lookup auswirkt, einfach das darunter liegende Bild begutachten!)

#ban, .contentModuleHeader, .contentModuleHeaderAlt, #userneohome, #ncmall, #footer, #header, hr, .brand-mamabar
{
display: none;
}


Das sieht dann so aus:

Nicht schlecht, oder? ;)

Jetzt sind wir ja schon ziemlich weit!

» weiter

Header

Damit das Lookup jetzt nicht so langweilig ausschaut, werden wir noch einen Header basteln. Den musst du mit einem Bildbearbeitungsprogramm machen und wieder irgendwo hochladen (Imageshack, Tinypic, ...).

Um einen Header verwenden zu können, darfst du nicht #header {display: none} stehen haben. Also solltest du das vorher gemacht haben, dann lösch #header wieder raus, sonst wirst du ihn dann nicht sehen können. ;)
Dafür solltest du #nst und .user wieder mit reinnehmen in den Filter.
(Filter würde dann so ausschauen: #ban, .contentModuleHeader, .contentModuleHeaderAlt, #userneohome, #ncmall, #footer, hr, .brand-mamabar, #nst, .user {display: none;})

Mit dem folgenden Code kannst du einmal deinen Header einfügen:

#header {
background: url(url) Zahlpx Zahlpx no-repeat;
width: Zahlpx;
height: Zahlpx;
border: 0px;
}


Bei der url musst du die Url von deinem Bild nehmen, klar oder? ;)
Die erste Zahl gibt den Abstand zum linken Rand vom #main an und die zweite Zahl den Abstand zum oberen Rand.
Bei width musst du die Größe deines Bildes + der ersten Zahl angeben! Und bei height die Höhe + der zweiten Zahl.
Den border kannst du nach Belieben wieder verändern.

Damit hättest du jetzt einmal dein Bild eingefügt, wie du dann siehst ist aber die Navigationsleiste nicht dort, wo du sie wahrscheinlich gerne hättest, oder?
Also müssen wir das noch machen.

Navigation

Willst du sie ganz verschwinden lassen und stattdessen irgendwo deine eigenen Links angeben? Dann nimm den "Filter", den ich oben angegeben habe! (#navigation)

Erstmal werden wir die Leiste jetzt dort hinbringen, wo sie hin soll:

#template_nav {
margin-left: Zahlpx;
margin-top: Zahlpx;
}

Bei margin-left ist es vermutlich notwendig eine negative Zahl einzusetzen. Probier einfach ein paar Zahlen aus und schau, wo es deine Navigation hinverschiebt.
Dabei muss man einfach ein bisschen probieren!
margin-top: Ist der Abstand nach oben hin. Auch einfach ein paar Zahlen ausprobieren.

Nun sitzt die Leiste hoffentlich dort, wo sie sein soll. Wenn du willst, kannst du auch noch den Abstand zwischen den Bildern/Links verändern.

#navigation img {
margin-right: Zahlpx;
}


Da reicht meistens eine Zahl so um die 10px.

Was jetzt natürlich noch wichtig ist für den perfekten Look, ist die richtige Farbe für das Dropdown-Menü:

ul.dropdown {
border: 1px solid #000000;
background: #Farbe;
}


Damit stellst du die Hintergrundfarbe ein von dem Dropdown-Menü. Du kannst auch den Rahmen ändern, doch erfahrungsgemäß schaut es mit 1px am besten aus!

.dropdown li a:hover {
color: #Farbe;
}


Damit legst du die Farbe fest, die der Link annimmt, wenn du mit dem Mauszeiger darüber fährst.

Die Farbe, die die Links prinzipiell haben, hängt von deinem Seitenlayout ab. Da hat jeder was anderes! Das heißt du solltest schauen, dass du auf deinem Header den Hintergrund so wählst, dass man sowohl schwarze, als auch weiße Links lesen kann!

Das hat jetzt alles mal wieder schwieriger ausgeschaut, als es tatsächlich ist, oder? :D
Hier wieder die

Zusammenfassung


Haha. Mittlerweile sind wir schon so weit und haben so viel Code zusammengebastelt, dass ich ihn sogar schon in eine Textarea schreiben muss. Nicht schlecht, oder? ;)

Und hier wieder das Bild, damit du siehst, wie es jetzt aussieht/aussehen könnte:

Falls du jetzt aber statt der Standard-Navigation eine eigene machen willst, dann hast du hier die wichtigsten Links: (So würde das dann ausschauen: My AccountCustomiseGamesExploreNewsPet CentralBoardsShopsNC Mall)

Header-Tutorial

Auf den Wunsch einer Userin gibt es jetzt auch ein kleines Tutorial dazu, wie man sich einen Header machen kann. :)

Du kannst diesen Part getrost übergehen, wenn du weißt, wie man sich am besten einen Header selbst macht.

Du fängst erst einmal damit an, dass du dir ein Thema überlegst oder ein Bild suchst, das du verwenden willst.
Ich nehme oft Bilder von den Vollbild Hintergrundbildern. Dort kannst du die Bilder in der gewünschten Größe einfach herunterladen.
Eine andere Möglichkeit ist es auch einen Hintergrund zu nehmen, den man normalerweise seinen Pets anziehen kann. Auf der Petpage von Hawiku findest du alle Hintergründe, die es gibt. Wenn du auf einen davon klickst, dann öffnet sich ein Fenster mit dem Bild in der größtmöglichen Größe. Wenn du dein Browserfenster verkleinerst, dann wird auch das Bild kleiner - so kannst du die Größe gut anpassen. (Wenn du die Größe mit einem Bildbearbeitungsprogramm verändern würdest, dann wird das ganze ein klein wenig pixelig. Also schau, dass du es mit dem Browserfenster hinbekommst. ;))
Jetzt ist aber noch die Frage, wie man es speichern und verwenden kann?... Dafür musst du einen Screenshot machen. (wennn du weißt, wie das geht, dann kannst du den nächsten Absatz überspringen.)
Das geht so, dass du auf die Druck - Taste drückst und dann bei einem Bildbearbeitungsprogramm einfügst. (Beispiele für gratis Bbp wären Gimp oder Paint.NET) Die Taste findest du wahrscheinlich rechts oben. Bei einem Laptop kommt es oftmals vor, dass man zusätzlich zu der Taste auch noch die Strg-Taste drücken muss oder aber es gibt eine "FN"-Taste (FN = Funktion). Die hat man dann, wenn die Tasten eine "Doppelbelegung" haben. Also man mit einer Taste zwei Sachen machen kann - ähnlich, wie wenn man auf die Umschalt-Taste drückt und dann auf die 8 um eine Klammer zu machen. ;) So funktioniert es dann, dass man, wenn man auf "FN" und gleichzeitig auf die Taste drückt, auf der "Druck" steht, einen Screenshot macht. Puh. Ich hoffe, dass war jetzt nicht zu wirr.
Hat man einen Screenshot, dann fügt man das in sein Bildbearbeitungsprogramm ein und schneidet es zu. Die Breite des Bildes sollte in etwa 800 bis 1000px betragen. Die Höhe kannst du frei wählen.
Jetzt hast du schon den Hintergrund von deinem Header, jetzt solltets du noch etwas in den Vordergrund tun. Wie zum Beispiel deine Pets, eine Fee oder nur eine Schrift - je nachdem wie du willst und was du dir vorstellst. Einfach kreativ sein ;)
Du musst jetzt aber auch bedenken, dass du einen Platz für deine Navigationsbar brauchst! Am besten ist es dabei, wenn du einen Hintergrund für deine Navigation machst - in einer Farbe, damit man die Links gut lesen kann.
Wenn du die Standard-Navibar von Neopets verwenden wirst, dann brauchst du ein Rechteck, das die richtige Größe hat. Also machst du ein Rechteck in der Größe von 720 x 45 Pixel mit deinem Bildbearbeitungsprogramm. Wie groß dein Rechteck ist, kannst du sehen, wenn du das Rechteck gerade machst. In der Zeile unten links, steht dann meisten wie viele Pixel es gerade hoch und breit ist. Oder aber du machst ein neues Bild, wobei man beim Erstellen des neuen Bildes die Größe auswählen kann, und da brauchst du dann bloß 720 x 45 eingeben. Und das dann einfach bei deinem Hauptbild/Header einfügen. ;)

Das ganze dann speichern und irgendwo hochladen. (Z.B. bei imageshack oder tinypixel)

» weiter

Hintergrund

Jetzt machen wir mal weiter mit dem Hintergrund. Zu dem gibt es eigentlich nicht viel zu sagen und in Wirklichkeit ist es eines der ersten Dinge, die ich immer mache, wenn ich mir ein Lookup bastle.
Wie ich schon gaaaanz am Anfang gesagt habe, sollte man mit dem Hintergrund anfangen und alles andere an ihn und den Header anpassen.
Das Kapitel ist jetzt nur sehr kurz. Ich will nur ein paar wenige Sachen etwas erläutern.
Hier haben wir den Code:

body {
background: #Farbe url(url);
}

Dieser Code sollte dir eigentlich schon bekannt vorkommen. Das war der erste, den ich dir gezeigt habe!
Auf die Farbe will ich jetzt gar nicht näher eingehen, sondern auf die url.
Für url setzt du den Code ein, den du von einem imagehost (z.B. Imageshack, Tinypic) bekommen hast, als du dein Bild auf ihren Server geladen hast.
Wir schreiben den Code jetzt ein klein wenig um und fügen noch etwas dazu:

body {
background: #Farbe url(url);
background-repeat: Wiederholung;
background-attachement: Scrollen
background-position: Position;
}


Farbe und url ist mittlerweile ja schon klar.
background-repeat: Hier legst du fest ob und wie dein Hintergrund wiederholt werden soll. Wenn du nur einen kleinen Eck-Background willst, dann schreibe no-repeat. Bei repeat wird es sowohl horizontal als auch vertikal wiederholt. Mit x-repeat wiederholt sich das Bild nur in x-Richtung, also waagrecht. Und mit y-repeat wiederholt es sich senkrecht.
background-attachement: Willst du, dass das Bild fix an einem Platz ist und es sich nicht wegbewegt, wenn du scrollst, also, dass es ständig sichtbar ist? Dann setze dort fixed ein. Wenn du willst, dass das Bild aus dem Fenster verschwindet, wenn du scrollst, dann nimm scroll. Wenn du willst, dass es fixiert ist und sich wegbewegt, dann musst du fixed einsetzen!
background-position: damit kannst du festlegen, wo sich dein Hintergrund befinden soll. Ein Eck-Hintergrund, den du in der rechten unteren Ecke haben willst, musst du mit right bottom dorthin bringen. Weiters gibt es auch noch left und top. (also left bottom, left top, right bottom und right top sind möglich ;))

Das war jetzt das wichtigste zum Hintergrund.
Auch diesen Code kann man wieder abkürzen, so dass er zum Beispiel so ausschaut: body {background: #Farbe url(url) no-repeat fixed right bottom; }

Zusammenfassung

Nachfolgend der gesamte Code, wobei ich einen Eck-Hintergrund eingefügt habe! (ein süßes Feen-Poogle ;))


Das ganze sieht nun folgendermaßen aus:

» weiter

Vordergrund

Des öfteren bin ich auch schon gefragt worden, wie man sich einen "Vordergrund" macht. Das ist eigentlich ganz einfach!
Du musst dir zuerst auf jeden Fall mal etwas suchen, das du gerne verwenden würdest und es an dein Lookup anpassen. Dann wieder hochladen und dann gehts hier los mit dem Code:

#vordergrund {
background: url(url) no-repeat;
position: fixed;
bottom: 0px;
margin-left: 0px;
width: Breitepx;
height: Höhepx;
z-index: 2;
}

Jetzt zur Erklärung
(Das Wort vordergrund kannst ändern in was du willst!)
Was bei url hinkommt, solltest du schon wissen. no-repeat ist optional. Wenn du etwas hast, dass sich wiederholen soll, musst du das halt ausbessern. (bei Hintergrund findest du die verschiedenen repeat-Arten)
bottom sollte bei 0 bleiben, da du es ja unten haben willst. margin-left verwenden wir deswegen, weil wenn du nur left nimmst, dann stellst du es mehr oder weniger auf deinen Bildschirm ein. Aber bei anderen könnte das ganze dann etwas verschoben sein! Mit margin-left machst du das ganze von den vorherigen Elementen abhängig. Also orientiert es sich am Rest und nicht am Bildschirmrand!
width: Hier die Breite deines Bildes eingeben und bei height die Höhe.
Es ist wichtig, dass du die genau eingibst, denn wenn du sie zu klein wählst, dann wird dein Bild etwas abgeschnitten. Wählst du es aber zu groß, dann hast du ein Problem und zwar: Es ist so, dass du mit diesem Ding ein Kästchen über alles andere legst und dieser Kasten blockiert Links unter ihm. Das heißt, wenn du über dein Lookup scrollst und das Bild ist gerade vor einem Link, dann kannst du ihn nicht drücken. Scrollst du ein Stückchen weiter, so dass der Link nicht mehr von dem Bild überdeckt wird, dann kannst du wieder klicken. Deswegen ist es wichtig die Größe möglichst genau einzustellen!
z-index: Das ist eigentlich hierbei der Schlüssel zum Erfolg! Denn umso höher du die Zahl dort wählst, umso weiter vorne liegt ein Element. Mit 2 kommst du normalerweise gut aus, es sei denn du fügst noch andere Sachen dazu, denen du den Wert 2 gibst, dann musst du hier auf 3 erhöhen, wenn es auf jeden Fall im Vordergrund sein soll. Rein theoretisch könntest du hier auch 100 eingeben, aber das ist eigentlich sinnlos :D

Aber das war jetzt noch nicht alles. Denn mit diesem Code hast du nur das Kästchen #vordergrund definiert. So wie wir es vorher auch immer mit zum Beispiel dem #header gemacht haben. Der Header ist schon von vorneherein vorhanden, da er von TNT in den Seitencode geschrieben wurde ;) Aber den #vordergrund haben wir mehr oder weniger jetzt dazu erfunden. Das heißt wir müssen noch mit HTML ein Kästchen herstellen. Das geht ganz einfach:
Außerhalb von den beiden style-tags (bis jetzt war alles, was wir an Code gehabt haben von den beiden styles eingeschlossen) musst du jetzt folgendes eingeben:

Das war auch schon wieder alles. Damit hast du ein Kästchen (ein div) erstellt. Ganz einfach. :)

Zusammenfassung

Also wenn man das zum anderen Code dazu fügt, schaut das so aus:
Das ist der Teil zwischen den beiden style-tags

Und das ist der Teil, den du entweder vor oder nach deinem style-tag platzierst, je nachdem, wie es dir lieber ist:

Das Wesentliche, also das was wir gerade dazu gegeben haben, findest du ganz unten in diesem Code!
Was die Zahlen angeht, siehst du, dass ich für margin-left zum Beispiel -58 verwendet habe und es jetzt aber perfekt sitzt! Also vergiss nicht, dass es auch negative Zahlen gibt, falls es mit 0 noch nicht dort sitzt, wo es sitzen sollte. :)

Du willst sicher wissen wie es jetzt ausschaut!
Die Blümchen, die du unten siehst, sind der Vordergrund, der sich beim Scrollen mitbewegen würde.

Ist doch schon richtig cool! ^^

» weiter

Kästchen anders platzieren

Jetzt habe ich dir gezeigt, wie du dein Standard-Layout etwas verschönern kannst. Und nun kommen wir zum etwas anderen Lookup bei dem du dir ein Bild machst und deine ganzen Kästchen so platzierst, wie du sie gerne hättest.
Beispiel für so ein Lookup:


(in die Adresseleiste ziehen für größere Ansicht)
Wie du sehen kannst, sind die Userinfos, Pets, usw. nicht mehr dort, wo sie bis jetzt immer waren. Ich hab sie so angepasst, dass sie auf das Bild passen, das ich vorher erstellt habe.
Das ist keine Kunst! Darum will ich euch das jetzt auch noch zeigen:

Ich hab schon am Anfang der Page ein Bild eingefügt, wo man sieht, wie die einzelnen Kästchen benannt sind. Für das Bild schau noch mal zum Anfang zurück, die Namen sind aber hier noch einmal aufgelistet:
- Benutzer-Info (#userinfo)
- Sammlungen (#usercollections)
- Geschäft & Gallerie (#usershop)
- Neopets (#userneopets)
- Neoheim (#userneohome)
- Spiele und Trophäen (#usertrophies)
- NC Mall (#ncmall)
- Habitarium (#habitarium)
Das sind die Teile, die du beliebig auf deinem Lookup platzieren kannst.
Beginnen musst du mit

.contentModuleTable {
position: absolute;
}


Das übernimm einfach so in deinen Code und dann folgt:

#userinfo .contentModuleTable {
top: Zahlpx;
left: Zahlpx;
width: Zahlpx;
height: Zahlpx;
}


#userinfo .contentModuleTable kannst du auch gegen zum Beispiel #usercollections .contentModuleTable usw. ersetzen!
Für Zahl musst du überall wieder einsetzen, was du haben willst.
Statt top und left kannst du hier auch wieder margin-top und margin-left verwenden. Es ist dabei wichtig zu unterscheiden, welche Art von Lookup du gerade machst.
Wenn du es so gemacht hast, wie ich auf meinem Beispiel-Lookup, dann nimmst du nur left und top, denn bei diesem befindet sich ja alles ganz oben und ganz links. Somit kannst du die Kasten auch am ganz linken und ganz oberen Rand ausrichten.
Wenn du aber ein zentriertes Lookup verwenden willst, dann musst du die margin-Versionen verwenden, da du damit die Kästen entsprechend zu deinem body ausrichtest. Damit sind die Kästen dann nicht mehr von einer bestimmten Auslösung abhängig. Denn würdest du bei einem zentrierten Lookie einen left-Wert angeben, der bei deiner Auflösung exakt passt, und es schaut sich aber jemand mit einer höheren Bildschirm-Auflösung dein Profil an, dann wären die Kasten viel zu weit links.
Ich hoffe, das war jetzt einigermaßen verständlich. xD

Neopets nach oben

Wenn du deine Pets nach ganz oben bekommen willst, dann versuch es mal damit:

#userneopets .contentModuleTable {
margin-top: -660px;
position: absolute;
width: Breitepx;
height: 240px;
}


Das verschiebt deine Neopets über deinen eigentlichen content. Möglicherweise musst du -660 durch eine andere Zahl ersetzen!
Für die Breite nimmst du die Breite deines contents.
Noch zusätzlich zu dem musst du jetzt deinen content nach unten verschieben. Das machst du in dem du das

#content {
margin-top: 210px;
}


schreibst. Du hast aber vermutlich schon irgendwo #content stehen und falls dort schon ein margin-top steht, dann solltest du die Zahl dort ausbessern, sonst wird das nichts ;)

» weiter

Ende

Puh. Das war jetzt eigentlich alles, was mir zu dem Thema "Wie mache ich mein eigenes
Lookup" eingefallen ist. Ich hoffe, ich konnte dir helfen mit dieser Petpage. Ich würde mich
freuen wenn du mich verlinkst.
Und ich hoffe, du hast viel Freude an deinem neuen Layout. :)

(und klaut bitte nichts von meiner Seite. War echt viel Mühe alles zusammenzusuchen und halbwegs verständlich zu formulieren)
Danke :)

Hier noch die restlichen Banner, die zur Verfügung stehen (made by me):

Und danke an
prinzessin11_6
für diesen Banner. :)

Fanpost :)

Danke an alle für das Lob sowohl in den Foren, als auch per Neomail. Freut mich, dass ich
mir die Mühe nicht umsonst gemacht habe :*

(Für größere Ansicht, Bild nehmen und in die Adressleiste ziehen)

Updates

25. 7. mehr Banner :)

24. 7. neues Layout!


Link back!

Ich würde mich echt freuen, wenn du mich verlinken würdest. Hier der Banner:

Noch mehr Banner findest du am Ende.




Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
/help/bumper/headers/log-in-to-facebook

NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2014.
® denotes Reg. US Pat. & TM Office. All rights reserved.

PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions