azer Posted November 12, 2018 Share Posted November 12, 2018 Comment faire pour qu'un élément CSS soit vide au milieu et qu'il ne reste que la bordure afin que la souris puisse interagir avec ce qu'il y a sous l'enrobage CSS ? J'ai essayé avec padding ou margin mais ça ne change rien. Il me faudrait qu'il ne reste qu'un cadre vide a l'interieur au lieu d'un carré plein. A l'origine c'est a la suite de ce topic pour mettre une bordure coloré au survole de la souris, la réponse apporté est un élément CSS qui recouvre toute la vignette. Le résultat visuel est bon mais ça bloque l'interaction avec la vignette produit. Merci pour toute réponse apportée. Link to comment Share on other sites More sharing options...
Performance Agency Posted November 13, 2018 Share Posted November 13, 2018 Bonjour, Lorsque je suis confronté à ce genre d'intégration, je fonctionne de la manière suivante : - Je rajoute une div .product_border qui englobe le produit, avec un padding de 2px admettons (la largeur de votre bordure). - Cette div est transparente - La div du produit est quant à elle blanche - Au survol, je passe .product_border en background avec la couleur souhaitée. Est ce que vous voyez ce que je veux dire? Link to comment Share on other sites More sharing options...
azer Posted November 13, 2018 Author Share Posted November 13, 2018 (edited) Je comprend le principe mais n'ayant jamais suivi la moindre formation dans le domaine de la programation je suis confronté a un manque d'acquis: Quel est le bon fichier .tpl a modifier (www\themes\classic\templates\catalog\_partials\product-cover-thumbnails.tpl ?) A quel niveau du code faut il mettre la nouvelle div ? dans quel blocname La classe .product_border générera automatiquement une bordure ou il faut attribuer un style CSS à cette classe dans le fichier custom.css ? C'est une piste très intéressante en tous cas de travailler sur le fichier tpl avec les possibilités de fonctionnement d'une div au lieu de surchargé le css, merci pour votre aide et si vous avez la réponse a un ou plus des trois points ci-dessus ce serait vraiment sympa. Edited November 13, 2018 by azer j'ai trouver un code, je voulais vous le soumettre mais le forum marche plus. Je réessaye demain. (see edit history) Link to comment Share on other sites More sharing options...
Performance Agency Posted November 14, 2018 Share Posted November 14, 2018 Le fichier a modifier est celui ci normalement : www\themes\classic\templates\catalog\_partials\miniatures\product.tpl il faut donc rajouter ton ouverture de div <div class="product-border"> ligne 27 avant <div class="thumbnail-container"> et mettre </div> ligne 109. La classe .product_border ne fera rien de particulier, il faudra ensuite dans ton theme.css par exemple, mettre le style associé et réajuster les autres éléments : .product-border{ background:#tacouleur; padding:2px; } 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