[phpBB2] Wechselschalter - Template - Button

Huhu, ich bins wieder mit meinem CSS und Template Code.
Ich hatte ja gestern schon gefragt, ob man für die "Profilbuttons" e-mail Schicken und Website das im Template extra benennen müsste und als es hieße ja, habe ich mich dran gesetzt.

Ich habe es jetzt jeweils als id sowie als class probiert. Ging beides nicht, was mache ich falsch?
Im Template habe ich die richtige Stelle gefunden
viewtopic_body ->

Code:

 {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG} <!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG}

das ist die Stelle

Um das für den e-mail button zu verändern muss ich mir

Code:

{postrow.displayed.EMAIL_IMG}

herausnehmen und den "bearbeiten".

So ich habe folgenden css erstellt: (ich nehm mal die id version, class müsste ja eig genauso funktionieren nur mit . statt #)

Code:

#email {display : block;
background-image: url(http://i12.servimg.com/u/f12/17/43/29/62/email10.png);
height:52px; /*Höhe des Bildes */
width:104px; /*Breite des Bildes*/}

dann hab ich sie als erstes so eingefügt:

Code:

<img id="email" style="{postrow.displayed.EMAIL_IMG}" />

das bild wird nun angezeigt, ist so positioniert, dass aus dem einzeiligen Code plötzlich 3 geworden sind und es sich in der Mitte befindet, außerdem ist ein Teil des Codes in der nächsten Zeile vor WWW noch zu sehen. (

screen:

)

meine Zweite Idee war folgende

Code:

<a href="{postrow.displayed.EMAIL_IMG}" style="{postrow.displayed.EMAIL_IMG}" id="email"/>

weil ich ja die Funktion, die

Code:

{postrow.displayed.EMAIL_IMG}

ausübt nicht einbüßen will.
Hier ist zwar alles wieder in einer Zeile, das Bild dafür nonexistent, und der Link auch, aber ein teil des Codes aus dem Template ist zu sehen. (

screen:

)

Schließlich, hab ich mir überlegt, beide Varianten zu verbinden um vielleicht auf das gewünschte Ergebnis zu kommen:

Code:

<a href="{postrow.displayed.EMAIL_IMG}"><img id="email" style="http://2img.net/i/fa/empty.gif" /></a>

Was wieder zu dem Ergebnis von 1 führt allerdings ist diesmal der Code in der oberen Zeile.
(

screen:

)

Frage ist, wie bekomm ich es hin, dass das bild verlinkt ist wie normal und es angezeigt wird, in einer Zeile, so wie normal, nur über css?? Ich wäre echt dankbar, wenn ihr mir sagen könntet, was ich falsch mache :/
<3333 Im Voraus für die Hilfe
glG Ray


#Edit nur wenn jemand zeit hat mir zu helfen ich würde mich freun ansonsten versuh ichs selbst nochmal wird schon klappen iwie...

Hallo,

du machst hier einen grundlegenden Fehler: Du siehst dir nicht an bzw. überlegst dir nicht, welchen HTML-Code die Variable exakt von der Datenbank abfragt und ausgibt.

Wenn du die Variable so einbindest...

Code:

<img id="email" style="{postrow.displayed.EMAIL_IMG}" />

...müsste eine CSS-Eigenschaft (nicht mehr und nicht weniger) durch die Variable ausgegeben werden. Kannst du dir irgendwie vorstellen, dass das der Fall ist? Dann würde im Originalzustand dort im Quellcode eine einzelne CSS-Eigenschaft ohne jegliche Auswirkung stehen und kein verlinkter Button...

Dann behandelst du sie so, als ob sie eine URL ausgeben würde (nicht mehr oder weniger, sondern nur eine URL wie www.google.de ):

Code:

<a href="{postrow.displayed.EMAIL_IMG}" style="{postrow.displayed.EMAIL_IMG}" id="email"/>

Dann würde im Originalzustand für diese Variable nur eine URL angezeigt werden - kein Link und schon gar kein Button...

Verstehst du nun, welchen Fehler du gemacht hast? Du hattest überhaupt nicht nachgesehen, für welchen Code diese Variable überhaupt sorgt und wie du dann mit diesem Code umgehen musst.
Wenn du darüber nachdenkst, dann wird klar: Die Variable {postrow.displayed.EMAIL_IMG} muss eine verlinkte Grafik als HTML-Code ausgeben, weil nur dadurch möglich ist, dass die Variable zu dem E-Mail-Button führt.

Also öffnest du Firebug und siehst dir das auch nochmal in der Praxis an:

Und tatsächlich siehst du, dass die Variable einen HTML-Code in diesem Schema ausgibt - also eine verlinkte Grafik:

Code:

<a href="/profile?mode=email&u=1">
<img title="E-Mail senden" alt="E-Mail senden" src="http://2img.net/i/fa/subsilver/icon_email.gif">
</a>

Von einer CSS-Eigenschaft oder einer einzelnen URL ist das doch weit entfernt, oder?
Das bedeutet: Wir können diese Variable nicht direkt in ein anderes Element als Wert (style/href/...) integrieren, sondern wir können sie nur von einem übergeordneten Element umschließen lassen. Dazu bietet sich ein span-Element mit Klasse an:

<span class="mail_button">{postrow.displayed.EMAIL_IMG}</span>

Ich hoffe, du siehst durch meine Erklärung nun selbst, dass es keine andere Möglichkeit gibt, diese Variable in einen zusätzlichen HTML-Code zu integrieren.

Inzwischen setzen wir in der Bilderverwaltung ("Buttons") die Leergrafik ein, damit wir dann mit CSS das Hintergrundbild mittels Wechselstyle einsetzen können.

Wie sieht der Code durch diese Änderung im Quelltext aus? Das kannst du wieder mit Firebug überprüfen. Dabei sehen wir gleich, dass wir nun die Grafik (Leergrafik) direkt ansprechen können, weil sie nun die span-Klasse mail_button besitzt, mit der wir sie gerade umschlossen haben.
Der Rest ergibt sich in einfachster Weise daraus:



Ich hoffe, ich konnte dir die Vorgangsweise nun etwas deutlicher machen, die du für alle Templateänderungen in Bezug auf Variablen benötigst. Zusammengefasst:

1. Welchen HTML-Code gibt die Variable ganz genau in den Quellcode aus?
   
2. Wie kann man mit diesem HTML-Code umgehen? In den meisten Fällen ist es nur möglich, ihn mit einem span-/div-Element zu umschließen und diesem Element eine Klasse oder ID zuzuweisen.
   
3. Durch die umgebende Klasse oder ID kann das Element, das sich anstelle der Variable im Quellcode befindet, nun ganz einfach angesprochen werden. Firebug schlägt dir sogar selbst schon die passende Zuweisung vor (z.B. .klassenname element { ... } ).

Liebe Grüße
Günther

Ja, doch, mir war klar, dass da mehr dahinter stecken muss, allerdings hatte ich es gestern auch mit einer <div ...> funktion versucht, was allerdings ebenfalls nicht den gewünschten effekt hatte, weil das bild zwar angezeigt wurde, der Link allerdings trotzdem nicht so war, wie ich ihn haben wollte.... Ich habe mir nur leider, in der annahme, dass es so nicht geht den div code nicht aufgeschrieben.....

Danke, für deine Ausführliche Antwort, sie hat mir wirklich viel geholfen.
*großen Danke Lolly schenk*

glG
Ray

Bitte. Wenn du dir auch immer selbst mit Firebug den Quellcode ansiehst, kannst du diese Schritte in Zukunft selbst durchgehen.
-closed-

Edit: Auf Wunsch wieder geöffnet
Da du schreibst "es klappt nicht", bitte ich dich per PN um die Logindaten für einen Mitglieder-Testaccount (ohne besondere Rechte). Denn als Gast kann ich diese Kontaktbuttons nicht sehen und somit auch den Fehler nicht vor Ort untersuchen. Danke.

Uuuuhkay, also ich hab jetzt im Template, zuerst meinen dann deinen Code mit span eingesetzt, weil ich mir dachte, es muss ja gehen, inzwischen sieht es so aus:

Code:

<span class="mail_button">{postrow.displayed.EMAIL_IMG}</span>

Im CSS

Code:

.mail_button {background-image: url(http://i12.servimg.com/u/f12/17/43/29/62/email10.png);
height:52px; /*Höhe des Bildes */
width:104px; /*Breite des Bildes*/}

Allerdings wird so das bild wieder gar nicht angezeigt und wenn ich

Code:

display : block;

anhänge, dann wird wieder nur das bild in Blockform natürlich aber ohne link angezeigt -.-

Daten & Links schicke ich wie gewünscht auch nochmal als PN (genauso wie jetzt mit dem span war das gestern mit dem div auch -.-)

Dann hättest du dir meinen Screenshot etwas genauer ansehen sollen.


Sieh dir nochmal an, welche CSS-Zuweisung ich dort eingesetzt habe.
Auch in meiner Erklärung solltest du dir Punkt 3 nochmals ansehen:

Durch die umgebende Klasse oder ID kann das Element, das sich anstelle der Variable im Quellcode befindet, nun ganz einfach angesprochen werden. Firebug schlägt dir sogar selbst schon die passende Zuweisung vor (z.B. .klassenname element { ... } ).

Und dieses Element ist nun einmal img innerhalb der span-Klasse.

Code:

.mail_button img {
  ...
}

UUUuhhhh verdamt -.- *das blinde Huhn anfang zu rupfen -.-*

Tut mir leid, dass ich so nen stress gemacht hab *head meets tischplatte mal wieder*
Sry sry sry und DANKE!!! <3333

Nochmal 100% DANKE, habs ausprobiert, klappt super <3333

Bitte.
-closed-