CSS-Code mit Hinweiskommentar + Frage

04.08.2007 15:46 (zuletzt bearbeitet: 04.08.2007 16:06)
avatar  Dome
#1 CSS-Code mit Hinweiskommentar + Frage
Do
Mitglied
Ich habe mir hier mal die Mühe gemacht und den CSS-Code soweit es ging "Entschlüsselt" - allerdings habe ich auch ein paar Stellen mit "/*unbekannt*/" markiert, da ich eben nicht weiss, wo sich was ändert.

Besonders wichtig ist mit Der "Sprung" und dessen Hintergrundfarbe in der "zweiten Ebene".
Im angegebenem Forum die Stelle mit dem rosanem "Sprung" - finde es einfach nicht mehr.

Das hier ist ein kompletter CSS-Code (von dem Forum):
(wer will darf ihn gerne übernehmen)


In Antwort auf:
BODY {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
background-color: #0E07A5; /*Haupthintergrund*/
color: #FFFF00; /*Schriftfarbe im Header und Footer */
text-align: center
}

TD,TR {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #FFFF00; /*Schrift wie "Forum" "Beiträge" "Themen" "Letzter Beitrag" */
}

INPUT,SELECT,TEXTAREA {
/* border-width:1px; */
color: #000000; /*Buttonschriftfarbe wie z.B. "Alles makieren" */
}

A {
color: #FFFF00; /* Unterstrichfarbe wie bei "Forum Übersicht" */
}
HR {
margin-top: 5px;
margin-bottom: 5px;
}
BLOCKQUOTE {
margin-right: 0px;
margin-bottom: 0px;
margin-left: 30px;
}
.ntit {
/* z.b. bei der Suche die Überschrift */
background-image:url(https://files.homepagemodules.de/b86053/f60t133p1506n4.png);
height:29px;
font-size: 10pt;
font-weight: bold;
vertical-align:middle;
background-color: #FE0000;
}
.ntit a {
color: #01C5F9; /* Wie "Ihre Schreibrechte" */
}
.ntop {
/* Die zweite Überschriftszeile wie bei den Privaten Mails */
height:29px;
font-size: 10pt;
font-weight: bold;
vertical-align:middle;
background-color: #59C2FB;
}
.ntop a {
color: #FE0000; /*unbekannt*/
}

.ntop td {
/* same */
background-color: #160893; /*Werbetext unter Beiträgen - Farbe*/
color: #160893; /*Werbetext unter Beiträgen - Rahmen*/
}
.nnor {
/* jeweils der mittlere Bereich bei der Suche, der FAQ, der Einstellungen u.s.w.+ Hintergrund auf dem man schreibt (Neuer Beitrag) */
background-color: #0000FE;
color: #FFFF00;
}
.nnor a {
color: #3EF5FD; /*Linkfarbe in Beiträgen*/
}

.nnor td {
/* same */
background-color: #0B0BAB; /* Hintergrundfarbe bei Beitrag schreiben //Hintergrundfläche von "Benutzername" */
color: #FFFF00; /*Schriftfarbe wie "Benutzername"*/
}
.nnor input,select,textarea {
/* Form Elemente in diesem Bereich, auch Textfeld bei neuem Beitrag */
background-color: #00FFFF; /*Buttonfarbe und Hintergrundfarbe bei des Eingabefensters vom Betreff */
color: #000000; /*Schriftfarbe*/
}
.nnos {
/* kleiner Text im mittlerem Bereich */
font-size: 9pt
}

.itop {
/* Forum Übersicht -> Überschrift sei: Forum, Themen, Beiträge, letze Nachricht, Moderator */


background-image:url(https://files.homepagemodules.de/b86053/f60t133p1506n4.png);
height:29px;
font-size: 10pt;
font-weight: bold;
vertical-align:middle;
background-color: #FFFF00;
/*

background-color: #FE0000; /*Hintergrundfarbe von s.u.*/
color: #FFFF00; /*Schriftfarbe von Forum Übersicht -> "Forum" "Beiträge" "Themen" "Letzter Beitrag"*/
text-align: center;
vertical-align: bottom;
*/
}

.icats {
/* Forum Übersicht -> Kategorie */
/* background-color: #FE0000;
font-size: 11pt;
font-weight: bold;
color: #FE0000; */


background-image:url(https://files.homepagemodules.de/b86053/f60t133p1506n5.png);
height:29px;
font-size: 10pt;
font-weight: bold;
vertical-align:center;
background-color: #FE0000;
}

.icats a {
/* Forum Übersicht -> Kategorie-Link */
text-decoration: none;
color: #FFFF00; /* Forum Übersicht Farbe der Kategorien*/
}

.cent {
/* Forum Übersicht -> center */
text-align: center;
}

.ifo1 {
/* Forum Übersicht -> Forum style 1 */
background-color:#0603CE; /*Farbe für Spalte 1+3+5 (unter Beiträge und Letzter Beitrag) */
color: #FFFF00;
/* text-align: center; */
}

.ifo1 A {
/* Forum Übersicht -> Forum style 1 - Link */
color: #6CF8F7; /*Farbe des Links für Spalte 1+3+5 */
}

.ifo2 {
/* Forum Übersicht -> Forum style 2 */
background-color:##1380FF; /*Farbe für Spalte 2+4 (unter Fourm und Themen) */
color: #FFFF00;
/* text-align: center; */
}

.ifo2 A {
/* Forum Übersicht -> Forum style 2 - Link */
color: #4DF5FE; /*Farbe Link in Spalte 2+4 */
}



.ifos {
/* Forum Übersicht -> kleine Schrift */
font-size:8pt;
}

.iau0 {
/* Forum Übersicht -> Aktive User zeile 1 */
background-color: #1151FB; /*Hintergrundfarbe bei Aktive User */
font-weight: bold;
color: #FFFF00; /*Schriftfarbe*/
}

.iau0 A {
color: #4421FF; */Farbe des "neusten Mitgliedes"*/
}

.iaus {
/* Forum Übersicht -> Aktive User Satz: 10 Mitglieder, 5 Gäste Online */
font-size: 9pt;
font-weight: normal;
}

.iau1 {
/* Forum Übersicht -> Aktive User zeile 2 mit Liste der aktiven User */
background-color: #0001FC;
color: #FE0000;
}

.ftop {
background-color: #FE0000;
color: #02FD7A;
font-weight: bold;
background-image:url(https://files.homepagemodules.de/b86053/f60t133p1506n4.png);
height:29px;
font-size: 10pt;
font-weight: bold;
vertical-align:middle;
background-color: #FE0000;

}
/*Schriftfarbe "Neues Thema erstellen" */
.ftop a {
color: #FFFE00;
}

.fopt {
background-color: #0000FE */Feld hinter "Forum-Informationen*/
font-size:9pt;
color: #F970F2;
}

.fopt a {
color: #FFFF00; */ Farbe der Schrift "Forum-Informtion" und "als gelesen makieren"*/
}

.fwha {
background-color: #E80A09;*/unbekannt*/
color: #E80A09;
font-weight:bold;
}

.fwha td {
background-color: #0138C8; */Hintergrundfarbe von " Betreff Absender Antworten Hits Letzter Beitrag"*/
font-weight:bold;
color: #FBFC1C;

}

.fth1 {
background-color: #0266F8; */Spaltenfarbe 1+3+5 (z.B. "Absender" und "Hits")*/
color: #FFFF00;
}

.fth2 {
background-color: #0407D2; */Spaltenfarbe 2+4+6 (z.B. "Betreff" "Antworten" und "Letzter Beitrag")*/
color: #0407D2;
}

.fths {
font-size: 18pt;
}

.fbot {
background-color: #4218FE; */Hintergrundfarbe hinter "Sprung"- erste Ebene */
color: #FFFF00;
}

.fbot A,select {
background-color: #4218FE; */Feld um "Sprung" herum - erste Ebene*/
color: #6504A1;
}

.fbot input {
background-color: #00E61C; */unbekannt*/
font-size:10;
color: #00E61C;
/* border-width:1px */
}

.ttop {
background-color: #0000FE; */Farbe hinter "Sortierung" in einer Kategorie*/
color: #FFFF00;
font-weight: bold;
}

.ttop a {
color: #FFFF00; */Text wie "Sortierung:*/
}

.tnex {
background-color: #3487FD; */Übersicht der Beiträge Hintergrund des Betreffs und unten Hintergrund wo die Seiten aufgezählt werden 0,1,2 etc */
color: #3487FD;
}

.tbei {
background-color: #CCCCCC; */unbekannt*/
color: #FE0000;
font-weight: bold;
}

.tms1 {
background-color: #0266F8; */Spaltenfarbe Kategorie */
color: #0266F8;
}
.tms1 a {
color: #FFFF00; */Benutzernamenfarbe*/
}

.tms2 {
background-color: #6896F8 */unbekannt*/
color: #000000;
}
.tms2 a {
color: #6896F8; */Hintergrund des Threadtextes in der Kategorie*/
}

.tms3 {
background-color: #1F0793; */unbekannt*/
color: #34FDDB;
}
.tms3 a {
color: #0A03B3; */unbekannt*/
}

.tms4 {
background-color: #F8F8F8; */unbekannt*/
color: #000000;
}
.tms4 a {
color: #5B22FD; */unbekannt*/
}

.tbot {
background-color: #F584F6; */unbekannt*/
color: #FA59F5;
font-weight: bold;
/* border-width:1px */
}
.tbot a {
color: #C402AE; */unbekannt*/
}
.tbot input,select {
font-weight: normal
}

.tmss {
font-size: 8pt;
font-weight: normal
}

.tmst {
font-size:11pt;
text-align: center;
}

.tare {
color: #FFFF00; /* | vor "Admin" und Co */
text-align: center;
vertical-align: bottom
}

.tarea {
color: #FFFF00; /*Farbe der Links wie: "Admin" "Forum Übersicht" */
font-weight: bold
}

.thin {
color: #79F8E3 */Farbe von: "Willkommen 'Name'*/
/* vertical-align: bottom */
}

.tbhi {
color: #1EF9FD; */Footer-Textfarbe*/
text-align: center;
vertical-align: bottom
}

.tsmt {
color: #4DD9FD; */Farbe von "Dieses Board hat x Mitglieder y Beiträge & z Themen" */
font-size: 8pt
}



Hoffe der Beitrag ist nun nicht zu lang - oder hätte ich es als Anhang rein machen sollen?


 Antworten

 Beitrag melden
04.08.2007 17:12
avatar  Dome
#2 RE: CSS-Code mit Hinweiskommentar + Frage
Do
Mitglied

Ich habe die Stelle gefunden - wenn Interesse besteht stelle ich wenn ich den Code komplett haben nochmal hier rein.


 Antworten

 Beitrag melden
04.08.2007 18:34
avatar  Vitalis
#3 RE: CSS-Code mit Hinweiskommentar + Frage
avatar
Profi

falls Sie lange Codes einstellen wollen, ist zu empfehlen, dass Sie diese entweder via. Dateianhang in eine TXT-Datei packen, oder hier sichtbar in ein <pre>-container stopfen:

zb:

[pre] ihr Code [/pre]


 Antworten

 Beitrag melden
04.08.2007 20:19
avatar  Dome
#4 RE: CSS-Code mit Hinweiskommentar + Frage
Do
Mitglied

Danke für ihren Hinweis. Wird nicht mehr passieren.

Hier noch mal eine Überarbeitung:
(So sieht es aus)

 BODY {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
background-color: #0E07A5; /*Haupthintergrund*/
color: #FFFF00; /*Schriftfarbe im Header und Footer */
text-align: center
}

TD,TR {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #FFFF00; /*Schrift wie "Forum" "Beiträge" "Themen" "Letzter Beitrag" */
}

INPUT,SELECT,TEXTAREA {
/* border-width:1px; */
color: #000000; /*Buttonschriftfarbe wie z.B. "Alles makieren" */
}

A {
color: #FFFF00; /* Unterstrichfarbe wie bei "Forum Übersicht" */
}
HR {
margin-top: 5px;
margin-bottom: 5px;
}
BLOCKQUOTE {
margin-right: 0px;
margin-bottom: 0px;
margin-left: 30px;
}
.ntit {
/* z.b. bei der Suche die Überschrift */
background-image:url(https://files.homepagemodules.de/b86053/f60t133p1506n4.png);
height:29px;
font-size: 10pt;
font-weight: bold;
vertical-align:middle;
background-color: #1A0A6C;
}
.ntit a {
color: #01C5F9; /* Wie "Ihre Schreibrechte" */
}
.ntop {
/* Die zweite Überschriftszeile wie bei den Privaten Mails */
height:29px;
font-size: 10pt;
font-weight: bold;
vertical-align:middle;
background-color: #59C2FB;
}
.ntop a {
color: #083D81; /*Farbe von z.B. "Eintrag löschen" im Gästebuch*/
}

.ntop td {
/* same */
background-color: #160893; /*Werbetext unter Beiträgen - Farbe*/
color: #160893; /*Werbetext unter Beiträgen - Rahmen*/
}
.nnor {
/* jeweils der mittlere Bereich bei der Suche, der FAQ, der Einstellungen u.s.w.+ Hintergrund auf dem man schreibt (Neuer Beitrag) */
background-color: #0000FE;
color: #FFFF00;
}
.nnor a {
color: #3EF5FD; /*Linkfarbe in Beiträgen*/
}

.nnor td {
/* same */
background-color: #0B0BAB; /* Hintergrundfarbe bei Beitrag schreiben //Hintergrundfläche von "Benutzername" */
color: #FFFF00; /*Schriftfarbe wie "Benutzername"*/
}
.nnor input,select,textarea {
/* Form Elemente in diesem Bereich, auch Textfeld bei neuem Beitrag */
background-color: #00FFFF; /*Buttonfarbe und Hintergrundfarbe bei des Eingabefensters vom Betreff */
color: #000000; /*Schriftfarbe*/
}
.nnos {
/* kleiner Text im mittlerem Bereich */
font-size: 9pt
}

.itop {
/* Forum Übersicht -> Überschrift sei: Forum, Themen, Beiträge, letze Nachricht, Moderator */


background-image:url(https://files.homepagemodules.de/b86053/f60t133p1506n4.png);
height:29px;
font-size: 10pt;
font-weight: bold;
vertical-align:middle;
background-color: #FFFF00;
/*

background-color: #FE0000; /*Hintergrundfarbe von s.u.*/
color: #FFFF00; /*Schriftfarbe von Forum Übersicht -> "Forum" "Beiträge" "Themen" "Letzter Beitrag"*/
text-align: center;
vertical-align: bottom;
*/
}

.icats {
/* Forum Übersicht -> Kategorie */
/* background-color: #FE0000;
font-size: 11pt;
font-weight: bold;
color: #FE0000; */


background-image:url(https://files.homepagemodules.de/b86053/f60t133p1506n5.png);
height:29px;
font-size: 10pt;
font-weight: bold;
vertical-align:center;
background-color: #FE0000;
}

.icats a {
/* Forum Übersicht -> Kategorie-Link */
text-decoration: none;
color: #FFFF00; /* Forum Übersicht Farbe der Kategorien*/
}

.cent {
/* Forum Übersicht -> center */
text-align: center;
}

.ifo1 {
/* Forum Übersicht -> Forum style 1 */
background-color: #0A02B7; /*Farbe für Spalte 1+3+5 (unter Beiträge und Letzter Beitrag) */
color: #FFFF00;
/* text-align: center; */
}

.ifo1 A {
/* Forum Übersicht -> Forum style 1 - Link */
color: #6CF8F7; /*Farbe des Links für Spalte 1+3+5 */
}

.ifo2 {
/* Forum Übersicht -> Forum style 2 */
background-color:##1380FF; /*Farbe für Spalte 2+4 (unter Fourm und Themen) */
color: #FFFF00;
/* text-align: center; */
}

.ifo2 A {
/* Forum Übersicht -> Forum style 2 - Link */
color: #4DF5FE; /*Farbe Link in Spalte 2+4 */
}



.ifos {
/* Forum Übersicht -> kleine Schrift */
font-size:8pt;
}

.iau0 {
/* Forum Übersicht -> Aktive User zeile 1 */
background-color: ##0A02B7; /*Hintergrundfarbe bei Aktive User */
font-weight: bold;
color: #FFFF00; /*Schriftfarbe*/
}

.iau0 A {
color: #3AF5FE; */Farbe des "neusten Mitgliedes"*/
}

.iaus {
/* Forum Übersicht -> Aktive User Satz: 10 Mitglieder, 5 Gäste Online */
font-size: 9pt;
font-weight: normal;
}

.iau1 {
/* Forum Übersicht -> Aktive User zeile 2 mit Liste der aktiven User */
background-color: #0A02B7;
color: #FE0000;
}

.ftop {
background-color: #FE0000;
color: #4FFBEB; */ "Pfeile neben "Neues Themaerstellen" und Schriftfarbe der Kategorie*/
font-weight: bold;
background-image:url(https://files.homepagemodules.de/b86053/f60t133p1506n4.png);
height:29px;
font-size: 10pt;
font-weight: bold;
vertical-align:middle;
background-color: #FE0000;

}
/*Schriftfarbe "Neues Thema erstellen" */
.ftop a {
color: #FFFE00;
}

.fopt {
background-color: #0000FE */Feld hinter "Forum-Informationen*/
font-size:9pt;
color: #F970F2;
}

.fopt a {
color: #FFFF00; */ Farbe der Schrift "Forum-Informtion" und "als gelesen makieren"*/
}

.fwha {
background-color: #E80A09;*/unbekannt*/
color: #E80A09;
font-weight:bold;
}

.fwha td {
background-color: #0138C8; */Hintergrundfarbe von " Betreff Absender Antworten Hits Letzter Beitrag"*/
font-weight:bold;
color: #FBFC1C;

}

.fth1 {
background-color: #0266F8; */Spaltenfarbe 1+3+5 (z.B. "Absender" und "Hits")*/
color: #FFFF00;
}

.fth2 {
background-color: #0407D2; */Spaltenfarbe 2+4+6 (z.B. "Betreff" "Antworten" und "Letzter Beitrag")*/
color: #0407D2;
}

.fths {
font-size: 8pt; /*Größe der Schrift die z.B. die Seiten zählt */
}

.fbot {
background-color: #4218FE; */Hintergrundfarbe hinter "Sprung"- erste Ebene */
color: #FFFF00;
}

.fbot A,select {
background-color: #4218FE; */Feld um "Sprung" herum - erste Ebene*/
color: #6504A1;
}

.fbot input {
background-color: #00E61C; */unbekannt*/
font-size:10;
color: #00E61C;
/* border-width:1px */
}

.ttop {
background-color: #0000FE; */Farbe hinter "Sortierung" in einer Kategorie*/
color: #FFFF00;
font-weight: bold;
}

.ttop a {
color: #FFFF00; */Text wie "Sortierung:*/
}

.tnex {
background-color: #3487FD; */Übersicht der Beiträge Hintergrund des Betreffs und unten Hintergrund wo die Seiten aufgezählt werden 0,1,2 etc */
color: #3487FD;
}

.tbei {
background-color: #CCCCCC; */unbekannt*/
color: #FE0000;
font-weight: bold;
}

.tms1 {
background-color: #0266F8; */Spaltenfarbe Kategorie */
color: #0266F8;
}
.tms1 a {
color: #FFFF00; */Benutzernamenfarbe*/
}

.tms2 {
background-color: #6896F8 */unbekannt*/
color: #000000;
}
.tms2 a {
color: #6896F8; */Hintergrund des Threadtextes in der Kategorie*/
}

.tms3 {
background-color: #1F0793; */unbekannt*/
color: #34FDDB;
}
.tms3 a {
color: #0A03B3; */unbekannt*/
}

.tms4 {
background-color: #F8F8F8; */unbekannt*/
color: #000000;
}
.tms4 a {
color: #5B22FD; */unbekannt*/
}

.tbot {
background-color: #0069F3; */"Sprung" Hintergrund Ebene 2*/
color: #FFFF00;
font-weight: bold;
/* border-width:1px */
}
.tbot a {
color: #FFFF00; */"Sprung" Ebene2 Schrift*/
}
.tbot input,select {
font-weight: normal
}

.tmss {
font-size: 8pt;
font-weight: normal
}

.tmst {
font-size:11pt;
text-align: center;
}

.tare {
color: #FFFF00; /* | vor "Admin" und Co */
text-align: center;
vertical-align: bottom
}

.tarea {
color: #FFFF00; /*Farbe der Links wie: "Admin" "Forum Übersicht" */
font-weight: bold
}

.thin {
color: #79F8E3 */Farbe von: "Willkommen 'Name'*/
/* vertical-align: bottom */
}

.tbhi {
color: #1EF9FD; */Footer-Textfarbe*/
text-align: center;
vertical-align: bottom
}

.tsmt {
color: #4DD9FD; */Farbe von "Dieses Board hat x Mitglieder y Beiträge & z Themen" */
font-size: 8pt
}


Kann man so was "auf klappbar" machen?


 Antworten

 Beitrag melden
13.08.2007 15:24 (zuletzt bearbeitet: 13.08.2007 15:25)
avatar  Dome
#5 RE: CSS-Code mit Hinweiskommentar + Frage
Do
Mitglied
Ich habe gerade gemerkt, dass ich ein paar Kommentare falsch geschrieben habe und dies wollte ich hier nicht so stehn lassen. Deswegen hab ich im Anhang die überarbeitete "Version".

Dateianhänge

 Antworten

 Beitrag melden
13.08.2007 17:20
#6 RE: CSS-Code mit Hinweiskommentar + Frage
Te
Mitglied

Ähm,jaa! Das hab ich auch gemerkt!*lol*
Aber leider zu spät!*grins*

Gruß vom Teufel0815


 Antworten

 Beitrag melden
17.12.2007 15:24
#7 RE: CSS-Code mit Hinweiskommentar + Frage
avatar
Mitglied

das nenn ich doch mal Fleissarbeit.

was'n Glück, dass ich grad geplant hatte, sowas auch zu machen.
Spart ja wieder ne Menge Arbeit *lol*

Dankeschön an den Verfasser ;)


 Antworten

 Beitrag melden
01.09.2008 23:50 (zuletzt bearbeitet: 01.09.2008 23:50)
avatar  Dome
#8 RE: CSS-Code mit Hinweiskommentar + Frage
Do
Mitglied
Könnte hier vielleicht fehlendes ergänzen - vielleicht sogar jemand von HPM?
Wäre echt super, wenn die CSS-Datei zu jedem einen Kommentar hätte was für was ist.
Es ist echt ein Krampf das alles selbst auszuprobieren und immer zu schauen wo sich was tut :D

Gruß
Dome


 Antworten

 Beitrag melden
02.09.2008 08:37
#9 RE: CSS-Code mit Hinweiskommentar + Frage
op
Mitglied

Ich hab mir dafür mühsam eine Datei mit Screenshots angelegt, die ich entsprechend beschriftet habe, hätte ich doch nur gewartet *lol*

LG optimist

 Antworten

 Beitrag melden
02.09.2008 09:05
avatar  doku
#10 RE: CSS-Code mit Hinweiskommentar + Frage
do
Mitglied

Einfach dieses Addon (Firebug) im Firefox installieren. Damit lässt sich jede Webseite analysieren und zeigt auch die zuständigen CSS-Classes. Spart viel Arbeit... ;-)

https://addons.mozilla.org/de/firefox/addon/1843


 Antworten

 Beitrag melden
03.09.2008 10:11
avatar  Dome
#11 RE: CSS-Code mit Hinweiskommentar + Frage
Do
Mitglied

Danke für den super Tipp mit Firebug. Allergings wäre es sicherlich für viele eine Bereicherung, wenn im CSS-Code Kommentare der einzelnen Codeabschnitte wäre. Dies würde zudem auch der Vielseitigkeit der HPM-Foren gut tun :)


 Antworten

 Beitrag melden
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!