🌍
English
Differences
This shows you the differences between two versions of the page.
|
dev:extensions:theme_creation [2010/06/28 22:40] plg remove the useless key "name" |
— (current) | ||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ====== Create a Theme ====== | ||
| - | General information: | ||
| - | * Compatibility: tutorial on this page is compatible with Piwigo 2.1 and higher | ||
| - | * you can download themes from the [[http://piwigo.org/ext|extensions section on piwigo.org]] | ||
| - | * you can test many themes on [[http://piwigo.org/demo|the demo]] | ||
| - | |||
| - | ===== Introduction ===== | ||
| - | |||
| - | 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. | ||
| - | |||
| - | ===== Prepare ===== | ||
| - | |||
| - | 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// | ||
| - | - create a new directory "themes/greenery" | ||
| - | - copy "themes/clear/themeconf.inc.php" into "themes/greenery" | ||
| - | - create an empty "themes/greenery/theme.css" file | ||
| - | |||
| - | ==== themeconf.inc.php ==== | ||
| - | |||
| - | In this file you define the theme properties. | ||
| - | |||
| - | <code php> | ||
| - | <?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( | ||
| - | 'parent' => 'clear', | ||
| - | ); | ||
| - | ?> | ||
| - | </code> | ||
| - | |||
| - | 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// | | ||
| - | |||
| - | ==== theme.css ==== | ||
| - | |||
| - | CSS rules only in this file. This is where you overwrite CSS rules compared to the parent theme. Let's see a small exemple: | ||
| - | |||
| - | <code css> | ||
| - | 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; | ||
| - | } | ||
| - | </code> | ||