Headerlogo

[Talk19zehn]

Hallo Malte, leider äußerst du dich nicht, um welchen Style es sich in deinem Falle handelt und ich finde keine Information darüber, was du bereits eingepflegt hast. Du kannst leider nicht eine fixe Breite ( Chalong and... ) und eine variable Breite ( Metzi-Mods... ) miteinander vergleichen, wenn du den Header konzipierst. So hat die Seite von Chalong and... bspw. eine fixe Breite von rd. 910px und die Seite von Metzle passt sich der Bildschimauflösung des Besuchers an. Die Grafiken sind folglich einerseits gegenständlich und andererseits abstrakt. Das CSS ist außerdem grundlegend verschieden und in Abhängigkeit des vorgegebenen und/oder ergänzten Quelltextes ist es ein Erfordernis das Logo oder einen Header zu kreieren / anzupassen, sofern eine andere als die Standardlösung gewünscht ist. Im Forum selbst findest du unzählige Beiträge, die Lösungsvorschläge für dich bereit halten. Ich habe mal nachgeschaut - Auszug:
Ggf. ist etwas für dich dabei

viewtopic.php?f=85&t=216426
https://www.phpbb.de/kb/logo30x
viewtopic.php?p=1241992#p1241992
search.php?keywords=Header&terms=all&au ... bmit=Suche
search.php?st=0&sk=t&sd=d&sr=posts&keyw ... o&start=40
search.php?keywords=Headerkasten&terms= ... bmit=Suche


Eine Lösung wird sich ohne einen Link deiner Seite kaum finden lassen.

Beste Grüße

[Malte]

Ok, danke für deine Hilfe und die vielen Links ich habe mir das ganze einmal genauer angeguckt. Du hast auch Recht, ich habe zu wenig Informationen dazu preisgegeben. Also dann erkläre ich es nochmal etwas genauer:
Mein Style ist Prosilver.
Ich habe bereits den MOD [RC] Custom Header Logo 1.2.6 (logos, bg and custom pages) bei mir eingebaut, und der funktioniert bereits wunderbar.
Nun ist das, was ich noch wissen möchte, wie es geht, dass sich der Rand, zwischen der (noch) blauen Fläche und dem Bild selbst verflüchtigt. Ich kann zwar das Bild so Breit und hoch machen wie ich möchte, aber dabei bleibt immer dieser blaue Rand (Farbe kann verändert werden) um das Bild herum übrig und den würde ich gerne weg haben. Das ist das Problem. Dazu habe ich bereits ein paar Artikel in der Knowledge Base gelesen, doch ich bin nicht auf ein sinnvolles Ergebnis gekommen. Ich habe dabei ein wenig an der common.css gepfuscht. Kann mir jemand sagen, was man da genau verändert müsste um den Rand zu deaktivieren? Ich habe es mal versucht, indem ich an

Code: Alles auswählen

#logo {
	float: left;
	width: auto;
	padding: 10px 13px 0 10px;
}

ein wenig am Padding gedreht habe, aber da hat sich irgendwie auch noch Cache leeren, Grafiksammlungen aktualisieren etc. nichts bewegt.

PS: Zu den Beispielforen: Ja, Metzimods ist ein anderes die anderen 3 Beispiele sind aber gleich. Ich würde das von Metzimods schon mehr bevorzugen, da es die volle Bildschirmbreite ausnutzt.

Gruß
Malte

[Michel_61]

Moin,

das blaue vom Header wird über eine Grafikdatei in der /theme/colours.css aufgerufen.

Code: Alles auswählen

/* Round cornered boxes and backgrounds
---------------------------------------- */
.headerbar {
	background-color: #12A3EB;
	background-image: url("{T_THEME_PATH}/images/bg_header.gif");
	color: #FFFFFF;
}

Ich bin nicht der Programmiercrack, aber probier doch einfach mal die Datei im Verzeichnis /theme/images/ um zu benennen und schau mal ob das geht, ansonsten kannst du auch den Eintrag der Datei aus der .css löschen, oder aber die bg_header.gif grafisch aufarbeiten, so das es wieder zum Headerlogo passt.

Grüße, Micha

[Talk19zehn]

Hi Malte, so hast du jenes bereits erwähnte Snippet nicht versucht? viewtopic.php?f=85&t=216426

Ob sich hierbei eine weitere Anpassung auf die von dir verbaute Midifikation ergibt, entzieht sich allerdings meiner Kenntnis.

Viele Grüße

[Malte]

Hallo,

Hast du jenes bereits erwähnte Snippet nicht versucht? viewtopic.php?f=85&t=216426

Genau dieses Snippet habe ich nun versucht, bisher hatte ich es mir nur durchgelesen. Also bevor ich Änderungen an meinem Forum vornehme, führe ich die Änderungen immer in meinem Testforum durch, damit ich mein richtiges Forum nicht zu sehr schädige. Ihr könnt euch mal Testforum unter folgender Adresse angucken:
http://maps.square7.ch

Also ich erkläre jetzt mal welche Änderungen ich bereits alle vorgenommen habe. Die richteten sich meist nach dem erwähnten Snippet. Vorher möchte ich noch dazu sagen, dass mein Headerbild folgendes ist: http://maps.square7.ch/banner.gif (Größe 1250x150 Pixel)

Änderungen:
styles/prosilver/theme/common.css

Code: Alles auswählen

        .headerbar {
           background: #ebebeb none repeat-x 0 0;
           color: #FFFFFF;
           margin-bottom: 4px;
           padding: 0 5px;

Ich habe margin-bottom und padding auf 0 gesetzt. Des weiteren habe ich gemäß dem Snippet height: 150px; beigefügt. Das entspricht der Höhe vom Bild.

Dann habe ich noch folgende Änderungen an der Overall_header.html vorgenommen:
Im folgenden Abschnitt:

Code: Alles auswählen

<div id="site-description">
				<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
				<h1>{SITENAME}</h1>
				<p>{SITE_DESCRIPTION}</p>
				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
			</div>

Vor <div id="site-description"> wurde das eingefügt: <div style="height: 140px;"> Gemäß des Snippets wurde die Höhe um 10 Pixel verkleinert. Des weiteren habe ich das Original-Forenbild komplett aus dem Header entfernt indem ich <a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a> per <!-- & --> in ein Kommentar verwandelt habe.

Am Ende ergibt sich zusammenfassend in der overall_header folgender Text an der Stelle:

Code: Alles auswählen

<div class="headerbar">
			<div class="inner"><span class="corners-top"><span></span></span>

			<div style="height: 140px;">
			<div id="site-description">
				<!--<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>-->
				<h1>{SITENAME}</h1>
				<p>{SITE_DESCRIPTION}</p>
				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
			</div>

		<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			<div id="search-box">
				<form action="{U_SEARCH}" method="get" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" />
					<input class="button2" value="{L_SEARCH}" type="submit" /><br />
					<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div>
		<!-- ENDIF -->
			</div>
			<span class="corners-bottom"><span></span></span></div>
		</div>

Das ist ja schon mal ein Anfang. Unter Umständen kann man auch noch die dann an schlechter Stelle positionierte Überschrift und Beschreibung das Forum über

Code: Alles auswählen

<div style="text-indent:100px;"><h1>{SITENAME}</h1></div>
				<div style="text-indent:100px;"><p>{SITE_DESCRIPTION}</p></div>

oder ähnliches ändern, aber das ist um Moment Nebensache, darum kümmere ich mich später.

Es gibt nun aber noch einen wichtigen Hacken an der Sache:
Ich weiß ja jetzt nicht, ob das unbedingt so gewollt ist, auf Metzimods.de nachdem ich mich persönlich jetzt ein wenig gerichtet habe ist es aber auch so:
Wenn ich jetzt einfach mal mit Strg+Mausrad die Größe der Seite ändere (oder wahrscheinlich auch, wenn ich einen Bildschirm mit anderer Größe nutze) vermehrt sich das Bild, wenn die Seite kleiner gescrollt wird und es verschwinden Teile der Seite, wenn man weg scrollt. Deshalb würde ich es gerne so haben, dass sich das Rechte Ende des Bildes sozusagen am Rand "festkoppelt" und sich dann beim heran scrollen das Bild nicht verändert. Es wird eben nur auseinander gezogen bzw. zusammengedrückt. Das kann bei nicht gerade hochauflösenden Bildern zwar manchmal schlecht sein, aber ich bin schon dabei ein Bild dafür zu entwickeln, wenn ich eben mit der Konfigurierung des Headers fertig bin.

Gruß
Malte

[Malte]

Hat keiner eine Antwort?

[Michel_61]

Hi Malte,

ich bin mir nicht sicher, aber vielleicht ginge es in der CSS Datei wo das Headerbild aufgerufen wird. Da mal das Headerbild nicht relativ stellen sondern oben rechts festmachen.
Sorry, bin nicht so der Coder, was du genau von der Syntax eingeben müsstest, müsstest du dir aud der Datei auslesen. Try and Error, so mach ich es selbst auch

[Talk19zehn]

Hi, nur Text zoomen
Jedoch, wie möchtest du den Browser, sprich meine zahlreichen Browsereinstellungen und jene zahlreichen Auflösungen je nach Hardware "manipulieren"?
Du könntest sicherlich einen Farbverlauf entwickeln, indem eine Grafik einfließt. Alles machbar und entspräche dem Standard.
Oder gar mit Z-Index stapeln ( ? ) : viewtopic.php?p=1241992#p1241992

LG

Edit: 07.01.2012, 23:54
Oder ein Style auswählen, welches deine ideenreiche Voraussetzung sogleich erfüllt bzw. hieraus für dich weitere Informationen ableiten.
.
Und ggf. weiterführend von Interesse:
(1:50 - 2:42) --> http://www.youtube.com/watch?v=aEv9bFy6rYo

http://www.w3schools.com/html5/tryit.as ... ml5_figure

.