Creating Phoca Gallery Theme

• 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>

• [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 .

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.

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).