[phpBB2] Formularbutton "Durchsuchen.."-Button

Hallo liebes Team,

ich arbeite grad am Style vom Abnehmforum im Testforum und ich habe nun eine Stelle gefunden, die ich mit Firebug einfach nicht ausmachen kann um den Button anpassen zu können.

Die Formularbuttons habe ich mit einem css-code (ich glaube der war von #Frank) schon angepasst

Code:

   /* Formularbuttons einstellen*/
    input.liteoption, input.mainoption, input, select
    {
      background-color: #E4CB9B;
      background-image: url("http://i37.servimg.com/u/f37/18/43/10/39/hinter20.png");
      font-weight: bold;
      border-radius: 5px 5px 5px 5px;
      -moz-border-radius: 5px 5px 5px 5px;
      -webkit-border-radius: 5px 5px 5px 5px;
    }
    /* --- Ende --- */

aber wenn ich einen Anhang hochladen will erscheint dieser "Durchsuchen.."-Button und den würde ich gern ändern, weiß aber nicht wo ich den finden könnte.



Hat vielleicht jemand eine Idee wo ich diesen Button anpassen kann?

LG Mike

Tut mir Leid, aber da komme ich auch nicht weiter. Ich habe es eben bei dir im Forum nachgesehen, aber es sieht so aus, als das ich da an meine Grenzen stoße.
Ich kann Günther noch mal Fragen, wenn er aus dem Urlaub kommt, aber im Moment sehe ich da keine Chance.

Hallo Frank,

danke für die Rückmeldung.

Ja das wäre gut wenn du Günther fragen könntest, aber es eilt nicht. Die Scrollbalken kann man ja leider auch nicht ändern, zumindest nicht wenn man FF verwendet, mal sehn wann die das ändern.

Dir noch nen schönen Sonntag Frank

LG Mike

Ja, mal sehen, ob es da doch eine Möglichkeit gibt.
Ja, die Scrollleisten sind hier beim FF das Problem.
Das liegt daran, das der FF siene Farben sellbst Festgelegt hat.
Der FF Browser hat so etwas wie eine eigene CSS Datei, die das Aussehen des Browsers bestimmt.
Du kannst dem Browser ja verschieden Themen zuweisen. Bei einigen dieser Themen werden dann auch die Scrollleisten mit umgestellt.
Es ist hier nicht gewünscht, das diese dann durch eine Seite verändert werden.
Aber ich könnte mir denken das es auch dafür einen Trick gibt.
Du kannst ja mal in dem Firefox Forum rumstöbern, ob es dort dazu Themen gibt. wenn nicht, kannst du dich dort ja mal anmelden und diese Frage stellen.
Eventuell gibt es dort jemand der dir dazu eine Antwort gibt.

Danke Frank,
das werd ich bei gelegenheit machen, im Moment bin ich schwer am Html und CSS "lernen".

Das mit dem Wasserzeichen im Antwortfeld ist auch eine gute Idee etwas ähnliches habe ich auch noch vor, allerdings nicht als Bild sondern einen Text wie "Seid nett zueinander" oder eine Art Bekanntmachung, denn wer schreibt der sieht es dann automatisch

LG Mike

Mike schrieb:Das mit dem Wasserzeichen im Antwortfeld ist auch eine gute Idee etwas ähnliches habe ich auch noch vor, allerdings nicht als Bild sondern einen Text wie "Seid nett zueinander" oder eine Art Bekanntmachung, denn wer schreibt der sieht es dann automatisch

LG Mike

Das ist eine Gute Idee... eventuell sollte ich da unsere Regeln einsetzen, die hier immer oberhalb der Textfelder stehen. Eventuell würden die dann besser zu verstehen sein.

Hallo Günther,

ich weiß nicht ob Frank dich schon gefragt hat, aber ich dachte ich frag mal vorsichtig nach ob Du vielleicht eine Lösung hast.

LG Mike

PS: schön wieder von dir zu lesen  

Hallo Mike,

danke, es ist schön, wieder hier zu sein.

Ich wollte mich hier noch melden, nachdem ich die Themen durchgesehen hatte, hatte aber nicht mehr daran gedacht.

Zuerst mal ist wichtig: Die Ursache dafür, dass du diesen Button nicht einfach mit CSS anpassen kannst, kommt daher, dass es sich dabei um keinen "normalen" Button handelt, der nur durch den Browser gerendert wird. Stattdessen wird dieser Button durch das Betriebssystem vorgegeben, weil durch den Button ein systemrelevanter Zugriff auf die lokalen Dateien erfolgt. Der Browser kann ihn nur mehr in bedingtem Ausmaß mitgestalten.
Das siehst du auch daran, dass sich der jeweilige Style des Betriebssystems auf den Style dieses Buttons auswirkt. Im Vergleich zwischen deinem Windowsstyle und meinem sehen wir mit demselben Browser den Button sehr unterschiedlich:

(Windows Aero + Firefox)

(Windows Standard + Firefox)

Die Veränderung ist deshalb nicht so einfach wie bei allen anderen, "normalen" Buttons. Allerdings ist sie mit einem CSS-Trick auch in diesem Fall machbar.
Dazu muss allerdings ein grafischer Button verwendet werden. Die Umsetzung funktioniert unter allen aktuellen Standardbrowsern, auch dem IE 9/10.

1. Du gehst in die Templates zu
AB -> Anzeige -> Templates -> Posten & Private Nachrichten -> posting_body
und suchst dort folgende Stelle (unverändertes Template: Zeile 412):

Code:

<td class="row2" width="78%"><span class="genmed"><input class="post" type="file" id="fileupload" name="fileupload" value="" /><input value="{L_SUBMIT}" type="submit" name="add_file" /> ({L_MAX_ATT_SIZE})</span></td>

Du ergänzt die grün markierten Bereiche:

<td class="row2" width="78%"><span class="genmed"><span id="fileupload_container"><input class="post" type="file" id="fileupload" name="fileupload" value="" /></span><input value="{L_SUBMIT}" type="submit" name="add_file" /> ({L_MAX_ATT_SIZE})</span></td>

Danach sendest du das veränderte Template ab und veröffentlichst es über einen Klick auf .

2. Du fügst in dein CSS-Stylesheet unter
AB -> Anzeige -> Bilder & Farben -> Farben -> Reiter "CSS Stylesheet"
folgenden Code ein:

Code:

#fileupload {
  opacity: 0;
}
#fileupload_container {
  background-image: url("http://i73.servimg.com/u/f73/17/55/39/73/durchs12.png");
  background-position: 95% 0;
  background-repeat: no-repeat;
  cursor: pointer;
  display: inline-block;
  height: 25px;
}

Ich habe in diesem Beispiel einen Button mit den Ausmaßen 150x25px verwendet, den ich auf die Schnelle bei einem Buttongenerator erstellt habe:

Du bestellst dir am besten einen Button in unserer Grafikabteilung, der genau deinen Vorstellungen entspricht. Die Ausmaße solltest du aus technischen Gründen allerdings so belassen und nicht erhöhen.

3. Ich habe gleich noch an einem kleinen Zusatz gearbeitet, der dir ev. gefällt. Wie du sicherlich weißt, vergessen manche User hin und wieder, nach der Dateiauswahl auf den "Senden"-Button daneben zu klicken, bevor sie den Beitrag absenden. Deshalb habe ich noch ein Script erstellt, das nach der Dateiauswahl anstelle des "Durchsuchen"-Buttons einen Pfeil auf den "Senden"-Button anzeigt:


Dazu müsstest du unter
AB -> Module -> HTML und JAVASCRIPT -> Javascript Codes Verwaltung
folgende Einstellung sicherstellen:
Die Javascript-Code Verwaltung aktivieren: Ja

Anschließend erstellst du über Ein neues Javascript erstellen folgendes Script mit beliebigem Titel und der Option
Platzierung: Auf allen Seiten

Code:

$('#fileupload_container').live('click', function () {
      $(this).css('background-image','url("http://i73.servimg.com/u/f73/17/55/39/73/durchs11.png")');
});

Auch hier kannst du meine Beispielgrafik ersetzen:

Sie sollte aber dieselben Ausmaße (150x25px) wie der "Durchsuchen"-Button besitzen.
Anschließend klickst du auf Bestätigen.

Ich hoffe, dass dir das weiterhilft.

Hallo Günther,

erstmal vielen Dank für deine Bemühungen, sie werden mir sicher helfen und so sehr hat es nicht geeilt.

Ich werde als erstes den Button erstellen und dann mach ich mich an die Umsetzung, danach melde ich mich wieder hier ob und wie es geklappt hat.

Vielen Dank auch für die "Zugabe" diese Idee ist wirklich Klasse  

LG Mike

Edit: 12.08.2013 19:29:53

Hallo Günther,

soweit hat alles funktioniert

Danke nochmals und noch einen schönen Abend!

LG Mike