phpBB.de

Verfasst: **07.03.2017 22:11**

hey ich hab echt keine ahnung mehr was ich machen soll....

habe das site_logo in der größe eingebunden wie oben beschrieben.

Code: Alles auswählen

     float: center;
     display: inline-block;
     width: 1195px;
     height: 135px;

jetzt schaut es auf der Seite raus. Dazu hab ich noch das Problem das der Blaue Hintergrund zusehen ist.

Kann mir bitte jemand helfen?!

Danke

Verfasst: **08.03.2017 00:07**

Hi,

könntest Du uns bitte einen Link zu Deinem Board geben?

Verfasst: **08.03.2017 12:11**

oh sorry,

http://nordic-connection.de/

Verfasst: **08.03.2017 12:43**

Der Container wrap hat eine maximale Breite von 1152px und ist somit zu schmal für das Logo. Setze den Wert mal auf 1225px hoch. Die entsprechende Stelle ist die hier (im common.css):

Code: Alles auswählen

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

Verfasst: **08.03.2017 12:53**

Hinweis, das Ganze ist doch dann wieder blöd, wenn die User Ihren Browser nicht ganz aufziehen....dann fällt doch das riesige Hintergrundbild erneut aus dem Rahmen....

Seht Euch mal das Forum von mir an.... ich habe das Hintergrundbild so gestaltet, das es linksbündig ist und nach rechts hin mit der Hintergrundfarbe verläuft.
Nun kann man den Browser stufenlos verkleinern, bis endlich das Responsive aktiv wird...

Verfasst: **08.03.2017 13:14**

Hi

Ein background-size: 100% auto; würde das Bild im Hintergrund auch responsiv zeigen.

Anke

Verfasst: **08.03.2017 15:37**

Hi,

ohne jetzt die anderen Vorschläge hier alle ausgetestet zu haben ...
... noch einweiterer Ansatz hinterher

Kurze Anmerkung vorweg: es ist erst einmal nur ein grober Entwurf (u.a. ist die Anzeige/Positionierung der Searchbox noch etwas "unrund") - ob es die "optimale" Lösung ist, bleibt eh dahingestellt

Ziel war hierbei, möglichst wenig manuellen Nachbearbeitungsaufwand bei zukünftigen Style-Updates zu verursachen = mit so wenigen Anpassungen wie möglich an den Originaldateien auszukommen.

Vorgehen:

ziehe ein Backup Deines Styles - sicher ist sicher
mache alle bisher in diesem Zusammenhang durchgeführten Änderungen an den Stylesheets wieder rückgängig (oder, wenn es keine weiteren Anpassungen außer den hier im Thema genannten gibt, überschreibe die Dateien des Styles durch die im Komplettpaket enthaltenen)
entpacke das im Anhang befindliche Archiv und lade den dort enthaltenen Ordner "subsilver" ins Styleverzeichnis Deines Boards hoch (bei der Abfrage, ob vorhandene Dateien überschrieben werden sollen, bitte bestätigen)
Dieses Archiv enthält, in der korrekten Ordnerstruktur, folgende Dateien:
1. im Template-Ordner => new_headerlogo.html
2. im Theme-Verzeichnis => eine ergänzte stylesheet.css und eine Datei custom.css

öffne /styles/prosilver/template/overall_header.html
suche

Code: Alles auswählen

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

ersetze durch

Code: Alles auswählen

		<!-- INCLUDE new_headerlogo.html -->

speichern, Board- und Browsercache leeren

Ergebnis:
[ externes Bild ]

[ externes Bild ]

[ externes Bild ]

[ externes Bild ]

[ externes Bild ]

Zu den Dateien im Archiv:

new_headerlogo.html
Diese enthält den Code, den Du vorher aus der overall_header.html entfernt hast - so angepasst, dass er Dein Logo responsiv anzeigt.
Code: Alles auswählen
```
			<div id="site-description" class="site-description">
				<div class="logo-container">
					<div class="new-logo">
						<img src="{T_THEME_PATH}/images/site_logo.gif" />
					</div>
				</div>
				<h1>{SITENAME}</h1>
				<p>{SITE_DESCRIPTION}</p>
				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
			</div>
```
Das in die overall_header.html eingefügte [/ bindet diese Datei jetzt an der ursprünglichen Code-Stelle wieder ein.
Vorteil (IMHO ): bei einem Styleupdate brauchst Du nur dieses eine Edit neu vorzunehmen.

custom.css
Enthält zentral alle CSS-Anpassungen => die originalen CSS-Dateien müssen so nicht verändert werden

Code: Alles auswählen

.site-description {
    width: 100%;
    height: auto;
}

.site-description h1, .site-description p {
    display: none;
}

.logo-container {
    width: auto;
}

.new-logo {
    width: auto;
    height: auto;
}

.new-logo img {
    width: 100%;
    height: 100%;
}

.search-header {
    margin-top: -26px;
}

@media (max-width: 1050px) {
    .search-box {
        display: none;
    }
}

stylesheet.css
Am Ende der Datei wurde mit
Code: Alles auswählen
```
@import url("custom.css");
```
diese neue CSS-Datei eingebunden

Die Searchbox wird erst in Auflösungen ab 1050px angezeigt, da sie ansonsten mit der Schrift des Logos (optisch) kollidieren würde.
Soweit ich es auf die Schnelle antesten konnte, müsste dies alles in jeder beliebigen Auflösung funktionieren und das Logo sauber skaliert angezeigt werden.

Verfasst: **08.03.2017 17:10**

so ich hab jetzt alles ausprobiert.......
nur ist der blaue hintergrund vom style immer noch da.
hab jetzt einfach mal ein blauen dunkleren Balken als "Hintergrund" hin gemacht um evtl deutlicher zu machen das der hellere da nicht hin soll.

was kann ich noch machen??

http://nordic-connection.de/

Verfasst: **08.03.2017 19:23**

Hallo
Wenn du das hellere blau meinst dann öffne die overall_header.html deines Styles und finde das hier:

Code: Alles auswählen

<div class="headerbar" role="banner">

Ersetze es damit:

Code: Alles auswählen

<div class="headerbar-" role="banner">

Danach deinen Foren sowie deinen Browser Cache leeren.

Verfasst: **08.03.2017 19:32**

Wenn der dunkelblaue Kasten Deine Grafik repräsentieren sollte, dann ist dessen Darstellung leider immer noch nicht responsive:

phpBB.de

3.2.0 Style Prosilver ändern

Re: 3.2.0 Style Prosilver ändern

Re: 3.2.0 Style Prosilver ändern

Re: 3.2.0 Style Prosilver ändern

Re: 3.2.0 Style Prosilver ändern

Re: 3.2.0 Style Prosilver ändern

Re: 3.2.0 Style Prosilver ändern

Re: 3.2.0 Style Prosilver ändern

Re: 3.2.0 Style Prosilver ändern

Re: 3.2.0 Style Prosilver ändern

Re: 3.2.0 Style Prosilver ändern