Logo site et interaction non souhaité

[Bobelle]

Bonjour à la communauté,

Je souhaite intégrer un logo sur mon site. Rien de complexe jusque là.

Parallèlement, j'ai appliqué dans le head un code pour encadrer les photos :

<style type="text/css">
/*<![CDATA[*/

/* Ajouter un cadre arrondi aux images */

.j-imageSubtitle .cc-imagewrapper img {
padding: 9px;
background: #fff;
border: 2px solid #fecfe7;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
margin: 0px 0px;
}

/*]]>*/
</style>

Ce code agit également sur la zone logo et encadre la photo utilisée et c'est là mon soucis.

Merci pour votre attention et votre aide éventuelle.

[FredVig]

Il faut cibler différemment.
Si ".j-imageSubtitle .cc-imagewrapper img" inclus le logo, alors, prenez une suite de classes qui écarte le logo.
Et si ce n'est pas possible, prenez l'identifiant unique du contenant du logo et court-circuitez la modification :
utilisez :not
.item:not(p){ ... }
.item, ce sont vos classes ciblées, p, l'identifiant unique du logo (ou une classe s'il en a une de spécifique)

[Bobelle]

Merci pour cette réponse.

Après quelques manipulation hasardeuse, pourriez-vous me préciser :

Comment identifier les classes ciblées
Comment identifier l'identifiant unique
Comment écrire une suite de classe

Pour ce qui est du contenu des accolades j'ai compris.

Merci par avance

[FredVig]

C'est effectivement la bonne démarche de chercher à acquérir les connaissances nécessaires
Voyez la rubrique tutos de notre forum. (comment modifier le head, comment cibler etc.)
Vous avez Openclassroom qui est très bien fait aussi (apprendre l'html)
Ce sont des leçons qui prennent quelques heures avec des exercices

Il ne faut pas avoir peur d'essayer au hasard
faites juste des sauvegardes de vos modifications de codes pour revenir à une étape correcte le cas échéant.

Dans votre cas précis, vous devriez parvenir à un code du genre :
.j-imageSubtitle .cc-imagewrapper img:not(.identifiantDuLogo) {code déjà mentionné}

il doit exister d'autres façons de faire.

[Bobelle]

Merci pour ce cheminement.

Après avoir identifié l'ID du logo avec l'inspecteur, j'ai mis en place le code suivant :

<style type="text/css">
/*<![CDATA[*/

/* Desencadrer le logo */

.j-imageSubtitle .cc-imagewrapper img:not .cc-m-imagesubtitle-image-12138193927 {

padding: 9px;
background: #fff;
border: 2px solid #fecfe7;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
margin: 0px 0px;
}

/*]]>*/
</style>

Y'a t'il une erreur dans la saisie SVP ? car l'effet escompté n'est pas au RDV.

[FredVig]

il me semble qu'il faut des parenthèses après not, Je ne parviens pas à inspecter votre site pour essayer, qqchose bloque…

[Bobelle]

Bonjour,

Cela fonctionne :

.j-imageSubtitle .cc-imagewrapper img:not(#cc-m-imagesubtitle-image-12138193927){
padding: 9px;
background: #fff;
border: 2px solid #fecfe7;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
margin: 0px 0px;
}
/*]]>*/
</style>

[Contenu sponsorisé]