Aide à la création d'un thème

Fiche


Niveau de difficulté : Avancé
Recommandations : Utilisez Notepad ++
Avoir des connaissances en CSS
Extension Firebug pour Firefox
A lire également : Présentation - Affichage


Introduction

Sur votre galerie, vous allez commencer par changer un élément de couleur, un autre de place, un troisième changera d'image. Puis vous commencez à modifier un template (via les templates-extensions) puis deux etc.

Il sera temps pour vous d'arrêter de donner des petits coups de pinceaux ici ou là, et de créer votre propre thème !

Rassurez-vous, c'est très simple et pratique d'avoir votre personnalisation, et facilement transposable.

Suivez le guide ;-)

Préparatif

Commencez par dupliquer un des répertoires des thèmes proposés. Par exemple, ./themes/clear/ ou ./themes/dark/.
Supposons que vous souhaitiez un thème plutôt vert et appelons ce nouveau thème «greenery».
Nous aurons donc un nouveau sous-répertoire ./themes/greenery/

Le minimum des fichiers

Seulement 3 fichiers minimum :

  1. index.php ( ← redirige les petits curieux1) )
  2. theme.css ( ← les indications spécifiques à ce nouveau thème )
  3. themeconf.inc.php ( ← les redirections indispensables à ce thème )

themeconf.inc.php

Commençons par modifier le fichier themeconf.inc.php

<?php
 
/*
Theme Name: My greenery
Version: 0.1
Description: My esay first theme
Theme URI: http://piwigo.org/
Author: M.O.A
Author URI: http://piwigo.org/
*/
 
$themeconf = array(
  'parent' => 'default',
  'icon_dir' => 'themes/default/icon',
  'img_dir'      => 'themes/default/images',
  'mime_icon_dir' => 'themes/default/icon/mimetypes/',
  'local_head' => '<!-- no theme specific head content -->',
  'activable' => 'true',
  'load_parent_local_head' => 'true',
  'load_parent_css' => 'true'
);
 
// Éventuellement ...
$conf['level_separator'] = ' &raquo; ';
$conf['paginate_pages_around'] = 7;
 
?>

On observera déjà 3 blocs distincts.
Le premier sert d'indications, le second est plus technique et le troisième sera à réserver aux webmasters chevronnés.

Explications :

Bloc 1

Theme Name: My greenery Nom de votre thème. Les espaces et les caractères accentués sont acceptés2).
Version: 0.1 Numéro de version.
Description: My esay first theme Une rapide description de votre thème.
Theme URI: http://piwigo.org/ Adresse de la page chez Piwigo qui propose votre thème OU Toute autre page.
Author: M.O.A Votre nom / pseudo
Author URI: http://piwigo.org/ L'adresse de votre site perso (pub) OU Toute autre page.

Bloc 2

'parent' ⇒ 'default', Pour un thème simple, on choisira d'améliorer le thème default.3)
'icon_dir' ⇒ 'themes/default/icon', Indique où se trouve les icônes à afficher. Facultatif
'img_dir' ⇒ 'themes/default/images', Indique où se trouve les images à afficher : il s'agit notamment des images de chargement. Facultatif
'mime_icon_dir' ⇒ 'themes/default/icon/mimetypes/', Répertoire du dossier des icônes MIME. Facultatif
'local_head' ⇒ 'local_head.tpl' Nom du fichier .tpl à charger en HEAD des pages. Le chemin est relatif à la racine du thème. Facultatif
'activable ⇒ true Si vous ne voulez pas que votre thème soit activable, placez cette valeur à 'true' (ceci peut être utile pour des thèmes parents).
'load_parent_local_head' ⇒ true Si vous ne voulez pas que ce thème charge le fichier local_head du thème parent, placez cette valeur à 'false'
'load_parent_css' ⇒ true Si vous ne voulez pas que ce thème charge le fichier theme.css du thème parent, placez cette valeur à 'false'

Bloc 3

Sans oublier que ce fichier (themeconf.inc.php) est un module php, il peut donc contenir d'autres choses comme des paramètres $conf liés aux changements d'apparence, et bien d'autres surprises sorties de l'imagination du créateur du template ou du thème.

theme.css

Le contenu de ce fichier est écrit en CSS.
Tout votre art de marier les nuances et couleurs s'exprimera dans ce fichier, à vous de savoir l'adapter.

Voici un 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;
}

Pour ceux qui ne seraient pas encore des experts en CSS (Cascading Style Sheets) :

  • les balises html (exemple: SELECT)
  • les pseudo-formats (exemple: A:hover, balise <A dont le curseur est sur la zone>)
  • les attributs universels marqués par ”.” (exemple: .rateButton, une balise html avec l'attribut class=“rateButton” )
  • les attributs universels marqués par ”#” (exemple: #infos, une balise html avec l'attribut id=“infos”)
  1. id=“infos” ne doit figurer qu'une seule fois dans la page (c'est une zone de l'écran bien définie).
  2. class=“rateButton” pourra être utilisé plusieurs fois dans une même page.

C'est un peu délicat mais les informations ci-dessus devraient suffire à la grande majorité des webmestres pour se repérer et changer rapidement les couleurs de PWG.

Votre thème est au point et il vous plait ? Venez le partager sur le forum :-)

Les templates

Les templates sont ces fichiers qui portent l'extension .tpl que vous avez peut-être déjà utilisés sans le savoir grâce aux templates-extensions. Si par contre ce nom ne vous dit rien, vous pouvez ignorer ce chapitre ^^

Pour ajouter vos propres templates dans le dossier ./themes/mon_theme c'est très simple.

  1. Créez dans ./theme/mon_theme un dossier nommé template
  2. Placez dedans vos propres fichier .tpl
  3. Adaptez le nom de vos fichiers templates 4).

Par exemple, vous avez un template-extension nommé my-header.tpl qui est le template extension de header.tpl
Vous n'avez simplement qu'à mettre le nom du fichier d'origine à savoir header.tpl. Rien de plus…

A présent, dans votre dossier mon_theme vous avez vos règles et vos templates ! Et tout ce petit monde vous suivra partout.

1) Ce fichier se trouve dans tous les répertoires de Piwigo.
2) Encodage du fichier en UTF-8 sans BOM obligatoire
3) Notez que votre thème “parent” peut être tout autre thème, voir aucun si votre thème (très complexe) se suffit à lui même.
4) le nom du fichier doit être le même quele nom de fichier par défaut
 
Haut de page
projet/developpement/themes.txt · Dernière modification: 2014/06/20 20:09 par flop25
 
 
github twitter facebook google+ newsletter Faire un don Piwigo.org © 2002-2017 · Contact