Affichage "Nouveau" sur coté en haut à droite de l'image produits du product-list

[Cyrius91]

Bonjour,

 

Je suis sous PS 1.4.9 et je voulais mettre sur mes nouveaux produits l'affichage comme en PS 1.5 c'est a dire sur le coté haut du produit en biais.

 

 J'obtiens ceci:

exemple.jpg

 

en modifiant mon product_list.css de la sorte:

#product_list li .new {

display: inline-block;
position: relative;
top: 4px;
right:46px;
height: 13px;
font-size:8px;
color: #374853;
text-align: center;
text-transform: uppercase;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform:rotate(45deg);
-ms-transform: rotate(45deg);
background-color: #03DFFF

}

 

Auriez vous une idée afin que le bandeau s'arrête au bord de l'image?

 

Diminuer l'espace entre mon image et le nom de mon produit?

 

En vous remerciant.

[thomasharko]

Bonsoir,

 

Il faut reprendre le css du theme par defaut qui propose cette option

 

html

<a class="new-box" href="/1-product-en.html">
     <span class="new-label">New</span>
</a>

css

.new-box, .sale-box {
position: absolute;
top: -4px;
overflow: hidden;
height: 85px;
width: 85px;
text-align: center;
z-index: 0;
}

.new-label {
font: 700 14px/12px Arial, Helvetica, sans-serif;
color: #fff;
background: #6ad4ff;
text-transform: uppercase;
padding: 9px 0 7px;
text-shadow: 1px 1px rgba(0, 0, 0, 0.24);
width: 130px;
text-align: center;
display: block;
position: absolute;
left: -33px;
top: 16px;
z-index: 1;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}

[Cyrius91]

Bonjour et merci pour votre réponse.

 

Le thème par défaut que vous évoqué est celui de ps 1.5 je suppose.

Je vais m'en inspirer pour l'adapter à ma version 1.4.9.

Je vous remercie.

[Cyrius91]

Alors suite à tests avec ces données, j'ai le bandeau qui n'est pas bien disposé (je l'ai recadré) mais surtout j'ai le bandeau qui dépasse de l'image.

Une idée vers quoi je peux chercher...

Edited February 20, 2015 by Cyrius91 (see edit history)