Pages: 1
Bonjour à tous,
Je suis en phase de découverte de PWG (qui a juste l'air excellent, au passage), dans sa version 1.7.3.
La taille de vignette par défaut étant trop petite à mon goût, j'ai opté pour des vignettes de 192 pixels max (hauteur/largeur).
Seulement voilà, cela ne va pas sans poser de multiples problèmes :
1. Le texte associé aux vignettes de catégorie se retrouve au-dessus de la vignette.
Résolu : dans le fichier content.css, dans les classes #content DIV.thumbnailCategory DIV.description H3 et #content DIV.thumbnailCategory DIV.description P, j'ai modifié (ajouté ? je ne sais plus) le margin : margin: 0 0 0 80px ;.
2. Au sein d'une catégorie, les vignettes se "marchent dessus" (celle de droite passe "par dessus" celle de gauche).
Résolu : dans le fichier thumbnails.css, il suffit d'augmenter la taille du margin dans la classe #content UL.thumbnails SPAN.wrap1. A l'origine, la définition de margin est margin: 0 5px 5px 5px;.
Vu que mes vignettes font 64 pixels de plus en largeur que la taille attendue, il a suffit de pousser la valeur à droite (en bas, ça se fait tout seul) : margin: 0 69px 5px 5px;
3. Problème : le cadre "sous" la vignette ne s'agrandit pas, lui. Et reste désespérément aux mêmes largeur et hauteur, soit 140 pixels (cadre compris). Cela fait près de deux heures que je cherche comment corriger cela ; mes recherches sur le site et le forum m'ont amené à tester plusieurs méthodes (voir ici et là, par exemple ; j'ai aussi tripatouillé les classes wrap1 et wrap2, dans le fichier thumbnails.css). Mais jusqu'à présent, je n'ai obtenu aucun résultat : les cadres restent désespérément à la même largeur... ?! Je soupçonne un "problème" avec les différentes balises display dans les classes wrap1 et wrap2, mais sans parvenir à mettre le doigt dessus...
Si quelqu'un a une idée, je suis preneur !
Merci d'avance !
Dernière modification par essaion (2009-01-23 23:18:04)
Hors ligne
Et voilà, comme quoi, c'est quand on désespère qu'on finit par trouver...
J'ai donc modifié le fichier thumbnails.css, et plus particulièrement la classe #content UL.thumbnails SPAN.wrap2 A, #content UL.thumbnails LABEL :
- Modification du display, qui devient display: table-cell ; (au lieu de display: block ;)
- Ajout d'une hauteur et d'une largeur : height: 192px ; width: 192px ;.
- Ajout d'un alignement vertical, qui semble mal situé à l'origine dans la classe #content UL.thumbnails SPAN.wrap2) : vertical-align: middle ;
...
Hem...
Bon, ce n'est pas miraculeux quand même : sous Firefox, ça passe nickel. Par contre, ça ne marche pas sous IE7, et je ne sais pas pour les autres navigateurs...
Pour corriger le tir sous IE7, il suffit apparemment d'ajouter min-height: 192px ; min-width: 192px ;[b] dans la classe [b]#content UL.thumbnails SPAN.wrap2... ce qui, pour une raison complètement inconnue, fait sauter l'alignement vertical sous IE7 ?! (constaté en supprimant les height et width mentionnés plus haut dans ce post). C'est moins beau, mais ça reste acceptable (à mon goût, bien sûr).
Reste un problème curieux : le nom de chaque image (classe : "thumbLegend") reste tronqué comme si le cadre faisait 140 pixels de large... ?!
Je me rends compte que toutes ces modifications peuvent paraître fumeuses, après coup. Et j'en ai peut-être oublié. Donc, voici "en brut" le contenu des trois classes modifiées pour arriver à un résultat à peu près correct, à ceci près que IE7 ne centre pas verticalement l'image :
#content UL.thumbnails SPAN.wrap1 { width: 192px ; /* on spécifie la largeur de la vignette, puisque le cadre ne s'ajuste pas à la vignette sinon */ margin: 0 20px 5px 5px; /* augmentation de l'écartement horizontal */ display: table-cell; display: inline-table; display: inline-block; /* Why 3 display option ??? */ vertical-align: top; /* OK with Opera and IE6 not Geko */ text-align: center; /* to center the thumbnail and legend in Geko/Opera */ } #content UL.thumbnails SPAN.wrap2 { min-height: 192px ; /* traitement de faveur pour IE7 */ min-width: 192px ; /* traitement de faveur pour IE7 */ margin: 0; /* important reset the margins */ display: table-cell; /* block prevents vertical-align here */ } #content UL.thumbnails SPAN.wrap2 A, #content UL.thumbnails LABEL { height: 192px ; /* on spécifie la hauteur de la vignette, puisque le cadre ne s'ajuste pas à la vignette sinon */ /*display: block;*/ display: table-cell; vertical-align: middle; /* Ok with Opera and Geko not IE6 */ border-bottom: none; }
Évidemment, si je fais fausse route, n'hésitez pas à me le signaler !!!
EDIT : pour la largeur du texte, une fois de plus il m'a fallu la préciser dans la classe thumbLegend : width: 192px ;.
Dernière modification par essaion (2009-01-15 02:49:29)
Hors ligne
Argh, le centrage horizontal ne fonctionne pas (testé sous IE et Firefox) ! Je viens juste de m'en apercevoir, et de grands coups de text-align: center ; ne changent rien à l'affaire !
Me voilà perplexe : comment tout cela fonctionne-t-il donc avec la taille de vignettes par défaut ?! :)
Hors ligne
Hem, j'ai honte.
Parce que la méthode décrite ici et déjà mentionnée dans le premier post fonctionne en fait totalement.
La seule et unique raison pour laquelle cela n'avait pas fonctionné dans mon cas, c'est que le copier-coller du code à insérer dans config_local.inc.php a mal géré les apostrophes. Du coup, les variables n'étaient pas reconnues comme telles par le plug-in. Bref, tout marche. Et j'ai perdu 4 heures sur un problème qui n'en était pas un. Ou si, un problème ICC (interface chaise-clavier). Too bad.
Hors ligne
Pages: 1