Headerkasten vergößern!

Alles zu Styles, Templates, Icons und Smilies für phpBB 3.0.x, sowie allgemeine Designfragen zur Integration von phpBB in bestehende Websites.
phpBB Styles Demo
Forumsregeln
Bei Style spezifischen Fragen ist der Stylename und die Downloadquelle des Styles erforderlich, besser noch die URL vom betroffenen Forum.
Benutzeravatar
redbull254
Ehemaliges Teammitglied
Beiträge: 10379
Registriert: 05.01.2006 13:01
Kontaktdaten:

Beitrag von redbull254 »

mp3-post hat geschrieben:Hallo redbull254,


Da haben sich die "Ingenieure" von phpbb.com aber auch was einfallen lassen, von Benutzerfreundlichkeit zur eigenen Anpassung, kann man wohl nicht sprechen.. Was da für Zeit mit vergeudet wird, passt auf keine Kuhhaut.
Das stimmt, es gibt so viele Möglichkeiten, den Header zu beeinflussen, das man 'den Wald vor lauten Bäumen' nicht mehr sieht. :-?

Da ist ein wenig zu viel des guten gemacht worden, finde ich.

Und für alle, die jetzt wieder vor Empörung aufschreien werden : :D

Nicht jeder ist als 'Programmierer' zur Welt gekommen.

Fast habe ich es local schon mal hinbekommen, aber bin noch nicht ganz zufrieden.
Also noch ein bisschen weiter suchen und üben.
Beste Grüße
Walter
atze999
Mitglied
Beiträge: 13
Registriert: 22.05.2009 16:18

Re: Headerkasten vergößern!

Beitrag von atze999 »

hallo!

2 jahre alten thread rausgesucht :-) also ich möchte auch gerne meine bg_header.gif vergößern bzw einstellen das es bei mir komplett angezeigt wird. folgendes problem habe ich momentan:

[ externes Bild ] das ist die komplette grafik vom bg_header.gif ...

und im forum wird der untere teil nicht angezeigt:

[ externes Bild ]

also bevor hier wieder jemand mit logo anfängt , ich habe ein logo schon und möchte nur noch das der header die komplette grafik von bg_header.gif anzeigt. welchen wert mussi ch wo einfügen/verändern?
chrissla
Mitglied
Beiträge: 13
Registriert: 27.05.2009 09:35

Re: Headerkasten vergößern!

Beitrag von chrissla »

Ich habe dafür auch ne weile suchen müssen. Die Höhe des Headers setzt sich als Kombination aus
overall_header.html
dem stylesheet.css zusammen:

overall_header.html
hier kannst du die "height" angeben. z.B.

Code: Alles auswählen

<td id="logorow" align="center">
		<div style="height: 94px; position: relative;">
im stylesheet.css:

Code: Alles auswählen

#logorow {
	background: #F8F8F8 url(styles/serenity/theme/images/bg_logo.gif) top left repeat-x;
	text-align: left;
	padding: 0px;
	height: 94px;
}
evtl. spielt dir hier noch eine andere Option mit rein in der logorow-Sektion. Ich hatte ursprünglich andere padding optionen.
Ich hoffe das hilft weiter.
Benutzeravatar
Phobi
Mitglied
Beiträge: 114
Registriert: 11.01.2008 22:38

Re: Headerkasten vergößern!

Beitrag von Phobi »

Ich bastel zur Zeit das Erste mal an einem proSilver Style, in den letzten Jahren war es eigentlich immer ein subSilver Style.
Dementsprechend ungewohnt ist die Umstellung auf proSilver.

Ich stand eben vor dem selben Problem mit dem "Kasten um den Banner herum", den man in manchen Vorlagen vorfindet.
Mein Wunsch war es, diesen Kasten wahlweise ohne Hintergrundbild zu vergrößern, so dass sich dieser Kasten horizontal über die gesamte Seite erstreckt.

Nach langem versuchen und vor allem "suchen" in den Dateien, habe ich jetzt endlich die Lösung gefunden, die ich beim suchen im Netz aber schon vor einiger Zeit mal gefunden habe.

Man muss in der overall_header.html das: <div id="wrap"> vor die Elemente setzen, die sich nicht über die ganze Seite erstrecken sollen.
Das Tag muss mit einem </div> nach dem Element wieder geschlossen werden.

Also bei mir hat es nur auf diese Art funktioniert, bitte korrigiert mich, wenn die Lösung nicht konform ist.


Grüße.
Benutzeravatar
Talk19zehn
Ehemaliges Teammitglied
Beiträge: 5041
Registriert: 08.06.2009 12:03

Re: Headerkasten vergößern!

Beitrag von Talk19zehn »

Prosilver:

Hallo phobi, - nur als kleiner nachträglicher Ansatz: Das kann nur solang funktionieren, wie ich keinerlei Veränderungen in der id"wrap" vorgenommen habe...... :oops: ?

Beste Grüße


Edit:... meinst Du es so? Kein Bild / Kein Logo in class headerbar?

Code: Alles auswählen

<div class="headerbar">
<div class="inner"><span class="corners-top"><span></span></span>
<p style="height: 48px">
&nbsp;
</p>
<span class="corners-bottom"><span></span></span></div>
</div>
Nach <head> ergibt immer 100%,- jedenfalls in meinem Test.

Im Wrap notiert ergibt sich die Breite entsprechend der gewählten Forenbreite.

:wink: Oder liege ich ganz und gar falsch?
Adventereigniskalender für phpBB 3.3.x,
Meine persönliche Meinung im Jahr 2024: Im Zenit seiner Popularität wirkt KI zunächst wie eine Blaupause und lässt sich aufgrund der Vielschichtigkeit nicht auf eine einzige Botschaft reduzieren.
Benutzeravatar
Phobi
Mitglied
Beiträge: 114
Registriert: 11.01.2008 22:38

Re: Headerkasten vergößern!

Beitrag von Phobi »

Ja, richtig.

Die Headerbar sollte schon bleiben, nur befindet sie sich im div wrap und dieses sorgte in meinem Fall nicht für die nötige Breite und da ich jetzt keine neue Klasse anlegen wollte, habe ich div wrap einfach woanders hingesetzt.
Wie ich Bilder anstatt Farbe in die headerbar einfüge, ist mir bekannt, die Breite des headers war das Problem.

Das div wrap ist in dem Fall scheinbar der headerbar übergeordnet, deswegen kann ich an der headerbar rumschrauben wie ich will, entweder ist es nicht konform oder es funktioniert einfach nicht, also musste das wrap weichen.


Viele Grüße.
Benutzeravatar
Talk19zehn
Ehemaliges Teammitglied
Beiträge: 5041
Registriert: 08.06.2009 12:03

Re: Headerkasten vergößern!

Beitrag von Talk19zehn »

Prosilver: Headerbar anpassen

Hallo Phobi,

aha, Dein Motto: Man muss sich nur zu helfen wissen. So etwas gefällt mir gut. :wink:

Auch ich habe noch einmal "geschraubt": Und es mag für den einen oder anderen Anwender nützlich sein. Bevor ich nun meine "Versuchsreihe" lösche, schreibe ich sie rasch nieder.

Theme: Meine persönlich individuellen Änderungen (auszugsweise)

Code: Alles auswählen


...(...)...


html {
	font-size: 100%;
	/* Always show a scrollbar for short pages - stops the jump when the scrollbar appears. non-IE browsers */
height: 100%;
	margin-bottom: 1px;
}

body {
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: Verdana, Helvetica, Arial, sans-serif;
	color: #000066;
	background-color: #ffffff;
	/*font-size: 62.5%;			 This sets the default font size to be equivalent to 10px */
	font-size: 10px;
         margin: 0 auto;
	padding: 12px 0;
}



...(...)...

/* Main blocks
---------------------------------------- */
#wrap {
   padding: 0 20px;
width: 90%;
   margin: 0 auto;
}


An das Ende: Meine Ergänzungen

.linksimg {
float: left;
margin-right: 11px;
} 

#balken {
width: 100%;
height: 38px;
font-size: 1.0em;
background-color: #E1E7E8;
background-image: url(http://_linkzumbild_farbverlauforange/blanko1wk9.jpg);
background-position: top center;
background-repeat: repeat-x;
}

.containerheaderbar {
width: 100%;
margin: 1px auto;
height: 64px;
background-color: #E1E7E8;
background: url(http://_linkzumbanner_64px_hoch_logo2009.jpg) repeat-x;
background-position: top center;
}


Overall_header_html: Versuchsreihe: Die nachfolgende Reihenfolge entspricht der bildlichen Darstellung am Ende des Beitrages.

Code: Alles auswählen

</head>

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">

<div class="headerbar">
<div class="inner"><span class="corners-top"><span></span></span>
<p style="height: 28px">
&nbsp;
</p>
<span class="corners-bottom"><span></span></span></div>
</div>
<div class="containerheaderbar">
</div><!--Ende containerheaderbar-->
<div id="balken" style="text-align:center;">
<br />
&nbsp;&bull;<a target="_blank" href="http://www.html">Kontakt</a>&nbsp;&bull;<a target="_blank" href="http://www./">Homepage</a>&nbsp;&bull;<a target="_blank" href="http://www./websites.html">Websites</a>&nbsp;&bull;<a target="_blank" href="http://link_link.de/">Stadtpanoramen-360°</a>&nbsp;&bull;<a target="_blank" href="http://www.link_link/">Wörterbuch</a> 
<br />
</div>

<div id="wrap">

<div class="headerbar">
<div class="inner"><span class="corners-top"><span></span></span>
<p style="text-align:center; font-weight: bold;">
Testforum Testforum ........ Willkommem auf unserer 
</p>
<div class="containerheaderbar">
</div><!--Ende containerheaderbar-->
<span class="corners-bottom"><span></span></span></div>
</div>

<div class="headerbar">
<div class="inner"><span class="corners-top"><span></span></span>
<p style="height: 68px">
&nbsp;
</p>
<span class="corners-bottom"><span></span></span></div>
</div>

<div class="headerbar" style="margin-left: 100px; margin-right: 100px;">

<div class="inner"><span class="corners-top"><span></span></span>
<p style="height: 38px; text-align:justify;">
Vielen Dank dafür, dass Sie das Copyright meiner selbst gefertigen Grafiken beachten. Ein kurzer Text für Testzwecke: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque nisl orci, luctus non, sollicitudin id, rutrum quis, pede. Fusce purus.   
</p>
<span class="corners-bottom"><span></span></span></div>
</div>

<div class="headerbar">
<div class="inner"><span class="corners-top"><span></span></span>
<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>

<span class="corners-bottom"><span></span></span></div>
</div>

<div class="headerbar">
<div class="inner"><span class="corners-top"><span></span></span>
<br />
<img class="linksimg" src="http://img.linkzumlogo/abtraktion.jpg" alt="..."><p style="text-align:justify;">
Vielen Dank dafür, dass Sie das Copyright meiner selbst gefertigen Grafiken beachten. Ein kurzer Text für Testzwecke: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Oder doch Text verlinken?    
</p>
<br />
<span class="corners-bottom"><span></span></span></div>
</div>


<a id="top" name="top" accesskey="t"></a>
	<div id="page-header">

Auswirkungen: Bildliche Darstellung

http://img687.imageshack.us/img687/2473 ... ilv100.jpg


.

Beste Grüße - ich bin nicht fehlerlos.
Zuletzt geändert von Talk19zehn am 10.05.2010 16:55, insgesamt 1-mal geändert.
Adventereigniskalender für phpBB 3.3.x,
Meine persönliche Meinung im Jahr 2024: Im Zenit seiner Popularität wirkt KI zunächst wie eine Blaupause und lässt sich aufgrund der Vielschichtigkeit nicht auf eine einzige Botschaft reduzieren.
Benutzeravatar
Phobi
Mitglied
Beiträge: 114
Registriert: 11.01.2008 22:38

Re: Headerkasten vergößern!

Beitrag von Phobi »

So ähnlich sollte es bei mir auch ausschauen.

Ist das richtig, dass der kleinste Kasten davon kleiner ist als die Forentabelle?

Wenn nicht, dann kann ich Dir sagen, dass Du einen div falsch gesetzt hast, so dass besagter Kasten kleiner als der Rest ist.

Ja, man muss sich nur zu helfen wissen, zur Not probiere ich auch schon mal mehrere Stunden die verschiedensten Möglichkeiten durch.
Wenn ich etwas haben will, dann muss ich hartnäckig sein hehe

Schön, dass das mit den selbst hinzugefügten Klassen so gut funzt, das wäre für mich dann auch die letzte Möglichkeit gewesen, aber erstmal funktioniert das so.

Bei mir schaut der Header nun so aus, wobei er auch noch nicht fertig ist, die Umstellung von subSilver auf proSilver macht mir etwas zu schaffen.

http://i42.tinypic.com/2el88ec.png


Viele Grüße.
Benutzeravatar
Talk19zehn
Ehemaliges Teammitglied
Beiträge: 5041
Registriert: 08.06.2009 12:03

Re: Headerkasten vergößern!

Beitrag von Talk19zehn »

Hallo Phobi, ich habe ein margin-left und margin-right genutzt und daher ist doch die Darstellung schmaler, das hast Du jetzt nur versehentlich überlesen.......... :wink: :wink:
In der Variante (ggf. je gewähltem Abstand) gar für die Index oberhalb des Forums einsetzbar. Integrieren lässt sich doch "fast" alles.




Auf mich wirkt Dein Header professionell!

Beste Grüße
Adventereigniskalender für phpBB 3.3.x,
Meine persönliche Meinung im Jahr 2024: Im Zenit seiner Popularität wirkt KI zunächst wie eine Blaupause und lässt sich aufgrund der Vielschichtigkeit nicht auf eine einzige Botschaft reduzieren.
Clairvoyant
Mitglied
Beiträge: 13
Registriert: 26.05.2010 17:32

Re: Headerkasten vergößern!

Beitrag von Clairvoyant »

Hallo zusammen

Bin ganz neu hier und habe zum erstenmal ein Forum getestet. Nur habe ich ein Problem und hoffe ihr könnt mir helfen.
Ich habe jetzt einige Threads durchgelesen wegen dem Header. Habe es auch soweit hinbekommen nur leider sieht es recht dumm aus, da sich das Forum nicht mit anpasst. Sprich das Logo ist jetzt über alles drübert und die obere Leiste dahinter. Wie bekomme ich das angepasst bzw. wie bekomme ich die Leiste nach unten. Hier kann man es sehen
[ externes Bild ]

Kann mir da jemand helfen. Das wäre sehr nett.. Danke euch..

Gruss
Antworten

Zurück zu „[3.0.x] Styles, Templates und Grafiken“