<?xml version="1.0" encoding="utf-8"?>
<!-- generator="Joomla! - Open Source Content Management" -->
<?xml-stylesheet href="/media/system/css/modal.css" type="text/css"?>
<?xml-stylesheet href="/media/com_attachments/css/attachments_hide.css" type="text/css"?>
<?xml-stylesheet href="/plugins/system/jce/css/content.css?dca685724cb70697f68d02ab5281d8a0" type="text/css"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
	<channel>
		<title>Das Frontend</title>
		<description><![CDATA[ChessLeagueManager - CLM. Das kostenlose, OpenSource Ligaverwaltungsprogrammes für Schachligen, Einzelturniere und Mannschaftsturniere.]]></description>
		<link>https://clm4.de</link>
		<lastBuildDate>Fri, 27 Feb 2026 17:22:32 +0000</lastBuildDate>
		<generator>Joomla! - Open Source Content Management</generator>
		<atom:link rel="self" type="application/rss+xml" href="https://clm4.de/das-frontend/itemlist/category/29-css?format=feed&amp;type=rss"/>
		<language>de-de</language>
		<item>
			<title>CSS Tutorial</title>
			<link>https://clm4.de/das-frontend/item/152-css-tutorial</link>
			<guid isPermaLink="true">https://clm4.de/das-frontend/item/152-css-tutorial</guid>
			<description><![CDATA[<div class="K2FeedIntroText"><p>Ab Version 0.9.6.2 ist das Layout mittels CSS vom Inhalt getrennt.</p>
<p>Das bedeutet, dass über die Datei "includes/<strong>clm_content.css</strong>" sich das gesamte Layout steuern lässt.</p>
<p>Dieses Tutorial soll zeigen, wie das Layout aufgebaut ist und wie man es individuell gestalten kann.</p>
<p> </p>
<p> </p>
<hr />
<p> </p>
<p><img src="https://clm4.de/images/stories/clm_tutorial/css_clmview.png" alt="" align="left" border="0" /><strong>1. </strong><strong>#clm</strong></p>
<p> </p>
<p>Jede Seite beginnt erst einmal damit, d.h. möchte man Anpassungen für alle Tabellen auf allen CLM-Seiten erreichen, macht man es über: <strong>#clm table { }<br /></strong></p>
<p> </p>
<p><strong>2. #clm #</strong>(?view=)</p>
<p> </p>
<p>Für individuelle Anpassungen schaut man sich erst einmal die URL an:</p>
<p><img src="https://clm4.de/images/stories/clm_tutorial/css_tutorial.png" alt="" border="0" /></p>
<p>Speziell für oben wäre der Aufbau:<strong> #clm #rangliste { }</strong></p>
<p> </p>
<p>Weitere Möglichkeiten sind:</p>
<p> </p>
<table style="width: 580px; height: 95px;" border="0">
<tbody>
<tr>
<td>#aktuelle_runde<br /> #check<br /> #dwz_liga<br /> #dwz<br /> #info<br /> #mannschaft<br /> #meldeliste</td>
<td>
<p>#meldung</p>
<p>#paarungsliste<br /> #rangliste<br /> #runde<br /> #spieler<br /> #statistik<br /> #turnier_info</p>
</td>
<td>
<p>#turnier_invitation</p>
<p>#turnier_rangliste<br /> #turnier_paarungsliste<br /> #turnier_runde <br /> #turnier_teilnehmer<br /> #verein<br /> #vereinsdaten</p>
</td>
</tr>
</tbody>
</table>
<p> </p>
<hr />
<p> </p>
<p><strong><img src="https://clm4.de/images/stories/clm_tutorial/css_componentheading.png" alt="" align="left" border="0" />3. .componentheading</strong></p>
<p> </p>
<p>Für gewöhnlich steht die Überschrift als erstes da.</p>
<p>Allgemeine Anpassungen: <strong>#clm .componentheading</strong></p>
<p>Individuelle: <strong>#clm #(view) .componentheading</strong></p>
<p> </p>
<p>Beispiel links:</p>
<p> </p>
<p>#statistik .componentheading</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<hr />
<p> </p>
<p><img src="https://clm4.de/images/stories/clm_tutorial/css_h4.png" alt="" align="left" border="0" />4. <strong>h4</strong></p>
<p> </p>
<p>Auf manchen Seiten erscheinen noch weitere Überschriften.</p>
<p>Allgemeine Anpassungen: <strong>#clm h4<br /></strong></p>
<p>Individuelle: <strong>#clm #(view) h4</strong></p>
<p><strong> </strong></p>
<p>Beispiel links:</p>
<p> </p>
<p>#statistik h4</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<hr />
<p> </p>
<p><strong><img src="https://clm4.de/images/stories/clm_tutorial/css_desc.png" alt="" align="left" border="0" />5. #desc</strong></p>
<p> </p>
<p>Auf manchen Seiten befindet sich ein eingeschobener Inhalt mit Hinweisen. Die Überschrift spricht man über "h4" oder "b" an, den Inhalt allgemein über #desc</p>
<p>Allgemeine Anpassungen: <strong>#clm #desc <br /></strong></p>
<p>Individuelle: <strong>#clm #(view) #desc</strong></p>
<p> </p>
<p>Beispiel links:</p>
<p> </p>
<p>#statistik #desc</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<hr />
<p> </p>
<p><strong><img src="https://clm4.de/images/stories/clm_tutorial/css_table.png" alt="" align="left" border="0" />6. table</strong></p>
<p> </p>
<p>Die Tabelle besitzt noch eigene Klassennamen, die über die views hinausgehen (zB die Klasse für Runde):</p>
<p> </p>
<p style="padding-left: 30px;"><span style="font-size: x-small;">.dwz</span></p>
<p style="padding-left: 30px;"><span style="font-size: x-small;">.dwz_liga</span></p>
<p style="padding-left: 30px;"><span style="font-size: x-small;">.runde </span></p>
<p style="padding-left: 30px;"><span style="font-size: x-small;">.mannschaft </span></p>
<p style="padding-left: 30px;"><span style="font-size: x-small;">.meldung</span></p>
<p style="padding-left: 30px;"><span style="font-size: x-small;">.paarungsliste</span></p>
<p style="padding-left: 30px;"><span style="font-size: x-small;">.rangliste</span></p>
<p style="padding-left: 30px;"><span style="font-size: x-small;">.spielerverlauf</span></p>
<p style="padding-left: 30px;"><span style="font-size: x-small;">.spielerdwzneu</span></p>
<p style="padding-left: 30px;"><span style="font-size: x-small;">.spielplan</span></p>
<p style="padding-left: 30px;"><span style="font-size: x-small;">.turnier_rangliste</span></p>
<p style="padding-left: 30px;"><span style="font-size: x-small;"> .turnier_teilnehmer</span></p>
<p style="padding-left: 30px;"><span style="font-size: x-small;">.statistik </span><br /> </p>
<p>Allgemeine Anpassungen: <strong>#clm table<br /></strong></p>
<p>Individuelle: <strong>#clm #(view) table</strong></p>
<p>oder:<strong> #clm table.(Klassenname)<br /></strong></p>
<p> </p>
<p>Beispiel links: <strong>#statistik table</strong> oder <strong>table.statistik </strong></p>
<p> </p>
<hr />
<p> </p>
<p><strong><img src="https://clm4.de/images/stories/clm_tutorial/css_th.png" alt="" align="left" border="0" />7. th</strong></p>
<p> </p>
<p>Tabellenüberschriften</p>
<p>Allgemeine Anpassungen: <strong>#clm table th<br /></strong></p>
<p>Individuelle: <strong>#clm #(view) table th</strong></p>
<p>oder:<strong> #clm table.(Klassenname) th<br /></strong></p>
<p> </p>
<p> </p>
<hr />
<p> </p>
<p><strong><img src="https://clm4.de/images/stories/clm_tutorial/css_zeile.png" alt="" align="left" border="0" />8. </strong><strong>tr und td<br /></strong></p>
<p> </p>
<p>Der Zeileninhalt besteht aus geraden und ungeraden Zeilen <strong>tr</strong>:<strong> .zeile1</strong> und <strong>.zeile2</strong></p>
<p>Zeilen bestehen aus Zellen <strong>td</strong>. Die Zellen kann man als Einstellungen für die Spalten ansehen (mit Ausnahme der Überschriften)</p>
<p> </p>
<p><img src="https://clm4.de/images/stories/clm_tutorial/css_anfang.png" alt="" align="left" border="0" /></p>
<p>Einige Tabellen enthalten eine Unterüberschrift. Diese wird mittels<strong> .anfang </strong>bestimmt.</p>
<p> </p>
<p> </p>
<p><img src="https://clm4.de/images/stories/clm_tutorial/css_ende.png" alt="" align="left" border="0" /></p>
<p>Bei Summen gibt es am Ende einer Tabelle eine zusätzliche Zeile <strong>.ende</strong></p>
<p> </p>
<p> </p>
<p> </p>
<hr />
<p> </p>
<p><strong>9. #wrong</strong></p>
<p> </p>
<p><img src="https://clm4.de/images/stories/clm_tutorial/css_wrong.png" alt="" align="left" border="0" />Fehlermeldung</p></div>]]></description>
			<author>ich@vonfio.de (Fjodor Schäfer)</author>
			<category>CSS</category>
			<pubDate>Fri, 14 Jan 2011 21:40:11 +0000</pubDate>
		</item>
	</channel>
</rss>
