[3.2] Statistikblock Problem im Style Modern

[Tastenplayer]

Nicht, dass ich wieder Off Topic bin, also neues Thema für die Antwort

Melmac hat in meinem div.rules linkfarben Beitrag geschrieben:

btw.: Horizonte sind keine gottgewollten fixen Grenzen - man kann sie auch erweitern

Das stimmt, bin fleissig dabei mit dem Style Modern Sieht jetzt super aus, finde ich. Jedoch der ganze Statistikteil ist ein Problemfall. In meinem Forum überhaupt nicht, auch nicht ohne die Statblock Ext. von Kirk.
Jedoch man versuche in einem Otto Normalboard, auf der Indexseite im Statistikteil einen Usernamen oder die Gruppenbezeichnungen der Legende zu lesen.
Der ganze Teil müsste ein eigener Container sein(separate html Datei), den man dann passend formatieren kann - happig für einen Anfänger. Oder dann Wraphintergrundbild weg/ändern, was ich bereits versucht habe. Style sieht definitv nicht mehr so gut aus.

Ich hab mal versucht direkt in der html Datei, also inline dies zu formatieren. Sieht irgendwie auch nicht zufriedenstellend aus mit den Abständen dazwischen. Jedoch formatiere ich das wie es war - sieht es definitiv schlechter aus und es gibt mit einigen Extensions Probleme.

Mit Background-color geht es auch nicht, da die Hintergrundfarbe eben über die ganze Breite kommt und nicht nur unter dem Text. Sieht dann extrem daneben aus.

Alternative: Ich stell den Style nur in meinem Forum ein und schreibe, dass wenn man diesen Style installieren möchte, zwingend die Statblock Ext von Kirk installiert sein muss .

Neue Anpassung:
Nachdem die Statistik nie angezeigt wurde, nach meinem Versuch einer separaten html Datei. Habe ich es jetzt wieder ähnlich wie vorher formatiert. Sieht mit dem abgeänderten Style gar nicht mal so schlecht aus. Einzig der Border-bottom kommt nicht an die gleiche Stelle wie beim forabg.
Allerdings erscheint mit der Bordonlinetime Ext von Kirk wieder ein überflüssiges p, wie man auf dem Bild unschwer erkennen kann. Denn hinter jedem p hat es nun einen Background. Der leere Background entsteht definitiv durch diese Extension [ externes Bild ]
Was zu entschwinden scheint, wenn die Bordonlinetime ext in der Statblock ext angezeigt wird. Denn da stimmt der Abstand ja wieder.
[ externes Bild ] Weshalb in diesem Style eben zwingend der komplette Statistikteil hintergrund haben müsste als separater Container.

[Kirk]

Hallo
So ganz kann ich dir nicht folgen, du schreibst vom Statistics BLock aber auf dem Bild ist keiner zu sehen.
Schreib doch mal so das man auch versteht was dein Problem ist.

[Tastenplayer]

Also ich hab doch deutlich geschrieben, dass ich den ganzen Statistikteil(wie er in jedem Forum zu sehen ist im Style) mit Hintergrund versehen muss, weil man sonst die Usernamen sowie die Bezeichnungen der Gruppen in der Legende nicht lesen kann in dem Style(Bild ist mein formatierter Statistblock)

Hatte versucht dies mit einer separaten html Datei zu lösen - eindeutig zu kompliziert für mich. Weshalb ich das jetzt so formatierte, wie auf dem ersten Bild zu sehen. Was in dem Style wie er jetzt ist, gar nicht mal so schlecht aussieht. Es klappt so nur nicht, wenn jemand Deine Bordonlinetime Ext installieren möchte mit dem Style, denn dann erscheint eben unten wieder ein leeres p(Hintergrund ist nur für p formatiert). Egal ich lass das jetzt mal so, denn die bessere Lösung ist eindeutig zu kompliziert für mich.

[Melmac]

Das macht man auch nicht mit einer "neuen HTMl" sondern übers CSS ...

Weshalb ich das jetzt so formatierte, wie auf dem ersten Bild zu sehen.

Dann bitte den vollständigen Code Deiner "Formatierung" einstellen, sollen wir nicht wieder zuerst nach der Kristallkugel suchen müssen.

Egal ich lass das jetzt mal so, denn die bessere Lösung ist eindeutig zu kompliziert für mich.

Nein, nicht von denen, die Dir einfallen, die "bessere" nehmen - wie wäre es, nach der richtigen zu suchen und die dann einzubauen?
Die Gefahr mit all diesen "tuts doch auch irgendwie" Codes ist halt, dass sie im weiteren Verlauf zu möglichen Quellen/Ursachen all derjenigen Probleme und Fehler werden können, die dann erst wieder mühsam herauszufinden sind - was sich dann nicht mehr nur für Dich als "eindeutig zu kompliziert" herausstellen könnte ...

[Talk19zehn]

Hi Tastenplayer, bitte nicht kompliziert denken. Du kannst nicht wissen, wer was installiert und welche Template-Events für was genutzt werden würden. Du gehst ja von der Veröffentlichung deines Styles aus und möchtest diesen zusätzlich auf deiner Webpräsenz anpassen. Das sind mehrere paar Schuhe ... (positiv gemeint und gedacht).

Idee: ===> ich gehe davon aus, dass du die index_body.html in deinem Paketchen mit auslieferst(!) ...

CSS

Code: Alles auswählen

.stat-block {
	background-color: #313131;
	border: 2px solid #AA0000;
	margin-bottom: 15px;
	margin-top: 21px;
	padding: 0 10px;
	color: #FFF;
}

.stat-block p {
	font-size: 1.1em;
	line-height: 1.4em;
	margin-bottom: 1em;
	color: #FAFAFA;
}

.stat-block h3 {
	font-size: 1.1em;
	line-height: 1.3em;
	border-bottom-color: #AA0000;
	margin-bottom: 0.3em;
	color: #F2F2F2;
}

.stat-block h3 a {
	font-size: 1.0em;
	line-height: 1.2em;
	border-bottom-color: #AA0000;
	margin-bottom: 0.3em;
	color: #CCC;
}

.displaystatswwh {
	background-color: #313131;
	border-radius: 7px;
	margin-bottom: 4px;
	padding: 5px 10px;
	color: #CCC;
}

HTML: Bitte suche -> index_body.html

Code: Alles auswählen

<!-- IF S_DISPLAY_ONLINE_LIST -->
	<div class="stat-block online-list">
		<!-- IF U_VIEWONLINE --><h3><a href="{U_VIEWONLINE}">{L_WHO_IS_ONLINE}</a></h3><!-- ELSE --><h3>{L_WHO_IS_ONLINE}</h3><!-- ENDIF -->
		<p>
			<!-- EVENT index_body_block_online_prepend -->
			{TOTAL_USERS_ONLINE} ({L_ONLINE_EXPLAIN})<br />{RECORD_USERS}<br /> 
			<!-- IF U_VIEWONLINE -->
				<br />{LOGGED_IN_USER_LIST}
				<!-- IF LEGEND --><br /><em>{L_LEGEND}{L_COLON} {LEGEND}</em><!-- ENDIF -->
			<!-- ENDIF -->
			<!-- EVENT index_body_block_online_append -->
		</p>
	</div>
<!-- ENDIF -->

<!-- EVENT index_body_birthday_block_before -->

<!-- IF S_DISPLAY_BIRTHDAY_LIST -->
	<div class="stat-block birthday-list">
		<h3>{L_BIRTHDAYS}</h3>
		<p>
			<!-- EVENT index_body_block_birthday_prepend -->
			<!-- IF .birthdays -->{L_CONGRATULATIONS}{L_COLON} <strong><!-- BEGIN birthdays -->{birthdays.USERNAME}<!-- IF birthdays.AGE !== '' --> ({birthdays.AGE})<!-- ENDIF --><!-- IF not birthdays.S_LAST_ROW -->, <!-- ENDIF --><!-- END birthdays --></strong><!-- ELSE -->{L_NO_BIRTHDAYS}<!-- ENDIF -->
			<!-- EVENT index_body_block_birthday_append -->
		</p>
	</div>
<!-- ENDIF -->

<!-- IF NEWEST_USER -->
	<div class="stat-block statistics">
		<h3>{L_STATISTICS}</h3>
		<p>
			<!-- EVENT index_body_block_stats_prepend -->
			{TOTAL_POSTS} &bull; {TOTAL_TOPICS} &bull; {TOTAL_USERS} &bull; {NEWEST_USER}
			<!-- EVENT index_body_block_stats_append -->
		</p>
	</div>
<!-- ENDIF -->

und ersetze durch:

Code: Alles auswählen

<div style="margin:15px;">
	<div class="displaystatswwh">
		<div class="inner">
			<!-- IF S_DISPLAY_ONLINE_LIST -->
				<div class="stat-block online-list">
					<!-- IF U_VIEWONLINE --><h3><a href="{U_VIEWONLINE}">{L_WHO_IS_ONLINE}</a></h3><!-- ELSE --><h3>{L_WHO_IS_ONLINE}</h3><!-- ENDIF -->
					<p>
						<!-- EVENT index_body_block_online_prepend -->
						{TOTAL_USERS_ONLINE} ({L_ONLINE_EXPLAIN})<br />{RECORD_USERS}<br /> 
						<!-- IF U_VIEWONLINE -->
							<br />{LOGGED_IN_USER_LIST}
							<!-- IF LEGEND --><br /><em>{L_LEGEND}{L_COLON} {LEGEND}</em><!-- ENDIF -->
						<!-- ENDIF -->
						<!-- EVENT index_body_block_online_append -->
					</p>
				</div>
			<!-- ENDIF -->

			<!-- EVENT index_body_birthday_block_before -->

			<!-- IF S_DISPLAY_BIRTHDAY_LIST -->
				<div class="stat-block birthday-list">
					<h3>{L_BIRTHDAYS}</h3>
					<p>
						<!-- EVENT index_body_block_birthday_prepend -->
						<!-- IF .birthdays -->{L_CONGRATULATIONS}{L_COLON} <strong><!-- BEGIN birthdays -->{birthdays.USERNAME}<!-- IF birthdays.AGE !== '' --> ({birthdays.AGE})<!-- ENDIF --><!-- IF not birthdays.S_LAST_ROW -->, <!-- ENDIF --><!-- END birthdays --></strong><!-- ELSE -->{L_NO_BIRTHDAYS}<!-- ENDIF -->
						<!-- EVENT index_body_block_birthday_append -->
					</p>
				</div>
			<!-- ENDIF -->

			<!-- IF NEWEST_USER -->
				<div class="stat-block statistics">
					<h3>{L_STATISTICS}</h3>
					<p>
						<!-- EVENT index_body_block_stats_prepend -->
						{TOTAL_POSTS} &bull; {TOTAL_TOPICS} &bull; {TOTAL_USERS} &bull; {NEWEST_USER}
						<!-- EVENT index_body_block_stats_append -->
					</p>
				</div>
			<!-- ENDIF -->
		</div>
	</div>
</div>
<div style="clear: both"></div>

BTW: Kein fertiges Produkt und bedenke bitte auch, dass die Formatierung stat-block in der viewtopic und viewforum greifen wird - nur mal laut gedacht - .

Grüße

====
Edit: @Melmac, dein Beitrag wurde mir nicht vor dem Absenden und auch nicht zum Zeitpunkt des Logins angezeigt. Sorry! Klar ohne Angaben, "stochert" man ziemlich im Dunkeln. Ich hatte vorhin einfach mal alte Teilchen meinerseits ausgegraben und testweise in meinen Styles "angesetzt" ....

@Tastenplayer: Vielleicht hilft´s irgendwie.

LG

[Tastenplayer]

In dem Style Modern lass ich das glaub jetzt so - es funktioniert jetzt endlich mit allen Extensions! Sieht irgendwie auch nicht schlecht aus, so wie der Style jetzt formatiert ist.

@Kirk
Ich hab mal in der index_body_block_stats_append.html, etwas rumgepröbelt und siehe da [ externes Bild ]

Code: Alles auswählen

	<h3>{L_ONLINE_TITLE}</h3>
	<p>{L_ONLINE_START}{L_COLON}<strong>{L_BOARD_STARTS}</strong>{L_ONLINE_SINCE}<strong>{L_ONLINE_FOR}</strong>

Vorher mit dem </p> am Schluss [ externes Bild ]

@Talk19zehn
Für den Blackfog wäre das eine gute Lösung. Mal sehen ob es klappt.

@Melmac
Wenn man das über CSS macht kann man nicht den ganzen Statistikteil mit einer Hintergrundfarbe versehen - ohne Zwischenräume wo man noch Wrap sieht. Das müsste man indem man die ganze Statistik in eine eigene html Datei packt und dann über CSS. Oder eben die vermutlich besser Lösung von Talk19zehn.
Jedoch jetzt wo es mit allen Ext. klappt ist es gut so.

[Kirk]

Bei dem Style Modern wo du hier im Board vorgestellt hast, konnte ich dieses Verhalten nicht nachvollziehen.
Das manche Extension in einem anderen Style wie prosilver nicht ganz passt, ist eigentlich ganz normal.
Versteife dich bei deiner Styleentwicklung nicht auf irgendwelche Erweiterungen, du kannst nie wissen welche EXT in einem Board installiert ist.

[Melmac]

Ich gebs endgültig auf ...

[Tastenplayer]

Bei dem Style Modern wo du hier im Board vorgestellt hast, konnte ich dieses Verhalten nicht nachvollziehen.
.

Ja weil der statistikteil ganz anders formatiert war. Egal mit der p Eliminierung in der Bordonlinetime ext habe ich jetzt nur noch 1 Fehler in der html Datei.

Versteife dich bei deiner Styleentwicklung nicht auf irgendwelche Erweiterungen

Mit Sicherheit nicht! Jedoch die erste Statistikteil Umgestaltung war falsch. Es passte mit keiner einzigen Ext und das darf auch nicht sein.

Ich gebs endgültig auf ...

Keine Ahnung was Du jetzt meinst Melmac. Das ist nicht off topic, denn deswegen stimmte die Formatierung des Statistikteils eben nicht. Jetzt stimmt alles und sieht passend aus. Weswegen ich das erst für den Blackfog komplett anders machen muss(Talk19zehn hat ja schon das "Grundgerüst" dazu geliefert, vielen Dank).

[Tastenplayer]

@Talk19zehn
Auf der Suche mit dem nicht greifen der Hoverfarbe im Style Modern hab ich mal den Blackfog umgestylt(Hoverfarbe funktioniert immer noch, trotz gleichen Buttons ). Mal sehen, ob ich das hinbekomme mit Deiner Statistik Vorgabe. [ externes Bild ] (Icons sind logo nicht fertig - schwierig in dem Style)

@Melmac
Stat-block-Formatierung Style Modern

Code: Alles auswählen

/* Stat-block
---------------------------------------- */
.stat-block h3 a {
	color: #B5B5B5;
	font-family: Arial, sans serif;
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
}

.stat-block h3 a:hover {
	color: #BF0000;
}

.stat-block h3 {
	font-family: Arial, sans serif;
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	background: #262223;
	border: 1px solid #262223;
	border-top: 2px solid #262223;
	border-bottom: 4px solid #000;
	padding: 6px 8px;
	color: #AEAEAE;
	border-radius: 1px;
	margin-bottom: -1px;
}

.stat-block p {
	background: #7a7a7a; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #7a7a7a 0%, #afafaf 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, #7a7a7a 0%,#afafaf 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, #7a7a7a 0%,#afafaf 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7a7a7a', endColorstr='#afafaf',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	padding: 5px;
	margin-bottom: 15px;
	border-bottom: 2px solid #970000 !important;
	color: #262223;
	border: 3px solid #262223;
}

.stat-block a{
	color: #000;
	font-weight: bold;
}

.stat-block a:hover{
	color: #BF0000;
}

.stat-block em{
	background: transparent;
	padding: 0
}

Klappt aussen, wie innen - solange man keine Extensions installiert die in der Statistik landen! Mit der Ext von Kirk liegt es ja noch einigermassen im grünen Bereich. Jedoch die 24 Stunden ext. ist komplett daneben. In der Ext. hat es keine Styledatei - man versuche mal, da was anzupassen das funktioniert. Ich versuchs mal weiter, sonst muss ich halt dann mal bei ihm anfragen. [ externes Bild ] Wo dann die Systeminfo Ext. von dmzx landet, bleibt abzuwarten. In Windows läuft die ja nicht, kann ich erst testen, wenn der Style dann online ist.
Muss jetzt mal schauen, was passiert, wenn ich die Statblock Ext von Kirk aktiviere. Das geht dann definitiv nicht, bei dieser Statistik Änderung. Unten gibt es jetzt wieder einen falschen Balken. Will man also in dem Style dann die Statblock Ext von Kirk installieren, müsste man in der blackfog.css den ganzen Statistikteil löschen. Mit der Formatierung wie im Modern, hatte das problemlos funktioniert. [ externes Bild ] Firefox Untersuchung für diesen Balken zeigt, dass er von

Code: Alles auswählen

.displaystatswwh

ist.
Also in der Statblock ext von Kirk eingefügt

Code: Alles auswählen

.displaystatswwh  {
	display: none;
}

und schon sieht es wieder wie es soll aus. Ob diese Lösung allerdings der Norm entspricht?

Code: Alles auswählen

/* stat-block
---------------------------------------- */
.stat-block {
	background: #262223;
	background: -moz-linear-gradient(45deg, #262223 1%, #303032 41%, #303032 58%, #262223 100%);
	background: -webkit-linear-gradient(45deg, #262223 1%,#303032 41%,#303032 58%,#262223 100%);
	background: linear-gradient(45deg, #262223 1%,#303032 41%,#303032 58%,#262223 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#262223', endColorstr='#262223',GradientType=1 );
	border: 1px solid #262223;
	padding: 10px 10px;
	color: #B5B5B5;
	margin: -4px -5px -4px -5px;
}

.stat-block p {
	font-size: 1.1em;
	line-height: 1.4em;
	color: #B5B5B5;
}

.stat-block h3 {
	font-size: 10px;
	font-family: Arial, sans-serif;
	text-transform: uppercase;
	font-weight: 800;
	line-height: 1.3em;
	border-bottom-color: transparent;
	text-decoration: underline;
	margin-bottom: 0.3em;
	color: #B5B5B5;
	margin-top: -1px;
}

.stat-block h3 a {
	font-size: 10px;
	font-family: Arial, sans-serif;
	text-transform: uppercase;
	font-weight: 800;
	line-height: 1.2em;
	border-bottom-color: transparent;
	text-decoration: underline;
	color: #B5B5B5;
}

.displaystatswwh {
	background: #262223;
	border: 5px solid #000;
	border-radius: 2px !important;
	-moz-box-shadow: inset 0 0 10px #000000;
	-webkit-box-shadow: inset 0 0 10px #000000;
	box-shadow: inset 0 0 10px #000000;
	margin-bottom: 4px;
	padding: 5px 10px;
	margin-left: -15px;
	margin-right: -15px;
}

(Code geändert - Style hab ich heute ins Liveboard geladen, obwohl nicht fertig innen. Allerdings ist in meinem Forum ja die Statblock ext. von Kirk installiert)

Man nehme: Anderes Event für die 24 hours stat und schon ist sie drinn im Block. Nur leider ergibt das jetzt wieder ein überflüssiges abschluss p - was dann extrem grossen leeren unteren Teil ergibt. Mit den statistik Extensions gibt es bei einigen Events einen html Fehler in Form eines überflüssigen Abschluss p. Ausserdem müsste vor der Bordonlinetime jetzt definitv mehr Abstand sein. [ externes Bild ] Mal sehen ob das irgendwie hinzubekommen ist. Ansonsten bleibt nur meine erste Version( ein User auf .com hat das genau gleich gemacht wie ich).

Man kann es ändern wie man will, irgendwo passiert immer was mit einem anderen Event. Ausserdem muss das ja dann alles wieder geändert werden, wenn man denn später doch die Statblock ext von Kirk installieren möchte. Irgendwie auch doof. [ externes Bild ] Jetzt wäre es gar nicht mal so schlecht - leider müsste der schwarze Background weg - Linie ist auch falsch.
Also entweder mit der alten Lösung oder ich muss das komplett anderes lösen können in der html.