Comme tous les plugins, vous devez d'abord installer ChgHeaderOnLoad à l'aide de l'installateur intégré de Joomla:
As usual plugins, install this one throw the Joomla instal engine:
Pointez vers le fichier ZIP que vous avez téléchargé, puis cliquez sur "Charger & Installer"
Select and click on the ZIP file you just saved, then click on "Upload & Install"
Vous devriez alors obtenir ce résultat:
You might obtain this:
Cliquez alors sur l'élément 'Gestion des médias" de l'item "Contenu"
Click on the Content`s option named "Media manageer"
Vous y créerez le sous-répertoire où seront gardées vos images. Ici, nous le nommerons `header`
There, create your new sud-directory, the one where you will upload your images. Let name it `header` for this example
Cliquez sur le répertoire nouvellement créé (No 1 sur la capture), puis téléchargez vos images (No 2).
Click on this just created folder name (Num 1 on the picture below), and upload you images (Num 2)
Vous povez copier le chemin d`accès, en commençant par images/ (No 3 sur la capture ci-haut).
That could be handy to Copy the path, making sure you begin by images/ (See Number 3 on the upper image)
La configuration se fait elle aussi avec les outils pré-installés de Joomla
Allez d'abord dans la gestion des plugins.
To configure the plugin, you`ll use the native Joomla`s tools.
Let`s go first to the Plugins manager
Pour trouver celui qui nous intéresse ici Système - ChgHeaderOnLoad, vous pouvez filtrer la liste des plugins
To find easily the one we work on (Système - ChgHeaderOnLoad), let filter the whole thing:
Cliquez alors sur Système - ChgHeaderOnLoad, ça ouvrira la configuration de notre plugin.
Then click on System - ChgHeaderOnLoad to open the plugin`s configuration page.
Activons le plugin
Please activate your plugin.
N`oubliez pas de confirmer cette dernière action
And don`t forget to save it!
Puis, indiquons dans quel dossier se tronvent nos images à présenter: dans notre exemple, il s'agit de images/header/
N'oubliez pas le / final !
Now, we teach the plugin where to find our pictures to show: our example is built with images/header/
Dont`t forget the final / !
N`oubliez pas de confirmer cette dernière action
And don`t forget to save it!
Le choix de la div est un peu délicat pour ceux et celles qui ne sont pas familiers avec le code html.
Il est de prime importance de travailler avec l'id de la div et non son name.
Ici, nous ne traitons qu`avec les id.
La configuration de base utilise la div header qui se trouve dans pratiquement tous les templates.
Méfiez-vous des majuscules / minuscules qui ont de l'impotance ici. (Header N'est PAS la même chose que header)
For some users, it could be tricky to know wich div to work with. Here, we'll try to help you.
Make sure you understand or notice the difference between a div`s id and a div`s name.
The basic config of the plugin is based on the id.
Our plugin have been first built for the header div, but it may be used with whichever div.
Be carefull with uppercase and lowercase, they are different and give different results. Remember: Header is NOT the same as header.
Je tenterai ici de vous aider à trouver l'id de la div qui vous intéresse.
D'abord, nous visualisons notre site. Cliquez sur "Voir le site"
Now ... how to find the proper div?
First: let have a look on your site, please click on "Preview".
Puis, dans votre navigateur préféré, vous trouverez la fonction "Afficher la source", plusieurs navigateurs ont des raccourcis clavier pour cela: Ctrl-U pour Opera; Affichage - Source pour iExplorer.
Et oui, des tas de codes! N'ayez crainte, ça ne mord pas.
Dans ce code, vous allez chercher (raccourci clavier Ctrl-F dans la plupart des outils, F3 avec iExplorer) le code suivant: <div
Ne fermez pas la balise avec un >, car vous cherchez quelque chose de plus que seulement ce morceau de balise. En fait, ce qui nous intéresse se trouve entre < et > de la balise div. Donc, n`ajoutez pas de > à votre recherche.
À chaque fois que votre recherche s'arrête sur une balise <div, cherchez bien si vous n'y trouvez pas son id. Ça aura l'air de : id="machin">.
Selon ce que vous trouvez alentours (le texte, les images, etc.), vous saurez si c'est la div qui vous intéresse. Gardez bien en tête ce nom ou copiez-le dans le presse-papiier (Ctrl-C).
L'exemple ci-bas montre le résultat de recherche, pointant sur un élément en particulier. Vous pouvez néanmoins voir 4 différentes définitions de div, chacune avec son id="" propre.
Voyez: id="all", celle pointée est id="back", id="header" (ah, tiens donc!), id="logo"
Ne pas mêler id et class qui sont deux propriétés bien différentes pour un div.
You now need to find the "Show source file" function from you browser. With iExplorer: Screen - Source; with Opera: Ctrl-U
O sweet ... pure code! Don't worry, it`s not dangerous!
Among this sweet code, you`ll search for (use Ctrl-F with most of browser, but F3 with iExplorer): <div
Note: the bracket is still open, don`t write >, that is a different search we don`t need to do. Fact: what we wont is between < and >, so ... please don`t write > here.
Each time your search stops on a <div tag, have an acurate look around, and seek for its id. That looks like id="something".
Acording to what you see around (text, image, etc), you`ll know if this div is the one you`re looking for. When you find the one, keep in mind (or Copy) its id value.
Our example (below) shows search results. One div is selected. However, you still can see 4 divs with so many different id="".
Here are they: id="all", the selected one is id="back", id="header" (hello world!), id="logo"
You see also a div with class="" ... please don`t mix everything up. We are looking here for id only!
Répétez intégralement cet id, (majuscules/minuscules étant différentes) dans la case ID de la div.
Repeat exactly the same id, being careful with upper / lower case. Copy the div`s ID.
N`oubliez pas de confirmer cette dernière action
And don`t forget to save it!
Ce me semble assez facile à configurer. Je ne sais pas qu'écrire de plus!
It seams so easy, i don`t know what to write here!
Si vous voulez que le choix d'image se fasse à chaque chagement de page, mais que l'image ne change plus après
If you want a different image on each page load, but this image will not change as long as the user doesn`t change page, let do like this:
Qu'est-ce que Vitesse de chargement = aucune ?
c'est simplement un changement d'image sans transition, un changement instantané.
What is Speed for transitions = Steady?
That changes images without any transition. That is instant changes.
N`oubliez pas de confirmer cette dernière action
And don`t forget to save it!
En date de Pâques 2011, j'ai projet de
Aide et support: Contactez-moi - Patrick Allaire, ptre