Forums

Hello,
​
I have two conflict in my brand new form under CF6 :
- one around the submit button : my template's CSS seems to interfere, and instead of the nice blue button, I get an awful grey little button...
- one around the checkboxes : here it's Flexicontent that seems to interfere, calling a background image behind the nice little toggle I normally see on the preview of my form (then there is something hiding between the toggle + the text label appears to be above the toogle, since it is taking in account the sixe of the background image from flexicontent...)
​
Here is the (temporary) link of the form : it is on a subdomain where I run my tests, until I find a solution.
​
http://30nov2018.rouchenergies.fr/devis-gratuit.html
​
I only have 10 days on trial (since my form is > 15 fields, I will have to buy CF6, but I won't pay for it if I'm not sure I can handle those cnflicts).
​
For me, but I am not a specialist, it looks like the css selectors are too generic, and so they also exist in other extensions like my template and Flexicontent.
​
Maybe the solution would be to change the css selector or add something (extra params ? clss ? container ?) in the fields concerned, under the designer tab ??
I tried to add a class to the button, but it did not work.
​
Any help would be very much apreciated🙂
​
Best regards,
​
Flo

From the look of it, the Semanti-UI selectors of Chronoforms aren't too generic, your template CSS is too specific.
​

#jsn-page .button

An id selector takes precedence over a class selector like .ui.button because it has higher specificity. https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
​
Not sure what you're going to be able to do to fix it, other than change template or add :not(.ui) to all your template css selectors.

Hello,
​
First, thank you for your response.
I totally agree.
But - sorry to bother you - I'm not sure to understand the trick you suggest (sorry, I'm not that good):
Where should I add :not(.ui) ?
- inside my template.css ?
+ and/or each time I use the button class in the html?
Is that correct?

Hey healyhatman🙂
​
I just added :not(.ui) to all occurences of 'button' (not, for example, link-button) inside template.css, and it works just fine!
Thank you so much🙂
​
On the hover lines, I added too, like this (I hope it si correct syntax... ??) :

.button:not(.ui):hover,
.button:not(.ui):active