WordPressプラグイン「FrontEndPM」のデザインをモダンに変えてあげる

WordPressでユーザ同士がDMをすることを可能にする「FrontEndPM」だがデザインが残念すぎる。日本語も対応していない。

以下、デフォルトのスクショ

僕が実際に追加CSSで書いたものをまとめました。
参考にしてみてください。

受信ボックスのデザイン

こんな感じに変更できます。

ボーダーをシンプルにする

footer部にFrontEndPMという文字が入ってるのでdisplay:noneにしてあげる。

#fep-footer {
  display: none;
}

#fep-header {
  border: none;
}

#fep-content {
  margin-top: 40px;
  padding-top: 10px;
  border-bottom: none;
  border-right: none;
  border-left: none;
}

受信ボックスに余白をつけよう

.fep-table-rowは最初display:table-rowに設定されているので、display:blockに変更した後、paddingを各自お任せで設定しよう。私は10pxで統一してたので10px。

.fep-table-row {
  padding: 10px;
}

.fep-table > div {
  display: block;
}

アバターの右に余白

余白を右につける。importantに設定しているが、セレクタを詳しく記述して優先度をあげるとつけなくても良し。

.avatar.avatar-64 {
  margin-right: 30px !important;
}

セレクトをモダン化する

.fep-bulk-action > select,
.fep-filter > select {
    display: block;
    width: 100%;
    height: 45px;
    font-size: 14px;
    color: #555555;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

検索フォームのデザイン

デフォルトではこんな残念すぎる検索フォームですが、以下のコードで

.fep-directory-search-form-field,
input.input-text {
  width: 80% !important;
  height: 50px;
  font-size: 14px;
  color: #555555;
  border: 1px solid #ccc;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.fep-directory-search-form-submit {
    color: #fff;
    height: 50px;
    display: inline-block;
    font-weight: bold;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    padding: 0.71428571em 2.28571429em;
    font-size: 14px;
    line-height: 1;
    background-color: #315b9d;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

この通りに変身。

その他細かい修正

好みでカスタマイズしてほしい部分ですが、明らかに気になったのでこんな風に書きました！

.fep-form-field {
  margin: 20px 0;
}
.fep-label {
  font-size: 14px;
  margin-top: 20px;
}
button.fep-button {
  margin-left: 10px;
}