Eigene Profileseite auf NTMB anpassen Tutorial

Heute möchte ich euch erklären wie man das eigene Profile hier auf NTMB anpassen kann!
Für die alten Hasen ist das sicher kein Problem mehr aber für die neuen unter euch,
hoffe ich hiermit helfen zu können
Als allererstes brauchst du Premium:
wieso warum und wie, das wird hier erklärt Wofür Punkte und was ist Premium
Und jetzt kann es losgehen :
In eurem Profil steht neben eurem großen Profilbild "Styleauswahl:" dort klickst du auf die kleine Palette
Dann solltest du den css Code von deinem Profil angezeigt bekommen:

---------------------------------------------------------------------

/* Dies ist eine Vorlage */

/* Hintergrund */
body{background:#666666; <--- das ist die gesamte Hintergrundfarbe
color:#000000; <--- das ist die gesamte Schrifftfarbe
}

sucht euch eine nette Farbe aus und fügt sie hinter dem Zeichen #
(damit beginnt immer der Farbcode der immer aus 6 Ziffern beseht)
den richtigen Farbcodes, Hexadezimal ein .

Hier findest du Farbcodes, Hexadezimal

ntmb
html-php-mysql.de
aconcagua2000


---------------------------------------------------------------------

/* Main */
div.haupt{
background:#FFFFFF; <--- das ist der mittlere Hintergrund
}

Hier wirt die Mitte des Profils definiert

Hier habt ihr auch die Möglichkeit Bilder ein zu fügen dann sollte es so aussehen

/* Main */
div.haupt{
background:#FFFFFF;
background-image: url(http://Bildhoster oder so /bild.jpg); <--- das musst du zusätzlich einfügen
background-attachment:fixed; <--- dann bleibt der Hintergrund immer an der gleichen stelle
}

Ich empfehle aber auch die Hintergrundfarbe" background:#FFFFFF; " fest zu legen
damit wenn das Bild mal nicht geladen wirt das Profil trotzdem anständig aussieht!
Die Grafik sollte am besten nur aus einem Streifen bestehen die 6px Breit und 560 bis 600px Lang ist
das reicht vollkommen aus
und brauch auch nicht solange zu Laden der Streifen Verdoppelt sich so das alles ausgefüllt ist .

---------------------------------------------------------------------

/* Überschriftsbalken*/
.userblack{
background:#000000; <-- Grundfarbe des Balkens
}
.userblack,.userblack a:link,.userblack a:visited,.userblack a:hover{
color:#FFFFFF; <--- Farbe der Schrift in den Balken z.b. Hauptdaten usw.
}

Hier sind die Balken gemeint in denen z.b. Hauptdaten , Styleauswahl: usw. steht
und auch hier kann man eine Grafik einfügen dann würde das so aussehen

/* Überschriftsbalken*/

.userblack{
background:#000000 url (Bildhoster oder so /navi.jpg);
}
.userblack,.userblack a:link,.userblack a:visited,.userblack a:hover{
color:#FFFFFF;
}

Auch hier reicht eine Grafik von 50px Breit und 30 bis 40px Lang aus
Jetzt kann man noch die Ecken abrunden (das kann man dann aber nur im Mozilla Firefox sehen
im Internet Explorer verändert sich nichts)
dann sollte es so aussehen

/* Überschriftsbalken*/

.userblack{
background:#000000 url (Bilderhoster oder so /navi.jpg);

-moz-border-radius:10px ; <--- diese wird einfach hin zugefügt

Mit "radius:10px" musst du ein wenig ausprobieren was am besten passt einfach
die 10px mal auf 4 oder auch auf 30 Stellen
dann wirst du sehen das die Ecken entweder richtig rund oder Halbkreise sind
ich empfehle eine Skala von 2-10 aus zu probieren.

---------------------------------------------------------------------

/* Links */
a:link{
COLOR:#1E65AC; <--- normale Farbe
}
a:visited{
COLOR:#194D81; <--- die man schon angeklickt hatte
}
a:hover{
COLOR:#12496A; <--- wenn man mit der Maus über einen Link geht verändert sich die Farbe

Hier wird das verhalten aller Links definiert die es auf eurem Profil gibt z.b.
z.b. eure Homepage, Links in einträgen im Gästebuch

---------------------------------------------------------------------

/* andere Rahmen*/
div.gali,div.galig,.comment{
border-color:#b5b5b5; <---- das ist die Farbe vom Rahmen
background:#FFFFFF; <---- Farbe des Innebbereiches
color:blue; <---- Schriftfarbe vom oberen Balken und bei den letze Aktivitäten
<--- hier einfügen -moz-border-radius:10px ;
}

Das ist der Rahmen in dem
Profilseite von .....
Punkte: ....... - Platz: .... - Beiträge: ..... Nachricht schicken
steht!
wenn hier auch wider Runde Ecken sein sollen dann muss wieder ein -moz-border-radius:10px ;
dazu geschrieben werden aber über das } .
Der Radius sollte nicht großer als 10px sein.

Wenn der Rahmen aus Punkten sein soll dann tausche border-color:#b5b5b5; gegen
border:1px dotted #b5b5b5; aus .
border:1px das beschreibt die Dickte des Rahmens ,
dotted das sorgt dafür das es Punkte sind , #b5b5b5 das ist die Farbe

---------------------------------------------------------------------

/* Kommentare */
.comment {
background:#efefef;
border-color:#dddddd; <--- auch hier lassen sich Punkte von machen
}
/* Kommentare selbst */ <--- hier mit ins nicht den eigen in deinem GB gemeint (dachte ich auch erst)
das ist für den jeweiligen Besucher wenn er schon mal rein
geschrieben hat sieht er sein auf einen Blick

.comment_me {
background:#99CCFF;
border-color:#336699; <--- auch hier lassen sich Punkte von machen
}

/* Signatur */
.sign{
border-color:#dddddd; <--- auch hier lassen sich Punkte von machen
background:#f0f0f0;
}

Wenn man hier jetzt auch eine Grafik als Hintergrund haben möchte Tauscht man
"background:#efefef;" gegen " background:#efefef url (http://Bildhoster oder so/bild.jpg) ;"

Sollen auch hier wieder die Ecken rund sein kommt zu jedem ein moz-border-radius:10px ; hin zu .

---------------------------------------------------------------------

/* Seitenanzeige */ <--- hier geht es um die kleinen Zahlen unten am ende von Gästebuch
a.page:link,a.page:visited{ /* normal */ <--- normal eben
color:#000000; <--- Farbe der Zahl
background:#eeeeee; <--- Farbe von inneren
border:1px solid #bbbbbb; <--- Rahmen dickte und Farbe
}

a.pageok:link,a.pageok:visited{ /* aktiv */ <---- das ist die Seite auf der man sich befindet
color:#000000; <--- Farbe der Zahl
background:#BEE9FF; <--- Farbe von inneren
border:1px solid #3399CC; <--- Rahmen dickte und Farbe

}
a.page:hover,a.pageok:hover{ /* mouseover */ <---- es veränderst sich wen man mit der Maus drüberfährt
color:#000000; <--- Farbe der Zahl
background:#888888; <--- Farbe von inneren
border:1px solid #555555; <--- Rahmen dickte und Farbe
}
span.pageok { /* inaktiv */ <--- es gibt zwei Feile und hier stellt man das verhalten ein von dem der jeweils nicht geklickt werden kann

color:#aaaaaa; <--- Farbe der Zahl
background:#f0f0f0; <--- Farbe von inneren
border:1px solid #dcdcdc; <--- Rahmen dickte und Farbe
}

So wenn jetzt über all die Farben angepasst sind kann man noch ein bisschen
an der dickte der Rahmen Probieren "border:1px " schau was passiert wenn man von der 1 eine 2 oder 3 macht.
von "solid" (das steht für die Rahmenart) ein dotted macht Pukte

---------------------------------------------------------------------

/* Eingabefelder */ <---- das ist das wo man den Eintrag ins Gästebuch machen kann
input,textarea,input.member {
background:#f3f3f3; <--- Farbe von inneren
border-color:#888888; <--- Rahmen Farbe
}
input:focus,input.member:focus,textarea:focus { <---- das ist der Absendbutten
border-color:#1E65AC; <--- Rahmen Farbe
background:#e7e7e7; <--- Farbe von inneren
}

Auch hier kann man wieder Punkte als Rahmen "border:1px dotted # machen und/oder
auch Runde Ecken -moz-border-radius:10px ;

---------------------------------------------------------------------

/* Galerie-Tab */ <---- das ist die kleine Navie wo man zwischen Neusten und Besten Bilder wählen kann
div.galinavi{
border-color:#AAAAAA; <---- das ist der lange Strich
}
div.galinavi a{ /* Link */ <---- das ist die Seite auf der man sich befindet
background:#EEEEEE; <---- Hintergrundfarbe
color:#666666; <--- Schriftfarbe
}
div.galinavi a:hover,div.galinavi a.galinavion{ /* Link-Aktiv */ <---- es veränderst sich wen man mit der Maus drüberfährt
background:#AAAAAA; <---- Hintergrundfarbe
color:#404040; <--- Schriftfarbe
}

---------------------------------------------------------------------

Ich hoffe ich konnte den ein oder anderem helfen und es geht jetzt leichter das Profile
an zu passen!?
Und für all die die nicht nur Punkte zum ihre Kästen haben wollen schauen hier nach

css4you

Mitglieder-Kommentare

---