Submit-Button als Grafik

Hallo liebe Contao-Gemeinde,

wie kann ich in TL/Contao einen Submit-Button als Grafik darstellen, speziell den Submit-Button im Suchformular. Wie das prinzipiell geht weiß ich:

HTML-Code:

---

<input type="image" src="absende.gif" alt="Absenden">

---

Das CMS gibt aber nur input type="submit" aus. Nun habe ich schon in mod_search.tpl gesucht, aber da sehe ich nur:

PHP-Code:

---

<?php echo $this->form; ?>

---

Damit komme ich nicht weiter. Hat jemand einen Tipp für mich? Wo muss ich "schrauben"?

Vielen Dank schon einmal!
Hagen

Hallo Hagen,

ist gibt im Contao Formulargenerator ein Feldtyp "Absendefeld". Dort kannst Du dann die Option "Bildschaltfläche erstellen" aktivieren.

Hallo xchs,

danke für die schnelle Antwort. Im Fall der Suche ist es aber so, dass das Formular automatisch erstellt wird. Ich habe eine Modul Typ "Suchmaschine" erstellt und eingebunden. Kann ich auch bei der Suche einen grafischen Button nutzen und wenn ja, wie?

Beste Grüße
Hagen

Zitat:

---

Zitat von Hagen

Hallo xchs,

danke für die schnelle Antwort. Im Fall der Suche ist es aber so, dass das Formular automatisch erstellt wird. Ich habe eine Modul Typ "Suchmaschine" erstellt und eingebunden. Kann ich auch bei der Suche einen grafischen Button nutzen und wenn ja, wie?

---

Dafür wirst Du wahrscheinlich die betreffenden Templates anpassen müssen, entweder "mod_search_simple.tpl" oder "mod_search_advanced.tpl", je nachdem, was Du ausgewählt hast.

Hallo xchs,

Zitat:

---

Zitat von xchs

Dafür wirst Du wahrscheinlich die betreffenden Templates anpassen müssen, entweder "mod_search_simple.tpl" oder "mod_search_advanced.tpl", je nachdem, was Du ausgewählt hast.

---

das hat geklappt, in meinem Fall war es "mod_search_simple.tpl".

Danke für deine Hilfe!
Hagen

Hallo,

ich habe versucht mod_search_simple.tpl so zu ändern, das die Grafik angezeigt wird. Hat nicht funktioniert. Bei mod.search_advanced.tpl hat es funktioniert.:confused:

Kann mir bitte mal jemand den Code für mod_search_simple.tpl posten?

elchfan schau mal im Ordner:
system\modules\frontend\templates\

Hallo magicsepp,

das sind doch die Templates, die beim Anlegen von Templates kopiert werden und im BE im Layout --> Templates landen. Diese kopierten Templates werden dann benutzt, wenn welche vorhanden sind.

Mich interessiert einfach nur der Code, wie er im Template .mod_search_simple.tpl geändert werden muss.

Ersetze im mod_search_simple.tpl

Code:

---

<input type="submit" id="ctrl_submit_<?php echo $this->uniqueId; ?>" class="submit" value="<?php echo $this->search; ?>" />

---

durch

Code:

---

<input type="image" src="tl_files/...Pfad zu deiner Bilddatei" alt="<?php echo $this->search; ?>" />

---

Hallo bizon,

ich habe den Code einmal bei .mod_search_advanced.tpl und einmal bei .mod_search_simple.tpl reinkopiert.
Bei .mod_search_advanced.tpl funktioniert er, bei .mod_search_simple.tpl nicht.

Was ist da anders?

Nichts ist anders. Funktioniert in beiden Templates einwandfrei.

Hallo bizon,

mein .mod_search_simple.tpl sieht jetzt so aus:

Code:

---

<form action="<?php echo $this->action; ?>" method="get">
<div class="formbody">
<?php if ($this->id): ?>
<input type="hidden" name="id" value="<?php echo $this->id; ?>" />
<?php endif; ?>
<label for="ctrl_keywords" class="invisible"><?php echo $this->keywordLabel; ?></label>
<input type="text" name="keywords" id="ctrl_keywords" class="text" value="<?php echo $this->keyword; ?>" />
<input type="image" src="Pfad zur Bilddatei" alt="<?php echo $this->search; ?>" />
</div>
</form>

---

Der daraus entstandene HTML-Code ist:

HTML-Code:

---

<form action="de/suchen-deutsch.html" id="suchformular" method="get" enctype="application/x-www-form-urlencoded">
<div class="formbody">
 
  <input type="text" name="keywords" id="ctrl_12" class="text cleardefault" value="Suchbegriff eingeben" style="" onblur="if (this.value=='') { this.value='Suchbegriff eingeben'; $(this).addClass('cleardefault'); }" onfocus="if (this.value=='Suchbegriff eingeben') { this.value=''; $(this).removeClass('cleardefault'); this.select(); }" /> <input type="submit" id="ctrl_12_submit" class="submit" value="Lupe" /><br />
</div>
</form>

---

Da fehlt der Link zur Bilddatei.
Woran kann das liegen?

Hi Elchfan,

das .mod_search_simple.tpl ist ok.

Aber sonst bringst du anscheinend zwei Dinge durcheinander. Der angezeigte Quelltext stammt aus deinem Formular Suchfeld, dem, mit der Extension cleardefault. Dieses Suchfeld hat aber mit der .mod_search_simple.tpl nichts zu tun, sondern verlinkt auf eine Ergebnisseite, in die das Modul Suchmaschine eingebunden sein sollte. Dort in der Suchmaschine greift erst das .mod_search_simple.tpl und dort wird das Suchimage angezeigt.

Wenn neben deinem kleinen Suchfeld (mit cleardefault) auch ein Image gewünscht wird, dann musst du das auch in diesem Formular einbinden.

Hallo bizon,

danke für die Erklärung. Es funktioniert jetzt.

Aber gerne

Gruß bizon

Guten Tag!

Ich versuche gerade den "Search"-Button zu ändern aber das klappt irgendwie nicht :(
Ich habe alle Template editiert (mod_search_advanced.xhtml/html5 und mod_search_simple.xhtml/html5) aber das hat leider nichts gebracht.
Meine Contao-Version ist 2.11.0

Was muss ich noch machen?

Gruß,
Roman

Das geht auch einfach und sauber über CSS.

background:url("button.gif") center center no-repeat;
text-indent:-5998px;

Hi Jigggalo4u,

vielen Dank für deine Antwort.

CSS sieht bei mir so aus:

.formbody {
background:url("tl_files/Roman/suche_los_btn.png") center center no-repeat;
text-indent:1px; }

aber es hat leider nicht viel gebracht - der Standard-SearchButton ist immer da. Ich habe wahrscheinlich etwas falsch gemacht :)
Hier ist die Webseite: http://kfz-plus.de/contao

Gruß,
Roman

text-indent:1px <--- gib da mal einen negativen Wert ala -1000px ein

Und dann auch nicht beim formbody, du muß schon den submit-button direkt ansprechen

#ctrl_1_submit { .... }

Zitat:

---

Zitat von Juggalo4u

Und dann auch nicht beim formbody, du muß schon den submit-button direkt ansprechen

#ctrl_1_submit { .... }

---

Vielen Dank! Hat wunderbar geklappt!

FF schauts aber nicht so gut aus.... Siehe PDF

FF10 = sieht super aus. Woran kann es liegen?