Jump to content

Vider l'interieur d'un élément CSS. Est ce possible ?


azer

Recommended Posts

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 ?

5be9dc4252d5b_Sanstitre.jpg.beeaddbcc4b1b530911f28dd9a89fe28.jpg

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

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

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 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

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

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...