Grafik neben Stats-Block anzeigen

[Puppe]

Hallo,

ich hätte gerne auf der Forenübersicht ganz unten, wo die Forenstatistiken angezeigt werden (war war online etc.) auf der linken Seite daneben eine Grafik. Wo genau muss ich diese einbauen und wie schaffe ich es, dass sie linksbündig vor den Textblöcken von den statistischen Inhalten angezeigt wird?

[Crizzo]

Hi,

für diese Statistiken sind folgende HTML-Element verantwortlich:

Code: Alles auswählen

<div class="stat-block online-list">
<div class="stat-block birthday-list">
<div class="stat-block statistics">

Das Hintergrundbild, also die Grafik, kannst du per CSS einbinden. Einfach für die entsprechende Klasse eine CSS-Regel schreiben (in deinem Style in colours.css o.ä. ergänzen). Zum Beispiel:

Code: Alles auswählen

.online-list {
background-image: url(bild.jpg);
padding-left: 100px; 
}

http://www.thestyleworks.de/ref/background-image.shtml

Das padding verschafft dir den nötigen Platz.

Grüße

[Puppe]

Vielen Dank, ich versuche es mal.

[Puppe]

Ich habe jetzt *nur* das colours.css verändert, mehr, als dass sich ausschliesslich der Bereich who is online verschoben hat, ist aber nicht passiert.
Muss ich die Grafik noch irgendwo anders einfügen? Die Blöcke Geburtstage, Statistik und (durch eine Extension) Top Posters sind nicht verschoben. Tut mir leid, aber ich brauche immer etwas ausführlichere Erklärungen, in welcher Datei ich was genau verändern muss...

[Talk19zehn]

Hallo erst einmal, Stylename und die Downloadquelle des Styles wäre hilfreich.

Was passiert, wenn du die Grafik dem Verzeichnispfad theme/images zuführst und diese Anweisung (siehe obigen Ansatz) nutzt?

Auszug(!):

Code: Alles auswählen

	background-image: url("./images/deinegrafik.jpg");

LG

P.S.:
deinegrafik.jpg --> bitte austauschen gegen den tatsächlich verwendeten Namen und das Format bitte anpassen. Das "padding-left" muss zumindest die Breite deiner Grafik haben.

Ich habe allerdings so einen Verdacht, der obendrein relevant sein kann ....

Grüße

[Lehrling]

Welchen Style verwendest du denn?

[Puppe]

Ich benutze den prosilver.
Das ganze sieht, wenn ich den Pfad des image angebe immer noch so aus:

externer Link zum Screenshot

Habe bisher im colours.css die Änderung mit der online-list vorgenommen, jetzt mit dem image direkt im Verzeichnis.

[Crizzo]

Hi,

im Ordner styles/<deinstylename>/theme ist ein Ordner images. Dort kopierst du deine Grafik rein.

Deine CSS-Datei sollte dann ergänzt worden sein um die beiden CSS-Regeln:

Code: Alles auswählen

.stat-block {
padding-left: 50px;
}
.online-list {
background-image: url("./images/deinegrafik.jpg");
}

Hast du das so? Geht das?

Grüße

[Talk19zehn]

Hi, der Vorschlag funktioniert zwar unter dem Argument, dass einbackground-repeat: no-repeat; im Einsatz ist.

Code: Alles auswählen

.online-list {
background-image: url("./images/meinbild.gif");
background-repeat: no-repeat;
}

Aber: .stat-block hat im Standard ein clear: both;. Das macht sich von Fall zu Fall je nach Grafik nicht wirklich immer gut.

Ich würde eher im Template selbst einen Container --> floaten, die Standardklassen in dem Falle nicht oder nur geändert nutzen?

LG

[Crizzo]

Wenn die Grafik über die volle Höhe der drei Statistik-Boxen gehen soll, kommt man nicht drumherum, um diese drei <div>-Elemente in index.html ein weitere <div>-Element zu lesen und diesem die Hintergrundgrafik zu geben.