Grafikbutton bei Suche

Hallo, ich würde gerne einen Grafikbutton bei meiner Suche einbauen.
Allerdings möchte ich ein voher gefertigtes Bild als hintergrund verwenden. Bisher habe ich es nur geschafft die Schrift in ein Bild zu wandeln, dabei bin ich in der Lage die Farbe der Schrift und die Farbe des Jintergrundes zu definieren, ich möchte aber ein Richtige Grafik als Button verwenden, wie geht das denn?
Hier mal mein Code bisher:

### Suche ###


       marks.SEARCH < tt_content.search.30
       marks.SEARCH {
       layout = ###FIELD###
       stdWrap.wrap >

       target = _self
       redirect = 62
       badMess = Bitte füllen Sie alle erforderlichen Felder aus:

       dataArray.10 {
		label.override = Ihre Suche:
		type = *sword = input, 13, 10
	}

       dataArray.20 {
		valueArray >
		type = scols = hidden
		value = pages.title-subtitle-keywords-description:tt_content.header-bodytext-imagecaption
	}

	image = IMAGE
	image.file = GIFBUILDER
	image.file {
		XY = 45,10
		backColor = #000000
		10 = TEXT
		10.text = Suche
		10.fontFile = fileadmin/fonts/verdana.ttf
		10.fontColor = white
		10.fontSize = 12
		10.niceText = 1
		10.offset = 2, 10
	}
}

Ich hoffe Ihr habt ne Idee, danke!!!!

Das was Du hier versuchst im Gifbuilder zu bauen, sollte doch auch problemlos rein per CSS möglich sein. Dann brauchst Du dafür gar keinen Button ;-)

Gruß
Michael

Hallo, ich bin leider ein absoluter Anfänger was Typo3 betrifft, und habe keinerlei Ahnung, wie ich das per css lösen kann.

Lässt sich sowas nicht ähnlich lösen wie das Grafikmenu was ich mir auf meine Seite eingebaut habe:

    marks.NAVI = HMENU
        marks.NAVI.1 = GMENU
        marks.NAVI.1 {

                NO {
   
                        XY = 110,39
                        5 = IMAGE
                        5.file = fileadmin/ls/gfx/but_inact.gif
                        10 = TEXT
                        10.niceText=1
                        10.text.field = title
                        10.fontFile=fileadmin/daskassensystemhaus/fonts/verdana.ttf
                        10.fontSize=12
                        10.fontColor=#FFFFFF
                        10.offset=10,20
                }
                RO < .NO
                RO = 1
                RO.10.fontColor = #FFFFFF
                RO.5.file = fileadmin/ls/gfx/but_act.gif
                ACT < .NO
                ACT = 1
                ACT.10.fontColor = #FFFFFF
                ACT.5.file = fileadmin/ls/gfx/but_act.gif
        }

Danke schonmal.

Also wenn du den Button per CSS ansprechen kannst, hat das eigentlich nichts mehr mit Typo3 sondern eben rein mit CSS zu tun. Dafür benötigst Du aber zumindest CSS Grundkenntnisse.

Über den Gifbuilder würde ich es hier definitiv nicht machen...

Gruß
Michael

Also etwas kenne ich mich mit CSS schon aus, leider komme ich nicht daruf wie ich das in diesem Fall umsetzten kann.

Mein bisher genutztes CSS:

/* Schriftart im gesamten Dokument */
body, td, div, p, li, form {
        font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #535353;
        font-size: 12px;
	font-style: normal;
	font-weight: normal;
	line-height: 14px;
}
.HEAD1 {
	font-size: 14px;
	font-weight: bold;
	line-height: 18px;
; font-family: Verdana, Arial, Helvetica, sans-serif; color: #04529C
}
.HEAD2 {
	font-size: 12px;
	font-weight: bold;
	line-height: 16px;
; font-family: Verdana, Arial, Helvetica, sans-serif; color: #04529C
}

.HEAD3 {
	font-size: 12px;
	font-weight: bold;
	line-height: 16px;
; font-family: Verdana, Arial, Helvetica, sans-serif; color: #04529C
}

.BOLD {
	font-weight: bold;
}
/*Kleine Schrift, kann auch als nicht verlinkte Variante von .SMALLINK eingesetzt werden.*/
.SMALL {
	font-size: 9px;
	line-height: 11px;
}
/*Textlinks*/
a {
	color: #04529C;
	text-decoration: none;
}
a:hover {
	color: #FF0000;
	text-decoration: underline;
}

/*Navigation*/

.NAV {
	color: #000000;
	font-size: 12px;
	font-weight: normal;
	line-height: 20px;
	text-decoration: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;

}

.NAVK {
	color: #000000;
	font-size: 12px;
	font-weight: normal;
	line-height: 14px;
	text-decoration: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;

}

a.NAV {
	color: #000000;
	font-size: 12px;
	font-weight: normal;
	line-height: 20px;
	text-decoration: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;

}
a.NAV:hover {
	color: #F5E50B;
	font-size: 12px;
	font-weight: normal;
	line-height: 20px;
	text-decoration: underline;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

/*Navigationspunkt ohne Verlinkung*/
.NAVCUR {
	color: #F5E50B;
	font-size: 12px;
	font-weight: bold;
	line-height: 20px;
	text-decoration: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

.NAVCUR:hover {
	color: #535353;
	font-size: 12px;
	font-weight: bold;
	line-height: 20px;
	text-decoration: underline;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

/*Subnavigation*/

a.SNAV {
	color: #535353;
	font-size: 12px;
	font-weight: normal;
	line-height: 20px;
	text-decoration: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
a.SNAV:hover {
	color: #F5E50B;
	font-size: 12px;
                font-weight: normal;	
                line-height: 20px;
	text-decoration: underline;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	

}

/*Subnavigationspunkt ohne Verlinkung*/
.SNAVCUR {
	color: #F5E50B;
	font-size: 12px;
	line-height: 20px;
	text-decoration: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
}

.SNAVCUR:hover {
	color: #F5E50B;
	font-size: 12px;
	line-height: 20px;
	text-decoration: underline;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
}

/*Subnavigation2*/

a.SNAV2 {
	color: #535353;
	font-size: 10px;
	font-weight: normal;
	line-height: 20px;
	text-decoration: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
.SNAV2:hover {
	color: #F5E50B;
	font-size: 10px;
                font-weight: normal;	
                line-height: 20px;
	text-decoration: underline;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	

}

/*Subnavigationspunkt ohne Verlinkung*/
.SNAVCUR2 {
	color: #F5E50B;
	font-size: 10px;
	line-height: 20px;
	text-decoration: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;

}

.SNAVCUR2:hover {
	color: #F5E50B;
	font-size: 10px;
	line-height: 20px;
	text-decoration: underline;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;

}

/* Links in kleiner Schriftgroesse, z.B. f�r Schnellnavigation */
a.SMALLINK {
	color: #000000;
	font-size: 9px;
	line-height: 11px;
}
a.SMALLINK:hover {
	color: #F5E50B;
	font-size: 9px;
	line-height: 11px;
}
.TEXT {   
        font-size: 12px; 
        font-weight: normal;
        color: #535353
}


/*Menu*/
a.MENU { color: #000000;
	font-size: 9px;
	font-weight: normal;
	line-height: 15px;
	text-decoration: none;
}

a.MENU:hover {
	color: #535353;
	font-size: 9px;
	font-weight: normal;
	line-height: 15px;
	text-decoration: underline;
}

.MENUCUR {
	color: #535353;
	font-size: 9px;
	font-weight: bold;
	line-height: 15px;
	text-decoration: none;
}


/*Sitemap*/

a.SITEMAP1 {
	color: #333333;
	font-size: 9px;
	font-weight: normal;
	line-height: 11px;
	text-decoration: none;
}
a.SITEMAP2 {
	color: #333333;
	font-size: 9px;
	font-weight: normal;
	line-height: 11px;
	text-decoration: none;
}
a.SITEMAP3 {
	color: #333333;
	font-size: 9px;
	font-weight: normal;
	line-height: 11px;
	text-decoration: none;
}




.send { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 14px; font-weight: normal; color: #FFFFFF;  border: 1px outset #04529C; background-color: #04529C}

Ganz unten wird der Send-button des Kontaktformulars bereits bestimmt, das klappt auch.
Leider steht ich auf dem Schlauch wie ich das jetzt dem Suche button zuweisen kann.

Danke!

keiner eine Idee?

Hallo Lynxx,

was Michaelh74 dir eigentlich sagen will ist, das du in deinem Template (welches das Formular für die Suche enthält) einen div-Container baust, den du wiederum mittels CSS formatierst.

z.B.:

.BUTTON {
  background-image: url(pfad/zum/bild.jpg);
  height: 20px;
  width: 100px;
}

Was noch einfacher geht ist folgendes. Du packst das Bild direkt in dein Template.
Diese Sache mittels GifBuilder zu machen ist wirklich zu aufwendig. Um das zu realisieren, brauchst die wirklich keine Typo-Kenntnisse.

Hoffe ich konnte etwas Licht ins dunkle bringen.

Also wenn Du mit der Formatierung eines Buttons per CSS nicht klar kommst, dann nimm Dir einfach einer der Template basierenden Such-Extensions und pack da Deine Grafik rein.

Hier ein Beipsiel für per CSS den Button des Kontaktformulars zu ändern:

.csc-mailform-submit {
	border: none;
	width: 60px !important;
	margin-left: 340px;
	margin-top: 15px;
	padding: 0px;
	color: #FFF !important;
	background-color: #a4091d;
}

Gruß
Michael