Formularfeld "Suchen" verschieben

Alles zu Styles, Templates, Icons und Smilies für phpBB 3.0.x, sowie allgemeine Designfragen zur Integration von phpBB in bestehende Websites.
phpBB Styles Demo
Forumsregeln
Bei Style spezifischen Fragen ist der Stylename und die Downloadquelle des Styles erforderlich, besser noch die URL vom betroffenen Forum.
Antworten
Wollez
Mitglied
Beiträge: 243
Registriert: 09.02.2008 11:43

Formularfeld "Suchen" verschieben

Beitrag von Wollez »

Hallo zusammen,

ich hab jetzt schon ein bischen in der overall_header.html herum gespielt aber ich bekomme es einfach nicht hin.
Wie kann ich (bei Prosilver) das Suchen Feld in die navbar verschieben. Es soll zwischen der "Foren-Übersicht" und "Schrifteinstellungen" erscheinen.
Das Eingabefeld, der Button und die erweiterte Suche sollen hintereinander stehen.
Wenn ich daran rum spiele und ich es mal geschaft habe das Feld in die Navbar zu bekommen, erscheint davor ein Pfeil, wie vor "Foren-Übersicht". Wie kann ich den verschwinden lassen?


Gruß Wollez
Nach oben
JFooty
Ehemaliges Teammitglied
Beiträge: 1868
Registriert: 02.10.2007 11:46

Beitrag von JFooty »

Suche in der overall_header.html folgenden Code:

Code: Alles auswählen

<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			<div id="search-box">
				<form action="{U_SEARCH}" method="post" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" /> 
					<input class="button2" value="{L_SEARCH}" type="submit" /><br />
					<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div>
		<!-- ENDIF -->
Ändere/Ergänze nun wie folgt:

Code: Alles auswählen

<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
<li class="rightside">
<form action="{U_SEARCH}" method="post" id="search">
<fieldset>
<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" /> 
<input class="button2" value="{L_SEARCH}" type="submit" /><br />
<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
</fieldset>
</form>
</li>
<!-- ENDIF -->
Entferne jetzt noch das <br /> und ergänze anschließend in der forms.css den Eintrag "fieldset" wie folgt:

Code: Alles auswählen

fieldset
{border-width: 0;
 display:inline;
 font-family: Verdana, Helvetica, Arial, sans-serif;
 font-size: 1.1em;}
Das müsste in etwa deinen Vorstellungen entsprechen.
Zuletzt geändert von JFooty am 10.01.2009 18:59, insgesamt 1-mal geändert.
Nach oben
Wollez
Mitglied
Beiträge: 243
Registriert: 09.02.2008 11:43

Beitrag von Wollez »

Danke JFooty,

hat gelappt.

Gruß Wollez
Nach oben
star1
Mitglied
Beiträge: 35
Registriert: 20.02.2004 19:40
Wohnort: Bottrop

Beitrag von star1 »

Hallo,

ich habe das ganze auch umgesetzt. Allerdings sieht es bei mir nun so aus:

[ externes Bild ]

Der folgende Code steht nun bei mir zwischen

<ul class="linklist navlinks">
<li class="icon-home"> ...

und

<li class="rightside"><a href="#" onclick="fontsizeup(); return false;" ...

Code: Alles auswählen

		<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			 <div id="search-box">
			 <li class="rightside"> 
				<form action="{U_SEARCH}" method="post" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" /> 
					<input class="button2" value="{L_SEARCH}" type="submit" />
					<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
			 </li>	
			 </div>
		<!-- ENDIF -->
Ich hätte das Suchfeld allerdings gerne genau links neben der Schriftänderungsfunktion. Was muss ich noch ändern?

Vielen Dank,

Sebastian
Nach oben
Sigi1991
Mitglied
Beiträge: 108
Registriert: 09.04.2008 15:31

Beitrag von Sigi1991 »

Genau das gleiche Problem habe ich auch.

Was muss ich tun?
Nach oben
JFooty
Ehemaliges Teammitglied
Beiträge: 1868
Registriert: 02.10.2007 11:46

Beitrag von JFooty »

star1 hat geschrieben:Der folgende Code steht nun bei mir zwischen
<ul class="linklist navlinks">
<li class="icon-home"> ...

und

<li class="rightside"><a href="#" onclick="fontsizeup(); return false;" ...

Code: Alles auswählen

		<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			 <div id="search-box">
			 <li class="rightside"> 
				<form action="{U_SEARCH}" method="post" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" /> 
					<input class="button2" value="{L_SEARCH}" type="submit" />
					<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
			 </li>	
			 </div>
		<!-- ENDIF -->
Füge den Code nicht dazwischen sondern nach

Code: Alles auswählen

<li class="rightside"><a href="#" onclick="fontsizeup(); return false;" ... </li>
ein! Darüber hinaus kannst du auch

Code: Alles auswählen

<div id="search-box">
und

Code: Alles auswählen

</div>
daraus entfernen.
Nach oben
Sigi1991
Mitglied
Beiträge: 108
Registriert: 09.04.2008 15:31

Beitrag von Sigi1991 »

Komisch.
Kann mir jemand sagen, was ich bei mir falsch geamcht habe?
...
Edit: Hat sich erledigt.
Nach oben
star1
Mitglied
Beiträge: 35
Registriert: 20.02.2004 19:40
Wohnort: Bottrop

Beitrag von star1 »

@JFooty: danke, so hat es geklappt!

EDIT: nun ist mir aufgefallen, dass das Suchfeld im FF die Standardgröße behält. Beim IE hingegen nimmt das Suchfeld nun die gesamte Breite ein, was sogar dazu führt, dass "erweiterte Suche" in die nächste Zeile rückt. :(

Ich hab bereits fest size="30" für das Input-Feld in der overall_header.html gesetzt, allerdings ändert das nur im FF die Größe.

Kann mir noch mal jemand helfen? Danke!

Lieben Gruß,

star1
Nach oben
JFooty
Ehemaliges Teammitglied
Beiträge: 1868
Registriert: 02.10.2007 11:46

Beitrag von JFooty »

Suche den Eintrag (bei prosilver in der colours.css)

Code: Alles auswählen

input.search
{background-image:url("{T_THEME_PATH}/images/icon_textbox_search.gif");}
und ändere das in z.B.

Code: Alles auswählen

input.search
{background-image:url("{T_THEME_PATH}/images/icon_textbox_search.gif");
width: 200px}
ein. Die gewünschte Breite kannst du dir dann ja so anpassen, wie du es haben willst.
Nach oben
star1
Mitglied
Beiträge: 35
Registriert: 20.02.2004 19:40
Wohnort: Bottrop

Beitrag von star1 »

JFooty hat geschrieben:Suche den Eintrag (bei prosilver in der colours.css)

Code: Alles auswählen

input.search
{background-image:url("{T_THEME_PATH}/images/icon_textbox_search.gif");}
und ändere das in z.B.

Code: Alles auswählen

input.search
{background-image:url("{T_THEME_PATH}/images/icon_textbox_search.gif");
width: 200px}
ein. Die gewünschte Breite kannst du dir dann ja so anpassen, wie du es haben willst.
Danke! Genau das war es!!!

star1
Nach oben
Antworten

Zurück zu „[3.0.x] Styles, Templates und Grafiken“