Conversational form styling?
Does anyone know how to apply global custom CSS styles to all conversation forms? Specifically updating colors and a minor layout tweak.
If I use the "custom CSS" section on a specific form, the styles get applied fine. But when I use my snippet plugin, the conversational forms don't take the styling.
However, my snippet plugin does apply styles globally for regular forms, so I know it's not the CSS snippet itself (I did a lot of testing).
Jeff maybe try looking at the styles applied to the conversational form elements in your browser tools?
So you can confirm the styles are being loaded, and see if they're not being applied because of specificity issues.
Failing that, maybe check the network tab to be 100℅ sure the stylesheet is being loaded in the page
Jesse Benjamin wrong Jeff, lol
Jeff hahaha my bad, sorry!
Jesse Benjamin I've already done a lot of testing and looking the page source, which is why I finally came here to the community.
On conversational form previews & pages, extra stylesheets don't get loaded at all.
And when using the shortcode, the custom stylesheet is loaded on the page, but doesn't appear to apply in the conversational form's shortcode section.
But code put in the individual form's OWN custom CSS block works. It's pretty irritating, but it all points to conversational forms being implemented in way that doesn't have an obvious global style override option.
Jeffrey Young are you using the conversational frame head hook? These work for me either with a style tag or manually linking a stylesheet:
add_action('fluentform/conversational_frame_head', function() {
?>
<style>
* {
outline: 1px solid red;
}
</style>
<?php
}, 10, 0);
add_action('fluentform/conversational_frame_head', function() {
?>
<link rel='stylesheet' href='/path-to-your-styles.css' media='all' />
<?php
}, 10, 0);
It's in the docs here
Jesse Benjamin sigh. no. I didn't see that hook, and support didn't point me to it. I'll give a go. Thanks!