[3.2] Header in myInvision

Alles zu Styles, Templates, Icons und Smilies für phpBB 3.3, sowie allgemeine Designfragen zur Integration von phpBB in bestehende Websites.
Forumsregeln
Bei Style spezifischen Fragen ist der Stylename und die Downloadquelle des Styles erforderlich sowie die URL vom betroffenen Forum.
Benutzeravatar
Melmac
Ehemaliges Teammitglied
Beiträge: 3623
Registriert: 15.10.2012 03:27

Re: [3.2] Header in myInvision

Beitrag von 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.
_Jo_ hat geschrieben: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.
Handle nur nach derjenigen Maxime, durch die du zugleich wollen kannst, dass sie ein allgemeines Gesetz werde.
(Immanuel Kant)
Benutzeravatar
Joyce&Luna
Mitglied
Beiträge: 2470
Registriert: 24.11.2013 18:14
Wohnort: NRW
Kontaktdaten:

Re: [3.2] Header in myInvision

Beitrag von 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
Zuletzt geändert von Joyce&Luna am 08.11.2017 18:39, insgesamt 1-mal geändert.
phpBB-Style-Design.de

Keine Antwort ist die eindeutigste Antwort, die man kriegen kann.
Bitte stellt die Fragen im Forum und nicht per PN. Danke!
Benutzeravatar
Talk19zehn
Ehemaliges Teammitglied
Beiträge: 4909
Registriert: 08.06.2009 12:03
Kontaktdaten:

Re: [3.2] Header in myInvision

Beitrag von 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. :cry: Events laufen daher an jener Stelle teils (versehentlich) über das Maß der Dinge hinaus, zerschießen leider manchmal das Layout.

LG
Beste Grüße
phpBB3 Designs: Stylearea Ongray-Designs
_Jo_
Mitglied
Beiträge: 37
Registriert: 29.10.2017 21:05

Re: [3.2] Header in myInvision

Beitrag von _Jo_ »

Joyce&Luna hat geschrieben: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..... :cry:
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
Benutzeravatar
Joyce&Luna
Mitglied
Beiträge: 2470
Registriert: 24.11.2013 18:14
Wohnort: NRW
Kontaktdaten:

Re: [3.2] Header in myInvision

Beitrag von 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.
phpBB-Style-Design.de

Keine Antwort ist die eindeutigste Antwort, die man kriegen kann.
Bitte stellt die Fragen im Forum und nicht per PN. Danke!
_Jo_
Mitglied
Beiträge: 37
Registriert: 29.10.2017 21:05

Re: [3.2] Header in myInvision

Beitrag von _Jo_ »

[ externes Bild ]

sieht gut aus aber am falschen Platz
Benutzeravatar
Joyce&Luna
Mitglied
Beiträge: 2470
Registriert: 24.11.2013 18:14
Wohnort: NRW
Kontaktdaten:

Re: [3.2] Header in myInvision

Beitrag von 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;
}
Zuletzt geändert von Joyce&Luna am 08.11.2017 20:29, insgesamt 2-mal geändert.
phpBB-Style-Design.de

Keine Antwort ist die eindeutigste Antwort, die man kriegen kann.
Bitte stellt die Fragen im Forum und nicht per PN. Danke!
Benutzeravatar
Melmac
Ehemaliges Teammitglied
Beiträge: 3623
Registriert: 15.10.2012 03:27

Re: [3.2] Header in myInvision

Beitrag von Melmac »

Vollständig responsiv beim Einsatz von Kirks Extension - wenn sie einen an diesen Style angepassten zusätzlichen Styleordner spendiert bekommt:
myinvision_480.png
myinvision_600.png
myinvision_800.png
myinvision_1200.png
Einzige ( :wink: ) Änderung an den Dateien des Styles: eine Zeile mit einem neuen (= eigenen) Event eingefügt (wie gesagt: der Style ist etwas eigen ... :wink: ).
Der Rest lässt sich übers CSS der Extension realisieren.
Das Auslagern von Searchbox und Sitedescription funnzt unverändert.
Talk19zehn hat geschrieben: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 :D
Handle nur nach derjenigen Maxime, durch die du zugleich wollen kannst, dass sie ein allgemeines Gesetz werde.
(Immanuel Kant)
_Jo_
Mitglied
Beiträge: 37
Registriert: 29.10.2017 21:05

Re: [3.2] Header in myInvision

Beitrag von _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 ]
Benutzeravatar
Joyce&Luna
Mitglied
Beiträge: 2470
Registriert: 24.11.2013 18:14
Wohnort: NRW
Kontaktdaten:

Re: [3.2] Header in myInvision

Beitrag von Joyce&Luna »

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

Anke
phpBB-Style-Design.de

Keine Antwort ist die eindeutigste Antwort, die man kriegen kann.
Bitte stellt die Fragen im Forum und nicht per PN. Danke!
Antworten

Zurück zu „Styles, Templates und Grafiken“