Trying to use CSS on code

Hi @moreden21

I hope you’re doing fine today!

Yes, it is possible in most cases but may require use of some specific/precise CSS selectors.

It’s a bit difficult to say what exactly that would be without checking the form and the CSS itself so would you mind

1. sharing link(s) to page(s) with form(s) in question?
2. and sharing example CSS that doesn’t work for you
3. along with description of what/how it should be changing on the form(s)?

Kind regards,
Adam

Hi Adam @wpmudev-support8,

Thanks for the reply, actually I can’t provide any link because it’s a local project so I’m actually testing this kind of things for some internship
Anyway, so the thing is that I want to be able to change the general style for every form that I can make for example:
– This is the basic look of a Custom Form with pagination: https://imgur.com/i7QyUO3
– This is what I have made until now “overriding” the forminator style with my theme custom CSS: https://imgur.com/UAhrW3A
– And here are some examples of the coding I made to do this things:
https://imgur.com/yqgW73r, https://imgur.com/0MpN27v
This, as you can see, actually works but it only works for Form-Module-51 (and just with Plain Style specifically), if I create a new one as the ID (or basic style) changes it won’t work because ID won’t match.
If you can help me to solve this or have any idea of how to do it I’ll be very grateful.

Thanks in advance!

Hi @moreden21

Thanks for response!

You don’t need to use this part of selector (unless you actually want to apply CSS to specific form):

.forminator-ui#forminator-module-51.forminator-design-flat

The forminator-module-X (where X is a number) limits it to specific form and the forminator-design-flat class limits it to the “Flat” appearance/design style only.

So instead, you can use

.forminator-ui .forminator-pagination-steps .forminator-step .forminator-step-label

or just

.forminator-pagination-steps .forminator-step .forminator-step-label

and it should work for all the forms (any other form-related CSS should also be modified accordingly)

Have you tried that already?

Kind regards,
Adam

Thanks for the fast reply,

So I tried this before and that’s why I ended up trying with the ID to see if the Theme CSS overrides Form CSS because I thought it wasn’t doing it.
And if you change the code for something like this https://imgur.com/HaJUVPT, https://imgur.com/kmH1g7O
And the result is this: https://imgur.com/6EWaMfq
It loses all the style that was working before (in this case the black underline on hover and button styling), that’s the actual problem, on my point of view it should work but I don’t know if there is other way to maybe replace the code that generates the CSS form every form or just overriding it with the Theme it should work
Thanks in advance, Adam.

• This reply was modified 10 months, 4 weeks ago by moreden21.

Hi @moreden21

Thank you for response!

It’s a bit difficult to diagnose this without being able to check actual page with the form but based on your screenshots I noticed two things:

1. On this screenshot

View post on imgur.com

you are using nested selectors with amperstand (parent selector). This wouldn’t usually be parsed correctly by browser as it’s a thing/structure specific to SASS so, basically, needs to be passed through the SASS compiler (may it be “on the fly” solution built-in into theme or a tool that compiles CSS and outputs its result into a CSS file); Forminator does not support that.

2. Also, you may need to use “!important” property in some cases. What I mean is something like this:

margin:10px!important;

That’s not really an “elegant” solution and usually I wouldn’t recommend it as it would not be then easy/possible to override later with another CSS but in some cases it it necessary with Forminator forms.

Note though: I gave example related to margin but you’d need to inspect form elements first to make sure about which custom CSS rules are and which are not applied – and then only use taht for those that are not reflected on front-end.

Best regards,
Adam

Hi!,

Apologies on my examples, I had a mistake there, this is the correct example:
https://imgur.com/fI7itM6

So what you mentioned about the SASS compiler, the theme that I’m using has it so before when I compile the last instructions I show you where I used the specific form ID this worked when I compile the editing on the theme code, also I noticed that sometimes the !important tag worked but again, only when I specific form ID.
I understand this question is kinda specific and unclear but if there is a different solution rather than overriding it like this, it works for me.
Thanks again!

• This reply was modified 10 months, 4 weeks ago by Yui.
• This reply was modified 10 months, 4 weeks ago by moreden21.
• This reply was modified 10 months, 4 weeks ago by moreden21.

Hi @moreden21

Thanks for response!

If you do have SASS compiler with theme, that part should be fine so I think we can rule it out.

As for “important” tag, that actually may be necessary in some cases due to how form’s CSS works, being kinda “forced” – either with already existing “important” tags there (we are clearing that out gradually but there are “leftovers”) or by being modified via JS.

Yet, it should still be working fine even without form-specific selectors unless there already is some other custom CSS code that overrides it or your custom CSS is loaded “too early”. I mean, if there’s e.g. “clash” of rules the order in which they are specified would be related.

But all in all, yes – it is quite difficult to say more without being able to check the form/page in question to see what happens there (inspect elements/CSS and track down rules that are actually applied instead of your custom ones).

I understand that this is a local project but perhaps you’d be able to set some sort of staging/dev site which we could check? It doesn’t have to be all the same as your local one for as long as it has such a form and CSS added so we could see the issue happening there.

Would that be possible?

Best regards,
Adam

Hi @moreden21,

As we haven’t received any updates from you recently, I’ll proceed to mark this thread as resolved. However, if you have any further questions or require additional assistance, please don’t hesitate to contact us anytime!

Kind Regards,
Nebu John