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!
La couleur de fond est située dans le noeud <background>.
<background>
<color type="hex">000000</color>
</background>
Le noeud color est la couleur de l'arrière-plan.
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 type="image_path">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: 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 type="hex">000000</color> <!-- background color -->
<images>
<image>
<url type="image_path">img1.png</url>
<type>repeatx</type>
<alignh>left</alignh>
<alignv>top</alignv>
</image>
<image>
<url type="image_path">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).
Depuis PicsEngine 3.5, le menu superpose le fond d'écran de la galerie. Si vous désirez une intégration complète, vous devrez modifier aussi cette partie de l'interface.
L'image d'arrière-plan du menu se situe dans le noeud suivant:
<pages>
<menu>
<background type="image_path">tabs_background.png</background>
</menu>
</pages>
Il suffit de mettre ce noeud dans votre template et de créer une nouvelle image.