Customize FluentAuth Form and Emails
I am just about to replace Bricks forms by FluentAuth. However, there is no option to customize the forms. The site uses rounded red buttons but FluentAuth always shows blue rectangle buttons. Further, the emails contain a green button. And there is no option to change the magic login email at all. Or did I miss something?
I did some research just to figure out why I cannot override colors with custom CSS. The blue button color is injected via JS. Why??? It is almost not style-able. I really like FluentAuth and its features. It would help me a lot with a membership site where numerous users constantly forget their password and then are unable to reset it just to ask support how to log in again. The magic login solves this issue. And the logs help identify user issues. But if I cannot make the form the same CD/CI of the page, it is a dealbreaker.
Hey André Daus
I have earlier been checking into how to customize Fluent Auth and retested a moment ago. I tried the various CSS classes but was not able to style it.
I am checking in with support as I have plans to create a tutorial on how to style/customize Fluent Auth. So hopefully I will get some easy styling ideas from support that I can add into the tutorial. It should be easy to style the login or sign up page using CSS just like the standard WP login page.
Paal Joachim Romdahl I agree, it should be simple. Yet, it ain’t. Maybe, I am just overlooking something. The styling is not just about the form. Also the emails need tweaking. While the form usually has this ugly blue color, the emails have an even worse green colored button. Looking mainly for the magic login feature, there isn’t even a template for that email. If you find a solution, I’d appreciate you share it.
André Daus I am hoping to get the various customizations tips from support and post the comment I receive from support here. Then explore through a tutorial.
André Daus Hey Andre. I received feedback from support. I just need to go through it and test and then I will also add information here.
Well.....The lastest I received from support is that I have to modify the core files directly in Fluent Auth to get the modifications in place. That is not a good idea. I mentioned that customizing the buttons in the login/signup form should be a simple thing to do but it seems it is not.
Paal Joachim Romdahl I thought so already. Hence, there are two options. Creating a fork or a pull request. Since this is a free plugin the pull request seems the easiest.
André Daus A few days ago I made this Github issue: https://github.com/WPManageNinja/fluent-auth-client/issues/1
A PR sounds like the way to go. As it would be nice to be able to customize the current official Fluent Auth plugin.
Paal Joachim Romdahl OK. That is for the FluentAuth Client, not the main plugin. I was referring to FluentAuth (officially: fluent-security).
André Daus
I added the issue to the correct Github repo here: https://github.com/WPManageNinja/fluent-security/issues/64
I have an update.
This PHP code snippet works.
add_action('login_enqueue_scripts', function () {
if ( ! wp_style_is('fls-login-customizer', 'enqueued') && defined('FLUENT_AUTH_PLUGIN_URL') ) {
wp_enqueue_style(
'fls-login-customizer',
FLUENT_AUTH_PLUGIN_URL . 'dist/public/login_customizer.css',
[],
defined('FLUENT_AUTH_VERSION') ? FLUENT_AUTH_VERSION : null
);
}
$extra_css = '
.wp-core-ui .button-primary {
background-color: red !important;
border-color: red !important;
color: #fff;
text-decoration: none;
text-shadow: none;}
/Log In button style/
.fls_login_wrapper #fls_magic_submit, .fls_login_wrapper input#wp-submit{
background-color: red !important;
border-radius: 30px !important;
width: 150px !important;
}
/Magic Login Button Style/
.fls_login_wrapper .fls_magic_initial button.fls_magic_show_btn.magic_btn_secondary.button.button-primary.button-large{
background-color: red !important;
color: #00000 !important;
}
/Signup button style/
.fls_registration_wrapper .fls_registration_form #fls_submit, .fls_registration_wrapper .fls_registration_form #fls_verification_submit{
background-color: red !important;
}
';
wp_add_inline_style('fls-login-customizer', $extra_css);});
The code comes out here a bit strange in the forum. Anyhow it works and
I will create a tutorial for it.
Thanks. That does not work on my sites. Further, styling a form should not be hidden in a PHP function, but CSS only. There are way too much !important tags. Hence, this is just a duct-tape fix.
I am using builders for sites, not themes, and I rely heavily on CSS scripts. I can strip all the formatting from FluentForms (build-in switch) and use my custom CSS. The same should work for FluentAuth.
André Daus I will explore the code and very likely also remove the important tags as I prefer not to use these at all.
In general styling a form should be straightforward which this is not but it goes give an opportunity to use a PHP code snippet with CSS to style the built in login and registration forms.
I see what you mean. However, the plugin does not give us an opportunity to use a code snippet. That is Wordpress core functionality. You’re just overriding the CSS styles from FluentAuth. That is the reason you might need !important. If the specificity of the provided CSS is too high, the only way to circumvent it is using !important (except, if these use that tag, too). There are even more problems which are not just FluentAuth specific. Many plugins let you choose a color. However, in modern web design we use variables to specify values (like colors, sizes, fonts, etc.). Many plugins do not let us use variables at all. As a result, the best way would be to disable the CSS and let users/devs create their own CSS styles.
André Daus Please add additional comments here: https://github.com/WPManageNinja/fluent-security/issues/64
So that we have it in multiple places.