Phoca Gallery Themen erstellen
Es gibt einen einfachen Weg ein eigenes Phoca Gallery Thema unter Verwendung eines bereits existierenden, zu erstellen.
- Images - Icons, shadow boxes, loading gifs, usw. (Das Phoca Gallery CSS3 Thema enthält keinerlei Dateien im Verzeichnis images, weil es mit den standart Phoca Gallery Icons und Bildern arbeitet. Falls Sie andere als die standart Phoca Gallery Icons und Bilder benötigen, laden Sie das Phoca Gallery Restore Default Settings Thema herunter. Wenn Sie dieses Thema entpacken, finden Sie im image Verzeichnis alle, von Phoca Gallery standartmäßig verwendeten Icons und Bilder. Da Sie nun wissen, welche Icons und Bilder Phoca Gallery verwendet, können Sie diese mit Ihren eigenen überschreiben. - Die Namen müssen aber gleich bleiben). Speichern Sie alle Bilder die Sie verwenden wollen im Verzeichnis images.
- Theme.xml - Ist die Installationsdatei. Hier können Sie alle Veränderungen an den standart Einstellungen von Phoca Gallery festlegen. Falls Sie z.B. PNGs als Phoca Gallery Bilder (icons, shadow boxes, ...) verwenden wollen, kopieren Sie Ihre PNGs in das imageVerzeichnis und setzen Sie folgenden Parameter in Ihrer XML:
- <param name="icon_format" default="png" /> - Phoca Gallery wird nun die PNGs, die im Verzeichnis images gespeichert sind, benutzen.
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE install SYSTEM "http://dev.joomla.org/xml/1.5/component-install.dtd"> <install method="phocagallerytheme" type="component" version="1.7"> <name>CSS3</name> <creationDate>05/10/2011</creationDate> <author>Jan Pavelka (www.phoca.cz)</author> <authorEmail></authorEmail> <authorUrl>http://www.phoca.cz</authorUrl> <copyright>Jan Pavelka</copyright> <license>GNU/GPL</license> <version>1.0.0</version> <description>Phoca Gallery Theme File - CSS3</description> <files> <folder>images</folder> <filename>theme.xml</filename> </files> <params> <param name="display_image_categories" default="5" /> <param name="image_categories_size" default="5" /> <param name="display_back_button" default="1" /> <param name="display_categories_back_button" default="1" /> <param name="display_image_categories_cv" default="2" /> <param name="detail_window" default="9" /> <param name="boxplus_theme" default="lightrounded" /> <param name="enable_custom_css" default="1" /> <param name="custom_css" default="... your custom CSS here ..." /> <param name="icon_format" default="png" /> <param name="large_image_width" default="640" /> <param name="large_image_height" default="480" /> <param name="medium_image_width" default="200" /> <param name="medium_image_height" default="150" /> <param name="small_image_width" default="50" /> <param name="small_image_height" default="50" /> </params> </install>
- [images]
- icon-date.png (z.B.)
- theme.xml
Die Themen Installations Datei sollte jetzt fertig sein und kann in Phoca Gallery Themen installiert werden. Ihr Joomla! Administration - Komponenten - Phoca Gallery - Themen - Datei hochladen die selbsterstellte Datei auswählen und Datei hochladen & installieren
Eigenes CSS verwenden
Wenn Sie Ihr eigenes CSS in Phoca Gallery verwenden möchten, fügen Sie die folgenden Parameter in Ihre theme.xml Datei ein:
Der erste Parameter schaltet das Phoca Gallery Standart Styling ab und im zweiten ist Ihr eigenes CSS definiert, dass im Frontend von Phoca Gallery angewendet wird.
Das ist nicht der einzige Weg, um das Aussehen von Phoca Gallery zu verändern. Folgende Methoden sind möglich:
- per Parameter
- per CSS (eigenes CSS einschalten - CSS wird in phocagallerycustom.css Datei gespeichert)
- per CSS (eigenes CSS einschalten - CSS wird in database/xml Datei gespeichert)
- durch direktes Bearbeiten des Codes in php/html/css/js/mysql
- mit Hilfe von Template überschreiben - Die Phoca Gallery Ausgabe ist in Joomla! MVC Pattern geschrieben, sie kann per Template überschrieben werden.
Wie die Phoca Gallery Themen Installation funktioniert (in Joomla! 1.5, in Joomla! 1.6 or 1.7 oder späteren Versionen fehlen die Komponentenparameter):
Während der Themen Installation werden alle neuen Bilder in das Phoca Gallery Komponente Verzeichnis gespeichert und für alle Phoca Gallery Ansichten genutzt. In der theme.xml Datei befinden sich ebenfalls Informationen über Farbfestlegungen (Farbvariationen). Sie können wählen, wo diese Farbfestlegungen angewendet werden sollen:
Gehen Sie zu Komponenten » Phoca Gallery » Themen und wählen Sie:
- Zur Komponente hinzufügen; es wird nur die Farbfestlegung in den Standardeinstellungen der Phoca Galerie Komponente geändert
- Zu Kategorien hinzufügen; es werden alle Farbfestlegungen für Menülinks zu Phoca Galerie Kategorien geändert. Nicht mehr in Version 3.1
- Zur Kategorie hinzufügen; es werden alle Farbfestlegungen für Menülinks zur eingestellten Phoca Galerie Kategorie geändert. Nicht mehr in Version 3.1
Wenn Sie z.B. wählen 'Zu Kategorien hinzufügen', werden diese Farbfestlegungen nur in Phoca Gallery Ansichten angezeigt, die durch einen Menüeintrag "Phoca Gallery Layout Kategorien Liste" aufgerufen werden. Das heißt, das die Komponenten Parameter in allen "Phoca Gallery Layout Kategorien Liste" Menüeinträgen von den Parametern in der XML Datei überschrieben werden (theme.xml).
Beispiel:
Sie setzen folgende Parameter in der XML Datei (theme.xml):
font_color » Schriftfarbe in der Kategorie Box ()
#ffff00 ist eine gelbe Farbe, die als Schriftfarbe für Bild Namen gesetzt ist. Wenn Sie das Thema in dem dieser Parameter gesetzt ist installieren und Zu Kategorien hinzufügen während der Installation wählen, werden alle Bild Namen, die durch einen Menüeintrag "Phoca Gallery Layout Kategorien Liste" aufgerufen werden, gelb angezeigt. Dieser Parameter kann jederzeit in den Komponenten Parametern geändert werden.
Folgende Parameter können Sie verwenden:
- font_color » Schriftfarbe in der Kategoriebox
- background_color » Hintergrundfarbe der Kategoriebox
- background_color_hover » Hintergrundfarbe der Kategoriebox (Maus over Effekt)
- image_background_color » Bildhintergrundfarbe
- image_background_shadow » Bild als Hintergrund (Schatten1 = 100x100, Schatten2 = 200x200, Schatten3 = 50x50)
- border_color » Randfarbe der Kategoriebox
- border_color_hover » Randfarbeder Kategoriebox (Maus over Effekt)
- image_categories_size » Größe und Format eines Bildes:
- Klein
- Mittel
- Kleines Ordner Icon
- Mittleres Ordner Icon
- Klein mit Schatten
- Mittel mit Schatten
- Kleines Ordner Icon mit Schatten
- Mittleres Ordner Icon mit Schatten
- icon_format » Icon Format (png, jpg, gif)
- detail_window_background_color » Hintergrundfarbe des Detailfensters
- modal_box_overlay_color » Modal Box Überlagerungsfarbe (z.B. #000000)
- modal_box_overlay_opacity » Modal Box Überlagerungstransparenz (0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1)
- modal_box_border_color » Modal Box Randfarbe (z.B. #000000)
- modal_box_border_width » Modal Box Randbreite (z.B. 5px).