Do it yourself: CSS für Profil und Blog

Hi, für CSS arbeiten empfehle ich das Firefox addon "Firebug". Ein klick auf das Symbol mit dem Pfeil unten links und den zwei Strichen, und danach aud das zu ändernde Element klicken. Es werden die jeweiligen CSS Regeln angezeigt.

PS: Änderungen via Firebug vergehen mit dem Refresh. Hat man die gewünschten Änderungen durchgeführt kopiert man die CSS Regeln in den entsprechenden Bereich seiner Profileinstellungen.


Als kurzes Beispiel der Navibereich verändert, siehe Bild.

Die hierfür gemachten Veränderungen lassen sich innerhalb einer Minute durchführen:

.header {
background-color: #000000;
background-image: none;
box-shadow: 1px 1px 40px #00CCFF;
clear: left;
font-size: 12px;
height: 65px;
position: relative;
width: 900px;
}


.tabnav a {
background-color: #000000;
border-bottom: 1px dotted #00CCFF;
color: white;
display: block;
float: left;
font-size: 11px;
margin-right: 1px;
outline-style: none;
padding: 5px 0;
text-align: center;
text-decoration: none;
}

.tabnav a:hover, a.tabnav_selected, a.tabnav_js_selected {
background-color: #000000;
}

#moreMenu {
background-color: #000000;
border: 1px solid #000000;
color: #919191;
font-size: 11px;
line-height: 19px;
opacity: 0.8;
padding: 8px 13px 13px;
}



Original anzeigen (0,3 MB)

So mein Profil ist fertig.

Bitte noch mal drüberschaun.

Danke im Vorraus und eine wunderschöne Woche.

MfG Schrotty

@----
Der Tip ist genial, ich habs ausprobiert aber so richtig durchsehen tu ich bei Firebug noch nicht.

Mein GB Rand zerfranzt sich nämlich unter Firefox und ich bekomm das nicht in den Griff.

Aufgeben gilt nicht. Ich versuchs weiter :D

@Schrotty
Was willst du denn umsetzen?

Firebug ist an sich schnell in den Griff zu bekommen.

Hab mir dein Profil mal angesehen und denke das Problem liegt hier:

.gb_post {
outline-color: #FFFFFF;
outline-style: double;
}


Setz mal folgendes in deine CSS:

.gb_post {
background: none repeat scroll 0 0 #05065C;
border: 2px solid #FFFFFF;
}

Aha danke, ich bin ganz offen, CSS und Html sind wirklich etwas verwirrend für mich. @----
Aber dennoch macht es Spaß, nur ehe ich da was probiere, muß ichmächtig büffeln.

als ich mit div in seinen verschiedenen Ausführungen Experimentierte, wanderte plötzlich ds ganze Profil. Ehe ich auf Allmy was versau, warte ich noch etwas.

Du kannst alle CSS Änderungen ja Rückgängig machen.

Wenn sich alles verschiebt liegt das in der Regel an "float:" "clear:" und/oder "position:" Einstellungen.

Das obige CSS kannst du bedenkenlos einfügen.

@----
Hat geholfen Dankeschön. :D Wenn ich dir mal was bauen kann in 3D, nur die Idee rüberreichen und dann bastel ich.

Was heißt 3D?

@---- Die Felder in meinem P'rofil, habe ich im 3D Modeleditor gebaut und Animiert.

Schick. Blinkt mir aber zu viel.^^


Hier ist übrigens noch das CSS von meinem Profil:


body{color:#999999}

.fh {
background-color: #000000;
border-bottom: 1px dotted #00CCFF;
}

#otft {
border-radius: 10px 10px 10px 10px;
box-shadow: 1px 1px 40px #00CCFF;
-moz-box-shadow: 1px 1px 40px #00CCFF;
-webkit-box-shadow: 1px 1px 40px #00CCFF;
-o-box-shadow: 1px 1px 40px #00CCFF;
-ms-box-shadow: 1px 1px 40px #00CCFF;
margin-left: 50px;
padding: 30px;
}

a:hover{text-shadow:1px 1px 40px #00ccff;}

.main {
background: url("") no-repeat scroll 0 0 transparent;
clear: both;
height: 100%;
padding-left: 9px;
padding-right: 10px;
padding-top: 16px;
width: 730px;
margin-left:50px;
margin-top:70px;
}

.header {
background-color: #000000;
background-image: url("");
clear: left;
font-size: 12px;
height: 65px;
position: relative;
width: 900px;
margin-left: 190px;
display: none;
}

h2 {
display: none;
font-size: 14px;
margin: 0 0 0 5px;
}

.footer {
clear: both;
display: none;
font-size: 11px;
margin-bottom: 15px;
margin-top: 5px;
padding-left: 7px;
width: 732px;
}

.hidden {
display: none;
}

.userfunction {
font-size: 12px;
margin: 0 auto;
padding-bottom: 4px;
text-align: right;
width: 901px;
}

.tabnav {
margin-left: 200px;
position: relative;
white-space: nowrap;
width: 902px;
z-index: 30000;
box-shadow: 1px 1px 40px #00CCFF;
-moz-box-shadow: 1px 1px 40px #00CCFF;
-webkit-box-shadow: 1px 1px 40px #00CCFF;
-o-box-shadow: 1px 1px 40px #00CCFF;
-ms-box-shadow: 1px 1px 40px #00CCFF;
}

.tabnav a {
background-color: #111111;
border-bottom: 1px solid #00CCFF;
color: white;
display: block;
float: left;
font-size: 11px;
margin-right: 1px;
outline-style: none;
padding: 5px 0;
text-align: center;
text-decoration: none;
}

.tabnav a:hover {
background-color: #222222;
border-bottom: 1px solid #FFFFFF;
box-shadow: 1px 1px 10px #ffffff;
-moz-box-shadow: 1px 1px 10px #ffffff;
-webkit-box-shadow: 1px 1px 10px #ffffff;
-o-box-shadow: 1px 1px 10px #ffffff;
-ms-box-shadow: 1px 1px 10px #ffffff;
}

.profile_links {
margin-left: 340px;
font-family: fantasy;
}

.infoleiste {
float: none;
left: 900px;
position: absolute;
top: 100px;
width: 150px;
z-index: 999;
}

#moreMenu {
-moz-transform: skewy(10deg) skewx(10deg);
-webkit-transform: skewy(10deg) skewx(10deg);
-o-transform: skewy(10deg) skewx(10deg);
-ms-transform: skewy(10deg) skewx(10deg);
transform: skewy(10deg) skewx(10deg);
background-color: #000000;
border: 1px solid #000000;
color: #919191;
font-size: 11px;
left: 600px;
line-height: 19px;
padding: 8px 13px 13px;
position: absolute;
}

#moreMenu:hover {

}

.profile_info {
background-attachment: scroll;
background-clip: border-box;
background-color: #000000;
background-image: url("");
background-origin: padding-box;
background-position: center top;
background-repeat: no-repeat;
background-size: 500px auto;
border: 1px solid #FFFFFF;
border-radius: 10px 10px 10px 10px;
box-shadow: 1px 1px 30px #00CCFF;
-moz-box-shadow: 1px 1px 30px #00CCFF;
-webkit-box-shadow: 1px 1px 30px #00CCFF;
-o-box-shadow: 1px 1px 30px #00CCFF;
-ms-box-shadow: 1px 1px 30px #00CCFF;
color: #FFFFFF;
margin: 30px 30px 30px 90px;
opacity: 0.9;
padding: 30px;
text-shadow: 1px 1px 30px #00FFFF;
width: 600px;
}


.profile_info:hover {
-moz-transform:rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
-moz-transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}

.mcell_inhalt, .mcell_inhalt2, .mcell_inhalt3, .mcell_inhalt4 {
background-color: #000000;
font-size: 11px;
overflow: hidden;
padding: 10px;
text-align: left;
border:1px solid #ffffff;
border-radius:0px 0px 10px 10px;
box-shadow: 1px 1px 30px #00CCFF;
-webkit-box-shadow: 1px 1px 30px #00CCFF;
-moz-box-shadow: 1px 1px 30px #00CCFF;
-o-box-shadow: 1px 1px 30px #00CCFF;
-ms-box-shadow: 1px 1px 30px #00CCFF;
opacity:0.5;
color: #00CCFF;
-o-transform:skewX(10deg) skewY(10deg);
-ms-transform: skewX(10deg) skewY(10deg);
-moz-transform:skewX(10deg) skewY(10deg);
-webkit-transform: skewX(10deg) skewY(10deg);
transform: skewX(10deg) skewY(10deg);
-moz-transition: all 4s ease-in-out;
-webkit-transition: all 4s ease-in-out;
-o-transition: all 4s ease-in-out;
-ms-transition: all 4s ease-in-out;
transition: all 4s ease-in-out;
margin-top: 30px;
width:150px;
margin-left: 100px;
}


.mcell, .mcell2, .mcell_left, .mcell_status {
-moz-transform:skewX(10deg) skewY(10deg);
-webkit-transform: skewX(10deg) skewY(10deg);
-o-transform:skewX(10deg) skewY(10deg);
-ms-transform: skewX(10deg) skewY(10deg);
transform: skewX(10deg) skewY(10deg);
-moz-transition: all 4s ease-in-out;
-webkit-transition: all 4s ease-in-out;
-o-transition: all 4s ease-in-out;
-ms-transition: all 4s ease-in-out;
transition: all 4s ease-in-out;
background:#000000;
margin-top: 30px;
margin-left: 100px;
}



.mcell_inhalt:hover, .mcell_inhalt2:hover, .mcell_inhalt3:hover, .mcell_inhalt4:hover {
-moz-transform:skewX(0deg) skewY(0deg);
-webkit-transform: skewX(0deg) skewY(0deg);
-o-transform:skewX(0deg) skewY(0deg);
-ms-transform: skewX(0deg) skewY(0deg);
transform: skewX(0deg) skewY(0deg);
-moz-transition: all 4s ease-in-out;
-webkit-transition: all 4s ease-in-out;
-o-transition: all 4s ease-in-out;
-ms-transition: all 4s ease-in-out;
transition: all 4s ease-in-out;
}


.mcell:hover, .mcell2:hover, .mcell_left:hover, .mcell_status:hover {
-moz-transform:skewX(0deg) skewY(0deg);
-webkit-transform: skewX(0deg) skewY(0deg);
-o-transform:skewX(0deg) skewY(0deg);
-ms-transform: skewX(0deg) skewY(0deg);
transform: skewX(0deg) skewY(0deg);
-moz-transition: all 4s ease-in-out;
-webkit-transition: all 4s ease-in-out;
-o-transition: all 4s ease-in-out;
-ms-transition: all 4s ease-in-out;
transition: all 4s ease-in-out;
}

ul#gb_posts li {
border-bottom: 1px dotted #00CCFF;
float: left;
margin-bottom: 20px;
padding: 3px;
width: 640px;
color: #FFFFFF;
}

#gb_posts li a.gb_post_img img {
border: 1px solid #00CCFF;
box-shadow: 1px 1px 20px #00CCFF;
-moz-box-shadow: 1px 1px 20px #00CCFF;
-webkit-box-shadow: 1px 1px 20px #00CCFF;
-o-box-shadow: 1px 1px 20px #00CCFF;
-ms-box-shadow: 1px 1px 20px #00CCFF;
height: 40px;
margin-right: 20px;
width: 40px;
}

#gb_posts li a.gb_post_img img:hover {
-moz-transform: rotate(360deg) scale(2);
-moz-transition: all 4s ease 0s;
-webkit-transform: rotate(360deg) scale(2);
-webkit-transition: all 4s ease 0s;
-o-transform: rotate(360deg) scale(2);
-o-transition: all 4s ease 0s;
-ms-transform: rotate(360deg) scale(2);
-ms-transition: all 4s ease 0s;
transform: rotate(360deg) scale(2);
transition: all 4s ease 0s;
border-radius: 40px;
}

ul#gb_posts {
border: 1px solid #000000;
border-radius: 10px 10px 10px 10px;
box-shadow: 1px 1px 30px #00CCFF;
-moz-box-shadow: 1px 1px 30px #00CCFF;
-webkit-box-shadow: 1px 1px 30px #00CCFF;
-o-box-shadow: 1px 1px 30px #00CCFF;
-ms-box-shadow: 1px 1px 30px #00CCFF;
display: block;
font-family: Times New Roman;
list-style-position: outside;
list-style-type: none;
margin: 30px 0 30px 5px;
opacity: 0.7;
padding: 30px;
width: 650px;
}

ul#gb_posts:hover {
-moz-transform:scale(1.1);
-webkit-transform:scale(1.1);
-o-transform:scale(1.1);
-ms-transform:scale(1.1);
transform:scale(1.1);
-moz-transition: all 1.5s ease-in-out;
-webkit-transition: all 1.5s ease-in-out;
-o-transition: all 1.5s ease-in-out;
-ms-transition: all 1.5s ease-in-out;
transition: all 1.5s ease-in-out;
margin-left:100px;
}



.user_view {
display: none;
float: left;
margin: 15px;
white-space: nowrap;
width: 20%;
}

.user_view img.user_view_pic {
border: 1px solid;
float: left;
height: 0px;
margin-right: 7px;
margin-top: -3px;
width: 40px;
}


#h1 {
border: 2px solid #000000;
border-radius: 20px 20px 20px 20px;
clear: none;
color: #ffffff;
display: block;
float: left;
font-family: Times New Roman,"Andale Mono",Arial,sans-serif;
font-size: 1.8em;
height: 600px;
overflow: auto;
padding: 20px;
width: 600px;
background-color: #000000;
opacity: 0.03;
}

#h1:hover {
-moz-transform:rotate(360deg) skewY(360deg);
-webkit-transform: rotate(360deg) skewY(360deg);
-o-transform:rotate(360deg) skewY(360deg);
-ms-transform: rotate(360deg) skewY(360deg);
transform: rotate(360deg) skewY(360deg);
-moz-transition: all 5s ease-in-out;
-webkit-transition: all 5s ease-in-out;
-o-transition: all 5s ease-in-out;
-ms-transition: all 5s ease-in-out;
transition: all 5s ease-in-out;
opacity: 0.8;
width: 1000;
margin-left: 16%;
margin-bottom:50px;

z-index: 1111;
width:800px;
}

embed {
margin-right: 60%;
z-index: -3;
}


#gb_post_textarea {
border: 1px solid #B1B2C9;
border-radius: 10px 10px 10px 10px;
box-shadow: 1px 1px 30px #00CCFF;
font-family: Tahoma;
font-size: 10pt;
height: 80px;
left: 75px;
min-height: 62px;
overflow: auto;
padding: 3px;
position: absolute;
width: 450px;
}

#gb_post_submit {
color: #00CCFF;
font-family: Times New Roman;
left: 459px;
margin: 0;
position: absolute;
top: -32px;
}

@---- Alter Schwede.... respekt..... wenn ich auch nur die Hälfte, ach quatsch ein Zentel davon begreife, bin ich schon glücklich. Aber laß mal, das lern ich auch noch ;)

Mit Sicherheit. CSS ist kein Hexenwerk und schnell verstanden.

@---- Dein Wort in sogenannt Gottes Ohr, meine letzten Programmierkenntnisse stammen noch von Borland Pascal 7.0 . Und allein das zu lernen, brauchte ich 5 Jahre.

CSS hat ja mit Programmieren nichts zu tun. Man muss hier lediglich die Möglichkeiten kennen. Vokabeln lernen sozusagen.

Doch noch ein Fehlerteufel in meinem Profil....

ich habe 2 PC zu laufen, auf einem hab ich das Profil erstellt und die Schriften stimmen.
Auf dem Anderen, hab ich falsche Schriften und dadurch Größenverschiebungen im CSS Text.

Giebt es eigentlich auch Schriften, die universal vorhanden sind und somit auf allen PC gleich aussehen?

@Schrotty

Die normalen Schriftarten aus Word müsste eigentlich jeder haben.

Ups und wie erkenn ich die? Ich hab mächtig aufgerüstet. @Ciela

@Schrotty

Also ich hab mal Google durchsucht und das einzige, was ich gefunden habe, ist eine Liste mit den Datei-Namen, aber man kann den normalen Namen fast überall ableiten.

ahronbd.ttf
andlso.ttf
ANGSA.TTF
ANGSAB.TTF
ANGSAI.TTF
ANGSAU.TTF
ANGSAUB.TTF
ANGSAUI.TTF
ANGSAUZ.TTF
ANGSAZ.TTF
arial.ttf
arialbd.ttf
arialbi.ttf
ariali.ttf
Arialn.ttf
Arialnb.ttf
Arialnbi.ttf
Arialni.ttf
ariblk.ttf
artrbdo.ttf
artro.ttf
batang.ttc
Bookos.ttf
bookosb.ttf
Bookosbi.ttf
Bookosi.ttf
BROWA.TTF
BROWAB.TTF
BROWAI.TTF
BROWAU.TTF
BROWAUB.TTF
BROWAUI.TTF
BROWAUZ.TTF
BROWAZ.TTF
bssym1.ttf
bssym2.ttf
bssym3.ttf
bssym4.ttf
bssym5.ttf
comic.ttf
comicbd.ttf
CORDIA.TTF
CORDIAB.TTF
CORDIAI.TTF
CORDIAU.TTF
CORDIAUB.TTF
CORDIAUI.TTF
CORDIAUZ.TTF
CORDIAZ.TTF
cour.ttf
courbd.ttf
courbi.ttf
couri.ttf
david.ttf
davidbd.ttf
davidtr.ttf
estre.ttf
framd.ttf
framdit.ttf
frank.ttf
Gara.ttf
Garabd.ttf
Garait.ttf
gautami.ttf
georgia.ttf
georgiab.ttf
georgiai.ttf
georgiaz.ttf
gulim.ttc
hatten.ttf
impact.ttf
kartika.ttf
l_10646.ttf
latha.ttf
lucon.ttf
lvnm.ttf
lvnmbd.ttf
mangal.ttf
micross.ttf
mingliu.ttc
mriam.ttf
mriamc.ttf
mriamfx.ttf
mriamtr.ttf
msgothic.ttc
msmincho.ttc
Mtsorts.ttf
mvboli.ttf
nrkis.ttf
outlook.ttf
pala.ttf
palab.ttf
palabi.ttf
palai.ttf
raavi.ttf
rod.ttf
rodtr.ttf
shruti.ttf
simhei.ttf
simpbdo.ttf
simpfxo.ttf
simpo.ttf
simsun.ttc
sylfaen.ttf
symbol.ttf
tahoma.ttf
tahomabd.ttf
times.ttf
timesbd.ttf
timesbi.ttf
timesi.ttf
tradbdo.ttf
trado.ttf
trebuc.ttf
trebucbd.ttf
trebucbi.ttf
trebucit.ttf
tunga.ttf
UPCDB.TTF
UPCDBI.TTF
UPCDI.TTF
UPCDL.TTF
UPCEB.TTF
UPCEBI.TTF
UPCEI.TTF
UPCEL.TTF
UPCFB.TTF
UPCFBI.TTF
UPCFI.TTF
UPCFL.TTF
UPCIB.TTF
UPCIBI.TTF
UPCII.TTF
UPCIL.TTF
UPCJB.TTF
UPCJBI.TTF
UPCJI.TTF
UPCJL.TTF
UPCKB.TTF
UPCKBI.TTF
UPCKI.TTF
UPCKL.TTF
UPCLB.TTF
UPCLBI.TTF
UPCLI.TTF
UPCLL.TTF
verdana.ttf
verdanab.ttf
verdanai.ttf
verdanaz.ttf
vrinda.ttf
webdings.ttf
wingding.ttf

Aha ich seh schon, Danke schön @Ciela also ttf müßte demnach die Universalschriftart markieren.
Hast mir sehr geholfen.

@Schrotty
Bitte. :)

Aber soweit ich weiß, ist .ttf hinter jeder Schriftart. Bezeichnet also nicht nur die von Windows.
Hier ist z.B. eine, die ich heruntergeladen hab.