Buy Now
Sign in

how to make the css selector of CF6 more "specific" ? (to avoid conflict)

flodariege , December 02 2018
Answered
F
flodariege
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
healyhatman
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.
Web developer at SkySpider.com.au
I don't work for ChronoEngine but I do accept donations paypal.me/healyhatman

DON'T COPY+PASTE FROM THE FORUMS! It adds hidden code-breaking format characters!
F
flodariege
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?
healyhatman
template CSS. Add to offending elements
Web developer at SkySpider.com.au
I don't work for ChronoEngine but I do accept donations paypal.me/healyhatman

DON'T COPY+PASTE FROM THE FORUMS! It adds hidden code-breaking format characters!
F
flodariege
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