Post Profile mit Backgroundimage

[Greyhound76]

Guten Morgen beisammen.

Ich bastel grade an einem Style und ich würde ganz gern das Postprofile mit einem Backgroundimage hinterlegen, siehe Image ...

[ externes Bild ]

... nun hab ich aber das Problem das sich nicht alle Infos in dieser Box befinden und die Sachen die sich drin befinden überschreiten das Image je nach Grösse. Auch das Avatar ist genau am Rand des Images ... obwohl ich das Ganze lieber mit etwas Abstand versehen möchte. Doch nun weiss ich da nicht mehr weiter und stecke fest ...

Mein aktueller Ausschnitt aus der css ...

Code: Alles auswählen

/* Poster profile block
----------------------------------------*/
.postprofile {
	color: #8A6363;
	background-image: url("http://xxxxxxxxx/styles/prosilver_se/theme/images/profilebg.png");
	background-repeat: no-repeat;
	border-left-color: #FFFFFF;
}

.rtl .postprofile {
	border-right-color: #FFFFFF;
	border-left-color: transparent;
}

.pm .postprofile {
	border-left-color: #DDDDDD;
}

.rtl .pm .postprofile {
	border-right-color: #DDDDDD;
	border-left-color: transparent;
}

.postprofile strong {
	color: #513131;
}

.online {
	background-image: url("{IMG_ICON_USER_ONLINE_SRC}");
}

... wer kann mir da weiterhelfen?

Style: prosilver_se
Download: http://demo.phpbb3styles.net/prosilver+Special+Edition

[Talk19zehn]

Hi Greyhound76,

ich würde die content.css bearbeiten wollen:

suche:

Code: Alles auswählen

.postprofile {
	/* Also see tweaks.css */
	margin: 5px 0 10px 0;
	min-height: 80px;
	color: #666666;
	border-left: 1px solid #FFFFFF;
	width: 22%;
	float: right;
	display: inline;
}

und füge in jene Notation bitte (phpBB-konform) ein und teste gegebenenfalls:

background: #unterer Farbwert der Grafik url("http://www.excample.com/deinverzeichnis/deinegrafik.gif") repeat-x;

BTW: Nur auf die Schnelle und ungetestet....

Beste Grüße

[Miriam]

Also mein CSS sieht so:

Code: Alles auswählen

.postprofile {
    /* Also see tweaks.css */
    margin: 5px 0 10px 0;
    padding: 5px 0;
    min-height: 80px;
    color: #666666;
    background-color: white;
    width: 22%;
    float: right;
    display: inline;
    border-radius: 8px; 
    -moz-border-radius: 8px; 
    -webkit-border-radius: 8px; 
    border: 1px solid #aca8a1;
    -webkit-box-shadow: 2px 2px 1px #888888;
    -moz-box-shadow: 2px 2px 1px #888888;
    box-shadow: 2px 2px 1px #888888; 
}

und so

Code: Alles auswählen

.postprofile {
    color: #666666;
    border-left-color: #aca8a1;
}

aus.

Das ergibt dann:
Klick

[Talk19zehn]

Hello, klar lediglich eine Hintergrundfarbe anstatt eines Bildes ginge natürlich ebenso in der Anwendung.

Ggf. mittels "rgba", "border-radius", "box-shadow" und padding erneut definiert: "CSS3-Browserwelten" vorausgesetzt...
Anderenfalls ist´s halt eckig anstatt rund. Padding von oben, hier 6px, ist grundsätzlich für kleinere Auflösungen zu überprüfen. --> Beachte bitte: --> Höhere "Aufmaße" könn(t)en einen Umbruch ergeben!

CSS-Datei: siehe im obigen Posting

Code: Alles auswählen

.postprofile {
	/* Also see tweaks.css */
	margin: 5px 0 10px 0;
	min-height: 80px;
	color: #666666;
	border-left: 1px solid #FFFFFF;
	background: none no-repeat scroll 0 0 rgba(250, 250, 250, 0.7);
	border-radius: 10px 5px 10px 10px;
	box-shadow: -2px 4px 3px 0 rgba(2, 2, 2, 0.7);
	padding: 6px 0 12px;
	width: 22%;
	float: right;
	display: inline;
}

Grüße