Osclassのログイン画面をカスタマイズ

Osclassのログイン画面カスタマイズ

Osclassの管理ページログイン画面です。これ、無性に修正したくなりませんか?WordPressのログイン画面では感じたことの無い違和感が、Osclassのそれにはあるのです。

制作費をいただいてお客様に納品する場合には、このままの状態でいいとは思えません。

そんなわけで、Osclassのログイン画面のカスタマイズ方法を紹介いたします。コアファイルをいじりますので、必ずバックアップは取っておいてください。

スポンサーリンク

Osclassのロゴを削除する

まずは、やたらと主張してくるOsclassのロゴを取り除きましょう。ロゴには公式サイトへのリンクも貼ってあります。ますます消したくなってしまいますね。

編集するファイルは、

(Osclassのルートディレクトリ)/oc-admin/gui/login.php

です。

<h1>
  <a href="<?php echo View::newInstance()->_get('login_admin_url'); ?>" title="<?php echo View::newInstance()->_get('login_admin_title'); ?>">
    <img src="<?php echo View::newInstance()->_get('login_admin_image'); ?>" title="<?php echo View::newInstance()->_get('login_admin_title'); ?>" alt="<?php echo View::newInstance()->_get('login_admin_title'); ?>"/>
  </a>
</h1>

上記部分(30行目辺り)を編集します。h1タグの中身をとりあえず削除します。

<h1>
  WEB工房しずおか専用システム
</h1>

仮に、このような感じにします。すると、

Osclassログイン画面カスタマイズ

Osclassのロゴとリンクはきれいに取り除かれました。しかし、まだまだイケていません。ログイン情報入力欄が右に片寄ってしまっていますし、「Password」のプレースホルダーが意味不明にはみ出してしまっています。なぜ、こんな状態でリリースできているのかが謎すぎます。

すべてを中央寄せにする

続いてはCSSを編集します。編集するファイルは、

(Osclassのルートディレクトリ)/oc-admin/style/backoffice_login.css

です。

ファイルを開き、最下部に以下のコードを加えます。

#login h1{
    float: none;
    width: auto;
    height: auto;
    margin-top: 0;
    position: static;
}
form{
    padding-left: 0;
}
.submit{
    position: static; 
    width: auto;
    height: auto;
    float: none;
}
.submit input{
    position: static;
    margin-top: 10px;
    float: none;
}
.forgetmenot{
    float: none;
    margin: 0 auto;
}

するとどうでしょう。

Osclassのログイン画面カスタマイズ

レイアウトが美しくなりました。

プレースホルダ―を消す

最後に、あのどうしようもない「Password」を削除し、仕上げに掛かります。

<p>
    <label for="user_login">
        <span><?php _e('Username'); ?></span>
        <input type="text" name="user" id="user_login" class="input" value="<?php if( defined('DEMO') ){ echo 'admin'; } ?>" size="20"/>
    </label>
</p>
<p>
    <label for="user_pass">
        <span><?php _e('Password'); ?></span>
        <input type="password" name="password" id="user_pass" class="input" value="<?php if( defined('DEMO') ) { echo 'admin'; }?>" size="20" autocomplete="off"/>
    </label>
</p>

この部分を、以下に置き換えます。

<p>
    ユーザー名
</p>
<p>
    <label for="user_login">
        <input type="text" name="user" id="user_login" class="input" value="<?php if( defined('DEMO') ){ echo 'admin'; } ?>" size="20"/>
    </label>
</p>
<p>
    パスワード
</p>
<p>
    <label for="user_pass">
        <input type="password" name="password" id="user_pass" class="input" value="<?php if( defined('DEMO') ) { echo 'admin'; }?>" size="20" autocomplete="off"/>
    </label>
</p>

その結果、こんな風になります。
Osclassログイン画面カスタマイズ

CSSなどを更に編集すれば、自分の思い通りのデザインにすることができますね。

まとめ

気にしなければ、どうってことない箇所なのですが、気になる人は多いと思います。
簡単にできる修正なので、スッキリとしたOsclassのログイン画面を手に入れましょう!

コメント