- Statut : non résolu
- Ce sujet contient 15 réponses, 3 participants et a été mis à jour pour la dernière fois par
, le il y a 11 années et 11 mois.
-
Messages
-
Bonjour,
Ma configuration WP actuelle
– Version de WordPress : 3.5.1
– Version de PHP/MySQL : 5
– Thème utilisé :
– Extensions en place :
– Nom de l’hebergeur : OVH
– Adresse du site : http://caughtinmyweb.frProblème(s) rencontré(s) :
Bonjour à tous,
je viens solliciter votre aide car j’aimerais effectuer une modification particulière sur mon thème, mais je ne sais comment procéder.
Sur ma page d’accueil, les vignettes de mes articles sont au format carré et j’aimerais en fait qu’elles soient rondes, comme de petits hublots.
Quel code dois-je modifier sur mon thème et à quel niveau ?
Voici le morceau de code qui correspond aux vignettes actuelles :
.post-image span.overlay {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset;
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}Merci d’avance.
.post-content img, .et_pt_portfolio_image img {
border-radius: 50px 50px 50px 50px;
max-width: 100%;
}voila voila
et
.post-image span.overlay {
border-radius: 50px 50px 50px 50px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset;
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}Merci pour cette réponse complète et rapide !
Dois-je placer les deux morceaux de code l’un sous l’autre dans mon fichier CSS ?
Ca marche parfaitement, merci ! J’ai juste ajusté à 60% pour que ce soit bien rond.
Par contre comment puis-je ajouter un contour au cercle ? Une bordure en fait ?
Merci encore.
.post-content img, .et_pt_portfolio_image img {
border-radius: 60px 60px 60px 60px;
max-width: 100%;
border: #000 solid 3px;
}tu rajouter la ligne en rouge, pour la couleur c’est apres le # et la taille de la bordure 3px
Yep, pour la couleur et la taille je connaissais. 😉
Merci beaucoup pour ton aide et bonne soirée.
On peut locker le sujet !
Bon, en fait j’ia un souci, je ne souhaitais modifier que les vignettes de la page d’accueil mais avec ce code, même les images de mes articles sont affectés par la modification.
Comment puis-je éviter cela ? Merci.
ok ok
Rajoute une régle:
.post-image img {border-radius:60px;
border solid red 5px;}et modifie celle ci:
.post-image span.overlay {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset;
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
border-radius: 60px;}je pense que cela devrait fonctionner
si c’est uniqument en page d’acceui; tu dois pouvoir ajouter .home pour limiter à cette page, cela fera donc
.home .post-content img, .home .et_pt_portfolio_image img {
border: 3px solid #FF0000;
border-radius: 60px 60px 60px 60px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
max-width: 100%;
}.home .post-image span.overlay {
box-shadow: none;
}A tester 🙂
Merci Guy, ça fonctionne parfaitement comme ça !
Saurais-tu comment je peux appliquer la même propriété aux avatars dans les commentaires ?
Merci d’avance.
Toujours le même principe border-radius sur la classe ou la div qui contient l’image des avatar
Instal firebug pour Mozilla c’est pratique pour voir les éléments et le cas associés
C’est un peu la même chose, editer .avatar-box img pour ajouter les style qui vont bien
.avatar-box img {
border: 3px solid #F27B7E;
border-radius: 60px 60px 60px 60px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
display: block;
}mais ensuite, il faudra désactiver l’ombrage sur :
.avatar-overlay {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset;
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}en mettant en le mettant en commentaires
.avatar-overlay {
/* box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset; */
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
- Vous devez être connecté pour répondre à ce sujet.