Logo responsiv im Header darstellen

Alles rund um Snippets und Extensions zu phpBB 3.2
Antworten
Benutzeravatar
Joyce&Luna
Administrator
Beiträge  621
Registriert  Fr 4. Mär 2016, 05:29
Wohnort  Erkrath

Logo responsiv im Header darstellen

Beitrag von Joyce&Luna » Di 18. Apr 2017, 00:41

Dies gilt nur für Logos die eine Breite von 1200px haben.
Es sind Anpassungen notwendig, wenn Prosilver breiter dargestellt wird. Hier ist anzuraten, das Logo so breit wie das Forum darzustellen.

Öffne die common.css und füge am Ende folgendes hinzu.

Code: Alles auswählen

.logo-image-wrapper{
	width: 100%;
	position: relative;
	display: block;
	margin: 0 auto;
}
öffne die overall_header.html
Suche die Zeile

Code: Alles auswählen

		<!-- EVENT overall_header_headerbar_before -->
			<div class="inner">
Füge darunter die Zeile

Code: Alles auswählen

		<a href="<!-- IF U_SITE_HOME -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->">
		<img src="{T_THEME_PATH}/images/site_logo.gif" class="logo-image-wrapper" alt=""></a>
	
Suche die Zeile und lösche diese

Code: Alles auswählen

				<a id="logo" class="logo" href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->"><span class="site_logo"></span></a>
Das ganze sieht jetzt so aus.
logo1.jpg
logo1.jpg (70.1 KiB) 13422 mal betrachtet
Dies ist der Ausgangspunkt und muss in allen 3 Varianten angewendet werden
Möchte man nun den Seitennamen wieder mit ins Logo packen, geht dieses leider nicht.
Dafür habe ich noch keine passende Lösung gefunden.

Joyce&Luna
Joyce&Luna

Benutzeravatar
Joyce&Luna
Administrator
Beiträge  621
Registriert  Fr 4. Mär 2016, 05:29
Wohnort  Erkrath

Re: Logo responsiv im Header darstellen

Beitrag von Joyce&Luna » Di 18. Apr 2017, 01:01

Varinate 1.
Searchbox und Seitenname, über das Logo.
Seitenbeschreibung unter der Navbar.

öffne die overall_header.html und suche dieses und schneide es aus.

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 -->
Füge dieses direkt unter <div id="wrap" class="wrap"> wieder ein.

öffne die commons.css und suche

Code: Alles auswählen

.wrap {
	border: 1px solid transparent;
	border-radius: 8px;
	margin: 0 auto;
	max-width: 1152px;
	min-width: 625px;
	padding: 15px;
}
und ändere margin: 0 auto; in margin: 23px auto;

öffne die form.css und finde das.

Code: Alles auswählen

.search-header {
	border-radius: 4px;
	display: block;
	float: right;
	margin-right: 5px;
	margin-top: 30px;
}

und ändere margin-top: 30px; in margin-top: -43px;

Nun sieht das ganze so aus.
logo2.jpg
logo2.jpg (57.02 KiB) 13418 mal betrachtet
Hier trenne ich nun den Sitenname von der Seitenbeschreibung und füge den Seitenname auch über dem Logo ein.

Hierzu öffnet man die overall_header.htm und sucht folgendes:

Code: Alles auswählen

			<div class="site-description">
				<h1>{SITENAME}</h1>
				<p>{SITE_DESCRIPTION}</p>
				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
			</div>
Das fügt man dann auch direkt unter <div id="wrap" class="wrap"> ein, man löscht die Zeile <p>{SITE_DESCRIPTION}</p>
Man geht dann in die colours.css ändert dort beliebig den Farbcode. z.B. #555555

Code: Alles auswählen

h1 {
	color: #FFFFFF;
}
Man öffnet die common.css und sucht.

Code: Alles auswählen

h1 {
	/* Forum name */
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	margin-right: 200px;
	margin-top: 15px;
	font-weight: bold;
	font-size: 2em;
}
ändere margin-top: 15px; in margin-top: -43px;

Hier müsst ihr noch mal den Code in der common.css verändern

Code: Alles auswählen

.logo-image-wrapper {
    background-repeat: no-repeat;
    display: block;
    margin: 0 auto;
    position: relative;
    width: 100%;
}
Füge dort hinter margin: 0 auto; ein margin: 0 auto -4px; ein.

Füge am Ende der common.css dieses hinzu.

Code: Alles auswählen

h5 {
	font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
    font-size: 1.5em;
    font-weight: normal;
    margin: 0.3em 0;
    text-align: center;
}

Code: Alles auswählen

@media (min-width: 701px) and (max-width: 1220px) {
	body {
		padding: 34px;
	}
}
Jetzt müssen wir nur noch die Seitenbeschreibung unter bringen und ich setze diese unter der Navbar.

öffne die overall_header.html suche dieses <!-- EVENT overall_header_page_body_before --> und füge darüber <h5>{SITE_DESCRIPTION}</h5> das ein.

Das ganze sieht nun so aus.
logo3.jpg
logo3.jpg (77.8 KiB) 13418 mal betrachtet
Joyce&Luna
Joyce&Luna

Benutzeravatar
Joyce&Luna
Administrator
Beiträge  621
Registriert  Fr 4. Mär 2016, 05:29
Wohnort  Erkrath

Re: Logo responsiv im Header darstellen

Beitrag von Joyce&Luna » Di 18. Apr 2017, 01:28

Zweite Variante

Man lässt beides hinter dem Logo verschwinden.

öffne die common.css suche

Code: Alles auswählen

h1 {
    font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
    font-size: 2em;
    font-weight: bold;
    margin-right: 200px;
    margin-top: 15px;
}
ändere margin-top: 15px; in margin-top: -40px;

öffne forms.css und suche

Code: Alles auswählen

.search-header {
	border-radius: 4px;
	display: block;
	float: right;
	margin-right: 5px;
	margin-top: 30px;
}
ändere margin-top: 30px; in margin-top: -40px;

öffne common.css suche folgendes

Code: Alles auswählen

.logo-image-wrapper{
	width: 100%;
	position: relative;
	display: block;
	margin: 0 auto;
	background-repeat: no-repeat;
}
ändere dort margin: 0 auto; in margin: 0 auto -18px;

Füge am Ende noch folgendes ein.

Code: Alles auswählen

@media (max-width: 700px) {
.logo-image-wrapper{
	margin: 0 auto -38px;
}
}
Das ganze sieht dann so aus.
logo4.jpg
logo4.jpg (76.87 KiB) 13417 mal betrachtet
Joyce&Luna
Joyce&Luna

Benutzeravatar
Joyce&Luna
Administrator
Beiträge  621
Registriert  Fr 4. Mär 2016, 05:29
Wohnort  Erkrath

Re: Logo responsiv im Header darstellen

Beitrag von Joyce&Luna » Di 18. Apr 2017, 01:30

Dritte Variante

Seitenname und Seitenbeschreibung unter der Headerbar.

öffne die overall_header.html und suche und markiere das

Code: Alles auswählen

<div id="wrap" class="wrap">
	<a id="top" class="top-anchor" accesskey="t"></a>
	<div id="page-header">
		<div class="headerbar" role="banner">
		<!-- EVENT overall_header_headerbar_before -->
			<div class="inner">

		<a href="<!-- IF U_SITE_HOME -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->">
		<img src="{T_THEME_PATH}/images/site_logo.gif" class="logo-image-wrapper" alt=""></a>

			<div id="site-description" class="site-description">
				<h1>{SITENAME}</h1>
				<p>{SITE_DESCRIPTION}</p>
				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
			</div>

			<!-- 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 -->
und ersetze dies hier mit.

Code: Alles auswählen

<div id="wrap" class="wrap">
	<a id="top" class="top-anchor" accesskey="t"></a>
	<div id="page-header">
		<div class="headerbar" role="banner">
		<!-- EVENT overall_header_headerbar_before -->
		<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
			<div class="inner">

		<a href="<!-- IF U_SITE_HOME -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->">
		<img src="{T_THEME_PATH}/images/site_logo.gif" class="logo-image-wrapper" alt=""></a>
	
			</div>
			<!-- EVENT overall_header_headerbar_after -->
		</div>
		<!-- EVENT overall_header_navbar_before -->
		<!-- INCLUDE navbar_header.html -->

				<h1>{SITENAME}</h1>
				<h5>{SITE_DESCRIPTION}</h5>

			<!-- 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 common.css und suche dieses:

Code: Alles auswählen

h1 {
	/* Forum name */
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	margin-right: 200px;
	margin-top: 15px;
	font-weight: bold;
	font-size: 2em;
}
und ersetze das hier mit

Code: Alles auswählen

h1 {
    font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
    font-size: 2em;
    font-weight: bold;
    margin-top: 4px;
    text-align: center;
}
und füge in Zeile 58 unter h4 dieses hinzu

Code: Alles auswählen

h5 {
	font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
    font-size: 1.5em;
    font-weight: normal;
    margin: 0.3em 0;
    text-align: center;
}
öffne die forms.css und suche dieses.

Code: Alles auswählen

.search-header {
	border-radius: 4px;
	display: block;
	float: right;
	margin-right: 5px;
	margin-top: 30px;
}
und ersetze das hiermit.

Code: Alles auswählen

.search-header {
    border-radius: 4px;
    display: block;
    float: right;
    margin-bottom: 7px;
    margin-right: 5px;
    margin-top: 6px;
}
Das ganze sieht dann so aus.
logo5.jpg
logo5.jpg (73.68 KiB) 13417 mal betrachtet
Joyce&Luna
Joyce&Luna

Antworten