Bonjour,
cet article concerne mon ancien thème qui avait un beau menu latéral en javascript.
Voilà, on me demandait régulièrement comment changer les liens du menu de gauche, et j’ai souvent des recherches qui viennent chez moi genre « changer le menu picture perfect ».
Alors picture perfect : pour le télécharger, c’est là : http://wordpress.org/extend/themes/picture-perfect
Ensuite, vous dézippez, puis vous l’installez dans votre ftp, dans les thèmes.
Pour modifier, vous allez sur le fichier « functions », via votre wordpress (apparence > éditeur) ou via votre éditeur préféré.
Pour modifier les liens :
Donc dans le fichiers « functions », vous cherchez ça :
<!– default links – these are not used if you have your own pages–>
<li class= »bk1″><a href= »http://mac-host.com/install.html »>About</a></li>
<li class= »bk2″><a href= »http://mac-host.com/install.html »>Weddings</a></li>
et vous remplacez par vos liens à vous, pour ma part, cela donne :
<li class= »bk1″><a href= »http://drine.info/category/photo-nature/ »>Photos Nature</a></li>
<li class= »bk2″><a href= »http://drine.info/category/photo-faune/ »>Photos Faune</a></li>
…etc
Voilà, donc les liens sont changés, et aussi les noms des catégories.
Insérer vos images dans le menu :
Le plus simple est de ne pas toucher au code, et d’aller dans le répertoire « image menu > images » et là vous remplacez les images par celles de votre choix, en faisant attention de bien respecter les dimensions 240*300 (sauf si vous voulez que votre menu soit moins large). Renommez bien vos images comme les images de base, sinon, cela ne fonctionnera pas (moi j’avais un souci avec un .JPG au lieu de .jpg, et ça changeait tout)
Pour insérer une bannière en haut de la page :
vous rajoutez au premier #welcomheading la ligne suivante :
background: url(/wp-content/uploads/adresse_de_votre_bannière.jpg) no-repeat top center;
Et ensuite vous jouez avec les padding et les margin pour la mettre à la bonne place.
Si celle- ci a une largeur supérieure à celle du bloc où vous écrivez, le menu déroulant va se superposer à la bannière, ce qui n’est pas forcément intéressant… Il faut alors allez modifier le fichier ImageMenu.css (dans le dossier ImageMenu). Vous ne l’avez pas via l’admin wordpress, il vous faudra aller le chercher avec votre ftp préféré et le modifier avec votre éditeur de texte favori (notepad++pour ma part )
Vous cherchez le code suivant :
#imageMenu {
background-color: #000000;
border-bottom-width: 1px;
border-style: none none solid;
float: left;
height: 708px;
left: 24px;
margin: 0;
overflow: hidden;
padding: 0;
position: fixed;
text-align: left;
width: 240px;
}
Et vous modifiez le « margin:0; » en « margin-top: XXpx; » avec XX correspondant à la hauteur de votre bannière. Votre menu va alors descendre du nombre de pixels indiqué, laissant la place à votre bannière.
Cependant attention : le menu est fixe sur le côté de la page, si vous le descendez trop, les derniers liens ne seront plus accessibles au visiteur qui a une petite résolution d’écran. En effet : beaucoup de monde navigue encore en 1024×768, de base, votre menu fait 708px de haut, si vous rajoutez une bannière de 100px, le dernier lien sera tout juste visible par les plus petites résolutions d’écran.
Enlever ou ajouter des liens au menu :
… et donc des images dans le menu, parce que 7 c’est pas le nombre qui vous va :
Vous commencez par modifier le fichier functions.php. Soit vous enlevez des lignes, soit vous en rajoutez, selon la structure :
<li classe= »bk8″><a href= »http://votre lien »>nom du lien</a></li>
<li classe= »bk9″><a href= »http://votre lien »>nom du lien</a></li>
Ensuite, modifier la css. En effet, votre menu est maintenant ou trop grand ou trop petit.
Attention, les modifications interviennent dans la css du menu, le fichier imageMenu.css contenu dans le dossier imagemenu !
Alors, si vous enlevez des liens, il vous faut modifier la taille globale du menu :
#imageMenu {
width: 240px; /*overall image container width*/
overflow: hidden;
background-color: #000;
border-style: none;
height: 708px; /*overall container height*/
Vous diminuez de 100 ou 101 px par lien enlevé, la hauteur de base d’un lien.
Si vous rajoutez des liens à votre menu, vous pouvez augmenter la taille globale de votre menu, ce que je vous déconseille de faire, pour les petites résolutions d’écrans…. Vos derniers liens en bas ne seront pas visibles, et il n’y aura pas de barre de défilement pour les voir…
Donc je vous conseille de modifier la hauteur de chaque lien. Votre menu paraitra un peu plus « compacté », mais tous vos liens seront accessibles, et au survol de la souris, vos images apparaitront.
Ça se passe ici :
#imageMenu ul li a {
/* change to text-indent: -1000px; if you want to use images in the menu instead of text*/
background:#FFFFFF none repeat scroll 0%; border-right: 2px solid #fff;
cursor:pointer;
display:block;
overflow:hidden;
width:240px; /*image width*/
height: XXpx;
Si vous voulez 8 liens, vous mettez 88 (qui en fait est la hauteur globale du menu divisée par le nombre de liens : 708/8), 9 liens, 708/9 = 78px… etc
Fixer le menu en haut de la page
Voilà, ça vous gave, vous avez envie de mettre 12 liens, accessibles à toutes les résolutions d’écran, et d’avoir un grand menu, vous pouvez fixer le menu en haut de la page, ce qui fait que lorsque vous scrollez la page, vous pouvez accéder au reste du menu. Personnellement, je trouve ça un peu moins joli, mais bon, je vous dis :
Dans ImageMenu.css, vous cherchez :
#imageMenu {
width: 240px; /*overall image container width*/
overflow: hidden;
background-color: #000;
border-style: none;
height: 606px; /*overall container height*/
float: left;
text-align: left;
border-bottom-style: solid;
border-bottom-width: 1px;
left: 24px;
position: fixed;
margin: 0;
padding: 0;
}
et vous supprimez tout simplement l’attribut position : fixed.
Le point faible de ce thème ?
C’est le grand nombre de plugins avec lesquels il se révèle incompatible. Alors si vous avez un souci, commencez par désactiver vos plugins….
voilà passez une bonne journée 
EDIT : Si comme Morgane, vous rencontrez des problèmes avec ce thème, n’hésitez pas à me contacter, je commence à méchamment bien le maitriser, même si je ne l’utilise plus 
Réponse rapide et précise..
Bravo !!!
Je vous tiens au jus pour la trad…
Alors à force de bidouiller, j’arrive à le faire apparaitre UNIQUEMENT si je mets un titre dans les paramètres : Général ou des points par exemple …
Après pour le centrage je galère encore un peu mais je pense y arriver un jour …
Quelle est la hauteur max car je n’arrive pas à voir la bannière en entier ?
Merci encore pour ton aide si précieuse
elmanu Articles récents..Run des F.F dans le Vaucluse
Reresalut,
après moultes moultes bidouillages, j’ai réussi à insérer l’image UNIQUEMENT si je mets du texte ou des points dans GENERAL puis slogan etc…Si tu as une solution ?
J’ai finis de traduire le thème (si quelqu’un le veut qu’il me le dise, je ferais les fichiers en sources)
Par contre j’arrive pas à centrer correctement malgré les margin et padding.. Je pense que mon image est trop haute et je voudrais descendre l’ensemble (corps et colonne droite). J’arrive à les descendre mais le « cadre » reste..Et je ne peux afficher ma bannière correctement.
Si tu as « encore » une soluce, je suis preneur …
D’avance merci
Manu
ps: je vais devenir une bête en calcul mental avec les captchas :p
elmanu Articles récents..Run des F.F dans le Vaucluse
Alors, tu enlèves ton texte dans général, et tu modifies comme ça :
background: url(http://waregh.free.fr/sitamanu.gris.jpg) no-repeat scroll left center;
padding-left: 510px;
margin-left: 140px;
Donc en gros tu enlèves l’attribut transparent, et tu rajoutes ces padding et margin
Nickel pour le système sans texte !!!
Tu m’épates..
Par contre le pb et que l’espace en dessous de l’image est trop gros donc je ne peux mettre la bannière entière ..
je vais m’en refaire une plus fine et plus longue pour combler esthétiquement le vide …
Par contre peut on « descendre » ou réduire cet espace entre la bannière et le corps ?
Je n’ai pas envie d’agrandir la bannière et plus et de descendre le menu en java.
Merci encore pour ta disponibilité et ta réactivité !!!
elmanu Articles récents..Run des F.F dans le Vaucluse
pour remonter le corps du blog, tu va dans style.css, et tu trouves :
#content .post
Tu as un margin-top:20px, tu peux le mettre à 0, voire pour le remonter plus, -20px par exemple. Comme tu as enlevé ta bannière, je peux pas te dire ce qui irait bien ^^
L’outil magique sur Firefox pour faire des tests sans modifier le blog, c’est Firebug, et dans Google Chrome, il est intégré, tu fais « inspecter l’élément », tu cliques sur la petite loupe en bas, et ensuite, tu vas sur l’élément que tu veux modifier, ça te met le code html, et la css à droite. Tu peux faire des modifications ici pour savoir ce qui va bien sans avoir besoin de modifier tes fichiers, c’est un gros gain de temps !
EDIT, je vois que tu n’as pas enlevé ta bannière, mais qu’elle n’apparait plus ^^vais essayer de mettre la main dessus !
Alors j’obtiens un truc sympa en faisant ça : tu remplis ans général le titre de ton site, ce qui permet de le faire apparaitre sur les onglets des visiteurs, et tu modifies welcomeheading comme ça :
)
#welcomeheading a {
margin-bottom: 1px;
padding-bottom: 150px;
font: 0pt « Trebuchet MS », « Lucida Grande », Lucida, Vernada, sans-serif;
padding-top: 3px;
color: white;
text-decoration: none;
background: url(http://waregh.free.fr/sitamanu.gris.jpg) no-repeat;
padding-left: 510px;
margin-left: 400px;
En modifiant ce que je te disais pour faire remonter le corps du blog (j’ai mis margin-top:-10px;) et la sidebar, sinon ça fait un décalage pas sympa (changé padding-top : 100px; en 70px) j’obtiens ça :
(en cliquant dessus, tu peux l’ouvrir dans un nouvel onglet pour avoir une vraie idée
Encore merci…
J’étais parti en déplacement et je ne lis que maintenantJe teste ça dès ce soir et te remercie encore pour tes conseils avisés qui me permettent de progresser plus rapidement (sympa le firebug !!)
merci.
elmanu Articles récents..Lissage du garde boue arrière de mon Rocker C (FXCWC)
Bon on va y arriver …
La bannière n’a pas « descendu » et est parti sur la droite …
J’ai bien copié collé pourtant.
Je teste au pif avec firebug pour voir.
Par contre le général rempli est parfait !!
Ca apparait dans les onglets …
elmanu Articles récents..Lissage du garde boue arrière de mon Rocker C (FXCWC)
EDIT :
J’ai réussi en descendant le margin à 200 au lieu de 400…
tout à l’air parfait, je teste dans des résolutions « bizarres ».
Je te remercie encore et j’oubliai FIREBUG le TOP !!!
Trop pratique et gain de temps génial
elmanu Articles récents..Lissage du garde boue arrière de mon Rocker C (FXCWC)
Bon, en résolution bizarre (ipad, eeepad, smartphone TC..), la bannière garde l’espacement gauche fixe..
Y aurait il un moyen de la mettre en « center » automatique ?
elmanu Articles récents..Lissage du garde boue arrière de mon Rocker C (FXCWC)
purée, j’avais réussi, et j’ai perdu mes modifs, ce que je suis nouille…………….
donc, j’ai fait des tas de modifs, c’est vrai que ces margins et padding ça pouvait pas faire pour tout le monde…
donc j’ai modifié deux welcomeheadings:
#welcomeheading a {
font: 0pt « Trebuchet MS », « Lucida Grande », Lucida, Vernada, sans-serif;
padding-top: 3px;
color: white;
text-decoration: none;
background: url(http://waregh.free.fr/sitamanu.gris.jpg) no-repeat;
margin: auto;
display: block;
text-align:center;
width: 600px;
height: 83px;
}
#welcomeheading {
position: relative;
margin-left: 0;
margin-right: 0;
margin-bottom:-100px;
text-align: center;
}
quand je change de résolution, ça reste plutôt bien centré
Bonjour,
Je recommence, car je crois que l’envoie n’a pas fonctionné.
J’utilise Picture Perfect depuis peut et j’ai besoin d’aide afin de changer les images dans le slide door de côté gauche. J’ai lu et suivis tous les messages faient sur votre site et j’ai même communiqué avec certains membres de ce forum qui ont été très gentil et d’une grande aide. Mais… je suis incapable de faire ces changement. La dimension de mes photos sont bien de 230×300 et les noms sont correct. Il y a sûrement une étape que je ne fait pas!!!!
Merci de votre aide et patience,
Dan
Alors c’est étrange
en effet, si le site affiche toujours ces images, c’est qu’elles sont toujours disponibles dans le dossier…
Alors quand je regarde, je vois que le dossier picture-perfect/imagemenu/images/ ne contient que les images de base. Es-tu sur d’avoir mis tes images dans ce dossier là et pas dans un autre dossier image ?
Par contre, si je peux me permettre une remarque, je trouve que l’image de fond qui se répète, ça ne fait pas très joli chez moi (résolution d’écran 1280×1024). Perso, je mettrais une image plus grande (1300 de large minimum) et je rajouterais un attribut no-repeat
je vois que tu as changé ça via un plugin, il suffit en fait d’ajouter dans style.css, dans body background: url(http://dhxphotographie.com/wp-content/uploads/2012/02/DSC_0773.jpg) fixed no-repeat;
Drine Articles récents..Dernière neige
Merci d’avoir été si rapide
Je prends notes des suggestions et je vais essayer le tout.
Daniel Héroux Articles récents..Courses de chiens en hiver
J’ai réussi!!! Un gros merci de ton aide! Je vais retravailler le tout demain.
[...] mon billet « Customiser le thème Picture Perfect« , je m’en sers sans cesse pour donner des coups de main à mes [...]