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
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.
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.
#jsn-page .buttonAn 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?
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?
template CSS. Add to offending elements
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... ??) :
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
This topic is locked and no more replies can be posted.
