Profilfelder, Abstand und Hintergrundzelle

[Joel-Gnitter]

Hi,

ich würde gerne den Abstands des Profils von Links nach Rechts etwas vergrößern,
ebenso eine Hintergrundzelle einfügen mit einem Hintergrundbild.

Bisher sieht das ganze so aus
http://img.xrmb2.net/images/374100.png

und so wäre schön wenn es aussieht.
http://img.xrmb2.net/images/343454.png

Hat jemand schon so einen Code gebaut?

Liebe Grüße

Joel

[Talk19zehn]

Hello Joel-Gnitter,

siehe content.css (Prosilver)

Code: Alles auswählen

.postprofile dd, .postprofile dt {
    line-height: 1.2em;
    margin-left: 8px;
}

du nutzt linksseitige Profile und ich gehe davon aus, dass diese Änderung einem Standardtutorial entspricht. Ändere hier bspw. das margin-left und beachte dabei u.a. die Größe der bei dir verwendeten Avatare und Inhaltsangaben im Miniprofil, um einen ungewollten Umbruch der Zeilen bzw. eine Überlappung mit dem Beitragsinhalt möglichst zu vermeiden.

Viele Grüße

[Joel-Gnitter]

Hi,

ich glaube dann habe ich etwas kaputt gemacht.
diese Stylesheets habe ich angepasst doch es passiert leider nichts.
Also nahm ich firebug und schaute was die Anordnung regelt

und dies scheint lediglich

Code: Alles auswählen

* {
    margin: 0;
    padding: 0;
}

im Stylesheet zu erzeugen.


Der Code scheint dieser zu sein

Code: Alles auswählen

		
 
         <dt>
 
 
				<a href="./memberlist.php?mode=viewprofile&u=55"><img src="./download/file.php?avatar=55_1327893250.jpg" width="84" height="84" alt="Benutzeravatar" /></a><br />
				<a href="./memberlist.php?mode=viewprofile&u=55" style="color: #663333;" class="username-coloured">Deex</a>
			</dt>
 
			<dd>Community<br /><img src="./images/ranks/admin.png" alt="Community" title="Community" /></dd>
 
		<dd>&nbsp;</dd>
 
		
 
		</dl>
	
 
		<span class="corners-bottom"><span></span></span></div>
	</div>
 
	<hr class="divider" />
 
<div id="p106" class="post bg1">
		<div class="inner"><span class="corners-top"><span></span></span>
 
		<div class="postbody">

Nun muss ich scheinbar erstmal schauen warum das ganze Profilfeld keinen eigenen Style besitzt.

[Talk19zehn]

Hi, ob du etwas "kaputt" gemacht hast, entzieht sich meiner Kenntnis. Theme aktualisiert? Browser und Seitenaufruf aktualisiert?

Bedenke, wenn generelle Angaben fehlen, ist eine Hilfe nur bedingt möglich.

Viele Grüße

[Joel-Gnitter]

Okay dank dir,

ich habe natürlich Präzisiere Informationen.
Derzeit möchte ich das Profilfeld so anordnen (Ich habe da gestern noch einen Gender Mod eingefügt)

http://img.xrmb2.net/images/231808.png

Oben ist das wie es jetzt ist
und unten wie ich es gerne anorden würde.

Mein Template sieht derzeit so aus:
viewtopic_body.html
https://www.phpbb.de/support/pastebin.p ... view&s=959

Liebe Grüße

Joel

[Talk19zehn]

Hello,
ich gebe zu bedenken, dass sich je Profilangaben andere Lösungsansätze als der Folgenden ergeben können. Darunter fallen bspw. die Avatargröße, Angabe zum Wohnort etc..
Bevor du beginnst, überprüfe bitte deine Änderungen, da sich m.E. ein Fehler eingeschlichen hat. Die Einleitung <dd> der Listendefinition, die nach {postrow.POSTER_GENDER_IMG}</dd> geschlossen ist, fehlt in deiner bereitgestellten Datei: Ich zitiere mal ausnahmsweise...

https://www.phpbb.de/support/pastebin.p ... view&s=959
<!-- IF not postrow.S_IGNORE_POST -->

<dt>
<!-- IF postrow.POSTER_AVATAR -->
<!-- IF postrow.U_POST_AUTHOR --><a href="{postrow.U_POST_AUTHOR}">{postrow.POSTER_AVATAR}</a><!-- ELSE -->{postrow.POSTER_AVATAR}<!-- ENDIF --><br /><br />
<!-- ENDIF -->
<!-- IF not postrow.U_POST_AUTHOR --><strong>{postrow.POST_AUTHOR_FULL}</strong><!-- ELSE -->{postrow.POST_AUTHOR_FULL} <!-- IF postrow.POSTER_GENDER -->{postrow.POSTER_GENDER_IMG}</dd><!-- ENDIF --><!-- ENDIF -->
</dt>

<!-- IF postrow.RANK_TITLE or postrow.RANK_IMG --><dd>{postrow.RANK_TITLE}<!-- IF postrow.RANK_TITLE and postrow.RANK_IMG --><br /><!-- ENDIF -->{postrow.RANK_IMG}</dd><!-- ENDIF -->

<dd>&nbsp;</dd>

*Siehe auch bei Bedarf zum Thema Listengestaltung: http://de.selfhtml.org/html/text/index.htm
Daher gehe ich von dem Original der viewtopic_body.html der 3.0.10-Version von Prosilver aus.


content.css Am Ende diese Klasse hinzugefügt: sie bewirkt, dass der Text rechts mit einem Abstand zum Bild von 10px ausggegeben wird.

Code: Alles auswählen

.linksavatar {
float: left;
margin-right: 10px;
} 

viewtopic_body.html
Suche:

Code: Alles auswählen

		<!-- IF not postrow.S_IGNORE_POST -->
			<dl class="postprofile" id="profile{postrow.POST_ID}">
			<dt>
				<!-- IF S_USER_LOGGED_IN and not S_IS_BOT-->
				<!-- IF postrow.POSTER_AVATAR -->
				<!-- IF postrow.U_POST_AUTHOR --><a href="{postrow.U_POST_AUTHOR}">{postrow.POSTER_AVATAR}</a><!-- ELSE -->{postrow.POSTER_AVATAR}<!-- ENDIF --><br />
				<!-- ENDIF -->
				<!-- ENDIF -->
				<!-- IF not postrow.U_POST_AUTHOR --><strong>{postrow.POST_AUTHOR_FULL}</strong><!-- ELSE -->{postrow.POST_AUTHOR_FULL}<!-- ENDIF -->
			</dt>

			<!-- IF postrow.RANK_TITLE or postrow.RANK_IMG --><dd>{postrow.RANK_TITLE}<!-- IF postrow.RANK_TITLE and postrow.RANK_IMG --><br /><!-- ENDIF -->{postrow.RANK_IMG}</dd><!-- ENDIF -->

		<dd>&nbsp;</dd>

Finde:

Code: Alles auswählen

<!-- IF postrow.U_POST_AUTHOR --><a href="{postrow.U_POST_AUTHOR}">{postrow.POSTER_AVATAR}</a><!-- ELSE -->{postrow.POSTER_AVATAR}<!-- ENDIF --><br />

Ersetze:

Code: Alles auswählen

<!-- IF postrow.U_POST_AUTHOR --><a href="{postrow.U_POST_AUTHOR}" class="linksavatar">{postrow.POSTER_AVATAR}</a><!-- ELSE -->{postrow.POSTER_AVATAR}<!-- ENDIF --><br />

Finde:

Code: Alles auswählen

<!-- IF not postrow.U_POST_AUTHOR --><strong>{postrow.POST_AUTHOR_FULL}</strong><!-- ELSE -->{postrow.POST_AUTHOR_FULL}<!-- ENDIF -->
</dt>

Ersetze:

Code: Alles auswählen

<!-- IF not postrow.U_POST_AUTHOR --><strong>{postrow.POST_AUTHOR_FULL}</strong><!-- ELSE -->{postrow.POST_AUTHOR_FULL}<!-- ENDIF --><br />

Finde:

Code: Alles auswählen

<!-- IF postrow.RANK_TITLE or postrow.RANK_IMG --><dd>{postrow.RANK_TITLE}<!-- IF postrow.RANK_TITLE and postrow.RANK_IMG --><br /><!-- ENDIF -->{postrow.RANK_IMG}</dd><!-- ENDIF -->

Ersetze:

Code: Alles auswählen

<!-- IF postrow.RANK_TITLE or postrow.RANK_IMG -->{postrow.RANK_TITLE}<!-- IF postrow.RANK_TITLE and postrow.RANK_IMG --><br /><!-- ENDIF -->{postrow.RANK_IMG}<!-- ENDIF -->
			</dt>

Deine Modifikation bitte hierin erneut entsprechend der Anleitung ergänzen.

Geänderter Bereich insgesamt: Nur zur Kontrollansicht

Code: Alles auswählen

		<!-- IF not postrow.S_IGNORE_POST -->
			<dl class="postprofile" id="profile{postrow.POST_ID}">
			<dt>
				<!-- IF S_USER_LOGGED_IN and not S_IS_BOT-->
				<!-- IF postrow.POSTER_AVATAR -->
				<!-- IF postrow.U_POST_AUTHOR --><a href="{postrow.U_POST_AUTHOR}" class="linksavatar">{postrow.POSTER_AVATAR}</a><!-- ELSE -->{postrow.POSTER_AVATAR}<!-- ENDIF --><br />
				<!-- ENDIF -->
				<!-- ENDIF -->
				<!-- IF not postrow.U_POST_AUTHOR --><strong>{postrow.POST_AUTHOR_FULL}</strong><!-- ELSE -->{postrow.POST_AUTHOR_FULL}<!-- ENDIF --><br />

			<!-- IF postrow.RANK_TITLE or postrow.RANK_IMG -->{postrow.RANK_TITLE}<!-- IF postrow.RANK_TITLE and postrow.RANK_IMG --><br /><!-- ENDIF -->{postrow.RANK_IMG}<!-- ENDIF -->
			</dt>

			<dd>&nbsp;</dd>

Weitere Lösungsansätze sind denkbar. Insbesondere bei der *Listengestaltung. Persönlich würde ich jedoch nicht vom Standard abweichen wollen bzw. bedenke, dass die Höhe/Breite der Avatare relevant ist. Ob sich dein Vorhaben daher realisieren ließe? Es klappt zwar alles in allem auch in geringeren Auflösungen in meinem Falle. Die Avatare sollten eine Größe von 90x90px ( mein Fall ) nicht überschreiten. Dein Board ist jedoch schmaler, wie ich lediglich deiner Grafik entnehmen kann. Viele Grüße

Edit: Hier noch ein Hinweis: viewtopic.php?p=1242075#p1242075

[Joel-Gnitter]

Wow, ich bin dir sehr Dankbar.

Leider bin ich kein Entwickler sondern übernehme halt dieses und jenes wenn es daran hapert, daher habe ich auch wenig ahnung der codes.
Ich habe sowas immer mit Dreamweaver mit Tabellen erstellt und da diese Templates anders aufgebaut sind und mir gesagt wurde das ich auf Tabellen verzichten solle stellt so eine änderung schon eine massive herrausforderung da.

Ich werde dich auf jedenfall für die Hilfe bei uns in den Credits erwähnen =)

So und nun versuche ich deine Anleitung umzusetzen und melde mich dann zurück.

Dankeschön

PS: Ja das stimmt es ist prosilver, das hätte ich mit angeben sollen.


Nachtrag:

Super es hat funktioniert, vielen dank damit bin ich schonmal etwas näher an meiner vorstellung eines hübschen Styles
http://img.xrmb2.net/images/475440.png

Ich habe da noch ein wenig das Padding-Top eingestellt und die Corners etwas nach unten gezogen, sowie ein bisschen farbe in den Hintergrund gefügt.

Dankeschön =)

[Talk19zehn]

Hello Joel-Gnitter, in meinem Falle ergibt sich ein sauber abgegrenztes Profil "ohne Versatz" der "runden Ecken". Ist dies nun in deinem Falle so gewollt?
Nun gut, - wenn du die Darstellung derart gestaltet hast, dass sie laut deinem Bild tatsächlich so erfolgen soll, ist ja alles OK. Anderenfalls kontrolliere deine (Ver)Änderungen bitte nochmals.

Viele Grüße

[Joel-Gnitter]

Also von der anordnung sollte es so sein nur wäre es möglich das ich wirklich da Fehler eingebaut habe.

Der Code sieht derzeit so aus.
viewtopic_body.html
https://www.phpbb.de/support/pastebin.p ... view&s=971

Nun hat sich jedoch wonanders ein Problem aufgezeigt, ich habe phpBB jQuery Base 0.0.1 als Mod eingebaut und der verlangt das viewtopic template nochmal in der jquery base_header. Wenn ich nun per Quick Reply auf antworten gehe fehlen die Signaturen Mm.

(beispiel http://img.xrmb2.net/images/799431.png)
jquery_base_header.html
https://www.phpbb.de/support/pastebin.p ... view&s=972

[Talk19zehn]

Hello Joel-Gnitter,

das hier zur Verfügung gestellte Bild

...(...)... Nachtrag:

http://img.xrmb2.net/images/475440.png

Ich habe da noch ein wenig das Padding-Top eingestellt und die Corners etwas nach unten gezogen, sowie ein bisschen farbe in den Hintergrund gefügt.

...(...)...

zeigte jenen "Versatz".

Bildlich kann ich diesen Anzeigefehler nun nicht nachvollziehen.


M.E. hat das neue Problem nichts mit der Änderung der Listengestaltung in jenem Bereich zu tun. Wenn sich ein neues Problem nach dem Einbau einer Modifikation zeigt, eröffne bitte einen neues Thema, sofern du keinen Lösungsansatz in der Suche gefunden und den Einbau bereits kontrolliert hast. Editiere bitte sodann hier den letzten Beitrag. Die Vermischung von Themen ist nicht ganz so gut.

Viele Grüße