PhpGedView Style Hilfe

Diese Anleitung unterstützt Sie bei der Anpassung der Optik Ihrer phpGedView Seite. Alle in dieser Anleitung genannten Dateien finden Sie im Themes-Verzeichnis und sie sind so angelegt, dass Sie nach Belieben verändert werden können, ohne den Programmablauf von phpGedView zu stören, obwohl auch einige PHP-Programmzeilen in diesen Dateien enthalten sein können. Die Kenntnis von CSS Stylesheets und HTML ist notwendig, um die Seiten anzupassen. Grundkenntnisse in PHP sind ebenfalls hilfreich.

Einige Schritte zum Anpassen Ihres Themes
Die folgenden Schritte werden Sie bei der Erstellung eines eigenen Themes für PhpGedView anleiten:

Seiten Übersicht
Eine von phpGedView erstellte Seite ist in 5 Bereiche unterteilt:

PhpGedView nutzt CSS Stylesheets ausgiebig auf der gesamten Seite. Alle Stylesheets sind in der Datei style.css definiert. Diese Stylesheets bieten Ihnen höchste Flexibilität bezüglich des graphischen Layout, Farben, Schriftarten, Rahmen etc. Probieren Sie einfach aus, was alles möglich ist. Wenn Sie etwas besonders kreatives erstellt haben, teilen Sie es mit den übrigen Nutzern. Der folgende Bereich beschreibt, welches Element auf den Seiten jeder Bereich in der Datei style.css beeinflusst.

Dieses Bild bezieht sich auf den Stammbaum und den Nachfahrenbaum. Die Definition .pedigree_image_portrait wird manchmal ersetzt durch .pedigree_image_portrait_rtl, .pedigree_image_landscape, oder .pedigree_image_landscape_rtl, je nach Sprach und gewählter Darstellung (Hoch-/Querformat). Die Klassen .name1 and .details1 können auch durch .namezoom und .detailszoom ersetzt werden, wenn der Benutzer den Zoom benutzt.

Dieses Bild zeigt die Stylesheets, die dem Kopfbereich der Seite zugeordnet sind. Wenn die Sprachauswahl mit Flaggen angezeigt wird, dann wird die Klasse .flag anstelle von .header_select verwendet.

Dieses Bild zeigt die Stylesheets, die dem Fußbereich der Seite zugeordnet sind.

Die folgenden Stylesheets werden im Bereich toplinks.html der Seite verwendet: .menuitem, .menuitem_hover, .submenu, .submenuitem, und .submenuitem_hover.

Dieses Bild zeigt die Stylesheets, die der oberen Navigationsleiste zugeordnet sind.

Dieses Bild zeigt die Stylesheets für Tabellen-Listen. Tabellen-Listen werden benutzt in der Personen-Liste, Familien-Liste, Quellen-Liste, Orts-Liste und Multimedia-Liste.

Dieses Bild zeigt die Stylesheets, die der Persönlichen Seite einer Person zugeordnet sind. Die Klasse .facts_label wird durch .facts_labelred ersetzt, wenn der Eintrag gelöscht wurde. Die Klasse .facts_label wird durch .facts_labelblue ersetzt, wenn der Eintrag verändert oder neu hinzugefügt wurde. Ebenso wird auch .facts_value ggfs. durch .facts_valuered oder .facts_valueblue ersetzt. Das Stylesheet .source_citations wird benutzt, wenn Quellenzitate angegeben werden (siehe Pluszeichen '+').

Dieses Bild zeigt die Stylesheets des Bereiches "Direkte Verwandtschaft" der Persönlichen Seite einer Person.

Das Stylesheet .error wird für Fehlermeldungen benutzt und das Stylesheet .warning für Warn-Meldungen. Die Stylesheets .news_date und .news_title stylesheets werden auf der Willkommens-Seite verwendet. Das Stylesheet .current_day wird im Jahrestag-Kalender in der Monatsansicht verwendet. Das Stylesheet .listlog wird beim Betrachten der Log-Dateien im Administrationsmenü benutzt. Das .label Stylesheet wird zusätzlich zu anderen Seiten auch im Such-Formular verwendet. Das Stylesheet .formfield wird im Login Formular verwendet. Die Datenschutz-Einstellungen verwenden die Stylesheets .facts_label02, .facts_label03 und .facts_value02.

Die folgenden Stylesheets werden in der Lebensspannensanzeige verwendet: .field, .timeline_table, .person0, .person1, .person2, .person3, .persion4, and .person5.

Seit PhpGedView v3.0 wird ein neues Dropdown-Menü-System in den Themes verwendet. Dieses Menüsystem wurde vor allem wegen der Flexibilität entwickelt und damit Gestalter es einfach verändern können, ohne viel über Javascript und DHTML zu wissen (worauf es basiert). So können die Menüs je nach Belieben verändert werden oder mit einem eigenen Design verwendet werden, wenn man die Standard-Menüs beibehalten möchte.

Das Menüsystem basiert auf einer PHP-Array Struktur, die nach dem Entwurf an die Funktion print_menu() übergeben wird. Nachfolgend finden Sie eine Beschreibung für alle Elemente des Menü-Arrays.

Ein Standard-Menü sieht folgendermaßen aus (Kopie des Codes in der print_menu Funktion):

$menu["labelpos"] gibt die Position des Textes bezogen auf das Menü-Icon an. Mögliche Werte sind: "up" - der Text steht über dem Icon, "down" - der Text steht unter dem Icon, "left" - der Text steht links vom Icon, "right" der Text steht rechts vom Icon. Standardwert ist "down".

$menu["icon"] gibt den relativen Pfad zum Bild an, das Sie als Icon benutzen möchten. Wenn Sie diesen Wert leer lassen, wird kein Icon verwendet und der Menüpunkt besteht nur aus einem Text.

$menu["hovericon"] gibt den relativen Pfad zum Bild an, das gezeigt wird, wenn man mit der Maus über das Menü fährt. So können Sie sogenannte "mouseover"-Effekte definieren.

$menu["class"] gibt das CSS stylesheet an, in dem der Menüpunkt dargestellt wird

$menu["hoverclass"] gibt das CSS stylesheet an, dass beim Überfahren des Menüs mit der Maus verwendet wird.

$menu["flyout"] gibt die Position an, an der ein Untermenü erscheinen soll, relativ zu diesem Menüpunkt. Mögliche Werte sind: "down" - die Untermenüs erscheinen unter dem Menüpunkt, "right" - die Untermenüs erscheinen rechts vom Menüpunkt und "left" - die Untermenüs erscheinen links vom Menüpunkt.

$menu["items"] verweist wieder auf ein Array, das Menüpunkt-Arrays enthält. Hier müssen Sie die Untermenüs eintragen, die erscheinen sollen, wenn die Maus über einen Menüpunkt geführt wird.

Nachfolgend sehen Sie ein Beispiel für ein Menü mit einem Untermenü. Komplexere Beispiele finden Sie in der Datei toplinks.html in den jeweiligen Theme-Ordnern.

$menu = array();
$menu["label"] = "Simple Menu";
$menu["class"] = "menuitem";
$menu["items"] = array();

$submenu = array();
$submenu["label"] = "Menu Item 1";
$submenu["class"] = "submenuitem";

$menu["items"][] = $submenu;

print_menu($menu);

Das Array $menu enthält den Text, der auf dem Bildschirm erscheint. Das Array $submenu enthält ein Untermenü, das erscheint, wenn man mit der Maus über den ersten Menüpunkt (den Menünamen aus $menu["label"]) fährt. Die Zeile $menu["items"][] = $submenu; ist eine PHP-Anweisung, um ein neues Element an das Ende eines Arrays anzufügen. So können beliebig viele Untermenüs erstellt werden und an die Arrays $menu["items"] in der gewünschten Reihenfolge angehängt werden.

Da ein Untermenü die gleiche Array-Struktur wie ein Menüeintrag hat, können Sie beliebig viele Hierarchieebenen in den Menüs verwenden. Fügen Sie einfach ein Untermenü zu einem Menüeintrag hinzu: $submenu["items"][] = $subsubmenu;

Kaskadierte Hierarchieebenen wurden aber keinem intensiven Test unterzogen und werden derzeit nicht verwendet. Daher sollten Sie diese mit Vorsicht einsetzen.