Prosilver - ucp.php

[seemann1965]

Hallo,
wo und wie kann ich im Styles "prosilver" in der Freundeliste die Buttons "Hinzufügen",
gleichmäßig anordnen, ähnlich wie in "subsilver", oder siehe Bild.
Angenehme Festtage!!!

[ externes Bild ]

Gruß seemann

[seemann1965]

Hat den keiner ne Idee?
Frohe Restfeiertage!

[ externes Bild ]

Gruß seemann

[modernist]

Quick and dirty (und ungetestet) für prosilver.

Suche in der template/ucp_header.html

Code: Alles auswählen

				<dt>{L_FRIENDS}</dt>

				<!-- BEGIN friends_online -->
					<dd class="friend-online" title="{L_FRIENDS_ONLINE}">{friends_online.USERNAME_FULL} <!-- IF S_SHOW_PM_BOX --> <input type="submit" name="add_to[{friends_online.USER_ID}]" value="{L_ADD}" class="button2" /><!-- ENDIF --><!-- IF friends_online.S_LAST_ROW and .friends_offline --><hr /><!-- ENDIF --></dd>
				<!-- END friends_online -->

				<!-- BEGIN friends_offline -->
					<dd class="friend-offline" title="{L_FRIENDS_OFFLINE}">{friends_offline.USERNAME_FULL} <!-- IF S_SHOW_PM_BOX --><input type="submit" name="add_to[{friends_offline.USER_ID}]" value="{L_ADD}" class="button2" /><!-- ENDIF --></dd>
				<!-- END friends_offline -->
			</dl>

Ersetze es mit

Code: Alles auswählen

				<dt>{L_FRIENDS}</dt>

				<!-- BEGIN friends_online -->
					<dd class="friend-online" title="{L_FRIENDS_ONLINE}"><span class="left">{friends_online.USERNAME_FULL}</span> <!-- IF S_SHOW_PM_BOX --> <span class="right"><input type="submit" name="add_to[{friends_online.USER_ID}]" value="{L_ADD}" class="button2" /></span><!-- ENDIF --><!-- IF friends_online.S_LAST_ROW and .friends_offline --><hr /><!-- ENDIF --></dd>
				<!-- END friends_online -->

				<!-- BEGIN friends_offline -->
					<dd class="friend-offline" title="{L_FRIENDS_OFFLINE}"><span class="left">{friends_offline.USERNAME_FULL}</span> <!-- IF S_SHOW_PM_BOX --><span class="right"><input type="submit" name="add_to[{friends_offline.USER_ID}]" value="{L_ADD}" class="button2" /></span><!-- ENDIF --></dd>
				<!-- END friends_offline -->
			</dl>

Im CSS lege zwei Klassen fest:

Code: Alles auswählen

.left {float: left;}
.right {float: right;}

Aber das wird wohl eh nur bei kurzen Usernamen etwas bringen.

[Talk19zehn]

Hallo modernist, Seemann1965 und @ All,

ich hatte eine Idee und komme leider nicht voran und frage bei euch nach. Ließe sich jenes Beispiel ggf. alternativ anwenden? Und, wenn ja, wie muss ich es einbauen?

Letztes Beispiel auf folgender Seite:
http://de.selfhtml.org/html/text/listen.htm

Code: Alles auswählen

<dl style="font-size:0.7em; font-family:Verdana,Arial,sans-serif">
  <dt>AA</dt>
  <dd>Auto Answer (Modem)</dd>
  <dt>AAE</dt>
  <dd>Allgemeine Anschalte-Erlaubnis</dd>
  <dt>AARP</dt>
  <dd>Appletalk Address Resolution Protocol</dd>
</dl>

Kürzen auf:

Code: Alles auswählen

<dd>Auto Answer (Modem)</dd>
  <dt>AAE</dt>

Code: Alles auswählen

<dd>Username</dd>
  <dt>Button</dt>

Vorstellung: Im Ergebnis wäre der Button um eine Zeile nach unten versetzt und eingerückt. Ich finde die richtige Position innerhalb der ursprünglichen Anweisung nicht wirklich, um es korrekt auszugeben.

Viele Grüße

[seemann1965]

Hallo modernist,
habs gleich mal getestet, geht, aber ist leider nicht ausreichend, wenn man die Größe des Boards ändert gibts ein wahlloses durcheinander.
Schade.

[ externes Bild ]

Gruß seemann

[modernist]

Auf die Schnelle könnte man an passender Stelle zwei Zeilenumbrüche hinzufügen, dann sind die Buttons auch besser getrennt:

Code: Alles auswählen

                <dt>{L_FRIENDS}</dt>

                <!-- BEGIN friends_online -->
                   <dd class="friend-online" title="{L_FRIENDS_ONLINE}"><span class="left">{friends_online.USERNAME_FULL}</span> <!-- IF S_SHOW_PM_BOX --> <span class="right"><input type="submit" name="add_to[{friends_online.USER_ID}]" value="{L_ADD}" class="button2" /></span><!-- ENDIF --><br /><br /><!-- IF friends_online.S_LAST_ROW and .friends_offline --><hr /><!-- ENDIF --></dd>
                <!-- END friends_online -->

                <!-- BEGIN friends_offline -->
                   <dd class="friend-offline" title="{L_FRIENDS_OFFLINE}"><span class="left">{friends_offline.USERNAME_FULL}</span> <!-- IF S_SHOW_PM_BOX --><span class="right"><input type="submit" name="add_to[{friends_offline.USER_ID}]" value="{L_ADD}" class="button2" /></span><!-- ENDIF --><br /><br /></dd>
                <!-- END friends_offline -->
             </dl>

Das sah zumindest in meinem lokalen Testforum besser aus und der Validator hat auch nichts dagegen. Besonders elegant ist die Lösung zwar nicht, aber sie funktioniert.

Merkwürdig ist allerdings, daß der die Schrift im Button nun kursiv erscheint und daß beim Hover sich der Buchstabenabstand vergrößert, dabei ist die Klasse button2 gleich geblieben.

[modernist]

Um das Problem mit den Buttons zu lösen, muß man einfach jeweils die Klasse friend-online/offline verschieben (von dd nach span):

Code: Alles auswählen

			<dl class="mini">
                <dt>{L_FRIENDS}</dt>

                <!-- BEGIN friends_online -->
                   <dd title="{L_FRIENDS_ONLINE}"><span class="friend-online left">{friends_online.USERNAME_FULL}</span> <!-- IF S_SHOW_PM_BOX --> <span class="right"><input type="submit" name="add_to[{friends_online.USER_ID}]" value="{L_ADD}" class="button2" /></span><!-- ENDIF --><br /><br /><!-- IF friends_online.S_LAST_ROW and .friends_offline --><hr /><!-- ENDIF --></dd>
                <!-- END friends_online -->

                <!-- BEGIN friends_offline -->
                   <dd title="{L_FRIENDS_OFFLINE}"><span class="friend-offline left">{friends_offline.USERNAME_FULL}</span> <!-- IF S_SHOW_PM_BOX --><span class="right"><input type="submit" name="add_to[{friends_offline.USER_ID}]" value="{L_ADD}" class="button2" /></span><!-- ENDIF --><br /><br /></dd>
                <!-- END friends_offline -->
             </dl>

[seemann1965]

Hallo modernist,
werde es nachher testen und melde mich dann wieder,
muss erst mal wech Familie geht vor.

Gruß seemann

[Talk19zehn]

Prosilver - ucp_header.html Button "Hinzufügen" versetzen


Hello modernist, Seemann1965 und @ All,

zunächst danke ich für den vorherigen Tipp vom modernisten, der mir bei meiner Suche geholfen hat. Eine andere Idee, die einen "Zeilenumbruch" bewirkt und den Button in einer neuen Zeile rechtsbündig ausgibt. Der Vorschlag würde nun lauten: Den Button "Hinzufügen" lediglich mittels HTML anzusprechen. Die Zeile nach dem Usernamen zu schließen, eine neue Zeile zu öffnen, den Button rechtsbündig ausgeben. Optisch auch ganz schön. Kann keine Fehler in der Darstellung feststellen ( auch nicht beim Zoomen ). Es wird kein Fehler seitens der Validierung ausgegeben ---> dies kann ja bekanntlich von Fall zu Fall anders ausfallen. Es wäre nett, wenn ihr das Konstrukt - vorsichtig angefragt - ausprobiert und ein Feedback geben könntet.

Code: Alles auswählen

<!-- BEGIN friends_online -->
					<dd class="friend-online" title="{L_FRIENDS_ONLINE}">{friends_online.USERNAME_FULL} <!-- IF S_SHOW_PM_BOX --></dd><dd style="text-align:right"> <input type="submit" name="add_to[{friends_online.USER_ID}]" value="{L_ADD}" class="button2" /><!-- ENDIF --><!-- IF friends_online.S_LAST_ROW and .friends_offline --><hr /><!-- ENDIF --></dd>
				<!-- END friends_online -->

				<!-- BEGIN friends_offline -->
					<dd class="friend-offline" title="{L_FRIENDS_OFFLINE}">{friends_offline.USERNAME_FULL} <!-- IF S_SHOW_PM_BOX --></dd><dd style="text-align:right"> <input type="submit" name="add_to[{friends_offline.USER_ID}]" value="{L_ADD}" class="button2" /><!-- ENDIF --></dd>
				<!-- END friends_offline -->
			</dl>

Ergebnis: [ externes Bild ]

Viele Grüße




PS.: Ich bin nicht fehlerlos und danke für Hinweise

[modernist]

@ Talk19zehn

Deine Lösung ist dann die elegantere. Noch eleganter wird's, wenn man eine Klasse im CSS definiert:

Code: Alles auswählen

.buttonucp {text-align:right; margin-top: -18px; padding-bottom: 4px;}

Ggf. muß man die px-Werte für margin und padding anpassen; in meinem Testforum sieht's so allerdings am besten aus und Name und Button sind nebeneinander.

Und dann entsprechend:

Code: Alles auswählen

<!-- BEGIN friends_online -->
               <dd class="friend-online" title="{L_FRIENDS_ONLINE}">{friends_online.USERNAME_FULL} <!-- IF S_SHOW_PM_BOX --></dd><dd class="buttonucp"> <input type="submit" name="add_to[{friends_online.USER_ID}]" value="{L_ADD}" class="button2" /><!-- ENDIF --><!-- IF friends_online.S_LAST_ROW and .friends_offline --><hr /><!-- ENDIF --></dd>
            <!-- END friends_online -->

            <!-- BEGIN friends_offline -->
               <dd class="friend-offline" title="{L_FRIENDS_OFFLINE}">{friends_offline.USERNAME_FULL} <!-- IF S_SHOW_PM_BOX --></dd><dd class="buttonucp"> <input type="submit" name="add_to[{friends_offline.USER_ID}]" value="{L_ADD}" class="button2" /><!-- ENDIF --></dd>
            <!-- END friends_offline -->

Nachteil bei dieser Variante ist, daß bei großer Schrifteinstellung oder langen Namen, die Namen abgeschnitten werden bzw. sich die Buttons über den Namen legen. Nun ja, der Platz ist halt ein wenig eingeschränkt...