Jump to content

Changer le couleur du bandeau PROMO


Recommended Posts

Bonjour

 

Je cherche mais ne trouve pas de réponse à cette question qui doit être très facile à répondre.

Lorsque je mets PROMO dans ma fiche produit, la bandeau s'affiche ROUGE sur le produit.

Je vends des fleurs, c'est pas top comme couleur.

Donc ma question est : comment changer facilement la couleur de ce bandeau ?

 

Je gère assez bien les paramètres PRESTASHOP, mais je ne maîtrise ni HTML, ni CSS etc ...

 

Je sais aller dans FIleFILLA mais après ça devient difficile. 

Par exemple, je vois en réponse des listes de code HTML, mais je ne saurais pas où les insérer.

Donc soyez sympa, s'il y a du code à modifier, soyez svp précis en indiquant le code avant et le code après pour que je puisse me repérer.

 

J'utilise le thème gratuit de PRESTASHOP;

 

Merci à vous et à votre grand coeur.

 

Ralf

Link to comment
Share on other sites

Bonsoir,

Je ne suis pas un pro au contraire loin de là mais à priori c'est comme pour changer les couleurs de boutons ou des bandeaux

Je vais une recherche avec firebug pour examiner l'élément que je veux changer .il indique la couleur et le chemin du fichier

En l’occurrence ce doit être sur le théme css dont le chemin est ci dessous 

theme/ classic/asset/ css/ theme.css

Une fois le fichier ouvert dans file zila par exemple, vous rechercher le code couleur en question et vous le changer avec celui que vous voulez et vous enregistrer

Il faut également vider le cache et normalement les couleurs sont modifiées

Link to comment
Share on other sites

super une url pour essayer de regarder la demande et ... ben rien puisque votre demande concerne les produits en promotions et qu'il n'y a aucune pormotion sur le site.

Donc on va encore expliquer comment faire vous même.

ouvert votre navigateur préféré, rendez-vous sur votre site et définissez un produit en promotion afin de faire apparaitre le bandeau que vous souhaitez modifier.

Clique droit sur le bandeau, Examiner l'élément puis dans la nouvelle section ouverte par votre navigateur affichant le code html de votre page et les données css associées vous pouvez trouver le code à changer, le tester pour proposer un nouveau code et par la suite le mettre dans le fichier custom.css opour qu'il soit pris en compte après avoir vidé le cache.

Link to comment
Share on other sites

Merci de votre aide, et désolé si je ne suis pas assez précis.

 

Voilà ce que ça donne en indiquant Promo sur ma fiche produit. Rouge c'est pas top pour des fleurs

 

image.png.f2c3fed8a95e6603e1e99ad7a733183f.png

 

Voici le code HTML que j'ai glané en faisant ce que vous m'avez indiqué

<!-- /Block search module TOP -->

          <div class="clearfix"></div>
        </div>
      </div>
      <div id="mobile_top_menu_wrapper" class="row hidden-md-up" style="display:none;">
        <div class="js-top-menu mobile" id="_mobile_top_menu"></div>
        <div class="js-top-menu-bottom">
          <div id="_mobile_currency_selector"></div>
          <div id="_mobile_language_selector"></div>
          <div id="_mobile_contact_link"></div>
        </div>
      </div>
    </div>
  </div>
  

        
      </header>

      
        
<aside id="notifications">
  <div class="container">
    
    
    
      </div>
</aside>
      

      <section id="wrapper">
        
        <div class="container">
          
            <nav data-depth="3" class="breadcrumb hidden-sm-down">
  <ol itemscope itemtype="http://schema.org/BreadcrumbList">
    
              
          <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
            <a itemprop="item" href="https://victorhugofleurs.fr/">
              <span itemprop="name">Accueil</span>
            </a>
            <meta itemprop="position" content="1">
          </li>
        
              
          <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
            <a itemprop="item" href="https://victorhugofleurs.fr/10-bouquets">
              <span itemprop="name">BOUQUETS</span>
            </a>
            <meta itemprop="position" content="2">
          </li>
        
              
          <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
            <a itemprop="item" href="https://victorhugofleurs.fr/bouquets/61-356-bouquet-champetre.html#/taille-premium">
              <span itemprop="name">Bouquet champêtre</span>
            </a>
            <meta itemprop="position" content="3">
          </li>
        
          
  </ol>
</nav>
          

          

          
  <div id="content-wrapper">
    
    

  <section id="main" itemscope itemtype="https://schema.org/Product">
    <meta itemprop="url" content="https://victorhugofleurs.fr/bouquets/61-356-bouquet-champetre.html#/2-taille-premium">

    <div class="row">
      <div class="col-md-6">
        
          <section class="page-content" id="content">
            
              
                <ul class="product-flags">
                                      <li class="product-flag on-sale">Promo !</li>
                                  </ul>
              

              
                <div class="images-container">
  
    <div class="product-cover">
              <img class="js-qv-product-cover" src="https://victorhugofleurs.fr/433-large_default/bouquet-champetre.jpg" alt="" title="" style="width:100%;" itemprop="image">
        <div class="layer hidden-sm-down" data-toggle="modal" data-target="#product-modal">
          <i class="material-icons zoom-in">&#xE8FF;</i>
        </div>
          </div>
  

  
    <div class="js-qv-mask mask">
      <ul class="product-images js-qv-product-images">
                  <li class="thumb-container">
            <img
              class="thumb js-thumb  selected "
              data-image-medium-src="https://victorhugofleurs.fr/433-medium_default/bouquet-champetre.jpg"
              data-image-large-src="https://victorhugofleurs.fr/433-large_default/bouquet-champetre.jpg"
              src="https://victorhugofleurs.fr/433-home_default/bouquet-champetre.jpg"
              alt=""
              title=""
              width="100"
              itemprop="image"
            >
          </li>
                  <li class="thumb-container">
            <img
              class="thumb js-thumb "
              data-image-medium-src="https://victorhugofleurs.fr/434-medium_default/bouquet-champetre.jpg"
              data-image-large-src="https://victorhugofleurs.fr/434-large_default/bouquet-champetre.jpg"
              src="https://victorhugofleurs.fr/434-home_default/bouquet-champetre.jpg"
              alt=""
              title=""
              width="100"
              itemprop="image"
            >
          </li>
              </ul>
    </div>
  
</div>

              
              <div class="scroll-box-arrows">
                <i class="material-icons left">&#xE314;</i>
                <i class="material-icons right">&#xE315;</i>
              </div>

            
          </section>
        
        </div>
        <div class="col-md-6">
          
            
              <h1 class="h1" itemprop="name">Bouquet champêtre</h1>
            
          
          
              <div class="product-prices">
    
          

    
      <div
        class="product-price h5 "
        itemprop="offers"
        itemscope
        itemtype="https://schema.org/Offer"
      >
        <link itemprop="availability" href="https://schema.org/PreOrder"/>
        <meta itemprop="priceCurrency" content="EUR">

        <div class="current-price">
          <span itemprop="price" content="45">45,00 €</span>

                  </div>

        
                  
      </div>
    

    
          

    
          

    
          

    

    <div class="tax-shipping-delivery-label">
              TTC
            
      
                        </div>
  </div>
          

          <div class="product-information">
            
              <div id="product-description-short-61" itemprop="description"><h3></h3><p class="MsoNormal"><span style="font-size:8pt;font-family:Verdana;">Ce bouquet
est proposé en différentes Tailles : <b>Premium – Luxe</b></span></p><p><b></b></p><b></b><p><br /></p><p><br /></p><p><br /></p><p><em>Vous avez des questions, souhaitez quelques précisions, ou quelques modifications, </em><em>n'hésitez pas : 05 47 44 14 24 </em></p></div>
            

                          
                <section class="product-customization">
      <div class="card card-block">
      <p class="h4 card-title">Personnalisation</p>
      IMPÉRATIF : Renseignez les CHAMPS (Requis/Option), ENREGISTREZ

      
        <form method="post" action="https://victorhugofleurs.fr/bouquets/61-356-bouquet-champetre.html#/2-taille-premium" enctype="multipart/form-data">
          <ul class="clearfix">
                          <li class="product-customization-item">
                <label> -- Indiquez la DATE et L&#039;HEURE de retrait ou de livraison (Requis)</label>
                                  <textarea placeholder="Votre message ici" class="product-message" maxlength="250"  required  name="textField110"></textarea>
                  <small class="float-xs-right">250 caractères max</small>
                                                </li>
                          <li class="product-customization-item">
                <label> -- Si LIVRAISON À UN TIERS, son ADRESSE et son N° de tél (MOBILE, Fixe)</label>
                                  <textarea placeholder="Votre message ici" class="product-message" maxlength="250"  name="textField111"></textarea>
                  <small class="float-xs-right">250 caractères max</small>
                                                </li>
                          <li class="product-customization-item">
                <label> -- Un MESSAGE ? c&#039;est ici  (Optionnel)</label>
                                  <textarea placeholder="Votre message ici" class="product-message" maxlength="250"  name="textField112"></textarea>
                  <small class="float-xs-right">250 caractères max</small>
                                                </li>
                      </ul>
          <div class="clearfix">
            <button class="btn btn-primary float-xs-right" type="submit" name="submitCustomizedData">Enregistrer la personnalisation</button>
          </div>
        </form>
      

    </div>
  </section>
              

 

Maintenant, svp, où dois je aller pour modifier ça et que dois-je faire exactement.

 

Je sais je suis nul, mais bon .... je compte sur vous tous.

 

Cordialement

 

Lurdes

Link to comment
Share on other sites

fichier custom.css

ajoutez ceci

.product-flags li.product-flag.on-sale {
	background: #5db16e;
}

Mais bon, dans votre cas je ne suis même pas certain que cela fonctionne, je n'ai pas la moindre idée de la version de PrestaShop et du template classic que vous utilisez car nous n'avons absolument pas le même code.

En tout cas sur le template classic installé sur ma version de test cela fonctionne parfaitement.

image.png.63cf26c2cd2aa3993eeb458df0e5a7fa.png

Mais bo,n si vous souhaitez quelque chose de personnalisé vous pouvez toujours me contacter en privée pour que je vous propose mes services professionnels.

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...