Aide Pour Personnalisation De Couleurs Bandeaux Produits

[Whizette]

Bonjour a tous,

 

Je suis débutante en prestashop et aussi en CSS mais j'essaie petit à petit de me dépatouiller afin de personnaliser un peu mon thème de base presta.

 

Je recherche 2 informations que je n'ai pas trouvé précisemment sur le net :

 

1) Puis-je modifier la couleur des bouton "ajouter au panier" et du bandeau "nouveau" sur mes produits ? Actuellement ceux-ci sont bleus et je souhaite les modifier par du rose. Si ces attributs sont des images, comment faire pour les changer ?

 

2) J'ai créé des catégories de produits et inséré une image pour les catégories et malheureusement, cela donne un aspect bizarre lorsque je clique dessus, l'image est positionnée au milieu du texte dans la bannière en haut : http://costantini-nailartist.com/index.php?id_category=14&controller=category&id_lang=1 que dois-je modifier pour que l'image soit positionnée joliment ?

 

Merci beaucoup pour votre aide et d'avance, une bonne année.

[00000000000000]

Bonjour,

Pour le point 1), en utilisant Firebug, j'ai trouvé les lignes qu'il faut modifier :

Pour le bandeau Nouveau :

fichier global.css : ligne 6322 (dans .new-label::before, il faudra modifier le code couleur du border-color #21a3d8)

fichier global.css : ligne 6336 (dans .new-label::after, il faudra modifier le code couleur du border-color #21a3d8)

fichier global.css : ligne 635 (dans .new-label, il faudra modifier le code couleur du background #6ad4ff)

 

Pour le bouton Ajouter au panier (celui du listing produits) :

fichier global.css : ligne 6142 (modifier les codes couleurs #009ad0, #007ab7 et #06b2e6)

.button.ajax_add_to_cart_button span {

    background: #009ad0 linear-gradient(to bottom, #009ad0 0%, #007ab7 100%) repeat-x scroll 0 0;
    border: 1px solid #06b2e6;
    display: block;
    padding: 10px 14px;

Pour le bouton Ajouter au panier (celui de la fiche produit) :

fichier global.css : ligne 443 (modifier les codes couleurs #009ad0, #007ab7, #0079b6, #006fa8 et #012740

.box-info-product .exclusive {

    background-image: linear-gradient(#009ad0, #007ab7);
    background-size: 100% auto;
    border-color: #0079b6 #006fa8 #012740;
    border-radius: 5px;
    border-style: solid;
    border-width: 1px;
    display: block;
    padding: 0;
    position: relative;

Et dans le même fichier ligne 461, modifier les codes couleurs #06b2e6 et #015883

.box-info-product .exclusive::before {

    border: 1px solid #06b2e6;
    border-radius: 5px 0 0 5px;
    bottom: 0;
    color: #fff;
    content: "";
    font-family: "FontAwesome";
    font-size: 25px;
    left: 0;
    line-height: 47px;
    position: absolute;
    text-align: center;
    text-shadow: 0 1px #015883;
    top: 0;
    width: 51px;
    z-index: 2;

Pour obtenir le code couleur, voici un site qui pourrait vous aider : http://www.code-couleur.com/

Cordialement,

David

Edited December 29, 2015 by Pause bentô (see edit history)

[Whizette]

oh c'est génial merci je vais essayer cela ce weekend !

[Whizette]

Rebonjour !

 

Alors j'ai trouvé pour le bandeau "new" et le Add to Cart de la page principale, par contre impossible de trouver .box-info-product

 

tout ce que j'ai avec un code .box et produit c'est ca et il n'y a pas de couleurs de background à modifier :

 

.box {
  background: #fbfbfb;
  border: 1px solid #d6d4d4;
  padding: 14px 18px 13px;
  margin: 0 0 30px 0;
  line-height: 23px; }
  .box p {
    margin-bottom: 0; }
  .box.box-small {
    padding: 9px 10px 9px 20px; }
    .box.box-small .dark {
      padding-top: 10px;
      padding-right: 20px;
      margin-bottom: 0;
      width: auto; }

.page-product-box {
  padding-bottom: 10px; }

.product-box {
  width: 178px;
  float: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }
  .product-box .product-image {
    border: 1px solid #d6d4d4;
    background: white;
    padding: 5px;
    display: block;
    margin-bottom: 11px; }
    .product-box .product-image img {
      max-width: 100%;
      width: 100%;
      height: auto; }
 

donc je ne sais pas si j'ai fais une erreur ? Merci

Edited January 1, 2016 by Whizette (see edit history)

[00000000000000]

Bonjour,

Si vous ne trouvez pas ces lignes, essayez plutôt une recherche avec les codes couleurs (fonction Rechercher dans le logicile Notepad++). 

Cordialement,

David