phpBB.de

phpBB.de - Die deutsche phpBB-Community
https://www.phpbb.de/community/

[3.1] bg_header-Bild responsiv?

https://www.phpbb.de/community/viewtopic.php?t=239513

Seite 3 von 4

Re: [3.1] bg_header-Bild responsiv?

Verfasst: 16.04.2017 20:14
von Kirk
@eumelchen
Hier die Lösung für dein Board.
  • Lade die die EXT runter und istalliere diese.
  • Öffne: root/ext/kirk/site_logo_responsive/styles/prosilver/template/event/overall_header_headerbar_after.html
    Finde:

    Code: Alles auswählen

    <!-- IF SITE_LOGO_RESPONSIVE_ENABLE -->
    Danach einfügen:

    Code: Alles auswählen

    	<img src="{T_THEME_PATH}/images/bg_header.gif" class="bg-header-responsive" alt="">
  • Öffne: root/ext/kirk/site_logo_responsive/styles/prosilver/theme/site_logo_responsive_3_1.css
    Ersetze den gesammten Code hiermit:

    Code: Alles auswählen

    /* Site logo responsive 3_1.css
------------------------------------*/

/* Change value of padding to increase/decrease visible background or set to 0 for seamless display */
.headerbar {
    background-color: transparent;
    background-image: none;
	padding: 5px;
}

.logo {
	display: none;
}

.search-header {
	display: none;
}

#site-description {
	display: none;
}

.search-navbar {
	box-shadow: 0 0 10px transparent;
	border-radius: 4px;
	display: block;
	float: right;
	margin-top: 6px;
}

.header-search-box {
	border-radius: 4px;
	bottom: 18px;
	box-shadow: 0 0 10px transparent;
	display: block;
	position: absolute;
}

#sitelogo-on-header-bar {
	position: relative;
	text-align: left;
}

/* Site description and logo */
.responsive-sitename {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	margin-top: 15px;
	font-weight: bold;
	font-size: 2em;
}

.site-logo-responsive-site-description {
	text-align: center;
}

.bg-header-responsive {
	display: inline-block;
	max-width: 100%;
	border-radius: 7px;
	margin-bottom: -3%;
}

.site-logo-responsive {
	display: inline-block;
	max-width: 12%;
	margin-left: 10px;
	margin-top: -6em;
}

@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) {
	.search-navbar, .header-search-box {
		display: none;
	}

	.headerbar {
		margin-top: 5px;
	}

.site-logo-responsive {
		display: none;
	}
}

@media only screen and (max-width: 550px), only screen and (max-device-width: 550px) {
	.site-logo-responsive-site-description p {
		display: none;
	}

	.responsive-sitename {
		margin-bottom: 0.5em;
		font-size: 1.5em;
	}
}
Da du für die headerbar ein background-image hast, wird dein Logo unterhalb von 701px ausgeblendet.
Wenn du die Hintergrundgrafik verlinkt haben möchtest, dan änder das hier:

Code: Alles auswählen

	<img src="{T_THEME_PATH}/images/bg_header.gif" class="bg-header-responsive" alt="">
in das um:

Code: Alles auswählen

<a href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->"><img src="{T_THEME_PATH}/images/bg_header.gif" class="bg-header-responsive" alt=""></a>
Danach den Foren sowie den Browser Cache leeren.

Re: [3.1] bg_header-Bild responsiv?

Verfasst: 16.04.2017 20:23
von eumelchen
Danke Kirk,

so wie es aussieht ist Deine Änderung für phpBB 3.1, da ich in Kürze auf 3.2 wechseln möchte wäre für mich eine Version für 3.2 sehr interessant.

Re: [3.1] bg_header-Bild responsiv?

Verfasst: 16.04.2017 20:33
von Kirk
Da dein Board ein 3.1er ist, habe ich das natürlich dafür gemacht.
Hättest du das gleich dazugeschrieben müsste ich nicht nochmal anfangen. :o
Evtl. komme ich morgen dazu.

Re: [3.1] bg_header-Bild responsiv?

Verfasst: 16.04.2017 20:37
von eumelchen
Tut mir leid, das hatte ich aber im Eröffnungs-Thema erwähnt.
Ich mache gerade Versuche mit 3.2, da ist das gleiche Problem, nur heißt die Datei dort bg_headerpic.gif, d.h. da werde ich irgendwann auch eine Lösung benötigen. Vielleicht ist aber die Lösung für beide Versionen identisch.

Re: [3.1] bg_header-Bild responsiv?

Verfasst: 16.04.2017 20:57
von Melmac
Für den Fall, dass dies überhaupt für Dich von Interesse ist:
prosilver, phpBB 3.2.0
[ externes Bild ]

Die Anleitung ist die gleiche, wie bereits beim letzten Mal beschrieben.
Wichtig: Falls Du bei Deinen Versuchen die bg_headerpic.gif von prosilver 3.2.0 gegen Deine Grafik ausgetauscht haben solltest, dann musst Du natürlich auch die ursprüngliche Date aus dem Komplettpaket wieder zurückspielen (plus die anderen hierfür am Style gemachten Änderungen wieder zurück nehmen).

Solange Du Dein neues Logo jeweils als site_logo.gif abgespeichert hast, ist es egal, ob Du die Ext unter 3.1.x oder 3.2.0 einsetzt: die Lösung ist identisch, da sie bereits alles auch für 3.2 mitbringt.

Falkls Du noch Feintunig am CSS betreiben willst, dann sind folgende Files zu editieren:
- für prosilver 3.1.10 => root/ext/kirk/site_logo_responsive/styles/prosilver/theme/site_logo_responsive_3_1.css
- für prosilver 3.2.0 => root/ext/kirk/site_logo_responsive/styles/prosilver/theme/site_logo_responsive_3_2.css

Ansonsten musst auf Kirk warten :wink:

Re: [3.1] bg_header-Bild responsiv?

Verfasst: 16.04.2017 23:14
von Joyce&Luna
Melmac hat geschrieben:Könntest Du bitte dem TE eine fertige Lösung anbieten?
Eine (funktionierende), die auch Du bedenkenlos einsetzen würdest :wink:
Hat sich ja nun erledigt.

Anke

Re: [3.1] bg_header-Bild responsiv?

Verfasst: 17.04.2017 09:52
von Kirk
eumelchen hat geschrieben:Tut mir leid, das hatte ich aber im Eröffnungs-Thema erwähnt.
Stimmt das hatte ich irgendwie überlesen.
Hier die Anpassung für 3.2:
  • Die Änderung in der root/ext/kirk/site_logo_responsive/styles/prosilver/template/event/overall_header_headerbar_after.html wie hier beschrieben.
  • Öffne: root/ext/kirk/site_logo_responsive/styles/prosilver/theme/site_logo_responsive_3_2.css
    Ersetze den gesammten Code hiermit:

    Code: Alles auswählen

    /* Site logo responsive 3_2.css
------------------------------------*/

/* Change value of padding to increase/decrease visible background or set to 0 for seamless display */
.headerbar {
    background-color: transparent;
    background-image: none;
	padding: 5px;
}

.headerbar a {
	display: inline;
}

.logo {
	display: none;
}

.search-header {
	display: none;
}

.site-description {
	display: none;
}

.search-navbar {
	box-shadow: 0 0 10px transparent;
	border-radius: 4px;
	display: block;
	float: right;
	margin-top: 6px;
}

.header-search-box {
	border-radius: 4px;
	box-shadow: 0 0 10px transparent;
	display: block;
	position: absolute;
}

#sitelogo-on-header-bar {
	position: relative;
	text-align: left;
}

/* Site description and logo */
.responsive-sitename {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	margin-top: 15px;
	font-weight: bold;
	font-size: 2em;
}

.site-logo-responsive-site-description {
	text-align: center;
}

.bg-header-responsive {
   display: inline-block;
   max-width: 100%;
   border-radius: 7px;
   margin-bottom: -3%;
}

.site-logo-responsive {
   display: inline-block;
   max-width: 12%;
   margin-left: 10px;
   margin-top: -6em;
}


@media (max-width: 550px) {
	.site-logo-responsive-site-description p {
		display: none;
	}

	.responsive-sitename {
		margin-bottom: 0.5em;
		font-size: 1.5em;
	}
}

@media (max-width: 700px) {
	.search-navbar, .header-search-box {
		display: none;
	}

	.headerbar {
		margin-top: 5px;
	}

.site-logo-responsive {
		display: none;
	}
}
Danach den Foren sowie den Browser Cache leeren.

Re: [3.1] bg_header-Bild responsiv?

Verfasst: 17.04.2017 11:13
von eumelchen
Danke, Kirk, werde ich jetzt mal testen.

Re: [3.1] bg_header-Bild responsiv?

Verfasst: 18.04.2017 02:44
von Joyce&Luna
Hi Eumelchen

Ich war mal so frei und habe hier was zu selber basteln erstellt. Wurde ja darum gebeten dir eine Alternative zu dieser Extension anzubieten.
https://phpbb-style-design.de/viewtopic ... p=245#p245
Gibt noch andere Möglichkeiten.

Anke

Re: [3.1] bg_header-Bild responsiv?

Verfasst: 18.04.2017 08:54
von eumelchen
Danke, Anke, jetzt habt Ihr mich beschäftigt.
Alle Zeiten sind UTC+02:00
Seite 3 von 4

Powered by phpBB® Forum Software © phpBB Limited

Deutsche Übersetzung durch phpBB.de