Suchfunktion umstylen !

- WebmasterWork »
- Grafik & Programmierung »
- (X)HTML & CSS & DHTML & Javascript »
- Suchfunktion umstylen ! »

pX*Marcel

Lebende Foren Legende

Dabei seit: 01.08.2003

Beiträge: 1 578

Dienstag, 24. März 2009, 23:17

Hallo Leute,
ich versuch gerade meine Suchfunktion auf meinem Blog ein wenig zu pimpen. Sieht natürlich sehr spartianisch aus. Nen input-feld und nen go-button quasi.

Ich hätte lieber ein wenig kleineres,schmaleres und hübscheres Eingabefeld sowie nen schönerer Submit-Button. Diesen vielleicht als .GIF datei oder so. Wie setze ich das am besten um ? Ich hab kein Plan davon :/

searchform.php

PHP-Quelltext

<form method="get" id="searchform" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<div><input type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" />
<input type="submit" id="searchsubmit" name="Submit" value="Suche" />
</div>
</form>

Tag im menu:

	PHP-Quelltext
1	<?php include (TEMPLATEPATH . '/searchform.php'); ?>

Wie setz ich das am besten um?

Danke schon einmal im voraus.

www.SchalkerTreff.de neu ! Kostenlos S04-Bilder-Hochladen und tolle Preise sichern !

Skittles

Moderator

Dabei seit: 14.02.2004

Beiträge: 3 014

Dienstag, 24. März 2009, 23:29

Schöneres Suchfeld: Ein Fall für CSS, was musst du selbst wissen, was du haben willst. Ich könnt dir da zwar Code geben, aber ob dir nen gelber Hintergrund mit schwarzer Schrift gefällt, glaube ich nicht. (Sorry, konnte nicht widerstehen) - Sonst ist das alles denkbar, was mit CSS möglich ist, auch Hintergrundbilder oder was auch immer.

Bild als Absendebutton: http://de.selfhtml.org/html/formulare/fo…s.htm#grafische

~!__/
..o.o

This is Einkaufswagen.
Copy Einkaufswagen into your signature to help him on his way to world domination.

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Skittles« (24. März 2009, 23:29)

pX*Marcel

Lebende Foren Legende

Dabei seit: 01.08.2003

Beiträge: 1 578

Dienstag, 24. März 2009, 23:54

CSS kann ich nur bearbeiten aber nicht erstellen. :/

Ich würde gerne das Eingabefeld auch in der Höhe verkleinern. Das wirkt insgesamt zu klobig.

www.SchalkerTreff.de neu ! Kostenlos S04-Bilder-Hochladen und tolle Preise sichern !

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »pX*Marcel« (24. März 2009, 23:54)

Skittles

Moderator

Dabei seit: 14.02.2004

Beiträge: 3 014

Mittwoch, 25. März 2009, 09:43

	Cascading Style Sheet
1 2 3	#s { height:Wert; }

~!__/
..o.o

This is Einkaufswagen.
Copy Einkaufswagen into your signature to help him on his way to world domination.

pX*Marcel

Lebende Foren Legende

Dabei seit: 01.08.2003

Beiträge: 1 578

Mittwoch, 25. März 2009, 11:56

Wo soll ich den Code hinzufügen?

www.SchalkerTreff.de neu ! Kostenlos S04-Bilder-Hochladen und tolle Preise sichern !

dermainzer

Routinier

Dabei seit: 07.03.2009

Beiträge: 327

Mittwoch, 25. März 2009, 12:10

in den HTML Header:

HTML

<html>
<head>
<style type="text/css">
<!--
#s {
  height:Wert;
}
-->
</style>
</head>
<body>
<form method="get" id="searchform" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<div><input type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" />
<input type="submit" id="searchsubmit" name="Submit" value="Suche" />
</div>
</form>
</body>
</html>

dermainzer

pX*Marcel

Lebende Foren Legende

Dabei seit: 01.08.2003

Beiträge: 1 578

Mittwoch, 25. März 2009, 18:08

Ich hab kein Zugriff auf den Head bereich. Ich kann nur im CMS von WP einzelne Seiten ändern. Und da ist der Head bereich nicht drin. Die Seite besteht nur aus dem, was ich oben gepostet hab :wacko:

www.SchalkerTreff.de neu ! Kostenlos S04-Bilder-Hochladen und tolle Preise sichern !

Skittles

Moderator

Dabei seit: 14.02.2004

Beiträge: 3 014

Mittwoch, 25. März 2009, 18:14

Irgendwo in Wordpress kann man sicherlich die CSS anpassen, da kannst du

	Cascading Style Sheet
1 2 3	#s { height:wert; }

auch einfach hinzufügen.

~!__/
..o.o

This is Einkaufswagen.
Copy Einkaufswagen into your signature to help him on his way to world domination.

dermainzer

Routinier

Dabei seit: 07.03.2009

Beiträge: 327

Mittwoch, 25. März 2009, 20:09

... oder du benutzt einen inline-style:

HTML

<form method="get" id="searchform" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<div><input type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" style="height: wert;"/>
<input type="submit" id="searchsubmit" name="Submit" value="Suche" />
</div>
</form>

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »dermainzer« (25. März 2009, 20:13)

pX*Marcel

Lebende Foren Legende

Dabei seit: 01.08.2003

Beiträge: 1 578

Donnerstag, 26. März 2009, 16:49

Funzt nicht

www.SchalkerTreff.de neu ! Kostenlos S04-Bilder-Hochladen und tolle Preise sichern !

Skittles

Moderator

Dabei seit: 14.02.2004

Beiträge: 3 014

Donnerstag, 26. März 2009, 19:32

hast du "wert" auch durch einen Zahlenwert wie z.B. 15px oder so ersetzt?

~!__/
..o.o

This is Einkaufswagen.
Copy Einkaufswagen into your signature to help him on his way to world domination.

jumps

Tripel-As

Dabei seit: 24.02.2009

Beiträge: 221

Donnerstag, 26. März 2009, 19:57

Zitat von »Skittles«

hast du "wert" auch durch einen Zahlenwert wie z.B. 15px oder so ersetzt?

Nice try ;D

BTT: Du kannst in WP die CSS Dateien bearbeiten, soweit ich weiß sogar online. Da findet sich bestimmt irgendwo ein Eintrag, der fürs Aussehen der Buttons zuständig ist, in deinem Fall wahrscheinlich

	Quellcode
1	#searchform {...}

. Da schaust dir den Code mal an und versuchst ihn deinen Wünschen nach zu verändern. Wie findest tausendfach im Internet, zb hier: www.css4you.de

Zitat

Photoshop machts möglich.

pX*Marcel

Lebende Foren Legende

Dabei seit: 01.08.2003

Beiträge: 1 578

Samstag, 28. März 2009, 02:27

Okay, schon einmal Danke ! Hat funktioniert. Nur leider ist jetzt das Eingabefeld zwar äußerlich richtig, aber die Schrift die man eingibt, ist größer als das Feld o0, was nun?

www.SchalkerTreff.de neu ! Kostenlos S04-Bilder-Hochladen und tolle Preise sichern !

dermainzer

Routinier

Dabei seit: 07.03.2009

Beiträge: 327

Samstag, 28. März 2009, 08:51

	Cascading Style Sheet
1	font-size: wert; /* nicht vergessen "wert" durch eine andere Zahl zu ersetzen und auch die Einheit hinter der Zahl nicht vergessen*/

Du kannst auf http://www.css4you.de/ alle CSS Befehle auch selbst nachschauen.

dermainzer

pX*Marcel

Lebende Foren Legende

Dabei seit: 01.08.2003

Beiträge: 1 578

Samstag, 28. März 2009, 15:27

Ja das Problem ist, ich will nur die Schrift in dem Sucheingabefeld ändern und nicht auf der gesamten HP. Da ich von CSS kein Plan hab, frag ich lieber nach.

Also wo genau muss ich den font-size code reinpacken ? In das <input.../> ?

www.SchalkerTreff.de neu ! Kostenlos S04-Bilder-Hochladen und tolle Preise sichern !

dermainzer

Routinier

Dabei seit: 07.03.2009

Beiträge: 327