Lexi Help
Die neuesten Themen
» [Update] Neues Theme der mobilen Version V2
von Tierfreund-97 Gestern um 23:14

» Mobile Ansicht leider Fehlerhaft
von Br0adsw0rd Gestern um 19:31

» [phpBB2] Hintergrund festpinnen
von Fayé Gestern um 16:56

» Mein altes Forum zurückbekommen
von Bigtuber Do 29 Sep 2016 - 22:59

» Impressum
von #Frank Mi 28 Sep 2016 - 23:45

» [phpBB2] Im Beitrag Bild und Text nebeneinander anzeigen
von #Frank Mi 28 Sep 2016 - 23:43

» [phpBB2] Unicode Emojis im Forum
von Mariacher J.E. Mi 28 Sep 2016 - 22:07

» Themen-Icons
von Bigtuber Mi 28 Sep 2016 - 20:46

» [phpBB2] Schriftfarbe in der Expressantwort
von Bigtuber Mi 28 Sep 2016 - 20:09

» Themen fixieren
von inde Mi 28 Sep 2016 - 20:05

» Begriff : "merken"
von Ray Di 27 Sep 2016 - 12:14

» [PunBB] Umzug eines funktionierenden Forums von PunBB auf phpBB?
von inde Di 27 Sep 2016 - 11:07

» Servamp Forum
von Raine Kamiya Mo 26 Sep 2016 - 22:47

» [phpBB2] Probleme mit der "Postprofil" Anzeige
von Dr.Keks Mo 26 Sep 2016 - 20:56

» Private Nachrichten
von inde Mo 26 Sep 2016 - 10:05

» Wie kann man erkennen, welche Forenversion ein anderes Forum hat?
von inde So 25 Sep 2016 - 22:24

Partner
free forum

[phpBB2] Wechselschalter - Template - Button

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

Erledigt [phpBB2] Wechselschalter - Template - Button

Beitrag von Raylan am Fr 24 Mai 2013 - 15:24

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://illiweb.com/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 Wink nur wenn jemand zeit hat mir zu helfen ich würde mich freun ansonsten versuh ichs selbst nochmal wird schon klappen iwie...


Zuletzt von Raylan am Fr 24 Mai 2013 - 16:55 bearbeitet, insgesamt 2 mal bearbeitet

Raylan
Neuling
Neuling

Weiblich Beiträge : 54
Anmeldedatum : 06.11.12
Firefox

Nutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: [phpBB2] Wechselschalter - Template - Button

Beitrag von Günther am Fr 24 Mai 2013 - 16:00

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://illiweb.com/fa/subsilver/icon_email.gif">
</a>
Von einer CSS-Eigenschaft oder einer einzelnen URL ist das doch weit entfernt, oder? Wink
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

Günther
Admin a.D.
Admin a.D.

Männlich Beiträge : 15349
Anmeldedatum : 16.07.08
Firefox

Nutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: [phpBB2] Wechselschalter - Template - Button

Beitrag von Raylan am Fr 24 Mai 2013 - 16:16

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

Raylan
Neuling
Neuling

Weiblich Beiträge : 54
Anmeldedatum : 06.11.12
Firefox

Nutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: [phpBB2] Wechselschalter - Template - Button

Beitrag von Günther am Fr 24 Mai 2013 - 16:17

Bitte. Wenn du dir auch immer selbst mit Firebug den Quellcode ansiehst, kannst du diese Schritte in Zukunft selbst durchgehen. Smile
-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. Smile

Günther
Admin a.D.
Admin a.D.

Männlich Beiträge : 15349
Anmeldedatum : 16.07.08
Firefox

Nutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: [phpBB2] Wechselschalter - Template - Button

Beitrag von Raylan am Fr 24 Mai 2013 - 16:46

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

Raylan
Neuling
Neuling

Weiblich Beiträge : 54
Anmeldedatum : 06.11.12
Firefox

Nutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: [phpBB2] Wechselschalter - Template - Button

Beitrag von Günther am Fr 24 Mai 2013 - 16:50

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


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.
Arrow
Code:
.mail_button img {
  ...
}

Günther
Admin a.D.
Admin a.D.

Männlich Beiträge : 15349
Anmeldedatum : 16.07.08
Firefox

Nutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: [phpBB2] Wechselschalter - Template - Button

Beitrag von Raylan am Fr 24 Mai 2013 - 16:53

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

Raylan
Neuling
Neuling

Weiblich Beiträge : 54
Anmeldedatum : 06.11.12
Firefox

Nutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: [phpBB2] Wechselschalter - Template - Button

Beitrag von Günther am Fr 24 Mai 2013 - 16:55

Bitte. Wink
-closed-

Günther
Admin a.D.
Admin a.D.

Männlich Beiträge : 15349
Anmeldedatum : 16.07.08
Firefox

Nutzerprofil anzeigen

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben


 
Forenbefugnisse:
Sie können in diesem Forum nicht antworten