[3.2] Header in myInvision

[Melmac]

Es gäbe neben der von vfrblue genannten Extension noch einen Weg, dies zurealisieren, ohne deswegen groß in den Code des Styles eingreifen zu müssen.

Schaue Dir mal diese Extension an: [3.1][3.2] Sitelogo responsive - sie skaliert ein über sie eingebundenes Logo (oder jede andere Grafik, die Du hierfür einsetzt) responsiv.
Zusätzlich lassen sich mit ihr dann auch gleich noch die Searchbox, Forumname und -beschreibung verlagern.
Voraussetzung hierfür wäre dann, dass Du Dein Logo und die anderen Bilder in einer einzigen Grafik passender Abmessungen zusammenfasst, die dann statt des bisherigen phpBB-Logos angezeigt wird.

Dieser Style ist allerdings etwas "eigen" aufgebaut, weswegen sie "out of the box" unschöne Resultate liefert - muss mal schauen, wie man sie an ihn anpassen kann.

Eine Frage noch- welche Software ist das die den Namen der Felder anzeigt wie in den Screen?

Jeder moderner Browser verfügt inzwischen normalerweise über integrierte Entwicklerwerkzeuge, unter anderem auch über einen Code-Inspektor.
Je nach Browser wird er unterschiedlich aufgerufen (in Firefox z.B. über F12), eine entsprechende Option sollte aber zusätzlich im Kontextmenü eingetragen sein, wenn Du einen Rechtsklick auf die Seite machst.

[Joyce&Luna]

Wenn du das so haben willst wie vfrblue das hat, dann mache folgendes.

Öffne die overall_header.html
Lösche dieses komplett

Code: Alles auswählen

			<!-- EVENT overall_header_searchbox_before -->
			<!-- IF $HEADSEARCH == 'yes'-->
			<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			<div id="search-box" class="search-box search-header searchback" role="search">
				<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 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_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div>
			<!-- ENDIF -->
			<!-- ENDIF -->
			<!-- EVENT overall_header_searchbox_after -->

suche diese Position

Code: Alles auswählen

	<!-- INCLUDE navbar.html -->
	<div id="content">
	<div id="page-header">

Füge das hier darunter ein.

Code: Alles auswählen

		<!-- EVENT overall_header_searchbox_before -->
			<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			<div id="search-box" class="search-box search-header" role="search">
				<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 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_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div>
			<!-- ENDIF -->
		<!-- EVENT overall_header_searchbox_after -->

Öffne die myinvision.css
Suche dieses

Code: Alles auswählen

.search-box {
    margin-top: 4px;
    margin-left: 5px;
}

Ändere margin-top 4px in 26px um.

Öffne die colours.css und suche

Code: Alles auswählen

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

Ändere die Farbe in #c6c6c6

Das ganze müsste dann passen.

Wenn du noch die Extension haben willst gibt es zwei Varianten, einmal als Button Version
viewtopic.php?f=149&t=232155

und einmal nur Text.
viewtopic.php?f=149&t=239348

Anke

[Talk19zehn]

@Melmac
Genau und nicht zu vergessen ist die options.html, die einfließt und Abstände auf den ersten Blick nicht erneut in weiser Voraussicht konzipiert. Events laufen daher an jener Stelle teils (versehentlich) über das Maß der Dinge hinaus, zerschießen leider manchmal das Layout.

LG

[_Jo_]

Hallo

Quelle vom Style: https://www.phpbb.com/customise/db/style/my_invision/

öffne im Style template die overall_header.html

Suche dieses und schneide es aus.

Code: Alles auswählen

			<!-- EVENT overall_header_searchbox_before -->
			<!-- IF $HEADSEARCH == 'yes'-->
			<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			<div id="search-box" class="search-box search-header searchback" role="search">
				<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 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_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div>
			<!-- ENDIF -->
			<!-- ENDIF -->
			<!-- EVENT overall_header_searchbox_after -->

Suche dann diese Position.

Code: Alles auswählen

	<div id="page-header">
	
		<!-- EVENT overall_header_navbar_before -->
		<!-- INCLUDE breadcrumb.html -->
	</div>

Füge darunter das ausgeschnittene wieder ein.
Speichern, Cache leeren und Browser Cache leeren.

Anke

wenn ich diese Änderungen mache ist es unterhalb der Navbar und blau umrandet.....
Es sollte ohne Umrandung in die navbar.
Kan ich da die Erweiterung NavBar Search nutzen??
https://phpbb.hifikabin.me.uk/viewtopic.php?f=3&t=32

[Joyce&Luna]

Hier ist das was vfrblue dir gezeigt hat ohne den Blauen Rand.
viewtopic.php?p=1375032#p1375032

Ob die Extension funktioniert ... kann ich nicht sagen, ich nutze diese nicht.

[_Jo_]

[ externes Bild ]

sieht gut aus aber am falschen Platz

[Joyce&Luna]

Dann hast du colours.css noch nicht bearbeitet

Code: Alles auswählen

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

Da muss du die Farbe in #c6c6c6 noch ändern.
Cache bitte auch danach leeren auch den von deinem Browser.
Hast du alles auch abgearbeitet?

Das hier auch auf margin-top 26px gesetzt?

Code: Alles auswählen

.search-box {
    margin-top: 4px;
    margin-left: 5px;
}

[Melmac]

Vollständig responsiv beim Einsatz von Kirks Extension - wenn sie einen an diesen Style angepassten zusätzlichen Styleordner spendiert bekommt:

Einzige ( ) Änderung an den Dateien des Styles: eine Zeile mit einem neuen (= eigenen) Event eingefügt (wie gesagt: der Style ist etwas eigen ... ).
Der Rest lässt sich übers CSS der Extension realisieren.
Das Auslagern von Searchbox und Sitedescription funnzt unverändert.

Genau und nicht zu vergessen ist die options.html, die einfließt und Abstände auf den ersten Blick nicht erneut in weiser Voraussicht konzipiert.

Da funkt jetzt nichts dazwischen: die Sidebar hat auf diesen Bereich keine Auswirkung und die originale Searchbox wird über das CSS der Extension in Rente geschickt

[_Jo_]

[ externes Bild ]

die Farbe stört nicht- die Position ist komisch...eigentlich soll es an die rote Stelle

das mit dem Icon hat geklappt, nunist aber ein "platzhalter" davor [ externes Bild ]

[Joyce&Luna]

Kannst du uns ein Link zum Forum geben?
Dann kann ich die Position da besser bestimmen.

Anke