Internet Forum / Hilfen für Einsteiger in HPM Foren

Grafik innerhalb der Foren-Tabelle

#1 von BOo°m , 07.01.2006 09:19

Grafik als Hintergrund in Tabelle einfügen






<style type="text/css">
.icats {
background-image:url(http://www.DeinPfadZuDeinemVerlauf.png);
}
</style>

Dieses wird in Admin --> Layout --> Header&Footer im Header eingetragen !

Die Namen für den entsprechenden Teil der Tabelle (Tabellen Element) findet man in :
Admin --> Layout --> Farbe&Schrift.

Wichtig !!
Bevor man die Tabellennamen sehen kann muss man unter Admin --> Layout --> Farb&Schrift [Konfig]
den Punkt oben in Ich möchte direkt die CSS Datei hacken (für Profis) setzen und speichern nicht vergessen.
Dann muss man desweiteren 2x auf den Menüpunkt rechts daneben Farbe & Schrift klicken. Wichtig ist das man das 2x macht. Vor einiger Zeit wurde geraten erst einmal das Admin-Menue zu verlassen damit die Einstellung wirksam wird das ist aber nicht nötig.
Der direkt Link zur CSS Datei ist also Admin --> Layout --> Farbe&Schrift., dort sieht man nun die CSS-Datei in Reinform (nix für Anfänger!). In dieser CSS-Datei wird auch nichts geändert, sie dient nur dazu die Namen für die einzelnen Tabellenelemente herauszubekommen. Sicherlich kann man dort etwas ändern aber das sollten wirklich nur eingeweihte Admins machen die wissen was sie dort machen.


 
BOo°m
Administrator
Beiträge: 1.991
Registriert am: 27.11.2005

zuletzt bearbeitet 09.05.2007 | Top

RE: Grafik innerhalb der Tabelle

#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)


 
BOo°m
Administrator
Beiträge: 1.991
Registriert am: 27.11.2005

zuletzt bearbeitet 24.05.2007 | Top

Grafik innerhalb der Tabelle transparent

#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;
}


 
BOo°m
Administrator
Beiträge: 1.991
Registriert am: 27.11.2005

zuletzt bearbeitet 22.05.2006 | Top

   

Anzeige von mehreren Seiten in Themenübersi
Homepagemodules Standardbilder





Powered by Forum Hosting  
Xobor Forum Software von Xobor
Einfach ein eigenes Forum erstellen