[3.1] bg_header-Bild responsiv?

[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.

[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.

[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.
Evtl. komme ich morgen dazu.

[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.

[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

[Joyce&Luna]

Könntest Du bitte dem TE eine fertige Lösung anbieten?
Eine (funktionierende), die auch Du bedenkenlos einsetzen würdest

Hat sich ja nun erledigt.

Anke

[Kirk]

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.

[eumelchen]

Danke, Kirk, werde ich jetzt mal testen.

[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

[eumelchen]

Danke, Anke, jetzt habt Ihr mich beschäftigt.