Once you've set up your AE JS and social services it's possible to completely restyle your social sign in widget.

On the page styles - eg. your "sign in" button or individual service icons - can be styled with regular inline or external stylesheets as you would with the rest of your website styles.

For styling your actual AE Sign in widget, however, you'll need to load in a custom stylesheet with the AE JS Settings 'flow_css' setting in order to ensure the correct order of operations for loading in styles. The setting accepts an absolute url to an external stylesheet of your choice.

Here's an example that removes all service icons from the widget:

function AEJSReady(aeJS) {
      globalAEJS = aeJS;

      aeJS.settings['auth_window'] = true;

      aeJS.settings['flow_css'] =            'https://developer.theappreciationengine.com/themes/aedeveloper10/css/test.css';

};

Before:

After:

Using the flow_css setting you are completely free to re-style your AE JS sign in popup to match the styles of your site.

Some examples:

http://www.mumfordandsons.com/

https://www.gwenstefani.com/

Full AE JS Settings reference list:
http://support.appreciationengine.com/developer-info/ae-js/2-ae-js-settings

Did this answer your question?