Reordering login form components

Question

I am using the very helpful hybridAuth module to allow people to login with their social media accounts.

However, the login form shows up as shown below:

Looks a bit confusing, doesn't it?

I want to move the social media login button either to the top or bottom and create distinction with the actual login form

The form structure displayed at the top of the page is from hook_form_alter but I saw no obvious way to manipulate the form to achieve the desired effect.

I implemented the following code in an attempt to get my hook_form_alter to execute after hybridAuths' and perhaps find a way to reorder the form:

function mymodule_module_implements_alter(&$implementations, $hook){
    if($hook == 'form_alter '){
        dsm($hook, 'Hook');
        dsm($implementations, 'Implementations - form-alter');

        $group = $implementations['mymodule'];
        unset($implementations['mymodule']);
        $implementations['mymodule'] = $group;

        dsm($implementations, 'Implementations #2 - form-alter');
    }
}

However, my debug dsm code does not show up on my user/login page even though there is a form and hook_form_alter does respond to it on the same page.

Can anyone suggest something that might help, please?

Answer 1

You can alter the form and check ['#weight'] for reordering form element.

Answer 2

HybridAuth module can make the block for this icons then you can place that icons block top of the main content block. it will show top of the login form