This is an old revision of the document!
General information:
On your photo gallery, you will certainly want to change the color of this border, and then the width of this menubar and so one. You will probably modify a template file (themes/default/template/*.tpl files) or several.
It's now time to stop modifying the standard themes and to start your own theme!
Don't panic, it's not complicated and it is very useful to have your own customization in a dedicated place, with no worry to loose it on next upgrade.
Let's say you want a new theme that is very close to the clear theme, but you want to change some colors. Let's call the new theme greenery
In this file you define the theme properties.
<?php /* Theme Name: My greenery Version: 0.1 Description: My very first theme Theme URI: http://piwigo.org/ext/extension_view.php?eid=347 Author: John Do Author URI: http://piwigo.org/ */ $themeconf = array( 'name' => 'greenery', 'parent' => 'clear', ); ?>
The first block are comments, but they must follow the syntax given in the example. The comment block is read by Piwigo to display information about your theme.
Bloc 1
Key | Value | Description |
---|---|---|
Theme Name | My greenery | the name of your theme, any character is permitted |
Version | 0.1 | Version number |
Description | My very first theme | A short description of your theme |
Theme URI | http://piwigo.org/ext/extension_view.php?eid=347 | Web address where you can find the theme on piwigo.org/ext |
Author | John Do | Your own name |
Author URI | http://piwigo.org/ | The web address of your own website (advertisement purpose) |
Bloc 2
Key | Default value | Description |
---|---|---|
parent | default | The default theme is the base of all themes, but you can use another one. In the example, we use clear as parent theme |
icon_dir | themes/default/icon | Where are the icons of this theme? |
mime_icon_dir | themes/default/icon/mimetypes/ | Where are icons for non pictures files? |
local_head | none | Path to a *.tpl file if you want to add HTML content into the <head></head> of each page |
activable | true | If you don't want your theme to be activable, set this value to false (this can be useful for pure parent themes) |
load_parent_local_head | true | If you don't want this theme to load its parent local head, set this value to false |
load_parent_css | true | If you don't want this theme to load its parent theme.css, set this value to false |
CSS rules only in this file. This is where you overwrite CSS rules compared to the parent theme. Let's see a small exemple:
FIELDSET, INPUT, SELECT, TEXTAREA, #content DIV.comment A.illustration IMG, #infos, #content DIV.thumbnailCategory { border: 1px solid silver; } #comments DIV.comment BLOCKQUOTE { border-left: 2px solid #060; background-color: #ded; } #content UL.thumbnails SPAN.wrap2 { border: 1px solid #9a9; /* thumbnails border color and style */ -moz-border-radius: 4px; /* round corners with Geko */ border-radius: 4px 4px; /* round corners with CSS3 compliant browsers */ } #content UL.thumbnails SPAN.wrap2:hover { border-color: green; /* thumbnails border color when mouse cursor is over it */ } /* links */ A, .rateButton { color: #00895e; background: transparent; } A:hover { color: #458420; }