[3.2] "Action-Bar" oben und unten verändern

[peter2019]

Guten Abend,

wie lässt sich denn die obere Action-Zeile über dem Forum ("Neues Thema", Suchfunktion, "Themen als gelesen markieren • 4 Themen • Seite 1 von 1")
ausblenden/nicht anzeigen und die untere Action-Zeile unter dem Forum so modifizieren, dass hinter "Neues Thema" und den Sortieroptionen die Suchfunktion erscheint?

Vermutlich nicht via Mondifikation in einer common.css(?), sondern eher in viewforum.php, oder?

Danke im Voraus!

[Tastenplayer]

wie lässt sich denn die obere Action-Zeile über dem Forum ("Neues Thema", Suchfunktion, "Themen als gelesen markieren • 4 Themen • Seite 1 von 1") ausblenden/nicht anzeigen

Vermutlich nicht die korrekteste, aber die schnellste Lösung und man muss nicht in der html Code löschen oder ändern:

common.css oder deinstyle.css

Code: Alles auswählen

.action-bar.bar-top {
    display: none;
}

untere Action-Zeile unter dem Forum so modifizieren, dass hinter "Neues Thema" und den Sortieroptionen die Suchfunktion erscheint?

viewforum_body.html - Zeilen 54-69
Ausschneiden

Code: Alles auswählen

	<!-- IF S_DISPLAY_SEARCHBOX -->
		<div class="search-box" role="search">
			<form method="get" id="forum-search" action="{S_SEARCHBOX_ACTION}">
			<fieldset>
				<input class="inputbox search tiny" type="search" name="keywords" id="search_keywords" size="20" placeholder="{L_SEARCH_FORUM}" />
				<button class="button button-search" type="submit" title="{L_SEARCH}">
					<i class="icon fa-search fa-fw" aria-hidden="true"></i><span class="sr-only">{L_SEARCH}</span>
				</button>
				<a href="{U_SEARCH}" class="button button-search-end" title="{L_SEARCH_ADV}">
					<i class="icon fa-cog fa-fw" aria-hidden="true"></i><span class="sr-only">{L_SEARCH_ADV}</span>
				</a>
				{S_SEARCH_LOCAL_HIDDEN_FIELDS}
			</fieldset>
			</form>
		</div>
	<!-- ENDIF -->

Suche

Code: Alles auswählen

			<!-- INCLUDE display_options.html -->
			</form>
		<!-- ENDIF -->

Füge den zuvor ausgeschnittenen Code ein

Code: Alles auswählen

	<!-- IF S_DISPLAY_SEARCHBOX -->
		<div class="search-box" role="search">
			<form method="get" id="forum-search" action="{S_SEARCHBOX_ACTION}">
			<fieldset>
				<input class="inputbox search tiny" type="search" name="keywords" id="search_keywords" size="20" placeholder="{L_SEARCH_FORUM}" />
				<button class="button button-search" type="submit" title="{L_SEARCH}">
					<i class="icon fa-search fa-fw" aria-hidden="true"></i><span class="sr-only">{L_SEARCH}</span>
				</button>
				<a href="{U_SEARCH}" class="button button-search-end" title="{L_SEARCH_ADV}">
					<i class="icon fa-cog fa-fw" aria-hidden="true"></i><span class="sr-only">{L_SEARCH_ADV}</span>
				</a>
				{S_SEARCH_LOCAL_HIDDEN_FIELDS}
			</fieldset>
			</form>
		</div>
	<!-- ENDIF -->

[ externes Bild ]

Das Gleiche in viewtopic_body.html
Ausschneiden ungefähr Zeile 48-63

Code: Alles auswählen

	<!-- IF S_DISPLAY_SEARCHBOX -->
		<div class="search-box" role="search">
			<form method="get" id="topic-search" action="{S_SEARCHBOX_ACTION}">
			<fieldset>
				<input class="inputbox search tiny"  type="search" name="keywords" id="search_keywords" size="20" placeholder="{L_SEARCH_TOPIC}" />
				<button class="button button-search" type="submit" title="{L_SEARCH}">
					<i class="icon fa-search fa-fw" aria-hidden="true"></i><span class="sr-only">{L_SEARCH}</span>
				</button>
				<a href="{U_SEARCH}" class="button button-search-end" title="{L_SEARCH_ADV}">
					<i class="icon fa-cog fa-fw" aria-hidden="true"></i><span class="sr-only">{L_SEARCH_ADV}</span>
				</a>
				{S_SEARCH_LOCAL_HIDDEN_FIELDS}
			</fieldset>
			</form>
		</div>
	<!-- ENDIF -->

Suche

Code: Alles auswählen

	<!-- EVENT viewtopic_dropdown_bottom_custom -->

	<!-- IF .pagination or TOTAL_POSTS -->

Füge in der mitte den oben ausgeschnittenen code ein

Code: Alles auswählen

		<!-- IF S_DISPLAY_SEARCHBOX -->
		<div class="search-box" role="search">
			<form method="get" id="topic-search" action="{S_SEARCHBOX_ACTION}">
			<fieldset>
				<input class="inputbox search tiny"  type="search" name="keywords" id="search_keywords" size="20" placeholder="{L_SEARCH_TOPIC}" />
				<button class="button button-search" type="submit" title="{L_SEARCH}">
					<i class="icon fa-search fa-fw" aria-hidden="true"></i><span class="sr-only">{L_SEARCH}</span>
				</button>
				<a href="{U_SEARCH}" class="button button-search-end" title="{L_SEARCH_ADV}">
					<i class="icon fa-cog fa-fw" aria-hidden="true"></i><span class="sr-only">{L_SEARCH_ADV}</span>
				</a>
				{S_SEARCH_LOCAL_HIDDEN_FIELDS}
			</fieldset>
			</form>
		</div>
	<!-- ENDIF -->

Ich hoffe, das stimmt so auch noch mit dem Event! Das kann ich nun nicht überprüfen
[ externes Bild ]

Responsive muss aber diese Searchbox in der Action-Bar bottom noch angepasst werden. Margin-top stimmt nicht! Jedenfalls in meinem Style ist dies der Fall [ externes Bild ]
Bedenke: In der viewtopic gibt es halt unten ein ziemliches Gedränge ob der zusätzlichen Searchbox. Die Anzeige im Responsiven muss ja auch noch stimmen, das vergisst man leider manchmal

[peter2019]

Ich werde es morgen in Ruhe testen und Rückmeldung geben...

[peter2019]

(...) Bedenke: In der viewtopic gibt es halt unten ein ziemliches Gedränge ob der zusätzlichen Searchbox. Die Anzeige im Responsiven muss ja auch noch stimmen, das vergisst man leider manchmal

... hat mich dazu bewogen, es sein zu lassen. Aber wo man was wie ändern würde, war für mich bereits generell interessant - dank Dir für die Hinweise!

[Tastenplayer]

Man könnte allerdings den Code so ändern, dass unten nur noch das Search Icon angezeigt wird (in meinem Style hatte ich da für die Search Header einfach ein display: none hingesetzt für die Inputbox und das erweiterte Suchen Icon. Der Style wurde so validiert. Aber es ist eben nicht das, was einer vom Fach macht. Deshalb hatte ich Dir das auch nicht hingeschrieben. Aber natürlich müsste man trotzdem alles neu anpassen unten.