"Suche Feld" unter Header setzen

[[Mark]]

du könntest das ausprobieren (bitte vorher unbedingt die Originaldateien sichern).
Öffne die Datei overall_header.html und finde

Code: Alles auswählen

<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			<div id="search-box" class="search-box search-header">
				<form action="{U_SEARCH}" method="get" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="search" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search tiny" size="20" value="{SEARCH_WORDS}" placeholder="{L_SEARCH_MINI}" />
					<button class="button icon-button search-icon" type="submit" title="{L_SEARCH}">{L_SEARCH}</button>
					<a href="{U_SEARCH}" class="button icon-button search-adv-icon" title="{L_SEARCH_ADV}">{L_SEARCH_ADV}</a>
					{S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div>
			<!-- ENDIF -->

Schneide diese Stelle aus und setze sie in derselben Datei vor

Code: Alles auswählen

<a id="start_here" class="anchor"></a>
	<div id="page-body">

Suche im Stylesheets forms.css folgende Stelle

Code: Alles auswählen

/* Search box (header)
--------------------------------------------- */
.search-header {
	border-radius: 4px;
	display: block;
	float: right;
	margin-right: 5px;
	margin-top: 30px;
}

Ersetze sie durch

Code: Alles auswählen

/* Search box (header)
--------------------------------------------- */
.search-header {
	border-radius: 4px;
	display: block;
	float: right;
	margin: 10px;
	margin-right: 0px;
}

Viel Erfolg
Beate

Vielen Dank für den Code. Ich habe ihn im Testboard ausprobiert - es funktioniert.
Zwei Fragen habe ich noch:
1. Wie bekomme ich den farbigen "Schatten" rund um diese Box weg?
2. Wie erhalte ich einen blau ausgefüllten Rahmen (in der vollen Breite des Forums) in der die Box dargestellt wird. (wie die anderen Links "Schnellzugriff", "Anmelden" usw...)

Kannst du mir helfen?

LG Mark

[Lehrling]

Hallo,
du kannst auch das mal ausprobieren:
du nimmst diesen Abschnitt

Code: Alles auswählen

<div id="search-box" class="search-box search-header">
				<form action="{U_SEARCH}" method="get" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="search" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search tiny" size="20" value="{SEARCH_WORDS}" placeholder="{L_SEARCH_MINI}" />
					<button class="button icon-button search-icon" type="submit" title="{L_SEARCH}">{L_SEARCH}</button>
					<a href="{U_SEARCH}" class="button icon-button search-adv-icon" title="{L_SEARCH_ADV}">{L_SEARCH_ADV}</a>
					{S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div>

aus der Datei overall_header.html heraus und fügst ihn stattdessen in die navbar_header.html ein und zwar vor diesen Abschnitt

Code: Alles auswählen

<li class="rightside responsive-search" style="display: none;"><a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}" role="menuitem">{L_SEARCH}</a></li>

In der responsiven Ansicht erscheint dann nur noch die Lupe.
Die blaue Schattierung bekommst du weg, wenn du im Stylesheet colours.css an dieser Stelle

Code: Alles auswählen

.search-header {
	box-shadow: 0 0 10px #0075B0;
}

aus 10px den Wert 0px machst.

LG Beate

[[Mark]]

Hallo Beate,

nochmals vielen Dank für deine Hilfestellung. Ich bleibe wahrscheinlich bei der ersten Version/ Möglichkeit von dir. Den Schatten habe ich erfolgreich eleminiert. Prima...


LG Mark

[[Mark]]

Hallo nochmal,

es wird zur Zeit an einer Erweiterung mit dem Namen "Navbar Search" gearbeitet. Das Suchfeld wird aus dem Header genommen und neu in die Navbar eingefügt. Hier findet ihr weitere Informationen...


Mark

[Talk19zehn]

Hi, wobei das Verlegen der Suchbox ganz individuell immer gestaltet werden kann. Eine Erweiterung ist dafür nicht grundsätzlich nötig. Warten wir das Ergebnis der Extension schlussendlich mal ab.
Daher würde ich mich den Worten von gn#36 uimächst gerne anschließen wollen: viewtopic.php?p=1334751#p1334751

Das ist eigentlich eher eine Style Anpassung in meinen Augen. Das ändert ja nur das Aussehen, nicht aber Funktionalität. Erstelle dir einfach einen neuen Style, der gegenüber dem jetzt verwendeten lediglich die overall_header.html anpasst und verschiebe darin die Box dahin wo du sie gerne hättest. KB:create31style

Beste Grüße