cecile07a Posted November 19, 2013 Share Posted November 19, 2013 (edited) bonjour je souhaite changer la couleur du bouton RECHERCHER (et d'autres par la suite) cela fait des heures que je cherche... en vain je suis partie du thème par défaut j'ai changé la couleur dans le fichier image : bg_search_submit_png. le fichier est bien sur le serveur. cependant, lorsque je vais sur mon site, la couleur n' a pas changé et je vois grâce à fire debug que c'est l'ancienne couleur qui est prise en compte... j'ai vidé le cache du navigateur, celui de smarty et j'ai forcé la compilation... j'avoue que je ne suis pas très douée, mais là je séche! est ce que quelqu'un peut me dire ce que je dois faire???? merci d'avance Edited November 26, 2013 by cecile07a (see edit history) Link to comment Share on other sites More sharing options...
melvita Posted November 19, 2013 Share Posted November 19, 2013 Bonjour, Sur quel version de prestashop etes vous ? le thème est il le thème par défautl ? merci Link to comment Share on other sites More sharing options...
cecile07a Posted November 19, 2013 Author Share Posted November 19, 2013 c'est effectivement le thème par defaut V1.5 Link to comment Share on other sites More sharing options...
Céline13240 Posted November 19, 2013 Share Posted November 19, 2013 (edited) Bonsoir cecile07a, Pour changer la couleur du bouton rechercher, tu dois modifier le fichier css correspondant qui se trouve dans le dossier de ton thème : themes/montheme/css/modules/blocksearch/blocksearch.css Si tu n'as pas ce dossier, il te suffit de le créer et d'y copier le fichier css natif au module. Cela te permet d'adapter ton thème sans modifier les fichiers natifs de prestashop. Ensuite, avec firebug recherche les lignes de code correspondantes (tu peux en profiter pour faire des essais). Les lignes de codes qui t'intéressent commencent par : #search_block_top .button et #search_block_top .button:hover (si tu souhaites afficher une couleur différente au passage de la souris) Par exemple, si tu souhaites que ton bouton rechercher soit rouge, tu indiques : #search_block_top .button {background-color: #FF0000; ... } Même chose pour le hover. Grâce à l'outil gratuit Ultimate CSS Gradient Generator (http://www.colorzilla.com/gradient-editor/), tu peux créer des dégradés et obtenir leur code css pour l'intégrer à tes fichiers. J'espère que cela résoudra ton problème. Céline13240 Edited November 19, 2013 by Céline13240 (see edit history) Link to comment Share on other sites More sharing options...
cecile07a Posted November 20, 2013 Author Share Posted November 20, 2013 merci beaucoup pour ta réponse je vais essayer ça... Link to comment Share on other sites More sharing options...
cecile07a Posted November 25, 2013 Author Share Posted November 25, 2013 bonjour désolée pour mon retour tardif... mais j'ai un autre job! bref, j'ai commencé comme tu m'as dit à créer mon fichier css blocksearch.css en le copiant il est donc maintenant dans themes/montheme/module/blocksearch sauf que quand je vais sur mon site c'est toujours le blocksearch.css qui est dans modules/blocksearch qui est actif... 1ère question: pourquoi copier ce fichier et ne pas modifier l'autre (original?)? 2ème question : les boutons dans ps font appel à des images (enfin je crois) et c'est celles-ci que je voulais modifier = changer la couleur en gardant le dégradé. (img/bg_search_submit.png) j'ai bien essayé de la modifier mais ce n'est jamais pris en compte. je pense que je loupe un truc!!! bon voilà... je ne suis pas certaine d'être très claire!!! mais je débute et bataille beaucoup. en tout cas, c'est sympa d'aider! Link to comment Share on other sites More sharing options...
Céline13240 Posted November 25, 2013 Share Posted November 25, 2013 Bonjour, Pas de soucis. Alors, pour répondre à ta 1ère question, cette procédure s'appelle surcharger son thème, en anglais c'est override. Cela te permet de conserver les fichiers natifs de prestashop intacts et donc de modifier prestashop de manière "plus propre". Cela a surtout l'avantage de faciliter les mises à jours (s'il y a des problèmes de compatibilité tu seras plus facilement à même de les identifier, par exemple). Ce n'est pas une obligation, il s'agit plutôt d'une "bonne pratique" pour développer ton site. Pour répondre à ta deuxième question, tu n'as pas copier ton fichier dans le bon dossier : themes/montheme/css/modules/blocksearch/blocksearch.css Dans ton dossier themes/montheme, tu as le dossier "CSS" dans lequel (si ce n'est pas déjà le cas), tu crée un dossier "modules" dans lequel tu vas créer ton dossier "blocksearch" puis y copier le fichier blocksearch.css. Pour récupérer les images du modules, tu copies le dossier "img" du dossier du module blocksearch natif vers ton nouveau dossier "blocksearch". Je dois apporter quelques précisions : la méthode que je t'ai indiqué dans mon 1er post pour modifier la couleur de ton bouton n'implique pas l'utilisation d'une image mais uniquement le css pour éviter de trop charger le site. En fait, je n'avais pas bien compris ta demande initiale. Si ton image modifiée n'est pas prise en compte, c'est peut-être parce que ton fichier n'est pas dans le bon dossier : ton image doit être dans le dossier img du dossier de ton module blocksearch, ou dans le cas de la surcharge de ton thème dans le dossier themes/monthème/css/blocksearch/img. Tu peux essayer de vérifier avec firebug si l'image par défaut n'est pas également appeler par le global.css. Je suis désolée si mes premières indications t'ont induites en erreur. J'espère que cette fois-ci c'est la bonne. Link to comment Share on other sites More sharing options...
cecile07a Posted November 26, 2013 Author Share Posted November 26, 2013 bonjour ne sois surtout pas désolée, tu m'aides beaucoup! j'ai fait comme tu m'as dit, effectivement je n'avais pas mis le blocksearch.css au bon endroit... bref, après avoir fait les modifications dans blocksearch.css, mon bouton n'est plus gris mais jaune or je voudrais qu'il soit bleu! ce fameux jaune vient d'une image bg_bt.gif appelée dans le global.css (je l'ai vu avec firedebug) comment est ce que je peux ne pas l'appeler et juste me servir de background-color du blocksearch? d'ailleurs cette image est utilisée pour tous les boutons... et c'est pas beau! merci encore! Link to comment Share on other sites More sharing options...
cecile07a Posted November 26, 2013 Author Share Posted November 26, 2013 (edited) laisse tomber, je viens de trouver!!! j'ai changer dans le global.css : j'ai enlevé l'appel à l'image et mis ma couleur merci beaucoup pour ton aide et tes explications, elles m'ont été très utiles peut être à bientôt! cécile ps : je passe le post en résolu Edited November 26, 2013 by cecile07a (see edit history) 1 Link to comment Share on other sites More sharing options...
Céline13240 Posted November 26, 2013 Share Posted November 26, 2013 (edited) Bonjour Cécile, C'est super ! J'ai un peu révisé de mon côté et je me suis rendu compte que j'ai fait une petite boulette. Si tu souhaites personnaliser la couleur de ton bouton rechercher, il te suffit d'utiliser la propriété "background" au lieu de "background-color" dans ton fichier blocksearch.css. La différence entre ces deux propriétés c'est que la première sert à gérer l'ensemble des propriétés d'arrière-plan en une seule fois alors que la propriété "background-color" n'influe que sur la couleur de fond. Du coup, je pense que c'est pour cette raison que c'est la propriété du global.css qui était prise en compte par défaut (du moins je suppose). Voici quelques sites grâce auxquels j'ai appris quelques bases en css : http://css.mammouthland.net/ http://fr.openclassrooms.com/informatique/cours/apprenez-a-creer-votre-site-web-avec-html5-et-css3 http://www.zonecss.fr/index.php http://www.alsacreations.com/ Cordialement, Céline. Edited November 26, 2013 by Céline13240 (see edit history) Link to comment Share on other sites More sharing options...
vendugeek Posted May 4, 2015 Share Posted May 4, 2015 Salut, je suis sur prestashop 1.6 je voudrais changer le bouton search pas la couleur mais le design. C'est possible de remplacer la loupe par autre chose ? Merci Link to comment Share on other sites More sharing options...
vendugeek Posted May 4, 2015 Share Posted May 4, 2015 Je suis allé dans le dossier blocknewproducts et voici le fichier css est-ce que c'est ici que je peux changer la couleur ? : /* Block new products */ #new-products_block_right ul {list-style-type:none;} #new-products_block_right li { float:left; margin-right:20px; padding:10px 0; } #new-products_block_right li.first {margin-left:30px;} #new-products_block_right dl { list-style-type:none; } #new-products_block_right dt { padding:10px 0 0 0; font-weight:bold; font-size:12px; color:#333; } #new-products_block_right dd, #new-products_block_right dd a { color:#666; } #new-products_block_right dd { padding:0 0 10px 0; border-bottom:1px dotted #ccc; } #new-products_block_right dd.last_item {border:none;} #new-products_block_right dd a.lnk_more { padding-right: 10px; font-weight:bold; color:#0088cc; background:url(img/arrow_right_1.png) no-repeat 100% 4px; } #new-products_block_right p { padding:0; text-align:right; } #new-products_block_right p.title_block, #new-products_block_right h4 { padding:6px 11px; text-align:left; } #new-products_block_right .button_large { padding:0; border:none; background:none; color:#333; } #new-products_block_right .button_large:hover {text-decoration:underline} 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