Meteor.js loginButtonsのスタイル設定方法は？

Question

ドキュメントでは、デフォルトのログインボタンを実装するためにテンプレート{{> loginButtons}}を使用するように指定しています。

これに自分のスタイルを適用する最も良い方法は何ですか？

は
• は私のCSSファイルにスタイルを追加（？どのようにこれが行われることになる）新しいテンプレートを書き換え!important
• その他のマーク
• ？

Answer 1

これは、2つのアイデアの組み合わせを使用することができ判明します。 the accounts-ui packageに掘り下げた後、ファイルには.lessというファイルが1つだけ含まれていることがわかります。実際のテンプレートはaccounts-ui-unstyledに含まれており、プロジェクトにaccounts-uiを追加すると自動的に組み込まれます。

meteor remove accounts-ui 
meteor add accounts-ui-unstyled 

あなたは、あなたが選択したとしてスタイルすることができ、the raw HTMLが残されています。次のように

そのため、CSSを除去することができます。

Answer 2

独自のテンプレートを作成することで、より詳細なコントロールが可能になります。 、彼らはWebページ上でレンダリングされた後

<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あなたは「クラス」やログインボタンの「ID」を確認することができます。

あなたは「テンプレート」タグを使用してテンプレートを作成しますChrome上で "Inspect Element"を使用し、それらのクラスをCSSセレクタとして使用して、それに応じてスタイルを設定します。例えば

：

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

チェックアウトこのスクリーンキャストEventedMind - Customizing Login

Answer 4

htmlテンプレートをこのように作成します。あなたの好みに合わせてスタイルを設定してください。

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> 

あなたは今ではのようなテンプレートイベントでMeteor.loginWithPasswordを呼び出すことができます。

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('/'); 
      } 
     }); 
    } 
}); 

あなたにも登録用の別のフォームを作成することができます。

ただ、この[useraccounts流星パッケージ]（http://useraccounts.meteor.com/）は、様々な異なるスタイルとunstyled 1でありますAccounts.createUser(object, callback);