This page in: English - Deutsch - Español - Français - Italiano - Lietuvių - Nederlands - Norsk - Polski - Русский - Svenska - Tiếng Việt - عربي - 日本語 简体中文
Die Standard-Templates anpassen
Alle mit CMS made simple mitgelieferten Muster-Templates basieren mehr oder weniger auf dem gleichen HTML-Code. Die einzigen Unterschiede sind die eingesetzten Menüs sowie die Anzahl der Inhaltsblöcke. Der Rest wird allein durch CSS gestaltet.
Da die Muster-Templates von CMS made simple keine Tabellen verwenden, ist dies möglich. Anstatt dessen werden <div>-Tags zum festlegen der Inhaltsblöcke verwendet. Die Position und Gestaltung eines jeden div-Blockes kann durch CSS angepasst werden.
Auf dieser Seite werden wir das Template Stücke für Stück besprechen, dessen Bedeutung erläutern und zeigen, wie Sie es anpassen können.
Die Anpassung von Gestalt und Aussehen erfolgt in den Stylesheets, die mit jedem Template verknüpft sind.
Festlegung des DOCTYPE und der Sprache
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Das ist der DOCTYPE (Deklaration des Dokumententyps). Er teilt dem Browser mit, welche (X)HTML-Version Ihre Seite verwendet, damit diese korrekt interpretiert werden kann. Desweiteren ist er für Programme notwendig, die die Gültigkeit der auf Ihrer Seite verwendeten Syntax überprüfen.
Die ersten zwei Zeilen können so belassen werden. Was Sie hier jedoch verändern sollten, ist die Deklaration der Sprache im <HTML>-Tag. Hier spezifizieren Sie die Sprache, die im Inhalt verwendet wird. ändern Sie "en" in den 2-buchstabigen Code Ihrer bevorzugten Sprache (z. Bsp. "de" für deutsch).
Weitere Informationen über den DOCTYPE finden Sie auf der Homepage des W3C-Konsortiums.
Codes zur Darstellung der Sprachnamen
Head-Tags
<head>
<title>{sitename} - {title}</title>
{stylesheet}
{metadata}
</head>
Was zwischen den <title>-Tags steht, erscheint in der Titelzeile Ihres Browsers. {sitename}ist der Platzhalter für den Seitennamen und kann in der Administration im Menü Administrator -> Globale Einstellungen festgelegt werden. Falls Sie ebenfalls den Namen jeder Seite in der Titelzeile anzeigen lassen möchten, können Sie den {title}-Tag hinzufügen. Der {title}-Tag ist ein Platzhalter, der durch den Namen der aktuellen Seite ersetzt wird, den Sie als Titel für die Seite eingegeben haben (Menü Inhalt -> Seiten -> Neue Seite hinzufügen).
{stylesheet} ist ein Tag, der alle mit dem Template verknüpften Stylesheets verlinkt. Das heißt, das Sie diesen Tag nur einmalig in das Template einfügen müssen und damit alle mit dem Template verknüpften Stylesheets automatisch verlinkt werden.
{metadata} enthält alle Metadaten, die Sie über das Menü Administrator -> Globale Einstellungen für globale Metadaten sowie ggf. zusätzliche Metadaten, die über das Menü Inhalt -> Seiten -> Neue Seite hinzufügen im Reiter Optionen speziell für diese Seite eingegeben haben.
Der Page-Wrapper
<body> <div id="pagewrapper">
Das ist der Beginn des div-Blocks, in dem sich die gesamte Seite einfügt. Im Stylesheet können Sie über diesen Wert die Seitenbreite, die Ausrichtung usw. einstellen.
Wo kann der Wert angepasst werden:
- Suchen Sie in einem der Stylesheets, die mit dem Namen Layout beginnen, nach dem Eintrag div#pagewrapper.
Der Kopf (Header)
<div id="header">
<h1>{cms_selflink dir="start" text="$sitename"}</h1>
<hr class="accessibility" />
Der Header der Seite ist dort, wo das Logo von CMS made simple zu sehen ist. Wie Sie jedoch auch sehen, sind im Template keine Informationen über die sichtbaren Inhalte zu finden. Diese werden vollständig über das Stylesheet eingeblendet. Dies wurde gemacht, um einen sehr sauberen HTML-Code zu erhalten. Wenn Sie noch Text oder andere Inhalte im Header anzeigen lassen möchten, können Sie dies natürlich auch direkt im Template hinzufügen.
Wo kann das Aussehen des Headers angepasst werden:
- Suchen Sie in einem der Stylesheets, die mit dem Namen Layout beginnen, nach den Einträgen div#header und div#header h1 a (für den Link). Dort können Sie per CSS die Hintergrundfarbe, das Logo, die Höhe usw. einstellen.
<!-- Start Breadcrumbs -->
<div class="breadcrumbs">
{breadcrumbs starttext='You are here' root='Home' delimiter='»'}
<hr class="accessibility" />
</div>
<!-- End Breadcrumbs -->
Die Breadcrumbs sind Links, die dem Besucher einer Seite zeigen, auf welcher Seite er sich gerade befindet und wo diese Seite in der Hierarchie der Webseite steht. Dies könnte zum Beispiel so aussehen:
Start >> Abschnitt 1 >> Unterabschnitt 2
In CMS Made Simple gibt es dafür einen Tag, der jeder Seite automatisch die Brotkrumen hinzufügt: {breadcrumbs}. delimiter="»" heisst, dass das Zeichen » als Trenner zwischen zwei Ebenen verwendet wird.
initial='1' bedeutet, dass die Breadcrumbs mit einem Trenner beginnen. Wenn dieser Parameter nicht vorhanden oder auf '0' gesetzt ist, wird vor der ersten Ebene kein Trenner angezeigt.
Wo kann das Aussehen der Breadcrumbs angepasst werden:
- Suchen Sie in einem der Stylesheets, die mit dem Namen Layout beginnen, nach dem Eintrag div.breadcrumbs. Dort können Sie die verwendete Schriftart, den Hintergrund usw. anpassen.
- Um mehr über die Verwendung des {breadrumbs}-Tags zu erfahren, klicken Sie in der Administration im Menü Extensions -> Tags in der Zeile Breadcrumbs den Hilfe-Link.
Der Rest des Standard-Templates wird gegenwärtig an die letzte Version angepasst.
Hinweis: Unter http://cmsmadesimple.org/uploads/media/mint_chocolate.htm gibt es Flash-Video, in dem gezeigt wird, wie man ein Template so anpasst, damit es auch mit CMSms genutzt werden kann.
This page in:
English -
Deutsch -
Español -
Français -
Italiano -
Lietuvių -
Nederlands -
Norsk -
Polski -
Česky -
Русский -
Svenska -
Tiếng Việt -
عربي -
日本語
简体中文
Statisches Theme einbinden
Ein Theme aus einer Datei einbinden
