How to style Meteor.js loginButtons?

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;
}