Creating Phoca Gallery Theme

There is an easy way how to create a theme for Phoca Gallery, using an existing theme.

This guide describes creating Phoca Gallery theme which will work in Phoca Gallery 2.5 (3) or any later version.

Download a theme from Phoca Gallery Theme download site. For example: Phoca Gallery CSS3 theme. Unzip the file and copy all included files into folder on your PC called e.g. "theme" (this will be temporary theme folder). Theme includes folder images and theme.xml file:

Images - icons, shadow boxes, loading gifs, etc. (Phoca Gallery CSS3 theme does not include any images because it works with default Phoca Gallery images. If you need to overwrite default Phoca Gallery images, download Phoca Gallery Restore Default Settings theme to see which images are used in Phoca Gallery - and just overwrite them with your owns - the names of images must be the same). Store all images you want to use in the folder images.
Theme.xml - installation file where you can change the default settings of Phoca Gallery. For example, you want to use PNGs as Phoca Gallery images (icons, shadow boxes, ...). In such case copy your PNGs to imagefolder and set the following parameter in your XML:
- <param name="icon_format" default="png" /> - now Phoca Gallery will use PNGs stored in images folder.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install SYSTEM "https://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>https://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>

Change the heading parameters of your theme.xml file (name, date, license).

Now zip the files in your temporary folder:

[images]
- icon-date.png (e.g.)
theme.xml

Theme installation file should be ready and can be installed in Phoca Gallery Theme view, in your Joomla! administration - Components - Phoca Gallery - Themes - Upload the created file and Install .

In Phoca Gallery 4 (Joomla! 3) there are no more parameters custom_css and enable_custom_css. Styles can be edited or added directly in Joomla! Administration - Components - Phoca Gallery - Styles.

Using own CSS

If you want to use own CSS in Phoca Gallery, just paste the following parameters to your theme.xml:

<param name="enable_custom_css" default="1" />
<param name="custom_css" default=" ... define your CSS here ... " />

First parameter disables default Phoca Gallery styling and in the second, your own CSS is defined. Such will be used in frontend of Phoca Gallery.

This is not the only one way how to customize Phoca Gallery design, it can be changed the with the following methods:

per parameters
per CSS (enabling custom CSS - CSS will be stored in phocagallerycustom.css file)
per CSS (enabling custom CSS - CSS will be stored in database/xml file)
per editing code directly in php/html/css/js/mysql
with help of template overriding - Phoca Gallery output (templates) is written in Joomla! MVC pattern so it can be overriden by template.

To restore all settings and images of Phoca Gallery, just install Phoca Gallery Restore Default Settings theme. Download it from Phoca Gallery Theme download site.

The following information is obsolete - for Joomla! 1.5

How Phoca Gallery Theme Installation works (in Joomla! 1.5, in Joomla! 1.6 or 1.7 or later version, the Parameters component are missing):

During theme installation, all new images are copied into the Phoca Gallery Component folder and are used for all Phoca Gallery Views. In the theme.xml file, there is information about styles (color variation) too. You can select where these styles (color variation) will be used:

Go to Components » Phoca Gallery » Themes and select:

Apply to Component (only Color Variation in Default Settings of Phoca Gallery component will be changed)
Apply to Categories (all Color Variation in all Phoca Gallery Categories Menu links will be changed) - not more in version 3.1
Apply to Category (all Color Variation in all Phoca Gallery Category Menu links will be changed) - not more in version 3.1

If you select e.g. that the styles should be applied only on categories, then these styles will be displayed in Phoca Gallery Views (sites) which are called by menu link "Phoca Gallery Categories View". This means that the Parameters Component in all Phoca Gallery Categories Menu links will be overwritten by parameters set in XML file (theme.xml).

Example:

You set the following parameter in XML file (theme.xml):

font_color » Font color in the Category box (<param name="font_color" default="#ffff00" />)

#ffff00 is a yellow color and this yellow color will be set as font color for image names. If you install the theme where this parameter is set and you select "Apply to Categories" during Theme installation, then all image names displayed through Phoca Gallery Categories Menu links will be yellow. This parameter can be changed every time in the Parameters Component.

Parameters you can use:

font_color » Font color in the Category box
background_color » Background color in the Category box
background_color_hover » Background color in the Category box (mouse over effect)
image_background_color » Image Background color
image_background_shadow » Image as a background (shadow1 = 100x100, shadow2 = 200x200, shadow3 = 50x50)
border_color » Border color of a Category box
border_color_hover » Border color of a Category box
image_categories_size » Size and format of an image:
- Small
- Medium
- Small Folder Icon
- Medium Folder Icon
- Small with Shadow
- Medium with Shadow
- Small Folder Icon with Shadow
- Medium Folder Icon with Shadow
icon_format » Icon format (png, jpg, gif)
detail_window_background_color » Background color in the detail view
modal_box_overlay_color » Modal box overlay color (e.g. #000000)
modal_box_overlay_opacity » Modal box overlay opacity (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 border color (e.g. #000000)
modal_box_border_width » Modal box border width (e.g. 5px).

Creating Phoca Gallery Theme

Navigation