[3.2] Header transparent

[Wishmaster84]

Hallo Leute,

habe noch mal ein kleines Problem, gerne würde ich den Bereich über der navbar transparent haben wollen. So das oben nur noch das Logo und der Hintergrund zu sehen ist.

Ich habe mal etwas probiert, komme aber nicht wirklich weiter, evtl. hat jemand eine Idee. Anbei der Link meiner Seite und ein Screenshot. Ich habe den Bereich Rot makiert welcher transparent werden soll. Der Rahmen des Forum sollte dann natürlich kurz Oberhalb der navbar enden und nicht über dem Logo.

[ externes Bild ]
https://www.neuesforum.so-buli.de/index.php

[Lehrling]

Hi,
probiers mal mit folgender Vorgehensweise:
alle Änderungen nimmst du in deinem eigenen Stylesheet vor.
Bei .wrap setzt die die Hintergrundfarbe auf transparent: background-color: transparent;
Nun fügst du in dein Stylesheet .page-body und .page-footer ein und weist ihnen als Hintergrundfarbe z.B. dieses Hellgrün #d6f4d2; zu.
In deinem Stylesheet sind manche Angaben doppelt drin mit unterschiedlichen Werten, die Headerbar z.B. Das führt zu Konflikten. Die Headerbar sollte ja auch transparent sein. Wenn plötzlich ein Blauton erscheint, musst du bei .headerbar noch background-image:none; einbauen.

[Wishmaster84]

Vielen Dank für die Hilfe,

ich habe jetzt folgende Codes verwendet.

Code: Alles auswählen

.wrap {
    background-color: transparent;
    border: transparent;
	
}

.page-body {
	background-color: #d6f4d2;
}

.page-footer {
	background-color: #d6f4d2;
}

Aktuell ist es leider so das jetzt auch das andere Dinge als nur der Header transparent sind. Ich glaube das ich was flasch gemacht habe, ich möchte nur den Header transparent. Ab der Navbar sollte dir Farber wieder Grün sein, da dass Forum nach Links und Rechts so abgeschnitten aussieht. Ich hoffe man versteht mich

[Lehrling]

Ja, das sind so ein paar Lücken. Du könntest es mal mit margin testen.
Also bei .page-body und .page-footer.
Beispiel:

Code: Alles auswählen

.page-body {
   background-color: #d6f4d2;
   margin-top: -2px;
  margin-bottom: -17px;
}

Ist jetzt auch nicht die ideale Lösung. Ansonsten müsstest du die Headerbar (das ist das, was du transparent haben möchtest) aus dem wrap-Container herauslösen und da wird es knifflig.

[Wishmaster84]

Wäre das sehr knifflig?

Würde es gerne so machen, da das Forum unterhalb der Navbar sehr abgeschnitten nach Links und Rechts aussieht.

Was genau müsste ich denn machen?


Vielen lieben Dank im vorraus

[Lehrling]

Ich gehe davon aus, dass die Datei overall_header.html in deinem Style vorhanden ist (im Ordner template), denn du hast ja die Stylesheets von prosilver eingebunden. Du öffnest also die Datei overall_header.html und fügst direkt nach <!-- EVENT overall_header_body_before -->

folgendes ein:

Code: Alles auswählen

<div class="logobar">
          <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>
</div>

Diesen Teil löschst du dann weiter unten in derselben Datei:

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>

Somit hast du das Logo und die Seitenbeschreibung aus der Headerbar gelöst und nach oben verschoben.

Nun öffnest du das stylesheet.css und weist dem Container .logobar Werte zu. Er braucht eine feste Höhe, weil dem Logo standardmäßig auch eine feste Höhe zugewiesen ist. Bei dir sind das 225px.
Dein Eintrag könnte also so aussehen:

Code: Alles auswählen

.logobar {
     background-color: transparent;
     color: #000000;
     height: 225px;
     margin: auto; 
  }

Damit das Ganze auch noch responsiv ist, müsstest du noch folgendes eintragen:

Code: Alles auswählen

@media only screen and (max-width: 700px), only screen and (max-width: 700px)  {  
.logobar {
	      height: auto;
	}
}

Das Logo verschwindet standardmäßig nämlich bei einer Größe kleiner 700px.

[Wishmaster84]

Vielen lieben Dank, du bist ein Engel.

Achja und tolle YouTube Videos von dir