Plone4のフォームボタンをCSS3でリッチにする

by zen posted at 2010-12-20 12:00 PM last modified 2010-12-20 12:47 PM

今年もやってきましたアドベントカレンダー。

今年もPloneネタです。しかもCSS3です。

少し前に A Book Apart の "CSS3 For Web Designers"  をeBook形式で読んでから、ぜひいろいろ試してみたいと思っていたので、この機会にやってみることにしました。

この本のサンプルを参考に、Plone4のフォームの送信ボタンを画像を使わないでリッチな表現に変更します。
非常に簡単なので興味あればぜひお試しを。

ploneCustom.cssをカスタマイズします。

  • 管理者でログインし、サイト設定画面から「Zope管理インタフェース(ZMI)」を選ぶ
  • ZMIの初期画面からportal_skinsを選ぶ → sunburst_stylesを選ぶ→ ploneCustom.css を選ぶ
  • → Customizeボタンをクリック → 入力可能なテキストエリアが表示されるので、ここに以下のコードを貼り付ける。
input[type="submit"] { 
padding: 5px 12px;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
line-height: 1.2;
color: #444;
border: 1px solid #b0b0b0;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#bbb));
background-image: -moz-linear-gradient(0 100% 90deg, #fff, #bbb);
background-color: #f0f0f0;
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
-o-border-radius: 11px;
border-radius: 11px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

"Save Changes" をクリックして保存。

デバッグモードにしないとcssがすぐに反映されないので、
ZMIの初期画面に戻って「portal_css」をクリック → タイトルのすぐ下にある "Development mode"をチェックしてSave (Saveボタンの場所がわかりにくいので注意)
これでcssの変更がすぐに反映されるようになる。

ブラウザからPlone4の画面を表示すると、こんな感じになります。上がSafariで下がFirefox

検索ボタン

safari-search.png  ff-search.png

ログインフォーム

  safari-login.png    ff-login.png

お問い合わせフォーム

safari-contact1.png    ff-contact.png


CSS3に対応してない IE7,8はたぶんこんな見え方ではないけど、そこそこ大丈夫なはず。(変だったら @zenichまで知らせてください)

ぜひお試しあれ。

ネタ元の "CSS3 For Web Designers" は読みやすい英語で内容もバランスがいい良い本です。オススメです。

さてクリスマスまでいよいよあと5日、次は @hkzm さんおねがいします!

Category(s)
Zope/Plone
About this blog
2011年11月より新しいブログに移行しました。http://blog.zenich.com メニューバーの「ブログ」をクリックしてください。 こちらのブログでは デザイナー・クリエイターによる震災復興支援活動を記録し応援するdesign311での活動、地元調布市のNPO法人ちょうふどっとこむ関連、オープンソースエンタープライズCMS "Plone" ユーザー会での活動記録などを掲載しています。
RSS