-
AuthorPosts
-
April 29, 2021 at 7:55 am #1297265
I’m using Enfold for the first time with Elementor as the page-builder and it’s working out pretty well, so far, but I am having a little issue with the forms. Enfold seems to dominate the form styling, so I can’t control the fields and fonts styling through the options provided in the Elementor form widget. I can handle that styling through custom css, but it’d be great if there’s some way I could disable or override that Enfold styling in a way that would let me control the styling via the Elementor widget — any idea how I might handle that? Thanks and let me know if you have any questions. The subscribe form I’m working on can be viewed in the popup and footer of https://westlacommons.wpengine.com/
May 1, 2021 at 1:07 pm #1297693Hey sky19er,
Did you try to disable the element in question under Enfold->Performance? Select to manually turn element off in the Disabling of template builder elements option.
Best regards,
RikardMay 2, 2021 at 4:15 am #1297757Good thought — and I was really hopeful that would work, but it doesn’t seem to, actually. I had it set to only load elements in use (which I guess, technically, should be ok, seeing as I’m not actually using that element, or any elements, since I’m not even using the Avia page-builder), and I switched to Manually load elements, with no elements enabled, but no luck — cleared the server cache; tested in various private windows, etc. Any other ideas? I can set up a copy of the site and give you access, if you want to have a look…?
May 4, 2021 at 5:07 am #1298140Hi,
Thanks for the update. So what exactly do you need to change in the form in the footer and lightbox?
Best regards,
RikardMay 4, 2021 at 7:36 am #1298178Well, it’s more of a general issue — the Form Widget in Elementor seems to be the only thing (at least the only thing I’ve run into so far) where the style options (font, field styling, etc.) don’t have any effect. Here are the rules I used to override Enfold’s styles for this site, but ideally we could somehow make it so the options available for these things in the Elementor Form Widget would work.
#top input[type="text"], #top input[type="input"], #top input[type="password"], #top input[type="email"], #top input[type="number"], #top input[type="url"], #top input[type="tel"], #top input[type="search"], #top textarea, #top select { border: none; padding: 8px 15px; font: 18px "Proxima Nova", Helvetica, sans-serif; color: #0e416b; background-color: rgba(255,255,255,0.33); border-radius: 3px; }
Thanks again and lmk if you have any other quesetions.
May 5, 2021 at 5:10 am #1298410Hi,
Thank you for the update.
You can deregister or dequeue the css > base.css file, which contains the base styling for the input fields, and register it back making sure that it loads before elementors’ dynamic styling for the widgets. Unfortunately, we are not that familiar with the plugin’s structure, so you will have to ask the plugin authors about it.
Best regards,
IsmaelSeptember 1, 2021 at 8:25 am #1319302Hey Ismael, I just realized I never replied to you here — partly because this sounds over my head, so I think I’ll let it slide, for now. But thanks as always for the reply and effort on your end. I’ll keep this in my back pocket in case I need to dig back into it. You can close this ticket for now, if you want.
September 2, 2021 at 9:24 am #1319460Hi,
No problem. The process of reloading the stylesheets is almost the same as what we suggested in this thread, but with css instead of js or script files.
// https://kriesi.at/support/topic/mobile-menu-accessiblity/#post-1318592
You will need the following functions and make use of the $deps (depends on) parameter.
// https://developer.wordpress.org/reference/functions/wp_dequeue_style/
// https://developer.wordpress.org/reference/functions/wp_enqueue_style/$deps (string[]) (Optional) An array of registered stylesheet handles this stylesheet depends on. Default value: array()
If a stylesheet depends on another file, it will load after that file. You just have to make sure that the base.css file is loaded before the elementors’ dynamic styling, so that it does not override the intended styles.
Best regards,
Ismael -
AuthorPosts
- The topic ‘Enfold forms styling overriding Elementor's form styling and options’ is closed to new replies.