phpBB.de

Verfasst: **25.12.2010 18:11**

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

Verfasst: **26.12.2010 18:23**

Hat den keiner ne Idee?
Frohe Restfeiertage!

[ externes Bild ]

Gruß seemann

Verfasst: **26.12.2010 21:02**

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.

Verfasst: **26.12.2010 22:05**

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

Verfasst: **26.12.2010 23:39**

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

Verfasst: **27.12.2010 09:28**

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.

Verfasst: **27.12.2010 10:09**

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>

Verfasst: **27.12.2010 13:34**

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

Gruß seemann

Verfasst: **27.12.2010 16:57**

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

Verfasst: **27.12.2010 17:19**

@ 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...

phpBB.de

Prosilver - ucp.php

Prosilver - ucp.php

Re: Prosilver - ucp.php

Re: Prosilver - ucp.php

Re: Prosilver - ucp.php

Re: Prosilver - ucp.php

Re: Prosilver - ucp.php

Re: Prosilver - ucp.php

Re: Prosilver - ucp.php

Re: Prosilver - ucp_header.html Button "Hinzufügen" versetze

Re: Prosilver - ucp.php