Hintergründe für "Wer ist online?" & Co.

[Fritti]

Hallo an euch,

erstmal ein großes Dankeschön für diese richtig gute Forensoftware, es macht großen Spaß damit zu arbeiten - vor allem durch die zahlreichen Möglichkeiten, sie zu verändern.

Ich habe nun auf einem lokalen XAMPP-Server einiges probiert und erarbeite mir - auch dank zahlreicher Tutorials - nun einen eigenen Style basierend auf prosilver.

Nun bin ich an einer kleinen Stelle hängengeblieben - und zwar geht es um die Zwischenüberschriften "Wer ist online?" sowie "Geburtstage" und "Statistik".

Ersteres ist ja als normaler Link (a) definiert, letztere als h3. Gibts eine Möglichkeit, für diese Überschriften neue Klassen o.ä. zu definieren und diese als solches einzubauen?

Konkret gesagt: Ich möchte hinter die Überschriften einen background mit border-radius legen und den Überschriften so mehr Lesbarkeit verschaffen.
Im Endeffekt so etwas wie die headerbar, nur bedeutend kleiner und nur exklusiv für die jeweiligen Überschriften.

An sich wäre es ja nicht schwer, mit CSS Spezielles zu definieren, aber wie binde ich das dann passend ein, also wo genau finde ich jene Überschriften im php-Code und kann sie anpassen bzw neu zuteilen?

Ich hoffe meine Frage ist nicht zu kompliziert

Danke im Voraus für jede Hilfe

Fritti

[Crizzo]

Hi,

ich gehe mal davon aus, dass du den prosilver-Style verwendest. (oder eben eine Style der darauf basiert; dort geht es genauso)

Dort öffnest du bitte die Datei: \phpBB3\styles\prosilver\template\index_body.html
Finde jeweils: (ca. Zeile 40)

Code: Alles auswählen

<!-- IF U_VIEWONLINE --><h3><a href="{U_VIEWONLINE}">{L_WHO_IS_ONLINE}</a></h3><!-- ELSE --><h3>{L_WHO_IS_ONLINE}</h3><!-- ENDIF -->

sowie: (ca. Zeile 52)

Code: Alles auswählen

<h3>{L_BIRTHDAYS}</h3>

und (ca. Zeile 63)

Code: Alles auswählen

<h3>{L_STATISTICS}</h3>

Da kannst du dann eine Klasse für das h3-Element definieren: http://www.thestyleworks.de/ref/se_class.shtml

Danach kannst du die zur Klasse passende CSS-Regel in deinem Stylesheet ergänzen und beliebige Eigenschaften einrichten.

Grüße

[Fritti]

Danke für die schnelle Antwort.

Also ich hab in der common.css folgendes für Geburtstag definiert:

Code: Alles auswählen

h3.geburtstag {
    border-radius: 6px; box-shadow: 0 1px 0 #000000; background: #646464; border: medium none; color: #FFF; text-shadow: 0 1px #000;
}

Darüber hinaus in der index_body.html die Änderung vorgenommen:

Code: Alles auswählen

<h3 class="geburtstag">{L_BIRTHDAYS}</h3>

Ich habs anfangs erstmal nur mit einer Änderung der Textfarbe versucht, aber das funktionierte leider ebenso wenig wie das Konstrukt jetzt. Ist die common.css der falsche Platz dafür?

Noch zur Info: Ich nutze einen eigenen Style bzw. baue diesen auf, der als parent aber auf prosilver basiert. Heißt ich muss schon alle Änderungen innerhalb des Ordners meines Styles durchführen und prosilver unberührt lassen, richtig?

Danke nochmals!

EDIT:

Habs jetzt etwas anders gelöst und das gefällt mir sogar noch besser - ich hab das komplette div abgeändert und somit größere "Blöcke" mit Hintergrund bekommen:

Code: Alles auswählen

.stat-block {
	clear: both; border-radius: 3px; box-shadow: 0 1px 0 #000000; background: #646464; border: medium none; color: #FFF; text-shadow: 0 1px #000; padding: 1px 0 0 5px;
}

[Talk19zehn]

Hi, um Teile deiner Fragen mit ein paar Beispielen zu beantworten, ging ich wie folgt vor:

CSS: Nur mal so gedacht ...

Code: Alles auswählen

.ueberschriftderdrittenordnung-online h3 {
	background: #CADCEB;
	border-radius: 7px;
	padding: 5px 4px;
}

.ueberschriftderdrittenordnung-birthday h3 {
	background: #008000;
	border-radius: 7px;
	border-bottom: 4px solid #AA0000;
	padding: 5px 4px;
	font-weight: bold;
	color: #FAFAFA;
}

.ueberschriftderdrittenordnung-statistik h3 {
	background-color: #0584C2;
	background: linear-gradient(to bottom, #1e5799 0%, #088ACB 100%);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#1e5799', EndColorStr='#088acb')";
	box-shadow: 5px 1px 16px 4px rgba(2, 2, 2, 0.5);
	border-radius: 7px;
	padding: 5px 4px;
	font-weight: bold;
	color: #CCCCCC;
}

oder gar "global":

Code: Alles auswählen

.ueberschriftderdrittenordnung-statsblock h3 {
	background: #9CC9FF;
	padding: 5px 4px;
	color: #D9CA00;
}

HTML-Ansatz: Beachte bitte die Hinzufügung der jeweiligen Klasse.

Code: Alles auswählen

<!-- IF S_DISPLAY_ONLINE_LIST -->
	<div class="stat-block online-list ueberschriftderdrittenordnung-online">
		<!-- 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 /> <br />{LOGGED_IN_USER_LIST}
			<!-- IF LEGEND --><br /><em>{L_LEGEND}{L_COLON} {LEGEND}</em><!-- ENDIF -->
			<!-- EVENT index_body_block_online_append -->
		</p>
	</div>
<!-- ENDIF -->

<!-- IF S_DISPLAY_BIRTHDAY_LIST -->
	<div class="stat-block birthday-list ueberschriftderdrittenordnung-birthday">
		<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 ueberschriftderdrittenordnung-statistik">
		<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 -->

Zur Übersichtlichkeit ist es ggf. ratsam ein eigenes CSS-Verzeichnis anzulegen: additional.css und sie am Ende der stylesheet.css per @import url("additional.css"); einzubinden. Inzwischen geht man jedoch oftmals dazu über, möglichst alle Style-Änderungen in einer eigenen Extension zu erfassen.
Meine gestrigen Ansätze wollte ich dir nicht vorenthalten. Da du nun bereits eine andere Lösung für dich gefunden hast, sind sie wahrscheinlich nicht mehr relevant. Hilfreich evtl. für weitere Deklarationen.
Tipp: Farbgebungen
http://www.color-hex.com/color/0584c2
http://colorschemedesigner.com/

Bedenke, dass es ratsam sein kann, das CSS responsive anzupassen.

Viele Grüße

[Fritti]

Danke dir für deine Lösung und die damit ebenfalls verbundenen Tipps - jetzt sieht beides super aus und ich bin unsicher, welche Art ich nun nehme bzw. welches mir besser gefällt
Naja, da bei mir zum Projekt noch eine zweite Person gehört, wirds bald eventuell eine Entscheidungshilfe geben