🌍
English
This shows you the differences between two versions of the page.
dev:extensions:theme_creation [2011/09/13 13:41] plg Page moved from dev_documentation:theme_creation to dev:theme_creation |
— (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> |