Bien que conçu pour faciliter la personnalisation des templates gérée par le Framework JA T3, il fonctionne avec la plupart des templates.
Il est totalement indépendant du template, il se contente d'ajouter du code pour personnaliser votre page après génération par le template. Cela prend tout son sens dans le cas du Framework JA T3 et de son fichier 'index.php' inhabituel et déroutant.
depuis le 23 mars, bgMAX fait partie des nombreuses extensions disponibles sur http://extensions.joomla.org
N'hésitez pas à le commenter et voter pour lui.
Le plus délicat pour utiliser bgMAX est de trouver les sélecteurs du template qui ont une influence
sur la visualisation du fond.
Pour cela, le plus simple est d’utiliser le plugin Firebug pour Firefox.
Si vous ne savez pas comment l’installer et l’utiliser, consulter cette documentation.
Méthodologie
- Indiquer dans les paramètres du module bgMAX, l’image à utiliser ainsi que la couleur de fond sous l’image. Pour la phase de réglage, il peut être judicieux d’utiliser une image et une couleur qui se détache des couleurs du site.
- Afficher votre site dans Firefox et activer Firebug
-
Dérouler le contenu de <body> comme dans l'exemple ci-dessous.
Vous remarquez que votre image de fond se trouve juste en dessous dans les modes FULL et MAX. Pour les autres modes, elle est définie à l'aide d'une règle CSS pour la balise BODY.
Donc dans les 2 cas, l'image sera affichée à l'emplacement <body> de la page.
-
Rechercher le sélecteur qui englobe le contenu du site (la partie centrale avec vos textes).
Lorsque vous survolez un sélecteur dans le code (ci-dessus) la partie correspondante dans le site est surlignée en bleuté. Dans l’exemple ci-dessus (template beez5), il s’agit de <div id="back">
Assurez-vous que le contenu ne fasse pas 100% de la largeur du navigateur car dans ce cas l'image au dessous ne serait pas visible.
Pour tester, vous pouvez modifier directement la largeur dans Firebug. Il faut faire un clic droit, sur le style concerné dans la colonne de droite de Firebug, pour ajouter une nouvelle propriété.
Modifier la largeur en indiquant par exemple width: 900px. Il sera sans doute nécessaire de modifier le centrage en indiquant margin: 0 auto
Vous pouvez également indiquer le nom du sélecteur et la largeur dans les paramètres du module puis réafficher la page.
Au final, il faudra reporter les bonnes valeurs dans les paramètres de bgMAX. -
Normalement, vous devriez voir votre image de fond. Si ce n'est pas le cas, d'autres sélecteurs DIV doivent la masquer. Vérifier qu'aucun sélecteur entre <BODY> ou <IMG id="bgmax"> et celui du contenu, ne définisse une image ou couleur de fond.
Pour vous en assurez, cliquer sur la ligne du sélecteur puis observez la définition de son style dans la colonne de droite de Firebug. En général, il s'agit des règles commençant par le mot background.
Pour tester rapidement l'effet d'une règle, cliquez sur le petit symbole devant son nom pour l'annuler puis observez son action sur le site.
Une fois le ou les sélecteurs identifiés, il suffira d'ajouter la règle dans le code complémentaire du module bgMAX:
#all {background-image:none !important; background-color:transparent !important; }
Bien entendu le code ci-dessus est à adapter à votre cas. Si plusieurs sélecteurs sont concernés, il suffit de les indiquer en les séparant par des virgules (#selecteur1, #selecteur2)
Par sécurité, on ajoute !important pour s'assurer que notre demande soit prioritaire.
Résumé
- Le bloc contenu ne doit pas occuper la largeur totale de la fenêtre
- Tous les blocs situés entre la balise BODY et le bloc contenu ne doivent pas avoir de fond
A la fin janvier 2011, 2 nouvelles versions de bgMAX ont vu le jour :
- bgMAX 1.5 (Joomla! 1.5)
- bgMAX 1.6 (Joomla! 1.6)
Outre la compatibilité avec la nouvelle version de Joomla!, plusieurs nouveautés ont fait leurs apparitions:
- changement d'image de fond aléatoire
- prise en charge des images répétées avec justification
- période d'affichage (dates ou heures)
- Affichage, ou non, selon article, catégorie, menu, composant, ...
- création d'un dossier bgmax pour ranger les images
- code complémentaire inclus à partir d'un fichier texte externe
- centrage vertical de l'image lors de l'agrandissement. Simule un effet zoom plus agréable à l'oeil.
- prise charge complète de IE5.5 et 6 (mais oui!)
- fonction debug pour communiquer ses réglages lors d'une demande d'assistance sur un forum
- refonte des assistances pour la saisie des paramètres
- sélection et upload des images avec le gestionnaire de média de Joomla 1.6 (pour la version 1.6)
- une version anglaise
Ainsi que ce site pour présenter ses possibilités.
En dehors des pages dont le contenu démontre une possibilité de bgMAX, toutes les autres pages utilisent les réglages suivants :
- image au hasard dans un dossier
- couleur de fond automatique en fonction de la couleur de l'image
- ajustement MAX (largeur fenêtre) avec agrandissement et réduction autorisés
- image fixe centrée verticalement et horizontalement
- fondu sur 2 secondes avec 30 étapes/seconde si l'image met plus d'une seconde à se charger
- le sélecteur de contenu est #ja-wrapper défini avec avec une couleur de fond à #BBB et transparence 70%. Le bloc contenu d'une largeur de 780px est centré
- aucun code complémentaire
