Tutorials

Eigene Profileseite auf NTMB anpassen Tutorial

Einloggen
Benutzername:
Passwort:

Passwort vergessen?
Kostenlos
Anmelden
anzeigen
Eigene Profileseite auf NTMB anpassen
Heute möchte ich euch erklären wie man das eigene Profile hier auf NTMB anpassen kann!


4518 - dassindwir - 02.10.2009 18:41 Uhr - Version: 4 - - verlinken als BB-Code


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:Bild" 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:Bild 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


#12 von DennisLEV
Das ist ja fast en eigene Homepage! Smily NR:2
#11 von dassindwir
ich habe das schon verstanden nichts drauf nur schwarz oder weiß ist schon klar
man kann aber noch nen punkt drauf machen dann ist wenigstens ein bischen drauf Smily NR:2
dann hat man 11,5 kb das kann man dann in der größe 160 X 90 px hochladen
Liebe Grüße
dassindwir



#10 von zerfleischer
Vergiss es Smily NR:8
Du verstehst deine eigenne Aussage nicht zu dem was ich schreibe.

Du hast gesgat das man kein bild mit der abmessung ind die größe bekommt. Darauhin ich doch bekommt man wenn nur schwarz oder weiß ist.
Jetzt verstanden was ich will?

Die Gymnasiasten sind so blöd.... die rechnen mit Buchstaben
#9 von dassindwir
danke Smily NR:2
Liebe Grüße
dassindwir



#8 von ntmb
Daumen hoch ^^ und +1
Der freundliche Admin aus der Nachbarschaft
Lachecke.de - Dein täglicher Lacher im Internet
Listrank.de - Die ultimative Topliste nach Themen
#7 von dassindwir
ach so aber trotzdem

ein bild nur mit weißem grund und einen schwarzen punkt hat 11,5 kb
aber auf dem bild sollte doch auch was passendes zum Tutorials sein oder
Liebe Grüße
dassindwir



#6 von zerfleischer
Es ging ja um die Größenangabe von dir das es so nicht past. Verhältnis zur größe Smily NR:8 wenn nur eine farbe ist sollte es kleiner werden. Hab ich nur so geschrieben, sollst du doch nicht machen Smily NR:8 xD

Die Gymnasiasten sind so blöd.... die rechnen mit Buchstaben
#5 von dassindwir
Zitat:
nicht unbedingt Smily NR:8
wegen dem bild oder
wie jetzt ich soll ein schwarz oder weises Bild machen das sähe ja noch blöder aus
oder man würde garnichts sehen dann braucht man auch garkein bild mit rein machen
oder
Liebe Grüße
dassindwir



#4 von chrisboy
bekommst ein + wegen der Idee und der guten erklärung
#3 von zerfleischer
nicht umbedingt Smily NR:8

Mach ein Schwarzes Bild oder ein weißes dann past das Smily NR:8

Die Gymnasiasten sind so blöd.... die rechnen mit Buchstaben

« 1 2 »

Nur registrierte Mitglieder könnten einen Kommentar schreiben.

Melde dich doch ganz einfach an, es ist kostenlos. :-)