ThemesErstellen

RoEng edited this page Apr 28, 2015 · 6 revisions
Clone this wiki locally

Ein eigenes Theme erstellen

Mit ein wenig Übung kann man mit Zikula innerhalb einer halben Stunde ein völlig eigenes Layout erstellen. Am besten nimmt man sich dazu eines der mitgelieferten Themes. Zum Beispiel "Andreas08".

  1. Zunächst solltest Du das Theme umbenennen, damit Du es nicht beim nächsten Zikula-Update aus Versehen überschreibst. Dazu benennst Du das Verzeichnis um (z.B. /themes/meintheme/)
  2. dann trägst genau diesen Namen auch in der /themes/meintheme/version.php bei
   $themeversion['name'] = 'meintheme';

  und noch eine hübscher geschriebene Variante bei    

   $themeversion['displayname'] = 'Mein erstes Theme';

  ('Mein erstes Theme') ein. 

  1. Danach gehst Du in die Theme Administration, lässt die Liste der Themes neu erzeugen,
  2. und aktivierst das neue Theme.

Das neue sieht jetzt natürlich noch genauso aus wie Andreas08 - wir können damit aber herumspielen.

Alternative: Minimaltheme - Bastel Dir ein Theme von Grund auf selbst.

/themes/meintheme/

Schauen wir uns erst einmal die verschiedenen Verzeichnisse und Dateien an. Es gibt nur wenige obligatorische Dateien und Verzeichnisse und eine Reihe Dateien und Verzeichnisse, die sich zu einer Art Quasi-Standard entwickelt haben:

  • /themes/meintheme/* - Hauptverzeichnis Auf dieses Verzeichnis verweist
  • /themes/meintheme/styles/* - Stylesheets Auf dieses Verzeichnis verweist
  • /themes/meintheme/templates/* - Templates
  • /themes/meintheme/templates/config* - Konfigurationsdateien für die verschiedenen Templates
  • /themes/meintheme/images* - Bilder. Auf dieses Verzeichnis verweist
  • /themes/meintheme/plugins* - Theme Plugins Darüberhinaus kann man sich noch beliebige weitere Verzeichnisse einrichten. Ich habe zum Beispiel oft einen Pfad /themes/meintheme/classes für Javascript- oder PHP-Klassen, die ich im Theme verwende.

In diesen Verzeichnissen liegen dann:

  • /themes/meintheme/version.php* - Die Datei mit dem Themenamen usw.
  • /themes/meintheme/index.php* - leere index.php Dateien liegen in allen Verzeichnissen, damit niemand bei einem falsch konfigurierten Server ins Verzeichnis schauen kann.
  • /themes/meintheme/style/style.css* - Haupt-Stylesheet
  • /themes/meintheme/style/print.css* - Druck-Stylesheet - Du kannst aber noch beliebige weitere Stylesheets anlegen und im Theme einbinden
  • /themes/meintheme/style/MODULNAME/style.css* - Du kannst hier für jedes Modul ein Verzeichnis mit einem StyleSheet anlegen. Das überschreibt dann das StyleSheet, das das Modul mitliefert.
  • /themes/meintheme/templates/master.htm* - Das ist DAS zentrale Template.
  • /themes/meintheme/templates/config* - Hier liegen die .ini Dateien, die bestimmen, wann welches Template benutzt werden soll.
  • /themes/meintheme/templates/config/pageconfiguration.ini* - Die Haupt-.ini - es kann noch wesentlich mehr geben
  • /themes/meintheme/templates/blocks* - Hier liegen die Templates für die "Block-Rahmen". Nicht also die Templates für die Ausgaben der Blocks selbst, sondern für das was zum Beispiel alle Blöcke auf der linken Seite gemeinsam haben.
  • /themes/meintheme/templates/modules* - Hier liegen die weiteren Theme-Templates. Außerdem kannst Du hier für jedes Modul ein Template-Verzeichnis anlegen:
  • /themes/meintheme/templates/modules/MODULNAME*

version.php

In der version.php legst Du fest, wie das Theme heißen soll, wer es erstellt hat und ob es xHTML oder HTML ist, sowie einige andere Sachen:

#php
<?php
$themeversion['name'] = 'meintheme'; // =Verzeichnisname
$themeversion['displayname'] = 'Mein erstes Theme'; // Dieser Name wird in der Administration angezeigt
$themeversion['description'] = 'Das hier ist mein erster Versuch ein Theme selbst zu bauen'; // Beschreibung
$themeversion['regid'] = '0'; // Keine Ahnung, was das ist
$themeversion['version'] = '2008'; // Versionsnummer: 2008 oder 1.0 oder XP oder was auch immer.
$themeversion['official'] = '0'; // 1 nur bei offiziellen Zikula Themes
$themeversion['author'] = 'Steffen Voß'; // Dein Name - oder mehrere
$themeversion['contact'] = 'http://kafferinge.de'; //Wie kann man Dich erreichen? Wichtig nur, wenn Du das Theme veröffentlichst
$themeversion['admin'] = 0; // eignet sich das Theme auch als Theme nur für den Adminbereich (Backend)? Dann: 1
$themeversion['user'] = 1; // eignet sich das Theme auch als Theme nur für den Userbereich (Frontend)? Dann: 1 - Das sollte eigentlich meistens der Fall sein
$themeversion['system'] = 0; // Ist das ein System-Theme - also ein RSS-Theme oder ein Drucker-Theme?
$themeversion['credits'] = 'docs/credits.txt'; // Hier kannst Du noch einbauen, wo ein Dankeschön-Text liegt. Musst Du aber nicht
$themeversion['help'] = 'docs/help.txt'; // Hier kannst Du noch einbauen, wo ein Hilfe-Text liegt. Musst Du aber nicht
$themeversion['changelog'] = 'docs/changelog.txt'; // Hier kannst Du noch einbauen, wo ein Changelog-Text liegt. Musst Du aber nicht
$themeversion['license'] = 'docs/gpl.txt'; // Hier kannst Du noch einbauen, wo die Lizenz liegt. Musst Du aber nicht
$themeversion['xhtml'] = true; // Ist das ein xHTML-Theme? Dann: true Sonst: false

/themes/meintheme/config/

Werfen wir einen Blick ins config-Verzeichnis. Für das erste Erstellen eines neuen Themes muss hier wenig gemacht werden. Um später aber verschiedene Teile der Site unterschiedlich darzustellen, ist es gut zu wissen, wofür hier die Dateien gut sind.

pageconfigurations.ini

Die .ini-Dateien sind die Smarty-typischen Konfigurationsdateien. Die pageconfiguration.ini ist die Datei, in der steht, wann welche andere .ini geladen werden soll. Der wichtigste Eintrag dort ist:

[master]
file = master.ini

Weiterlesen: pageconfigurations.ini

master.ini

In der master.ini wird festgelegt, welche Templates benutzt werden sollen:

page = master.htm

[blocktypes]

[blockpositions]
left = lsblock.html
center = plain.html
right = plain.html

[blockinstances]
22 = plain.html

Die erste Zeile besagt, dass das Template master.htm benutzt werden soll, um die Seite aufzubauen.

[blocktypes] bietet eine Möglichkeit die Ausgabe der Blöcke (auch Systemblöcke) innerhalb des Themetemplates weiter zu gestalten. Bei einem neu installierten Zikula wird innerhalb der linken Navigation Beispielsweise die Ausgabe des extmenu angezeigt (z.B. Home) Die Ausgabe efolgt üblicherweise aus dem Template /system/Blocks/pntemplates/blocks_block_extmenu.htm. Veränderungen an den Basisdateien sollte man jedoch nicht vornehmen, weil diese bei einem späteren Update überschrieben werden. Ein Beispiel:

[blocktypes]
extmenu = extmenu.htm

Die Datei extmenu.htm wird im Themetemplate unter /deinTheme/templates/modules/extmenu.htm angelegt. Die Ausgabe im template erfolgt über Der Name des Blocks wird allerdings dabei nicht mit ausgegeben. Die Datei extmenu.htm könnte Beispielsweise so aussehen:

<div id=MeinBlock>
<h4>Mein Blockname </h4>
<!--[$content]--></div>

Leider ist es nicht möglich (mir nicht bekannt), die Ausgabe weiter zu verfeinern. Anwendungsmöglichkeiten sind daher mehr gestalterischer Art um z.B. den Block auf der Startseite in anderer Form als auf den folgenden Seiten aussehen zu lassen oder aber verschiedene Grafiken in die Blöcke einzufügen (menu=grafik1, extmenu=grafik2). Über weitere Anwendungsbeispiele an dieser Stelle würde auch ich mich freuen.

Im Abschnit [blockpositions] wird bestimmt, welche Block-Zonen es gibt und welche Templates aus /themes/meintheme/templates/blocks dafür benutzt werden sollen. In diesem Fall wird für die linken Blöcke das Template lsblock.html benutzt - sowohl die rechten als auch die mittleren Blöcke werden mit dem gemeinsamen Template plain.html erzeugt.

Unter [blockinstances] kann man noch eintragen, ob bestimmte Blöcke noch mit einem eigenen Block-Template erzuegt werden sollen. Dazu benötigst Du die Block-ID. Die findest Du in der Block-Administration. In diesem Fall wird der Block mit der ID ebenfalls mit plain.html erzeugt - vermutlich weil er zwar links ist, aber so aussehen soll, wie die Blocke rechts und in der Mitte.

weitere .ini-Dateien

In der Art der master.ini kannst Du mehr Konfigurationen erstellen. Du kannst zum Beispiel eine home.ini und eine forum.ini anlegen. Oft sollen auf der Startseite mehr Blöcke als auf normalen Seiten dargestellt werden und das Forum benötigt mehr Platz. In der home.ini könntest Du dann die zusätzlichen Block-Positionen definieren und auf page=home.htm verweisen, welche allerdings in /themes/meintheme/templates/modules liegen muss. Dort muss auch die forum.htm liegen, auf die Du in der forum.ini verweist.

master.htm

Die master.htm ist das Haupttemplate Deiner Site. Hier werden die Fäden zusammengeführt. Hat die pageconfigurations.ini festgestellt, dass keine andere Anweisung greift, leitet sie an die master.ini weiter und in der steht, dass die master.htm aufgerufen werden soll. Und die sieht im Standard-Theme andreas08 zum Beispiel so aus:

<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html ns="http://www.w3.org/1999/xhtml" xml:lang="<!--[lang]-->">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<!--[charset]-->" />
<title><!--[title]--></title>
<meta name="description" content="<!--[slogan]-->" />
<meta name="keywords" content="<!--[keywords]-->" />
<link rel="stylesheet" type="text/css" href="<!--[$stylepath]-->/style.css" media="print,projection,screen" />
<link rel="stylesheet" type="text/css" href="<!--[$stylepath]-->/print.css" media="print" />
<!--[modulestylesheet xhtml=true]-->
<!--[if $pagetype eq 'admin']--><!--[modulestylesheet stylesheet=admin.css modname=admin xhtml=true]--><!--[/if]-->
</head>
<body>
<div id="theme_page_container">

<div id="theme_header">
<h1><!--[sitename]--></h1>
<h2><!--[slogan]--></h2>
</div>

<div id="theme_navigation_bar">
<ul>
<li><a href="<!--[pngetbaseurl]-->"><!--[pnml name="_ANDREAS08_HOME"]--></a></li>
<li<!--[if $module eq 'Search']--> class="selected"<!--[/if]-->><a href="<!--[pnmodurl modname=Search]-->"><!--[pnml name="_SEARCH"]--></a></li>
<li<!--[if $module eq 'Profile']--> class="selected"<!--[/if]-->><a href="<!--[pnmodurl modname=Profile]-->"><!--[pnml name="_YOURACCOUNT"]--></a></li>
</ul>
</div>

<div id="theme_content">
<!--[$maincontent]-->
</div>

<div id="theme_subcontent">
<!--[blockposition name=left]-->
</div>

<div id="theme_footer">
<p><!--[pnml name=_CMSHOMELINK html=true]--></p>
<!--[nocache]--><!--[pagerendertime]--><!--[/nocache]-->
<!--[nocache]--><!--[sqldebug]--><!--[/nocache]-->
</div>

</div>
</body>
</html>

Auf den ersten Blick ist das erst einmal eine HTML Seite: Da ist das umschließende html-Tag, head und body mit den typischen Inhalten. Da sind aber auch einige andere Tags vorhanden. Das sind Variablen- und Funktionsaufrufe, die für die Inhalte sorgen.

Beispiel 1:

<!--[$maincontent]-->

An dieser Stelle fügt Zikula den Inhalt des aktuellen Modules ein. Wird also zum Beispiel index.php?module=News aufgerufen, werden hier die News angezeigt.

Beispiel 2:

<!--[blockposition name=left]-->

Damit werden alle Blöcke angezeigt, die der Block-Position "left" zugeteilt sind. Weiterlesen: Blöcke

Eine Übersicht der wichtigsten Funktionen in einem Theme gibt es unter: Wichtige Funktionen in Themes.

Eine HTML-Vorlage in ein Theme umbauen

Du kannst hier einfach das HTML nach Deinen Wünschen verändern, ganz einfach manuell. Du kannst aber auch vorher eine Seite als reines HTML entwerfen oder eines der vielen kostenlos erhältlichen Templates benutzen, um daraus ein Theme für Zikula zu erzeugen:

    1. Öffne die HTML-Vorlage und die master.htm des Themes, das wir in den Schritten vorher umbenannt haben. Öffne auch die CSS-Datei der Vorlage und die /themes/meintheme/style/style.css
    2. Lösche den Inhalt der /themes/meintheme/style/style.css und kopiere den Inhalt der CSS-Datei der Vorlage hinein. Abspeichern. Wenn Du jetzt Deine Site neu lädtst, sollte das Layout ziemlich vermurkst aussehen: Immerhin lädtst Du ja ein CSS, das nicht zum HTML passt.
    3. Schau Dir nun die HTML-Datei der Vorlage an: Kopiere alles ab dem schließenden /head-Tag in die master.htm - einfach am Ende anhängen.
    4. Lösch die Demo-Inhalte aus dem Vorlagen-Teil in der master.htm und kopier die Aufrufe für maincontent & Co herunter.
    5. Lösch den Teil der originalen master.htm, den Du jetzt nicht mehr brauchst. Abspeichern. Lade Deine Site neu. Wenn Du alles richtig gemacht hast, sollte Die Site jetzt der Vorlage schon recht ähnlich sehen. Es fehlen aber noch die Grafiken:
    6. Kopiere die mitgelieferten Grafiken ins Verzeichnis /themes/meintheme/images
    7. Ändere die Pfade zu den Grafiken in der master.htm in
  <!--[$imagepath]-->

 Aus   

  <img src="/img/icon.png">

 Wird dann  

  <img src="<!--[$imagepath]-->/icon.png">

 Abspeichern. Fertig.

Links

Kostenlose HTML-Vorlagen findest Du hier: