[RÉGLÉ] conflit de css entre mon template et celui de chronoform : comment contourner le pb ?

[FlodAriege]

Bonjour,

J'ai deux problèmes de conflit entre Chronoforms 6 et mon template JSN Boot / Flexicontent :

1) Le bouton

Les boutons de Chronoforms 6 sont normalement assez basiques, mais bien visibles (bleu, plat, simple, nickel).

Mais quelque chose (probablement le nom de la classe : button blue, trop commun) fait que le css de l'extension n'arrive pas à prendre le pas sur le css de mon template, et les deux se mélangent pour donner un affreux bouton tout gris et tout petit...

J'ai passé une grande partie de mon dimanche à chercher le moyen de contourner le problème, mais je me heurte à mon incompétence...

Je voudrais que le css de mon bouton de formulaire soit le suivant :

.ui.blue.button {
    background-color: #4286f5; /* Notre bleu */
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    margin: 4px 2px;
    cursor: pointer;
    padding: 24px 16px;
    border-radius: 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}
.ui.blue.button:hover {
    background-color: white;
    color: black;
    border: 2px solid #4286f5;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

(dans lequel j'ai mis ui;blue;button parce que j'ai l'impression que c'est ce qui est appelé, mais je n'en suis vraiment pas sure)

Voici la page du sous-domaine sur lequel je fais le test :
(lien supprimé)

J'ai aussi essayé d'éplucher le css de Chronoforms, mais c'est un machin minifié parfaitement illisible pour moi.

2 / les cases à cocher "toggle"

Tant que je suis en Preview dans l'extension côté back office, tout s'affiche nickel (comme le bouton d'ailleurs).

Malheureusement, dès que je passe sur le site, quelque chose met le bazar et fait se chevaucher le texte (label) des cases à cocher et la case elle-même.

Cette fois il semble que ce soit Flexicontent qui met le bazar car quand j'inspecte les toggles, je vois que le code appelle un fichier image de Flexicontent qui s'appelle checks2.png, ... et qui ressemble à ça :
(ah ben non, pas moyen d'uploader une image, une histoire d'extension de fichier)
Enfin bon, je vais vous la décrire cette image :
c'est un sprite vertical de 4 types de cases à cocher.
Et en effet à bien y regarder on devine qu'il y a une image cachée derrière le toggle...

Ce qui est bizarre, c'est que dans le preview, il n'est fait appel à aucun fichier image.


Est-ce qu'un des super spécialistes en CSS ici pourrait m'aider à remettre de l'ordre dans ce bazar ?
PhilJ ? Lomart ? Lefabdu51 ?

Merci infiniment d'avance pour vos lumières, là, moi, je suis au bout de mes possibilités...

Bonne nuit.

Flo



EDIT 03/12:
J'ai posé la question sur le forum Chronoforms, et ils trouvent (moi aussi mais bon) que les sélecteurs css de mon template sont vraiment trop génériques :

#jsn-page .button On me dit aussi qu'un sélecteur d'ID (le # j'imagine ?) prend le pas sur un sélecteur de class tel que .ui.button
Et qu'il n'y a guère de solution à part peut-être : (je le laisse en anglais de peur de faire un contresens) :

add :not(.ui) to all your template css selectors.

Alors, j'ai donc une nouvelle question :
Où pensez-vous que je doive ajouter ce :not(.ui) ?
--> dans le template.css ?
--> et/ou à chaque fois que mon html appelle la classe button de mon template ??

Là, j'en suis à soupeser ce qui va me demander le plus de boulot : changer de template ou modifier le css de mon template ...


EDIT 05/12:

J'ai ajouté un :not(ui) à la classe button de mon template
et j'ai commenté les lignes du template de FC qui me posaient problème.
Allez hop, ciao, problème réglé.


Note pour moi-même : penser à supprimer le lien (temporaire) quand je passerai la discussion en réglé: DONE