3.2.0 Style Prosilver ändern

[sylvja]

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

[Melmac]

Hi,

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

[sylvja]

oh sorry,

http://nordic-connection.de/

[Lehrling]

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;
}

[Dr.Death]

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

[Joyce&Luna]

Hi

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

Anke

[Melmac]

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:

1. ziehe ein Backup Deines Styles - sicher ist sicher
2. 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)
3. 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
4. ö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 -->

5. speichern, Board- und Browsercache leeren

Ergebnis:
[ externes Bild ]

[ externes Bild ]

[ externes Bild ]

[ externes Bild ]

[ externes Bild ]


Zu den Dateien im Archiv:

1. 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 <!-- INCLUDE new_headerlogo.html -->[/ 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.
2. 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;
       }
   }

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

[sylvja]

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/

[Kirk]

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.

[Melmac]

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