Style AE Connect with Custom CSS

Updated 5 days ago by Jeff Mitchell

This is an advanced set up for AE Connect. Find the basics here.

You can completely customize your AE Connect signup and login forms using your own CSS.

If you don't know what CSS is or how it works, we recommend that you contact a web developer and have them implement any changes you want.

Default Styles and Bootstrap

By default, AE Connect uses a pop-up modal window that uses Bootstrap. In the image below, you can see the default styles:

Inline CSS, External Stylesheets, and flow_css

Your Sign in button or individual service icons can be styled using inline styles or by linking to an external stylesheet, as you would with the rest of your website's CSS.

However, if you wish to re-style the AE Connect widget itself, you will need to load in your custom stylesheet using the AE JS setting flow_css. You can learn more about how to use AE JS settings from the AE JS Settings Reference.

flow_css Example

If you wanted to remove the social icons from next to each active service in the AE Connect widget, you could do so by creating your own stylesheet that overrides the CSS rules that are set by default.

Once you have created a stylesheet and have it at an accessible URL on your domain, you can use the AE JS framework's flow_csssetting to load in the new CSS:

function AEJSReady(aeJS) {
            globalAEJS = aeJS;
            aeJS.settings['auth_window'] = true;
            aeJS.settings['flow_css'] = '<a href="" rel="nofollow noopener noreferrer" target="_blank"></a>';

Custom CSS Examples

For examples of actual AE Connect widgets using custom CSS, see the sites for Mumford and Sons and Gwen Stefani.

How did we do?