How to style Meteor.js loginButtons? - meteor

Question

The docs specify to use the template {{> loginButtons}} to implement the default login buttons.
What is the best way to apply my own styles to this?
Rewrite a new template (how would this be done?)
Add styles to my CSS files marked !important
Other?

Answer 1

It turns out a combination of the two ideas can be used. After delving into the accounts-ui package, it turns out that it contains only one .less file. The actual template is included in accounts-ui-unstyled, which is automatically included when accounts-ui is added to a meteor project.
Hence, the CSS can be removed as follows:
meteor remove accounts-ui
meteor add accounts-ui-unstyled
You are then left with the raw HTML, which can be styled as you choose.

Answer 2

Creating your own templates would definitely give you more control.
You create a template by using the "template" tag:
<template name="player">
<div class="player {{selected}}">
<span class="name">{{name}}</span>
<span class="score">{{score}}</span>
<span class="wins"> {{wins}} </span>
<span class="losses"> {{loss}} </span>
</div>
</template>
OR You can check the "classes" or the "id" of the login buttons after they are rendered on a webpage, using "Inspect Element" on Chrome, And the use those classes as CSS selectors to style them accordingly.
For example:
HTML:
//The login button has a class of loginButton
<button class="loginButton"> Login! </button>
CSS:
#Then you can Have a style for the login button as:
.loginButton{
width: 100px;
background-color: cyan;
}

Answer 3

Create your own html template similar to this below. Style it to your taste.
meteor add accounts-password accounts-ui
<template name="login">
<form class="login-form">
<div class="panel panel-default">
<div class="panel-heading">
<h3>Login</h3>
</div>
<div class="panel-body">
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" id="email" placeholder="Email address">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" id="password" placeholder="password">
</div>
</div>
<div class="panel-footer">
<button type="submit" class="btn btn-danger btn-lg">Login</button>
</div>
</div>
</form>
</template>
You can now call Meteor.loginWithPassword in the template event like so:
Template.login.events({
'submit .login-form': function(e) {
e.preventDefault();
var email = e.target.email.value;
var password = e.target.password.value;
Meteor.loginWithPassword(email, password,function(error){
if(error) {
//do something if error occurred or
}else{
FlowRouter.go('/');
}
});
}
});
You can create another form for registration as well.
Just call Accounts.createUser(object, callback);