+- MyBB.de Forum (https://www.mybb.de/forum)
+-- Forum: Anpassungen (https://www.mybb.de/forum/forum-47.html)
+--- Forum: Theme-Diskussionen (https://www.mybb.de/forum/forum-84.html)
+--- Thema: Hintergrundbild in Beiträgen (/thread-6867.html)
Hintergrundbild in Beiträgen - Zwoetzen - 24.08.2007
Hi alle zusammen,
ist es möglich, in jeden Beitrag eine kleine Hintergrundgrafik (150*100px) einzubinden?
Zur Demonstration hab ich die Grafik mal hier reingebastelt, so sollte es dann eben aussehen, nur dass sie eben als Hintergrund ist und der Text links daneben (und übendrüber) verläuft.
Ich habe es zwar schon hinbekommen, die Grafik einzubinden, allerdings wurde sie immer unten abgeschnitten, wenn ein Beitrag nur aus 1 oder 2 Zeilen bestand.
Würde mich über Tipps freuen
MfG zwoetzen
RE: Hintergrundbild in Beiträgen - krafdi - 24.08.2007
Füge an der Stelle bei der du das Bild eingefügt hast beim <td> einfach ein height="150" ein.
RE: Hintergrundbild in Beiträgen - Zwoetzen - 24.08.2007
Danke für diesen Tip, allerdings hab ich jetzt das Problem, dass der Inhalt des Beitrages nicht mehr am oberen Rand sondern in der Mitte steht (siehe Screenshot).
Hier mal das, was ich geändert hab:
Template: postbit (Auszug) - Änderung ist das class="postbgimage"
PHP-Code:
<tr>
<td class="{$altbg}" width="15%" valign="top" style="white-space: nowrap; text-align: center;"><a name="pid{$post['pid']}" id="pid{$post['pid']}"></a>
{$post['user_details']}
</td>
<td class="{$altbg}" width="85%" valign="top">
<table width="100%">
<tr><td class="postbgimage">{$post['posturl']}{$post['icon']}<span class="smalltext"><strong> {$post['subject']}</strong></span>
<br />
<div id="pid_{$post['pid']}">
<p>
{$post['message']}
//und so weiter (sonst keine Änderungen)
Zusätzliches CSS im Theme:
Code:
.postbgimage {
background-image: url(images/background.png);
background-repeat: no-repeat;
background-position: right 32px;
height: 150px;
}RE: Hintergrundbild in Beiträgen - krafdi - 24.08.2007
Da bin ich mir jetzt nicht sicher ob das geht, aber füge mal bei deiner zusätzlichen CSS text-align: top; ein.
RE: Hintergrundbild in Beiträgen - Zwoetzen - 24.08.2007
Hab ich schon probiert, ändert leider nix an dem Problem
RE: Hintergrundbild in Beiträgen - linwinman - 24.08.2007
Hallo Zwoetzen,
hilft es dir, wenn du den
PHP-Code:
<tr><td class="postbgimage">{$post['posturl']}{$post['icon']}<span class="smalltext"><strong> {$post['subject']}</strong></span>
<br />
<div id="pid_{$post['pid']}">
<p>
{$post['message']}
PHP-Code:
<tr><td>{$post['posturl']}{$post['icon']}<span class="smalltext"><strong> {$post['subject']}</strong></span>
<br />
<div id="pid_{$post['pid']}">
<p class="postbgimage">
{$post['message']}
Dies sieht dann so aus (s. Anhang).
RE: Hintergrundbild in Beiträgen - Zwoetzen - 24.08.2007
Danke linwinman, genau das hab ich gebraucht. Jetzt wirds so angezeigt, wie ich es wollte
EDIT:
Mir ist leider grad ein anderer Fehler aufgefallen:
Und zwar gehen jetzt die Smileys (eigentlich der gesamte Inhalt des Beitrages) übder die Beitragsgrenzen hinaus in den darauffolgenden Beitrag.
Siehe dazu dieses Thema: *Link entfernt*
Wenn ich die Class aus dem <p>-Tag entferne ist es wieder normal, also muss es daran liegen.
Hat jemand ne Lösung für das Problem?
MfG zwoetzen
EDIT 2: Im IE sind die Beiträge abgeschnitten, im Firefox haben sie "Überlänge" (also überlappen sich)
EDIT3: Problem gelöst.
Da war noch ein "height: 150px" im CSS, nach entfernen wird wieder alles normal angezeigt
RE: Hintergrundbild in Beiträgen - Zwoetzen - 25.08.2007
Hab mich zu früh gefreut: Leider besteht das Problem immernoch (hatte gestern nicht nochmal genau geschaut).
Also nochmal zum mitschreiben:
Wenn ich im Zusätzlichen CSS das "height: 150px" hinschreibe, wird das Bild komplett angezeigt, allerdings geht der Inhalt der Beiträge dann über die Grenzen hinaus in den nächsten Beitrag hinein. (Dadurch nicht mehr leserlich, da sie sich eben überlappen)
Wenn ich es aus dem CSS entferne, wird das Hintergrundbild wieder abgeschnitten, sobald der Beitrag nur aus ein oder zwei Zeilen besteht.
Hat jemand noch einen Lösungsansatz?
PS: Sorry für Doppelpost
RE: Hintergrundbild in Beiträgen - linwinman - 25.08.2007
Hallo Zwoetzen,
ich weiß nicht, ob es dir weiter hilft - hier ist noch ein anderer Ansatz (wurde mit "IE 7", "FF 2" und "Opera 9.2x" getestet und sollte funkt.).
Im Templater "postbit" den (Original-)
Code:
<tr>
<td class="{$altbg}" width="15%" valign="top" style="white-space: nowrap; text-align: center;"><a name="pid{$post['pid']}" id="pid{$post['pid']}"></a>
{$post['user_details']}
</td>
<td class="{$altbg}" width="85%" valign="top">
<table width="100%">
<tr><td>{$post['posturl']}{$post['icon']}<span class="smalltext"><strong> {$post['subject']}</strong></span>
<br />
<div id="pid_{$post['pid']}">
<p>
{$post['message']}
</p>
</div>
...Code:
<tr>
<td class="{$altbg}" width="15%" valign="top" style="white-space: nowrap; text-align: center;"><a name="pid{$post['pid']}" id="pid{$post['pid']}"></a>
{$post['user_details']}
</td>
<td class="{$altbg}" width="85%" valign="top">
<table width="100%">
<tr><td>{$post['posturl']}{$post['icon']}<span class="smalltext"><strong> {$post['subject']}</strong></span>
<br />
<div id="pid_{$post['pid']}">
<p>
<img id="bgimg" src="images/bg-img.png" border="0" alt="" />
{$post['message']}
</p>
</div>
...In "Theme / Zusätzliches CSS" den
Code:
#bgimg {
width: 100px;
height: 87px;
border: 1px solid #000;
float: right;
margin: 0px 15px 15px 15px;
}Hierbei wird das Bild vom Text umflossen. Das Ergebnis hängt noch 'mal unten dran.
RE: Hintergrundbild in Beiträgen - Zwoetzen - 25.08.2007
Danke, das funktioniert prima
(Ich musste nur im img-tag noch ein align="right" einfügen, da sonst das Bild immer links angezeigt wurde.Als netten Nebeneffekt, der aber eigentlich nicht weiter schlimm ist, wird das Bild auch in den Zitaten und Codeboxen etc. angezeigt (falls diese eben weit genug oben stehen).
Im Anhang mal das Bild dazu.
Aber wie gesagt, find ich gar nicht so schlimm, das lass ich so
Da kann ich auch jetzt bissl Transparenz rausnehmen, da der Text ja nicht mehr drüberläuft
Danke für deine Hilfe Linwinman