Création d'un thème

Préparez le terrain

Lors de la création d'un thème, ou même la modification d'un thème existant, il vaut mieux copier le dossier entier du thème.
Choisissez un nom sans espace, sans accents et caractères spéciaux, et nommez le dossier. Vous aurez deux dossiers: default (thème original, ne supprimez pas mon cher travail haha!) et votre thème.
Pour activer le thème, il suffit d'aller dans l'administration, d'ouvrir l'onglet options et ensuite de cliquer sur Thème. Choisissez votre thème et sauvegarder.

Lorsque des mises à jour de PicsEngine interviennent, le thème principal peut-être modifié. Si vous rencontrez des problèmes avec PicsEngine, essayez d'utiliser le thème par défaut pour voir si c'est votre thème qui n'est pas compatible.
Faites aussi attention de ne pas remplacer le dossier templates entièrement lorsque vous envoyez les mises à jour, ce qui écraserait peut-être votre thème personnel.

Dans un dossier de thème il y a un fichier template.xml ainsi que des images d'interface (png ou jpg).
Le fichier à éditer est bien entendu template.xml qui contient toutes les informations éditables.
Lorsque vous éditer ce fichier et que vous voulez tester sur votre galerie, faites attention au cache du navigateur web qui peut empêcher de prendre la nouvelle version, vous ne verriez donc pas de différence.

Modification de l'arrière-plan

(Nécessite la version 3.0.3 ou supérieure)
Avec PicsEngine 3 vous pouvez modifier votre arrière-plan à volonté.
Vous pouvez changer la couleur de fond, ajouter autant d'images que vous le souhaitez en ajustement leurs alignements, leur type de répétition (aucun, horizontale, vertical, mosaique, redimensionnement).
Les images PNG sont aussi compatibles, donc vous pouvez avoir plusieurs images en superposition!

Changer la couleur de fond

La couleur de fond est située dans le noeud <background>.
<background> <color>000000</color> <!-- background color --> <color2>333333</color2> <!-- color of the home gradiant --> </background> Le noeud color est la couleur de l'arrière-plan. Le noeud color2 est la couleur du dégradé sur l'écran d'eccueil. Pour ne plus avoir le dégradé, il suffit de supprimer le noeud.

Ajouter des images

On peut ajouter autant d'images que nécessaire. Les images définies avant sont celles les plus à l'arrière. Pour ajouter des images, cherchez le noeud <background>
Ajouter le noeud <images>. Toutes vos images devront être définies dans ce noeud.
<background> <!-- [...] --> <images> <!-- images definitions --> </images> </background> Un noeud image est défini comme ceci:
<image> <url>image.png</url> <type>normal</type> <!-- normal, scaled, repeatx, repeaty, repeat --> <alignh>left</alignh> <!-- left, center, right --> <alignv>top</alignv> <!-- top, center, bottom --> <visible>both</visible> <!-- both, home, photo --> </image> <url> contient le nom de l'image (qui doit se trouver dans votre répertoire de thème: admin/templates/yourtheme/image.png).
<type> contient la manière dont l'image sera rendue.
- normal: l'image sera affichée normalement, à la taille originale
- scaled: l'image prendra la page entière quelque-soit la dimension du navigateur
- repeatx: l'image sera répètée horizontalement
- repeaty: l'image sera répètée verticalement
- repeat: l'image sera répètée dans les deux sens (mosaique)
<alignh> contient l'alignement horizontal (left, center, right)
<alignv> contient l'alignement vertical (top, center, bottom)
<visible> contient la visibilité de l'image
- both: l'image est affichée partout
- home: l'image est affichée sur l'accueil
- photo: l'image est affichée derrières les photos

Exemple: <background> <color>000000</color> <!-- background color --> <images> <image> <url>img1.png</url> <type>repeatx</type> <alignh>left</alignh> <alignv>top</alignv> </image> <image> <url>img2.png</url> <type>normal</type> <alignh>right</alignh> <alignv>top</alignv> </image> </images> </background> Le premier noeud (img1.png) est l'image en arrière-plan. Elle est répetée horizontalement. Le deuxième noeud (img2.png) est le logo qui sera placé en haut à droite (right, top) et ne sera pas répeté (normal).
Voici le résultat:

Paramètres de l'image aggrandie

Vous pouvez ajouter des marges à l'image aggrandie ou encore des bordures. Toutes les modifications se feront dans le noeud <large>

Marges

Des marges peuvent être mises de chaque côté de l'image. En mode normal (menu ouvert), la marge du bas est comptée jusqu'au menu. En mode diaporama, la marge est comptée jusque le bas de la fenêtre.
Par défaut, les marges sont à 0 pour que les petits écrans puissent voir les photos dans une taille raisonnable.
Voici la partie de code à modifier si vous voulez insérer des marges : (top = dessus, bottom = dessous, lateral = côtés)
<padding> <!-- photo margins --> <top>0</top> <bottom>0</bottom> <lateral>0</lateral> <!-- left and right --> </padding>

Bordures

Des bordures peuvent être ajoutées aux photos. On peut ajouter des bordures de tailles et de couleur que l'on souhaite.
Ces modifications se font dans le noeud <borders>.
La première chose à faire est d'activer les bordures, il suffit pour cela de changer la valeur de <enabled> false par true.
Ensuite, les noeuds <size> et <color> définissent respectivement l'épaisseur et la couleur des bordures.
Voici un code d'exemple
<border> <!-- photo borders --> <enabled>true</enabled> <size>35</size> <color>ffffff</color> </border> Ce code insère des bordures de 35 pixels d'épaisseurs de couleur blanche. Les couleurs sont donnés en code Hexadécimal (FFFFFF = blanc, 000000 = noir).

Icône de chargement

Vous pouvez aussi modifier les couleurs de l'icône de chargement des images. Il suffit d'éditer les deux noeuds dans le noeud <loading>.
Le noeud <backgroundColor> est la couleur de l'arrière-plan de l'icône, tandis que <color> est la couleur de premier-plan.
<loading> <backgroundColor>000000</backgroundColor> <color>FFFFFF</color> </loading>