How do I style Meteor's loginButton to not be a dropdown?

Question

I have seen this thread - How to style Meteor.js loginButtons? - and it doesn't quite answer my question. I would like to keep the loginButton styling, but simply not make it a dropdown.

Answer 1

Good question Charlie!

I wasn't able to get Accounts._loginButtonsSession.set('dropdownVisible', true); to work for me, so I had to override via CSS (this is Meteor 0.8 with bootstrap-3 and accounts-ui-bootstrap-3):

First I put an ID as a wrapper around loginButtons:

<div id="login-screen">
  {{> loginButtons}}
</div>

Then I added this to my CSS:

/* The login menu has to be set at a specific height and I chose to center mine. */

#login-screen .dropdown-menu {
  display: block;
  position: relative;
  height: 245px;
  margin-left: auto;
  margin-right: auto;
  float: none;
}

#login-screen #login-dropdown-list {
  display: block;
}

/* Hides the toggle that you click on */

#login-screen a.dropdown-toggle {
  display: none;
}

Because we wrapped the {{> loginButtons}} in an ID wrapper and override the CSS for that, the normal functionality of {{> loginButtons}} is preserved, so if you use {{> loginButtons}} again somewhere else on the page without the ID wrapper, the normal drop-down functionality is preserved.

Answer 2

What I did is to create my template (similar to the original ui package template) but not having the drop down in there. Then replace their template with my one. This seems to be the clearer solution. In short: 1. install https://github.com/aldeed/meteor-template-extension 2. create your template to replace the original one. Like:

<template name="My_loginButtonsLoggedOutDropdown">
    <div class='container'>
    <section class='panel'>
        <header class="panel-heading">
            <strong>Welcome</strong> 
        </header>
        {{> _loginButtonsLoggedOutAllServices}}
    </section>
    </div>
</template>

3. replace the original template with your one. In your client side java code call:

   Template.My_loginButtonsLoggedOutDropdown.replaces("_loginButtonsLoggedOutDropdown");

Some more details here: http://www.chaosstuff.com/2015/01/meteor-accounts-with-custom-login-form.html

Answer 3

You need to manually open the dropdown and hide its toggle. Assuming login is the template in which you use {{> loginButtons}}:

Template.login.rendered = function() {
  Accounts._loginButtonsSession.set('dropdownVisible', true);
  $("#login-sign-in-link").hide();
};

Note: This is the trick I've used for that several Meteor versions ago, it might need some tweaking for the current version.