This is an old revision of the document!


Create a Theme

General information:

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

  1. create a new directory “themes/greenery”
  2. copy “themes/clear/themeconf.inc.php” into “themes/greenery”
  3. create an empty “themes/greenery/theme.css” file

themeconf.inc.php

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(
  '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

KeyValueDescription
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

KeyDefault valueDescription
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:

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;
}
 
Back to top
dev/extensions/theme_creation.1315920629.txt.gz · Last modified: 2011/09/13 13:30 by plg
 
 
github twitter newsletter Donate Piwigo.org © 2002-2024 · Contact