Dreiteiliger Hintergrund - prosilver

[FrostAgent]

Moin,

Code: Alles auswählen

#footballside {
    left: -219px;
    min-height: 200px;
    padding: 2px 4px;
    position: fixed;
    top: 100px;
    width: 239px;
    z-index: 1001;
}

bezüglich der Tipprunde, klappt einwandfrei, habs auch gleich in anderen Browsern erfolgreich getestet.

An der Navbar habe ich eigentlich nichts weiter verändert, was soll dort denn genau nicht ganz standardkonform sein?

[Talk19zehn]

Hello,

prima, wenn das geklappt hat.
Nimm bitte nur mal testweise das padding aus dem Wrap2 und erhöhe ggf. in der common.css das margin-bottom in der Klasse .headerbar: 4px auf 38px oder so.

Code: Alles auswählen

.headerbar {
    background: none repeat-x scroll 0 0 #EBEBEB;
    color: #FFFFFF;
    margin-bottom: 38px;
    padding: 0 5px;
}

Dann deklariere ebenso testweise in der overall.header_html die

Code: Alles auswählen

<div class="navbar">

mit

Code: Alles auswählen

<div class="forabg">

Du könntest es so belassen, wenn die Browser nicht murren. Oder eben diese Tests Rückbauen?
Nun siehst du sicherlich deutlich, was ich meine. --> Navbar:
Da gibt es noch Verschiebungen, - werden sie dir gar nicht angezeigt? Ggf. liegt dies an deiner eingebauten "transparenten Hintergrundfarbe"? Es lohnt sich also folglich, hier genauer nach zu schauen.

Sind bei dir Zeile(n) der Navbar "verloren" gegangen, - ?
So sieht mein und wohl die meisten PHPBB-Navbarbereiche im Konstrukt mit dem Portal aus: Relativ standardkonform eben ..... , was ja nichts heißen soll...., denn ich habe FAQ auch an anderer Stelle genutzt. Die FAQ-Verlinkung fehlt hier also und ich weiche vom Standard ab. Vergleiche daher bitte das Original sicherheitshalber, denn das habe ich gerade nicht zur Hand!!

Nur als Anhaltspunkt gedacht:

Code: Alles auswählen

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

			<ul class="linklist navlinks">
				<li class="icon-home"><!-- IF U_PORTAL --><a href="{U_PORTAL}">{L_PORTAL}</a></li> &#187; <!-- ENDIF --><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a> <!-- BEGIN navlinks --> <strong>&#8249;</strong> <a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a><!-- END navlinks --></li>
				<li class="rightside"><a href="#" onclick="fontsizeup(); return false;" onkeypress="return fontsizeup(event);" class="fontsize" title="{L_CHANGE_FONT_SIZE}">{L_CHANGE_FONT_SIZE}</a></li>
				<!-- IF U_EMAIL_TOPIC --><li class="rightside"><a href="{U_EMAIL_TOPIC}" title="{L_EMAIL_TOPIC}" class="sendemail">{L_EMAIL_TOPIC}</a></li><!-- ENDIF -->
				<!-- IF U_EMAIL_PM --><li class="rightside"><a href="{U_EMAIL_PM}" title="{L_EMAIL_PM}" class="sendemail">{L_EMAIL_PM}</a></li><!-- ENDIF -->
				<!-- IF U_PRINT_TOPIC --><li class="rightside"><a href="{U_PRINT_TOPIC}" title="{L_PRINT_TOPIC}" accesskey="p" class="print">{L_PRINT_TOPIC}</a></li><!-- ENDIF -->
				<!-- IF U_PRINT_PM --><li class="rightside"><a href="{U_PRINT_PM}" title="{L_PRINT_PM}" accesskey="p" class="print">{L_PRINT_PM}</a></li><!-- ENDIF -->
			</ul>

			<!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
			<ul class="linklist leftside">
				<li class="icon-ucp">
					<a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="e">{L_PROFILE}</a>
					<!-- IF S_DISPLAY_PM --> (<a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a>)<!-- ENDIF -->
					<!-- IF S_DISPLAY_SEARCH --> &bull;
					<a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>
					<!-- ENDIF -->
					<!-- IF U_RESTORE_PERMISSIONS --> &bull;
					<a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a>
					<!-- ENDIF -->
				</li>
			</ul>
			<!-- ENDIF -->

			<ul class="linklist rightside">
					<!-- IF not S_IS_BOT -->
					<!-- IF S_DISPLAY_MEMBERLIST --><li class="icon-members"><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}">{L_MEMBERLIST}</a></li><!-- ENDIF -->
					<!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) --><li class="icon-register"><a href="{U_REGISTER}">{L_REGISTER}</a></li><!-- ENDIF -->
					<li class="icon-logout"><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x">{L_LOGIN_LOGOUT}</a></li>
				<!-- ENDIF -->
			</ul>

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

Im Footer ist die Teamleiste auch so *krumm ( Wrap3 ). Mir werden da diese 250px für padding etc. angezeigt?
*Ich denke, das liegt einfach daran, dass du Deklarationen kopiert, die neuen Wraps u.a. mit padding und margin usw. bestückt hast, was nicht gänzlich deiner Darstellung dienen muss. Von Fall von Fall.......

Für das Einbinden des Bildes im "Footer" --> ich meine jetzt den unteren Bereich des Forums , würde sich evtl. auch die Index_body.html anbieten. Zum Beispiel vor...... oder nach......

Code: Alles auswählen

<!-- IF NEWEST_USER -->
	<h3>{L_STATISTICS}</h3>
	<p>{TOTAL_POSTS} &bull; {TOTAL_TOPICS} &bull; {TOTAL_USERS} &bull; {NEWEST_USER}</p>
<!-- ENDIF -->

Wenn du dann irgendwann alles fertig hast, würde ich zudem die Validierung nutzen wollen.
HTML: http://validator.w3.org/
CSS: http://jigsaw.w3.org/css-validator/

Das ist jetzt ganz unverbindlich gedacht: Denke bitte daran, dir dein Forum zumindest in der 1024x768er Auflösung anzusehen, Bereiche zu testen. Nur wenn sie passend wäre(n), kannst du "normalerweise" davon ausgehen, dass höhere Auflösungen kein Problem wären. Kleine, mittlere und große Ausnahmen gibt es natürlich auch hierbei zu beachten....

So nun nochmals viel Glück!!

[FrostAgent]

Moin,

bei mir sieht das Ganze jetzt so aus, allerdings fallen mir so direkt keine Fehler auf oder meinst du vielleicht rechts am Rand die Verschiebung von Anmelden/Abmelden?

Wenn ich dort margin-right komplett rausnehme würde dies passen oder überseh ich da noch mehr?
Ich habe auch nochmal mit der originalen overall_header verglichen, dort aber auch nichts entdeckt.

Gleiches gilt für den Footer, mögliche Verschiebungen sind bei mir nicht sichtbar oder ich bin einfach zu blind dafür..(?)

[Talk19zehn]

OK, du hast gerade noch einmal geändert, wie ich sehe ( freu )!! Das vorherige Bild stimmt demnach nicht mehr wirklich.

Na endlich, jetzt sieht es doch gut aus.

Was hast du nun genau gemacht? Ich hätte schon Interesse daran, was geschehen ist. Diese negativen 5px und die fehlende Hintergrundfarbe brachten mich ja beinahe um den Verstand

common.css / colour.css / Mod-Einbau


....



Linkklassenproblem:
Hell / Dunkel in der Tipprunde ( Sidebar )
Das lässt sich doch bestimmt regeln.

[FrostAgent]

Moin,

Ich vermute mal, die falsche Darstellung lag an denen von dir angesprochenen negativen 5px, diese habe ich nun einfach mal rausgenommen, hat sich dann auch gleich leicht verrückt.
Im weiteren Verlauf habe ich dann die Hintergrundfarbe aus sämtlichen Navlinks rausgenommen, damit die Darstellung einheitlich ist und nicht so zusammengewürftel mit dem Hellblauhinterlegten. #D3E0EB

Im Großen und Ganze gefällt es mir schon sehr gut, allerdings habe ich wohl noch ein paar größere Kleinigkeiten an den ich arbeiten muss, dabei dreht es im weitesten Sinne eigentlich "nur" um die Links. Zur besseren Ansicht habe ich die Links jetzt einfach mal in #fff gehalten, so sind sie auch im Navigationsbereich sehr gut lesbar.

Den Thementitel im Thread und die Links im Profil sind ziemlich unleserlich, die müsste ich dann wohl irgendwie von den anderen Links absondern. Bezüglich der Thementitel habe ich schon folgendes versucht, scheint auch zu klappen:

Code: Alles auswählen

.postbody h3 a {color:#0B2E5F;}

vorher:

.postbody h3 {

Kann ich das problemlos so anwenden?

Im Profilblock habe ich dies auch einmal versucht, allerdings tut sich da scheinbar nichts, kann ich dort die Links auch irgendwie in eine andere Farbe abändern?

[Talk19zehn]

Step by Step.....
In der Ruhe liegt die Kraft.......

Allgemeine Linkfarben sind nun weiß, d. h. ich würde mich herantasten und die Hintergrundfarben bpsw.

.bg1 {
background-color: #ECF3F7;
}

und ebenso
... 2
....3

bspw. auf #CCCCCC = ein freundliches Hellgrau ändern oder gar im Wechsel mit anderen Grautönen ( vgl. Farbtabelle hier irgendwo im Thread ) Grautöne sind doch passend?
Es werden dann folglich ggf. weitere Anpassungen nötig, - so ist das eben, wenn man sich ein Design für´s Forum gestaltet.

*Du müsstest alle Linkklassen durchgehen (colours.css, links.css usw.), Hintergründe, auch Hintergrundgrafiken, Panele uvm. farblich anpassen. Das ist ein gewaltiges Stück Arbeit.

--> h3, wäre machbar ( unter Vorbehalt, da ich nicht jede Einbindung deinerseits kenne )

Code: Alles auswählen

h3 {
    border-bottom-color: #CCCCCC;
    color: #FFFFFF;
}

PS.:

Linkfarben der Threads sind doch ( noch ) leserlich, --- ( grübel )...... Ich weiß jetzt nicht, was du meinst!!

********************* Edit: 06.05.11
* Moin, moin...
Noch ein PS.:

Oder du überlegst es dir noch einmal mit dem Hintergrundbild "Grauer Lattenzaun" ? Ich hätte eine Idee, wie du Teile des Bildes doch noch unterbringen könntest. Ich habe das mal in einem meiner Testdesignforen wie folgt verwirklicht: Eignet sich ganz gut für "eckige Foren" , wie in deinem Falle.

a) Abstrakte Grafik, die horizontal wiederholt wird, auf eine Höhe von 20px zuschneiden und ( Theme / Images ) speichern.
b) Hintergrundfarbe der Seite in der colours.css definieren:

Code: Alles auswählen

html, body {
	color: #000000;
	background-color: #CCCCCC;
}

c) In der common.css eine neue Klasse angelegt, die den Bildzuschnitt betriftt:

Code: Alles auswählen

.imageforum {
width: 100%;
margin: 0px auto;
height: 20px;
background-color: #CCCCCC;
background: url("{T_THEME_PATH}/images/forumimageindex.png") repeat-x;
background-position: top center;
}

d) In der common.css das margin-bottum in der Klasse forabg entfernt: Nur inhaltlich --> Farbwert #b1b1b1 muss nicht mit dem deiner Farbe übereinstimmen.

Code: Alles auswählen

.forabg {
	background: #b1b1b1 none repeat-x 0 0;
	padding: 8px 12px;
	clear: both;
}

e) In der forumlist_body.html hatte ich die neue Klasse verknüpft.
nach

Code: Alles auswählen

<!-- IF forumrow.S_IS_CAT or forumrow.S_FIRST_ROW  or forumrow.S_NO_CAT  -->

eingefügt:

Code: Alles auswählen

<div class="imageforum"></div>

So sieht´s inhaltlich dieser Abschnitt dann insgesamt aus: Nur zur Orientierung

Code: Alles auswählen

<!-- IF forumrow.S_IS_CAT or forumrow.S_FIRST_ROW  or forumrow.S_NO_CAT  -->
		<div class="imageforum"></div><div class="forabg">
			<div class="inner"><span class="corners-top"><span></span></span>
			<ul class="topiclist">
				<li class="header">
					<dl class="icon">
						<dt><!-- IF forumrow.S_IS_CAT --><a href="{forumrow.U_VIEWFORUM}">{forumrow.FORUM_NAME}</a><!-- ELSE -->{L_FORUM}<!-- ENDIF --></dt>
						<dd class="topics">{L_TOPICS}</dd>
						<dd class="posts">{L_POSTS}</dd>
						<dd class="lastpost"><span>{L_LAST_POST}</span></dd>
					</dl>
				</li>
			</ul>
			<ul class="topiclist forums">
	<!-- ENDIF -->

Im Ergebnis wird in meinem Falle das Bild zwischen den Kategorien ausgegeben. Ein hübscher Effekt, wie ich meine.
Das läßt sich auch mit einer Farbe anstelle eines Bildes gestalten ...
Natürlich muss wohl in deinem Falle nun die transparente HiGrufarbe gelöscht werden, sonst gibt es ggf. Konflikte. Gib folglich der Navbar ( colours,- und common.css ) eine passende Hintergundfarbe. Ich habe jetzt nicht im Kopf, wo du eine transparente HiGrufarbe überall eingesetzt hast. Lösungen werden sich auch für das Logo oben und den Footerbereich ( hattest du diesen eingentlich noch einmal geprüft ? ) finden lassen.

Beste Grüße

[FrostAgent]

Moin,

das mit den verschiedenen Grautönen ist wohl gar keine so schlechte Idee, ich habe soweit jetzt mal alles angepasst, sodass weitesgehend auch alles gut zu lesen ist. Das Hintergrundbild habe ich nun erstmal rausgenommen, da die Lesbarkeit der Schrift dort teilweise nicht wirklich gut war/ist, unter anderem bei "Wer ist Online" .. eventuell könnte ich dort auch mit einer CSS3 Transparenz arbeiten, sodass ich dort keine hundertprozentige Transparenz habe.

Ich schau vielleicht erstmal, dass ich den Header, der aktuell nur vorläufig drin ist fertigstelle, wenn der chic wird, kann ein Hintergrundbild eventuell auch ganz wegfallen oder ich überleg mir noch eine Alternative zum Lattenzaun.

Den HTML- und CSS-Validator habe ich nun auch einmal genutzt, bei HTML ergab es keine Fehler, bei CSS allerdings drei kleine nicht sehr bedeutsame Fehler (?)

Einlese-Fehler [: 1.5em; padding: 2px 0 0 0; margin: 0 0 0.3em 0 !important; text-transform: none; border: none; font-family: "Trebuchet MS"]

URI : http://chris4all.com/forum/style.php?id=1&lang=de
1159 Verdana, Helvetica, Arial, sans-serif Einlese-Fehler [: 1.5em; padding: 2px 0 0 0; margin: 0 0 0.3em 0 !important; text-transform: none; border: none; font-family: "Trebuchet MS"]
URI : http://chris4all.com/forum/style.php?id=1&lang=de
1159 Verdana, Helvetica, Arial, sans-serif Einlese-Fehler sans-serif;
URI : http://chris4all.com/forum/style.php?id=1&lang=de
1163 Einlese-Fehler [: 125%; } .postbody h3 img]

..und dann noch über 1400 Warnungen, muss ich die nun alle beseitigen oder kann ich die Warnungen auch mehr oder weniger außer Acht lassen?

[Talk19zehn]

Hello,

CSS-Validierung:
keine Fehler und 1400 Warnungen wären natürlich besser.

Wobei Fehler relativ sein könn(t)en. Validiert wird derzeit im Level 2.1, - hast du Teilchen wie opacity integriert --> Die Eigenschaft opacity existiert nicht in CSS level 2.1, ist es im weitesten Sinne zu vernachlässigen. Anders bei CSS3-Notationen, die der IE8 und jünger ggf. noch gar nicht erkennen kann. Je nach Notation, kann es zu erheblichen oder weniger erheblichen Darstellungsfehlern führen. Abgesehen mal von der Tatsache, dass wir uns im Zeitrahmen des IE9 befinden, der in CSS3 nachzieht, jedoch von Windows7 abhängig ist.
Da könnte man nun doch glatt einen Roman schreiben und zudem auf Mac-User uvm. eingehen.

Offensichtliche Fehler würde ich ausmerzen wollen. Manchmal liegt es an einer eckigen Klammer, fehlenden Zeichen, wie ein fehlendes Semikolon oder oder, - die nur du beurteilen kannst. Ich nutze parallel hilfsweise gerne validom.org, lasse mir die Baumstruktur ausgeben und kann schneller die entsprechende CSS finden, da Fehlerchen rot hinterlegt werden.


Warnungen:
Meist streiten sich die Entwickler, ob man Warnungen nachgehen sollte. Der Einzelfall entscheidet, denke ich.

Beispiel: Nun, wenn die Schriftfarbe Weiß auf einem weißen Hintergrund ausgegeben würde, ist das eher nicht lesbar. Greift eine weiße Linkfarbe auf die Pagination ( Seitenzahl ), ist der Hintergrund zudem weiß, könnte ich nicht wirklich etwas lesen, keine Seitenzahl erkennen. Da müste dann wohl nachgebessert werden.
Da solltest du schauen, ob die Hinweise tatsächlich fehlerlos bleiben. 1400 CSS-Warnungen sind in einem Phpbb-Forum nichts ungewöhnliches, so mein Erfahrungswert. Ich habe schon ganz andere Zahlen gesehen, -


Lattenzaun:
Ich hatte die einen Vorschlag unterbreitet, der das ganze aus meiner Sicht "aufpeppt".

Als Hintergrund fand ich den "grauen Lattenzaun" persönlich für ein Fußballforum nicht unbedingt passend. Geschmäcker sind ja bekanntlich verschieden. Nur, wer schaut nach einem desolaten Spiel nun auch noch gerne auf eine Wand? --> Kleiner Scherz!!

Genau, mit den Grautönen kannst du doch spielen, ich denke, dieses Farbkonzept eignet sich gut.
Hier und da wirst du nachbessern müssen. Da führt kein Weg vorbei. Manches zeigt sich erst im Gebrauch der einzelnen Seiten. Das ist relativ normal. Darum, gehe alle Seiten durch, teste PNs oder was auch immer. Es kann nur von Vorteil sein.


Footer:
?


Tipprunde:
Dort ist h2 und h3 definiert. In einer wird im IE die Zeile umgebrochen, da "uppercase" anstatt "normal" genutzt wird.
*Den gelbfarben Hovereffekt in der Sidebar, finde ich etwas unglücklich?

Im Großen und Ganzen, sieht die Seite doch schon recht ansprechend aus, meine ich mal so am Rande.


Allerbeste Grüße


*Edit:
Glückwunsch!!
Sehe gerade, dass der Hovereffekt nun genial gelöst ist. Somit würde ich den Hovereffekt der Links in den Foren ändern. Ggf. auf die gleiche Farbe = activ einstellen?

[FrostAgent]

Moin,

der Vorschlag von dir mit der Einbindung des Lattenzauns habe ich einmal getestet, hat mir allerdings nicht ganz so gefallen. Auch, weil wie du schon gesagt hast, der Lattenzaun im Allgemeinen nicht so gut zu einem Fußballforum passt, habe ich ihn auch vorerst komplettrausgenommen.

Am Footer habe ich eigentlich gar nichts weitergeändert, in meiner Auflösungist auch alles gut, aber wie mir aufgefallen ist, wenn ich den Browser zusammenzieh, dann verschiebt sich dort alles ziemlich, sprich der Footer-Text/Copyright rutscht unter das Footer-Bild
Wie in dem verlinkten Bild zu sehen, ist dies bei mir nicht der Fall, gibt es da irgendein Trick, dass dieser "Fehldarstellung" nicht besteht?
Ich denke mal diesen "Fehler" meinst du auch oder?

Den Hovereffekt habe ich nun auch einmal geändert, Tipprunden-Sidebar ist nun auch wieder leserlich, danke für den Hinweis.

[Talk19zehn]

Moin, moin,

der Tipp für den Footerbereich lautet:

von

Code: Alles auswählen

#wrap3 {
    background-image: url("styles/prosilver/theme/images/footer2.png");
    background-repeat: repeat-x;
    margin-bottom: 0;
    margin-left: 6px;
    margin-top: 0;
    padding: 0 250px;
    width: auto;
}

auf

Code: Alles auswählen

#wrap3 {
    background-image: url("styles/prosilver/theme/images/footer2.png");
    background-repeat: repeat-x;
    }

ändern.

Außerdem:
Im CR verstecken sich weitere Merkmale, wie margin-left 175px. Der Wert macht aus meiner momentanen Sicht nicht unbedingt Sinn. Entspricht auch nicht dem *Original? Eine *dahingehende Überprüfung ist zunächst ratsam.

Code: Alles auswählen

.copyright {
    color: #555555;
    margin-bottom: 0;
    padding: 175px 10px 1px 0;
    text-align: center;
}

Das abschließende Bild kannst du doch eigentlich direkt darüber ganz und gar mittels eines Containers (separat) einbinden?

Beispiel: Hier hat das Bild eine Höhe von 52px und ich gebe einen obigen Abstand zum Element von 2px hinzu.
CSS

Code: Alles auswählen

.meinfooterbild {
width: 100%;
margin: 2px auto;
height: 52px;
background-color: #CCCCCC;
background: url("{T_THEME_PATH}/images/dasfooterbild.gif") repeat-x;
background-position: top center;
}}

Einbindung dann, ggf. nach:

Code: Alles auswählen

<!--
	We request you retain the full copyright notice below including the link to www.phpbb.com.
	This not only gives respect to the large amount of time given freely by the developers
	but also helps build interest, traffic and use of phpBB3. If you (honestly) cannot retain
	the full copyright we ask you at least leave in place the "Powered by phpBB" line, with
	"phpBB" linked to www.phpbb.com. If you refuse to include even this then support on our
	forums may be affected.
	The phpBB Group : 2006
//-->

HTML:

Code: Alles auswählen

<div class="meinfooterbild">
</div>

Je nach Konstellation können geänderte CSS-Notationen erforderlich sein.
Hier im Thread hatte ich es bereits auf deine angelegten Wraps und dort hineinkopierte CSS-Anweisungen hingewiesen, die in der Form nicht unbedingt erfolgreich sein könn(t)en, da sie zudem im Footer verschachtelt wurden.
Probiere es zunächst in der neu beschriebenen Form aus und gestaltete eine Verschachtelung im nächsten Schritt , wenn überhaupt von Nöten oder gewünscht.

Grüße