Seite 1 von 2

Grafik neben Stats-Block anzeigen

Verfasst: 13.01.2016 00:19
von 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?

Re: Grafik neben Stats-Block anzeigen

Verfasst: 13.01.2016 19:14
von 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

Re: Grafik neben Stats-Block anzeigen

Verfasst: 14.01.2016 01:52
von Puppe
Vielen Dank, ich versuche es mal. :)

Re: Grafik neben Stats-Block anzeigen

Verfasst: 14.01.2016 04:27
von 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... :oops:

Re: Grafik neben Stats-Block anzeigen

Verfasst: 14.01.2016 13:55
von 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 .... :wink:

Grüße

Re: Grafik neben Stats-Block anzeigen

Verfasst: 14.01.2016 14:20
von Lehrling
Welchen Style verwendest du denn?

Re: Grafik neben Stats-Block anzeigen

Verfasst: 14.01.2016 19:12
von 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.

Re: Grafik neben Stats-Block anzeigen

Verfasst: 14.01.2016 20:13
von 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

Re: Grafik neben Stats-Block anzeigen

Verfasst: 14.01.2016 20:57
von 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

Re: Grafik neben Stats-Block anzeigen

Verfasst: 14.01.2016 20:59
von 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.