Généralités
Pour GuppY 4.6
Trucs et Astuces
Générateur de sample.php

Essayer mon générateur de page sample.php

Visites

 691743 visiteurs

 10 visiteurs en ligne
Boîtes AjouteMenu - Personnaliser une à une
Mistinguette m'a demandé s'il était possible de personnaliser les boîtes AjouteMenu une par une. Je lui ai répondu que ce n'était pas encore possible. A partir de la version 4.6.13 du plugin, c'est devenu très facile.

D'abord, la théorie. Cette nouvelle version enferme chaque boîte AjouteMenu dans une div supplémentaire. Cette div reçoit un id, qui est composé de deux lettes "am" et d'un nombre égal au numéro du menu 0, 1...19. De cette façon, il devient facile d'écrire du CSS qui ne s'applique qu'à une boîte particulière.

Sur ce site, j'ai trois boîtes AjouteMenu 0, 4 et 8. J'ai personnalisé (pendant un cours laps de temps) chaque boîte en lui affectant une image pour le titre et une image pour le contenu.

Voici ce que j'ai ajouté à la fin du fichier CSS plugins/ajoutemenu/ajoutemenu.css :

/* boîte 0 */
#am0 .titrebox { background-image: url(fond3.gif); }
#am0 .tblbox, #am0 .tblboxover { background-image: url(f03.jpg); }

/* boîte 4 */
#am4 .titrebox { background-image: url(fond5.gif); }
#am4 .tblbox, #am4 .tblboxover { background-image: url(f02.jpg); }

/* boîte 8*/
#am8 .titrebox { background-image: url(fond6.gif); }
#am8 .tblbox, #am8 .tblboxover { background-image: url(f01.jpg); }

Nota 1 : Les images ont été placées dans le répertoire plugins/ajoutemenu. Une alternative peut être de créer un sous-répertoire plugins/ajoutemenu/img pour recevoir les diverses images utilisées. Dans ce cas, il faut modifier le fichier de CSS en ajoutant img/ dans les définitions des URL, comme dans url(img/fond1.gif).


Nota 2 : .

Il est possible d'obtenir des fonds colorés en utilisant l'attribut background-color à la place de background-image.



Remarques sur les images utilisées comme fond :

  1. Poids des images
    Pensez à limiter le poids (en Ko) de vos images, cela évitera de ralentir le chargement de vos pages. Pour cela, utilisez de préférence des images au format compressé JPEG (*.jpg) si la taille de l'image est importante.
  2. Taille des images
    Pensez à fixer la largeur des images à la largeur de vos boîtes, cela évitera un effet de juxtaposition si la taille est trop petite. Trouvez un compromis pour la hauteur, trop haute cela ralentit le chargement de la page, pas assez cela conduit à des répétitions d'images pas toujours du meilleur effet.
  3. Lisibilité des boîtes
    Pensez à la lisibilité des textes des catégories et items, si les textes sont illisibles alors votre menu devient inutile. Pour cela, utilisez le réglage de la luminosité pour améliorer le contraste caractères/fond et donc la lisibilité.

Date de création : 02/04/2008 @ 20:22
Dernière modification : 28/11/2008 @ 18:16
Catégorie : Boîtes AjouteMenu
Page lue 5399 fois

Imprimer l'article Imprimer l'article

Préférences
Se reconnecter
---

Votre nom (ou pseudo) :

Votre code secret

 Nombre de membres 465 membres


Connectés :

  membresalpha0447
Recherche



Lettre d'information
Pour avoir des nouvelles de ce site, inscrivez-vous à notre Newsletter.
S'abonner
Se désabonner
Texte à méditer :  On se lasse de tout, excepté d'apprendre.   Virgile
^ Haut ^