BADLOG Posted May 16, 2013 Share Posted May 16, 2013 BONSOIR, je cherche à inserer un icône ou picto d'une maison pour remplacer le mot "accueil" meme principe que sur ce forum, ma barre de menu est blanche et noir au passage de la souris, j'ai bien mes deux pictos noir et blanc. Pouvez vous me donner les lignes de codes à insérer sur mon site. Merci d'avance. Link to comment Share on other sites More sharing options...
Céline13240 Posted May 18, 2013 Share Posted May 18, 2013 (edited) Bonsoir, J'ai trouvé cette astuce pour afficher le logo home à la place de "accueil". Elle marche sur une une version presta 1.5.3. Dans un premier temps vous ajouter votre logo dans le dossier img du thème. Vous devez également supprimer le lien ou la catégorie accueil via le B.O dans modules>modules>menu horizontal>configurer. Dans le fichier : blocktopmenu.tpl du thème, à la suite de <!-- Menu --> <div class="sf-contener clearfix"> <ul class="sf-menu clearfix"> il faut ajouter : <li class="logo_home"><a href="{$link->getPageLink('index.php')}"><img src="{$img_dir}picto_home.png" alt="{l s='Accueil' mod='blocktopmenu'}" /></a></li> Pour finir, il ne reste plus qu'à l'adapter à votre thème via le fichier superfish_modified.css. Cordialement, Edited May 18, 2013 by Céline13240 (see edit history) 1 Link to comment Share on other sites More sharing options...
BADLOG Posted May 19, 2013 Author Share Posted May 19, 2013 Merci , l'image est bien sur mon menu , en revanche c'est une image avec une maison noir et blanc. tu me parle de superfish, mais je ne connais pas assez les CSS, quelqu'un connait un site pour avec des exemples pour ce type d'operation , a l'affichage une maison noir et au clic maison blanche. Link to comment Share on other sites More sharing options...
moussvm Posted June 4, 2013 Share Posted June 4, 2013 (edited) Salut Badlog, Tu as un tuto qui explique ici : http://css.mammouthl...ss-rollover.php C'est avec les attributs Css 'Hover' que tu peux faire cela. Pour info, le fichier superfish_modified.css se trouve dans le repertoire : modules/blocktopmenu/css/superfish_modified.css Edited June 4, 2013 by moussvm (see edit history) Link to comment Share on other sites More sharing options...
businessphoneandcom Posted March 25, 2014 Share Posted March 25, 2014 Bonsoir, J'ai trouvé cette astuce pour afficher le logo home à la place de "accueil". Elle marche sur une une version presta 1.5.3. Dans un premier temps vous ajouter votre logo dans le dossier img du thème. Vous devez également supprimer le lien ou la catégorie accueil via le B.O dans modules>modules>menu horizontal>configurer. Dans le fichier : blocktopmenu.tpl du thème, à la suite de <!-- Menu --> <div class="sf-contener clearfix"> <ul class="sf-menu clearfix"> il faut ajouter : <li class="logo_home"><a href="{$link->getPageLink('index.php')}"><img src="{$img_dir}picto_home.png" alt="{l s='Accueil' mod='blocktopmenu'}" /></a></li> Pour finir, il ne reste plus qu'à l'adapter à votre thème via le fichier superfish_modified.css. Cordialement, Bonjour, ça se trouve ou dans le "menu riche" que j'ai acheté sur addons ? car idem je souhaiterais mettre des icons soit pour remplacer un texte sur un bouton ou bien mettre un icon devant le texte du bouton. Merci de me dire comment faire si vous savez car j'ai demandé directement à l'éditeur de ce menu riche et il m'a dit sans plus de précisions qu'il fallait modifier les templates (j'imagine les .tpl) mais lesquels ? et quels dimensions (16*16, 32*32....) et format (jpg, png) doit avoir l'icon pour la barre de menu ? Merci de votre réponse car les css je ne maîtrise pas beaucoup. Businessphoneandcom Link to comment Share on other sites More sharing options...
Céline13240 Posted March 25, 2014 Share Posted March 25, 2014 Bonjour Business, Vous devriez trouver le fichier template de votre module dans le dossier correspondant à celui-ci dans le dossier "modules" de prestashop. Par exemple, www/maboutique/modules/nomdumodule/nomdumodule.tpl. Il est préférable de ne pas modifier directement ce fichier mais plutôt de le copier dans le dossier de votre thème, autrement dit de surcharger votre thème. Pour en savoir plus je vous conseille de vous référer à l'article suivant : http://blog.ukoo.fr/prestashop/20120907-les-bonnes-pratiques-prestashop-loverride/. En ce qui concerne le format de l'image, je vous conseille le png, en tout cas c'est ce que j'ai choisi pour mon icône "home" afin que l'image ai un fond transparent. J'ai ensuite modifié la couleur de mon bouton via css. Pour la taille de l'image, cela va dépendre de la taille de la barre de menu. Pour ma part, la taille de mon image est de 26px x 24px. Pour choisir la taille de l'image, vous pouvez utiliser firebug qui vous permettra d'identifier la taille de la barre de menu et des différents boutons qui la composent. J'espère avoir pu vous aider, Cordialement, Céline13240. Link to comment Share on other sites More sharing options...
businessphoneandcom Posted March 25, 2014 Share Posted March 25, 2014 Bonjour Business, Vous devriez trouver le fichier template de votre module dans le dossier correspondant à celui-ci dans le dossier "modules" de prestashop. Par exemple, www/maboutique/modules/nomdumodule/nomdumodule.tpl. Il est préférable de ne pas modifier directement ce fichier mais plutôt de le copier dans le dossier de votre thème, autrement dit de surcharger votre thème. Pour en savoir plus je vous conseille de vous référer à l'article suivant : http://blog.ukoo.fr/prestashop/20120907-les-bonnes-pratiques-prestashop-loverride/. En ce qui concerne le format de l'image, je vous conseille le png, en tout cas c'est ce que j'ai choisi pour mon icône "home" afin que l'image ai un fond transparent. J'ai ensuite modifié la couleur de mon bouton via css. Pour la taille de l'image, cela va dépendre de la taille de la barre de menu. Pour ma part, la taille de mon image est de 26px x 24px. Pour choisir la taille de l'image, vous pouvez utiliser firebug qui vous permettra d'identifier la taille de la barre de menu et des différents boutons qui la composent. J'espère avoir pu vous aider, Cordialement, Céline13240. Bonjour Business, Vous devriez trouver le fichier template de votre module dans le dossier correspondant à celui-ci dans le dossier "modules" de prestashop. Par exemple, www/maboutique/modules/nomdumodule/nomdumodule.tpl. Il est préférable de ne pas modifier directement ce fichier mais plutôt de le copier dans le dossier de votre thème, autrement dit de surcharger votre thème. Pour en savoir plus je vous conseille de vous référer à l'article suivant : http://blog.ukoo.fr/prestashop/20120907-les-bonnes-pratiques-prestashop-loverride/. En ce qui concerne le format de l'image, je vous conseille le png, en tout cas c'est ce que j'ai choisi pour mon icône "home" afin que l'image ai un fond transparent. J'ai ensuite modifié la couleur de mon bouton via css. Pour la taille de l'image, cela va dépendre de la taille de la barre de menu. Pour ma part, la taille de mon image est de 26px x 24px. Pour choisir la taille de l'image, vous pouvez utiliser firebug qui vous permettra d'identifier la taille de la barre de menu et des différents boutons qui la composent. J'espère avoir pu vous aider, Cordialement, Céline13240. Re-bonjour J'ai mis tout le module innovativemenu dans mon dossier modules de mon thème et j'ai modifié le .tpl en mettant <li class="logo_home"><a href="{$link->getPageLink('index.php')}"><img src="{$images_dir}home.png" alt="{l s='Accueil' mod='innovativemenu'}" /></a></li> Avec l'image home.png dans le dossier images mais rien n'y fait. Voir ici www.phoneandcom.com/test_2 Link to comment Share on other sites More sharing options...
businessphoneandcom Posted March 25, 2014 Share Posted March 25, 2014 Bonjour Business, Vous devriez trouver le fichier template de votre module dans le dossier correspondant à celui-ci dans le dossier "modules" de prestashop. Par exemple, www/maboutique/modules/nomdumodule/nomdumodule.tpl. Il est préférable de ne pas modifier directement ce fichier mais plutôt de le copier dans le dossier de votre thème, autrement dit de surcharger votre thème. Pour en savoir plus je vous conseille de vous référer à l'article suivant : http://blog.ukoo.fr/prestashop/20120907-les-bonnes-pratiques-prestashop-loverride/. En ce qui concerne le format de l'image, je vous conseille le png, en tout cas c'est ce que j'ai choisi pour mon icône "home" afin que l'image ai un fond transparent. J'ai ensuite modifié la couleur de mon bouton via css. Pour la taille de l'image, cela va dépendre de la taille de la barre de menu. Pour ma part, la taille de mon image est de 26px x 24px. Pour choisir la taille de l'image, vous pouvez utiliser firebug qui vous permettra d'identifier la taille de la barre de menu et des différents boutons qui la composent. J'espère avoir pu vous aider, Cordialement, Céline13240. Re-bonjour J'ai mis tout le module innovativemenu dans mon dossier modules de mon thème et j'ai modifié le .tpl en mettant <li class="logo_home"><a href="{$link->getPageLink('index.php')}"><img src="{$images_dir}home.png" alt="{l s='Accueil' mod='innovativemenu'}" /></a></li> Avec l'image home.png dans le dossier images mais rien n'y fait. Voir ici www.phoneandcom.com/test_2 Link to comment Share on other sites More sharing options...
Céline13240 Posted March 25, 2014 Share Posted March 25, 2014 (edited) Re-bonjour, Peut-être que ma question est stupide mais avez-vous bien mis l'image dans le dossier "img" de votre thème ? Edit 1 : Peut-être qu'il y a un souci au niveau de la surcharge du thème. Il est inutile de copier l'ensemble de votre dossier innovativemenu dans votre thème. Si vous ne souhaitez modifier que le template, il vous suffit de créer un nouveau dossier (s'il n'existe pas déjà) portant le nom du module dans thèmes/votrethème/modules et d'y copier votre fichier tpl. Edited March 25, 2014 by Céline13240 (see edit history) Link to comment Share on other sites More sharing options...
businessphoneandcom Posted March 25, 2014 Share Posted March 25, 2014 Re-bonjour, Peut-être que ma question est stupide mais avez-vous bien mis l'image dans le dossier "img" de votre thème ? Oups c'était ça !! en fait il faut mettre l'image dans dossier img du thème et non dans le dossier images du module. Ce que j'ai rectifié de suite !! en fait je pensais que ça allait chercher directement dans les images du module. alors j'avais mis ça comme code : <li class="logo_home"><a href="{$link->getPageLink('index.php')}"><img src="{$images_dir}home.png" alt="{l s='Accueil' mod='innovativemenu'}" /></a></li> que j'ai modifié par <li class="logo_home"><a href="{$link->getPageLink('index.php')}"><img src="{$img_dir}home.png" alt="{l s='Accueil' mod='innovativemenu'}" /></a></li> et j'ai ensuite mis l'image dans le dossier img du thème directement !! Merci merci pour m'avoir ouvert les yeux..... car en temps que débutant du dimanche il ne m'est pas facile pour moi de savoir le code css qui apparemment est facile à comprendre mais dur pour les débutant. Par contre pour centrer le logo il faut le faire par ou du coup ? car j'ai compris pour l'image je vais l'ajuster dans mon site www.phoneandcom.com avant sa mise en service définitive car il me reste du référencement et le menu à développer. donc dites moi par ou passer pour centrer correctement mon image "home" (qui me fait super plaisir de la voir enfin !!!) Businessphoneandcom alias Guillaume Link to comment Share on other sites More sharing options...
Céline13240 Posted March 25, 2014 Share Posted March 25, 2014 (edited) Bon, je pense que le menu riche n'est pas foutu comme le menu par défaut. Dans votre fichier template, vous devriez avoir une ligne qui commence avec : <li id="innovative_tab_1" class="innovative_tab"> Si c'est le cas, c'est cette ligne qu'il faut modifier de la façon suivante : <li id="innovative_tab_1" class="innovative_tab"><a href="{$link->getPageLink('index.php')}"><img src="{$img_dir}home.png" alt="{l s='Accueil' mod='innovativemenu'}" /></a></li> Je pense que cela devrait fonctionner correctement et s'afficher comme les autres boutons. Edited March 25, 2014 by Céline13240 (see edit history) Link to comment Share on other sites More sharing options...
businessphoneandcom Posted March 25, 2014 Share Posted March 25, 2014 Bon, je pense que le menu riche n'est pas foutu comme le menu par défaut. Dans votre fichier template, vous devriez avoir une ligne qui commence avec : <li id="innovative_tab_1" class="innovative_tab"> Si c'est le cas, c'est cette ligne qu'il faut modifier de la façon suivante : <li id="innovative_tab_1" class="innovative_tab"><a href="{$link->getPageLink('index.php')}"><img src="{$img_dir}home.png" alt="{l s='Accueil' mod='innovativemenu'}" /></a></li> Je pense que cela devrait fonctionner correctement et s'afficher comme les autres boutons. Bien vu !!!!! jetez un coup d’œil par ici http://www.phoneandcom.com/test_2/index.php (c'est une boutique de test mais proche de ma boutique finale sans ces produits biensur !!) Encore merci pour tout Bonne soirée Link to comment Share on other sites More sharing options...
businessphoneandcom Posted March 25, 2014 Share Posted March 25, 2014 Bon, je pense que le menu riche n'est pas foutu comme le menu par défaut. Dans votre fichier template, vous devriez avoir une ligne qui commence avec : <li id="innovative_tab_1" class="innovative_tab"> Si c'est le cas, c'est cette ligne qu'il faut modifier de la façon suivante : <li id="innovative_tab_1" class="innovative_tab"><a href="{$link->getPageLink('index.php')}"><img src="{$img_dir}home.png" alt="{l s='Accueil' mod='innovativemenu'}" /></a></li> Je pense que cela devrait fonctionner correctement et s'afficher comme les autres boutons. Re-Bonsoir, c'est impec cette ligne mais par contre lorsque je fais des changements dans ma barre de menu rien ne change. J'ai essayé directement de mettre la ligne dans le .tpl du module directement et la à chaque fois que fais des changements dans ma barre de menu la ligne s'efface. Je ne sais pas quoi faire pour modifier mes menus et garder le logo home en permanence. ps: j'ai eu une réponse de l'éditeur du module qui me dit : "Bonjour, Il faut modifier le fichier tab.php dans le dossier class dans le répertoire innovativemenu dans module : ligne 571 à 572 <li class="innovative_tab" id="innovative_tab_'.$this->id.'"> <a href="'.InnovativeMenu::cleanHTML($this->getLink()).'">'.InnovativeMenu::cleanHTML($this->getNameOfLink()).'</a> '.$part.' </li>'; Pensez a rééditer les menus pour régénérer les templates." ça veut dire quoi ça ? j'ai trouvé le fichier tab.php mais je ne vois pas ou mettre la ligne. Businessphoneandcom Link to comment Share on other sites More sharing options...
Céline13240 Posted March 26, 2014 Share Posted March 26, 2014 Bonjour Business, Quand vous dites que vous faites des changements, il s'agit de modifications effectuées via le Back Office de prestashop ou bien vous modifiez directement les fichiers ? En ce qui concerne la réponse de l'éditeur, lorsqu'il vous dit de rééditer les menus je suppose qu'il parle d'effacer le cache de smarty. Cela se fait dans le back office : paramètres avancés > Performances. Ensuite, si vous avez une version récente de prestashop (à partir de 1.5.6.1) vous avez un bouton "Effacer le cache de Smarty et le cache de l'Autoload. Sinon, à SMARTY > cache des templates : cocher "Forcer la compilation à chaque appel" >cache : cocher "non" Enregistrer les modifs, puis recharger le front-office et remettre la configuration initiale. Il peut être aussi pertinent de vider le cache de votre navigateur avec alt + F5. Pour le reste, là je sèche. Le bout de code indiqué par l'éditeur me laisse perplexe mais je ne suis pas une professionnelle. J'ai appris sur le tas les bases en css et html en développant mon site moi-même et en bidouillant grâce à ce forum. Je ne peux que vous conseillez de demander des précisions à l'éditeur. A moins qu'une âme charitable plus expérimentée que moi ne vous éclaire. Bien Cordialement, Céline13240 Link to comment Share on other sites More sharing options...
businessphoneandcom Posted March 26, 2014 Share Posted March 26, 2014 (edited) Bonjour Business, Quand vous dites que vous faites des changements, il s'agit de modifications effectuées via le Back Office de prestashop ou bien vous modifiez directement les fichiers ? En ce qui concerne la réponse de l'éditeur, lorsqu'il vous dit de rééditer les menus je suppose qu'il parle d'effacer le cache de smarty. Cela se fait dans le back office : paramètres avancés > Performances. Ensuite, si vous avez une version récente de prestashop (à partir de 1.5.6.1) vous avez un bouton "Effacer le cache de Smarty et le cache de l'Autoload. Sinon, à SMARTY > cache des templates : cocher "Forcer la compilation à chaque appel" >cache : cocher "non" Enregistrer les modifs, puis recharger le front-office et remettre la configuration initiale. Il peut être aussi pertinent de vider le cache de votre navigateur avec alt + F5. Pour le reste, là je sèche. Le bout de code indiqué par l'éditeur me laisse perplexe mais je ne suis pas une professionnelle. J'ai appris sur le tas les bases en css et html en développant mon site moi-même et en bidouillant grâce à ce forum. Je ne peux que vous conseillez de demander des précisions à l'éditeur. A moins qu'une âme charitable plus expérimentée que moi ne vous éclaire. Bien Cordialement, Céline13240 Re-bonjour, Je progresse. j'ai réussi à placer ma ligne de code à la ligne 572 du fichier tab.php du module innovativemenu/classes et placer mon icon dans le dossier images du module comme m'a dit l'éditeur: <a href="'.InnovativeMenu::cleanHTML($this->getLink()).'"><img src="'.__PS_BASE_URI__.'modules/innovativemenu/images/home.png" alt="Accueil" /></a>dans le fichier tab.php du module innovativemenu/Classes. Par contre j'attends sa réponse car dès que je crée un onglet ça me met l'image à la place du texte de tous les autres onglets crées. Ps: je vous informe car c'est pour l'utilité de toutes et tous ici car apparemment on est des programmateurs ccs "du dimanche".... Je vous tiens au courant de la suite des évènements... BusinessPhoneAndCom Edited March 26, 2014 by businessphoneandcom (see edit history) Link to comment Share on other sites More sharing options...
Céline13240 Posted March 27, 2014 Share Posted March 27, 2014 Bonjour Business, Je suis ravie que vous progressiez et je vous remercie pour votre retour. J'espère que vous trouverez rapidement une solution. Cordialement, Céline13240 Link to comment Share on other sites More sharing options...
businessphoneandcom Posted March 27, 2014 Share Posted March 27, 2014 (edited) Bonjour Business, Je suis ravie que vous progressiez et je vous remercie pour votre retour. J'espère que vous trouverez rapidement une solution. Cordialement, Céline13240 Bonjour, Bonne nouvelle ça y ai j'ai enfin l'icon "maison" qui reste fixe à gauche de la barre des menus et je peux maintenant rajouter autant d'onglets que je veux et ce sans que cette image "maison" soit répétée sur nouveaux mes onglets. Il fallait placer comme m'a dit l'éditeur du module dans sa réponse ces lignes avec des conditions "Il suffit de faire une condition avec l'ID du tab ($this->id), du genre : if ($this->id = numero du tab) Votre image else une autre image." ce qui donne au finale dans le module innovativemenu/classes sur le fichier tab.php à partir de la L570 jusqu'a L577: $return = '<li class="innovative_tab" id="innovative_tab_'.$this->id.'">'; if ($this->id == 6) $return .= '<a href="'.InnovativeMenu::cleanHTML($this->getLink()).'"><img src="'.__PS_BASE_URI__.'modules/innovativemenu/images/home.png" alt="Accueil" /></a>'; else $return .= '<a href="'.InnovativeMenu::cleanHTML($this->getLink()).'">'.InnovativeMenu::cleanHTML($this->getNameOfLink()).'</a>'.$part; $return .= '</li>'; return $return; Merci à l'éditeur de m'avoir mis ce code dans mon fichier et comme le partage devient rare, ici à la communauté des Prestashopistes on partage les infos. On regarde le résultat ici http://www.phoneandcom.com/test_2 mais bientôt ça sera par ici http://www.phoneandcom.com directement bonne journée, Businessphoneandcom Edited March 27, 2014 by businessphoneandcom (see edit history) Link to comment Share on other sites More sharing options...
cocoSupernail Posted April 16, 2014 Share Posted April 16, 2014 Bonjour, j'ai suivi la première étape, j'ai bien réussi à afficher mon icone à la place du mot accueil dans mon topmenu, MAIS suite à ça je n'ai plus les sous-menus qui étaient liés à accueil... comment les faire réapparaître puisque vous nous avez dit de supprimer la catégorie accueil dans le Back Office? Ps: je travaille sur Prestashop 1.5.6.2 en local. Merci d'aider une graphiste qui essaye de comprendre le web! Link to comment Share on other sites More sharing options...
businessphoneandcom Posted April 16, 2014 Share Posted April 16, 2014 (edited) Bonjour, j'ai suivi la première étape, j'ai bien réussi à afficher mon icone à la place du mot accueil dans mon topmenu, MAIS suite à ça je n'ai plus les sous-menus qui étaient liés à accueil... comment les faire réapparaître puisque vous nous avez dit de supprimer la catégorie accueil dans le Back Office? Ps: je travaille sur Prestashop 1.5.6.2 en local. Merci d'aider une graphiste qui essaye de comprendre le web! Bonjour, Moi c'était avec le module complémentaire "Menu riche" de prestashop que j'ai crée le bouton. il faudrait voir avec Céline13240 pour le menu de base de Prestashop elle pourra peut être vous aider. Le mieux c'est d'utiliser le module "Advanced Top Menu" de Presta-module. Je suis en train de l'utiliser et on peut vraiment mettre comme il se doit des icons ou icon+titre onglet etc... il vaut 49 € HT mais ça vaut le coup de l'acheter. Normalement d'ici demain ou vendredi vous pourrez voir le résultat sur mon site web http://www.phoneandcom.com qui a actuellement le menu d'origine Prestashop 1.6.0.5 (un peut mieux que Presta 1.5.6.2 mais bon reste aussi basique). Bon courage à vous Businessphoneandcom Edited April 16, 2014 by businessphoneandcom (see edit history) Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now