Meteor Accounts - Login forms change HTML remove dropdown JS

Question

How do I modify Meteor's Accounts-ui to change the classes and the html tags rendered without re-writing all the accounts-ui logic? For example I'd like to remove the "dropdown" behavior and just display the form directly in my page. I read this answer but it doesn't go into detail - it just removes the default CSS. I'd like to go a bit deeper..

Answer 1

I figured this out for another answer, but thought I'd put it in here since it seems like a quicker way to get what you want.

Template.login.rendered = function()
{
    Accounts._loginButtonsSession.set('dropdownVisible', true);
};

(Template.login should be Template.yourTemplateWithLoginButtons)

Answer 2

Styling

Remove accounts-ui

meteor remove accounts-ui

Add accounts-ui-unstyled & less

meteor add accounts-ui-unstyled
meteor add less

Finally, add the following file to your project directory & edit it to your viewing pleasure

https://github.com/meteor/meteor/blob/master/packages/accounts-ui/login_buttons.less

More customization

You can edit the accounts-ui package and edit html & js without starting from scratch:

Remove the accounts-ui-unstyled package and add the stuff in the dir below (except package.js & accounts_ui_tests.js) to your project's client dir, add accounts-urls and edit it to fine tune it to your spec.

https://github.com/meteor/meteor/tree/master/packages/accounts-ui-unstyled

Until meteor gives us a way to specify load order

Rename the following files so they load in the correct order

1accounts_ui.js
2login_buttons.html
3login_buttons_single.html
4login_buttons_dropdown.html
5login_buttons_dialogs.html
6login_buttons_session.js
7login_buttons.js
8login_buttons_single.js
9login_buttons_dropdown.js
login_buttons_dialogs.js