[shone]

いつもお世話になっております。

 

要望かカスタマイズに関する質問か迷ったのですが…

↓の過去トピックにもありますように、snow monkey formsのボタンのデザインをデフォルトの白（グレー？）ではなく、通常のボタンデザインと統一したいのですが、今後設定画面に機能追加する予定はございますでしょうか？

Snow Monkey Formsのボタンデザインについて

タグ: Snow Monkey Forms このトピックには2件の返信、2人の参加者があり、最後にT…

snow-monkey.2inc.org

単純にボタンのカラーを変更するのであればCSSに記述するだけでも良いのですが、たとえばテーマでアクセントカラーを設定したときにformsのほうでも自動で反映されたり、formsの設定画面で自由にカラーを変更できるようになるのであればそのほうが良いのかと思いまして…いかがでしょうか？

もしくはCSS等でアクセントカラーと統一する（既存のボタンデザインと統一する）スマートな記述方法がありましたらご教示いただけますと幸いです。

何卒よろしくお願い致します。

♥ 0

いいねをした人: 居ません

[Olein_jp]

こんにちわ。

snow monkey formsのボタンのデザインをデフォルトの白（グレー？）ではなく、通常のボタンデザインと統一したいのですが、今後設定画面に機能追加する予定はございますでしょうか？

機能実装については、開発者のキタジマさんの判断が大きいと思いますので割愛させていただきます。

たとえばテーマでアクセントカラーを設定したときにformsのほうでも自動で反映されたり、formsの設定画面で自由にカラーを変更できるようになるのであればそのほうが良いのかと思いまして…いかがでしょうか？

もしくはCSS等でアクセントカラーと統一する（既存のボタンデザインと統一する）スマートな記述方法がありましたらご教示いただけますと幸いです。

現状でどうにかするという考え方でいくと、Snow Monkey で利用されている CSS 変数を利用する方法があるかなと思いました。

例えば、Snow Monkey の CSS スタイリングでは、アクセントカラーを --accent-color という CSS 変数で定めています。

ですので、どこかスタイリングされる場合に、例えば

p {
  color: var( --accent-color, #cd162c );
}

というように書いてあげることで、カスタマイザーでブランドカラーを変更されると連動して配色も変更されます。他にもさまざまな CSS 変数がありますので、ブラウザの検証ツールなどで確認してみると面白い発見があるかもしれません。

以上、参考になれば幸いです。

♥ 2

いいねをした人:

[タカヒロ]

こんにちは。

こんな感じでボタンデザインのカスタムCSSを書いてます。
大抵のブラウザであれば、同じ見た目になるのではないかと思います。
もっとスマートな記述があるかと思いますが参考になれば。。。

/* 各フォームパーツのデザインをリセット */
.smf-button-control__control,
.smf-text-control__control,
.smf-textarea-control__control {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  font-size: 100% !important;
  font-family: inherit !important;
}

/* フォームボタンをデザイン */
.smf-button-control__control {
  background: var(--accent-color,#cd162c) !important;
  color: #fff !important;
  border: none !important;
  transition: background-color 0.3s ease !important;
}

/* 「戻る」フォームボタンを個別にデザイン */
.smf-button-control__control[data-action="back"] {
  background: transparent !important;
  color: #333 !important;
  text-decoration: underline !important;
}

/* 「戻る」以外のフォームボタンのホバー＆フォーカス色 */
.smf-button-control__control:not([data-action="back"]):hover,
.smf-button-control__control:not([data-action="back"]):focus {
  background: var(--dark-accent-color,#710c18) !important;
}

♥ 2

いいねをした人:

[キタジマ タカシ]

実は以前にも要望はあがっていて、頭の端にはあるのですがどうしようかなーという感じでした。

Snow Monkey Formsのボタンデザインについて

タグ: Snow Monkey Forms このトピックには2件の返信、2人の参加者があり、最後にT…

snow-monkey.2inc.org

カスタマイザーに「Snow Monkey Forms」みたいなパネルを追加して、その中に「送信ボタンのデザインを Snow Monkey のボタンデザインにする」（良い文言が思いつかない…）みたなチェックボックスがあると良いですかねー。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

Snow Monkey v15.6.0 で機能を追加しました！

Snow Monkey v15.6.0 をリリースしました

Snow Monkey v15.6.0 の概要 機能追加 カスタマイザー → Snow Monkey Form…

snow-monkey.2inc.org

♥ 2

いいねをした人:

[shone]

＞Olein_jpさん

＞タカヒロさん

 

ありがとうございます！CSSで記述すれば自由度の高いデザインになるのでそれもアリですよね。

ちなみに私の環境でもタカヒロさんのコードはバッチリ反映されました。ありがとうございます。

 

＞キタジマさん

どういう形式が良いか…と思っていたところ早速機能実装していただいたようでありがとうございます！まさに求めていたものはこれでした。

いつも素早いご対応本当にありがとうございます。

♥ 2

いいねをした人:

[投稿者]

投稿