Standard Template » Grafik innerhalb der Foren-Tabelle

#1 von BOo°m , 07.01.2006 09:19

Grafik als Hintergrund in Tabelle einfügen

#2 von BOo°m , 15.01.2006 04:27

Ein Beispiel wie ein Header im Layout aussehen könnte

Die meisten wollen erst mal nur einen großen Text über Ihrem Board
<span style="color: #FF3300;">
<h1>Hier kannst Du eine tolle Überschrift für Dein Forum eingeben</h1>

Ein kleinerer Text darunter kann sich auch bewegen

<br><marquee direction="left"><big> Dieser Text wird von rechts nach links gescrollt....... und groß dargestellt.....</big></marquee>
</span>

Ein Hintergrund sieht fast immer ganz nett aus.....
<BODY background="http://www.Dein Bild.de/deinBild.jpg" bgproperties="fixed">

Selbsterklärend.....
<style>
a:hover {
/* Farbdefinition für die Farbe die LINKS annehmen wenn man mit der Maus darüber fährt*/
color: #FF6A38
}
</style>

Hier beginnen die Variablennamen (werden "Classes" genannt) der Zellenteile in welche Hintergrundgrafiken eingefügt werden können. Es müssen nicht alle Namen im Header stehen nur diejenigen die auch wirklich benötigt werden. Die Zeilen in ROT müssen immer vorhanden sein, dazwischen kommen dann die CSS Anweisungen.
Die hier beschriebene Vorhergehensweise ist nur eine Möglichkeit. Man kann diese Sachen natürlich auch direkt in der CSS verändern und muss es nicht zwingend im Layout-Header realisieren. Einerseits ist es Geschmackssache andererseits hat beides Vor und Nachteile.

<style type="text/css">

pre {
/* Erweiterung für den Pre-Befehl ! */
width:90%; height:100%; overflow:auto; border:0px solid; margin:0px; padding:0px
}

.itop {
/* Oberste Tabellenzeile vom Forum -> Überschrift sei: Forum, Themen, Beiträge, letze Nachricht, Moderator */
background-image:url(http://www.Dein-Bild.jpg);
font-family: "Italic", Arial, Helvetica, ;
font-size: 12pt;
}

.ntit {
/* z.b. bei der Suche die Überschrift */
background-image:url(http://www.Dein-Bild.jpg);
}

.ntop {
/* Die zweite Überschriftszeile wie bei den Privaten Mails */
background-image:url(http://www.Dein-Bild.jpg);
}

.ntop td {
/* same */
background-image:url(http://www.Dein-Bild.jpg);
}

.nnor {
/* jeweils der mittlere Bereich bei der Suche, der FAQ, der Einstellungen, Werbung u.s.w. */
background-image:url(http://www.Dein-Bild.jpg);
}

.nnor td {
/* same */
background-image:url(http://www.Dein-Bild.jpg);
}

.nnor input,select,textarea {
/* Form Elemente in diesem Bereich, auch Betreff-Textfeld bei neuem Beitrag */
background-image:url(http://www.Dein-Bild.jpg);
}

.nnos {
/* kleiner Text im mittlerem Bereich */
background-image:url(http://www.Dein-Bild.jpg);
}

.icats {
/* Forum Übersicht -> Kategorie */
background-image:url(http://www.Dein-Bild.jpg);
}

.icats a {
/* Forum Übersicht -> Kategorie-Link */
background-image:url(http://www.Dein-Bild.jpg);
}

.ifo1 {
/* Forum Übersicht -> Forum style 1 - Aussenfelder */
background-image:url(http://www.Dein-Bild.jpg);
}

.ifo2 {
/* Forum Übersicht -> Forum style 2 - Foren-Link-Felder */
background-image:url(http://www.Dein-Bild.jpg);
}

.iau0 {
/* Forum Übersicht -> Aktive User zeile 1 - zeile unten */
background-image:url(http://www.Dein-Bild.jpg);
color: #FFECB3;
}

.iaus {
/* Forum Übersicht -> Aktive User Satz: 10 Mitglieder, 5 Gäste Online */
background-image:url();
}

.iau1 {
/* Forum Übersicht -> Unterste Zeile die eingeloggte User anzeigt */
background-image:url(http://www.Dein-Bild.jpg);
}

.ftop {
/* Themenübersicht angeklickte Kategorie Zeile 1 -> Neues Thema erstellen */
background-image:url(http://www.Dein-Bild.jpg);
}

.fopt {
/* Themenübersicht angeklickte Kategorie Zeile 2 -> Forum Information */
background-image:url(http://www.Dein-Bild.jpg);
}

.fwha {
/* Themenübersicht Zeile 2 - NUR sichtbar wenn Themenliste über 1 Seite lang und "weiter"auftaucht */
background-image:url(http://www.Dein-Bild.jpg);
color: #FFECB3;
}

.fwha td {
/* Themenübersicht Zeile 3 -> Betreff-Absender-Antworten-Letzter-Beitrag */
background-image:url(http://www.Dein-Bild.jpg);
color: #FFFFA3;
}

.fth1 {
/* Themenlinks in Themenübersicht -> Spalte 1 , Spalte Absender , Spalte Hits */
background-image:url(http://www.Dein-Bild.jpg);
color: #fff599;
}

.fth2 {
/* Themenlinks in Themenübersicht -> Spalten Betreff, Antworten, Letzter Beitrag */
background-image:url();
color: #004F9E;
}

.fbot {
/* Themenlinks -> Letzte Spalte */
background-image:url(http://www.Dein-Bild.jpg);
}

.fbot A,select {
/* Themenlinks -> Letzte Spalte Sprung-Link */
background-image:url();
}

.fbot input {
/* was auch immer */
background-image:url(http://www.Dein-Bild.jpg);
}

.ttop {
/* Themenansicht erste Zeile -> Themenname-Sortierung-Flat-Threaded */
background-image:url(http://www.Dein-Bild.jpg);
}

.tnex {
/* Themenansicht zweite und untere Zeile -> wenn Thema mehrere Seiten hat */
background-image:url(http://www.Dein-Bild.jpg);
color: #fff599;
}

.tbei {
/* keine Ahnung */
background-image:url();
}

.tms1 {
/* Themenhintergrund in den Avatarfeldern */
background-image:url(http://www.Dein-Bild.jpg);
color: #fff599;
}

.tms2 {
/* Themenhintergrund in den Beitragsfeldern ! */
background-image:url(http://www.Dein-Bild.jpg);
}

.tms3 {
/* Keine Ahnung ! */
background-image:url();
}

.tms4 {
/* Keine Ahnung ! */
background-image:url();
}

.tbot {
/* Letzte Abschlusszeile in Themenansicht */
background-image:url(http://www.Dein-Bild.jpg);
}

</style>

Come as You are...... (Nirvana)

#3 von BOo°m , 22.05.2006 14:08

Teile der Tabelle transparent machen
Wer das bereits Gesagte soweit verstanden hat dürfte mit dieser Hilfe klarkommen.....

Befehl:

background-color: transparent;

Anwendungsbeispiel:

.iau0 {
/* Forum Übersicht -> Aktive User zeile 1 - zeile unten */
background-image:url();
background-color: transparent;
}

Beiträge:	1.991
Registriert am:	27.11.2005

Beiträge:	1.991
Registriert am:	27.11.2005

Beiträge:	1.991
Registriert am:	27.11.2005

Standard Template » Grafik innerhalb der Foren-Tabelle

Grafik innerhalb der Foren-Tabelle

RE: Grafik innerhalb der Tabelle

Grafik innerhalb der Tabelle transparent