phpBB Style Design • Logo responsiv im Header darstellen

Seite 1 von 1

Logo responsiv im Header darstellen

Verfasst: Di 18. Apr 2017, 00:41

von Joyce&Luna

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 (70.1 KiB) 17417 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

Re: Logo responsiv im Header darstellen

Verfasst: Di 18. Apr 2017, 01:01

von Joyce&Luna

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 (57.02 KiB) 17413 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  und füge darüber <h5>{SITE_DESCRIPTION}</h5> das ein.

Das ganze sieht nun so aus.

: logo3.jpg (77.8 KiB) 17413 mal betrachtet

Joyce&Luna

Re: Logo responsiv im Header darstellen

Verfasst: Di 18. Apr 2017, 01:28

von Joyce&Luna

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 (76.87 KiB) 17412 mal betrachtet

Joyce&Luna

Re: Logo responsiv im Header darstellen

Verfasst: Di 18. Apr 2017, 01:30

von Joyce&Luna

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 (73.68 KiB) 17412 mal betrachtet

Joyce&Luna