Buy Now
Sign in

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

flodariege , December 02 2018, 21:31
F
flodariege 48
December 02 2018, 21:31 #381965
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 7
December 03 2018, 00:29 #381970
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 DO NOT work for ChronoEngine!
Donations: paypal.me/healyhatman
Professional Work: kamron@skyspider.com.au
Custom CF / CC Plugins and Extensions: skyspider.com.au/store
F
flodariege 48
December 03 2018, 17:05 #381981
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 7
December 03 2018, 20:31 #381983
 1
 Answer
template CSS. Add to offending elements
Web developer at SkySpider.com.au - I DO NOT work for ChronoEngine!
Donations: paypal.me/healyhatman
Professional Work: kamron@skyspider.com.au
Custom CF / CC Plugins and Extensions: skyspider.com.au/store
F
flodariege 48
December 05 2018, 21:11 #382029
 1
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