2008年05月08日

FormHelperとCSS

CakePHP1.2のスタイルシートには最初からフォームデザイン部分のcssが入っていますが、iPodなどで表示させるには便利でも、実際にたくさんのデータを入力するにはちょっと…というデザインだと思います。実際に使用する時には、「ラベルが左側で入力テキストボックスが右側に同じ行内に並ぶ」ようなデザインも使いたいのではないでしょうか。

思い通りの位置に表示させるには、cssのパラメータに関する知識が必要です。

このあたりをうまく説明してくれる何かがないかな、と思っていたところ、こんなサイトを見つけました。以前に、CakePHPのgooglegroupで話題になっていたサイトです。

CSS-Only, Table-less Forms
http://jeffhowden.com/code/css/forms/

ここにあるデザインとCakePHPのFormHelperの出力するタグ類は、考え方がほぼ一緒です。

divがあって、labelがあって、inputがあって、最後に/divでくくる、という流れでデザインされています。

なので、cake.generic.css の form部分を、そっくり上記のサイトのデザインで変更してみると、なかなか勉強になります。

form div {
clear: left;
}

form div label {
float: left;
width: 130px;
padding: 3px 5px;
margin: 0 0 5px 0;
text-align: right;
}

などの部分がキモのようです。
タグ:cakephp CSS
posted by SDozono at 14:43| 東京 ☀| Comment(0) | TrackBack(0) | CakePHP template | このブログの読者になる | 更新情報をチェックする

2006年07月11日

CakePHP用ビジネス向け無料テンプレート10種類

やはり、開発をはじめる最初の画面は大切です。先日、Contented Designs のオープンソース・デザインを使用した CakePHP のテンプレートを公開したところ、大きな反響がありました。やはり、PHPフレームワークに求められていることは、次の段階に達しているのかな、と思います。つまり、機能やエンジン部分だけでなく、そこにのっかるデザイン・外観の情報も、フレームワークの選定に大きな影響を与えるようです。

CakePHPを利用したビジネスサイトの構築用に、ビジネスっぽいオープンソースのテーマをCakePHP の default.thtml としてポートしてみました。CakePHPでのビジネスサイト構築を検討なさっている方はたたき台としてご利用ください。
もちろん、MVC分離システムなので、後からの変更も非常に簡単です。
simplyBusiness.PNG

閲覧・ダウンロードはこちらからどうぞ。
http://cakephp.seesaa.net/article/20603204.html

インストールは非常に簡単で、
1)CakePHP をダウンロード、サーバに解凍
2)
  default.thtml    は、 app/views/layouts に置く。
  *****.css      は、 app/webroot/css  に置く。 
  css_images の中のファイルは、 app/webroot/css/images にコピー。
  webroot_imgの中のファイルは、 app/webroot/img にコピー。

CakePHP のURLを見ると、そのテーマに変わっているはずです。
*そうそう、初期状態では UTF-8 になっていますので、お使いのコードに変更してください。default.thtml の中にあります。*

(なお、PHPによるビジネスサイト構築のお問い合わせは、
http://www.cba-japan.com までどうぞ。多言語展開コンサルティング[特に英語、ロシア語、タイ語がメインです。中国語などもOK]やローカライゼーション、システム開発などを行なっています。)




posted by SDozono at 12:42| ロサンゼルス 🌁| Comment(0) | TrackBack(1) | CakePHP template | このブログの読者になる | 更新情報をチェックする

10 Free Business Templates for CakePHP

These template designs are from http://www.oswd.org, Open Source Web Designs.
I picked up some designs especially looks suitable for business use, and changed to default.thtml of CakePHP. You can start your WEB development with business-style designs at once!

Usage:

1) Unpack the zip.
2) put the files:
default.thtml -> app/views/layouts
*****.css -> app/webroot/css
files in css_images -> app/webroot/css/images
files in webroot_img -> app/webroot/img

3) go to your cake URL. You will have new theme!

(Thanks all the designers who released their designs as open-sourced!)

*from 2006/12******************************
from new version of CakePHP (1.1.11.4064),
you need to change one line:

if ($this->controller->Session->check('Message.flash')) $this->controller->Session->flash();

to

if ($session->check('Message.flash')) $session->flash();
*******************************************

andreas02.PNG
andreas02.zip

bermuda_01.PNG
bermuda_01.zip

doctors_office.PNG
doctors_office.zip

internet_services.PNG
Internet_Services.zip

internet_jobs.PNG
Internet_Jobs.zip

nautica01.PNG
Nautica01.zip

nautica02.PNG
Nautica02Liquid.zip

plain.PNG
plain.zip

lazydays.PNG
lazydays.zip

simplyBusiness.PNG
simplyBusiness.zip
posted by SDozono at 04:58| ロサンゼルス 🌁| Comment(2) | TrackBack(0) | CakePHP template | このブログの読者になる | 更新情報をチェックする

2006年07月06日

初期デザインを速攻で変更。

CakePHP で最初に作ったプロジェクト(デザインはインストールそのまま)を上司に見せたところ、最初のひとことは、「アクの強いデザインだね〜」というものでした。

確かに、初期デザインは黒と赤を基調にしているので、ちっともビジネスっぽくありません。「初期デザインを変えてくれ!」という要望もMLで流れたくらいで……。
http://groups.google.com/group/cake-php/browse_thread/thread/7248b46de597b10b/


というわけで、最初から使用できる無料のテンプレートを7つ、Contented Designs のオープンソースのテンプレートからポートしてみました。スクリーンショットは、とりあえず解凍しただけのCake PHPに放り込んだだけの状態です。
contented6.PNG

デザインの閲覧・ダウンロードはこちらから。
http://cakephp.seesaa.net/article/20355864.html

1)使いたいテーマを解凍。
2)解凍してできた default.thtml を app/views/layouts にコピー。
3)解凍してできた ***.css    を app/webroot/css にコピー。

これだけで、何の問題もなく、システムテンプレートが変更されます。
さすが MVC 分離デザイン。

あとは、じゃんじゃん モデル+アクションを書いて、機能ができてきたら、このテーマのリンク部分を変更すればよいだけです。

・テーブル部分は、CakePHP のデフォルトを css にとりあえずコピーしてあります。適当に変更してください。
・初期文字コードを、海外でも使用できるように"UTF-8"にしてありますが、日本で使用する場合には、ここを"EUC-JP"とか"Shift-JIS"とかに変更しましょう。

ちなみに、デザイン1枚あたり、5,6分で作成できました。自分の気に入ったデザインから、このCakePHP用のテンプレートを作成するのは非常に簡単です。

Ruby on Rails にもこんなテンプレート集みたいなものはあるんでしょうか。サイトでは発見できませんでした。

PHP で "Ruby on Rails" をしたいなら Cake PHP! (と宣伝。)



posted by SDozono at 12:04| ロサンゼルス 🌁| Comment(0) | TrackBack(0) | CakePHP template | このブログの読者になる | 更新情報をチェックする

default.thtml 7 free designs for Cake PHP

I ported designs from Contented Designs to default.thtml of CakePHP.

1) Unpack zip.
2) Copy default.thtml to app/views/layouts
3) Copy ***.css to app/webroot/css

Then, you'll see the new theme!
Change the template as you like...

*Contented Designs, Thank you for your marvelous designs!*

*from 2006/12******************************
from new version of CakePHP (1.1.11.4064),
you need to change one line:

if ($this->controller->Session->check('Message.flash')) $this->controller->Session->flash();

to

if ($session->check('Message.flash')) $session->flash();
*******************************************

contented1.PNG

contented1.zip

contented2.PNG

contented2.zip

contented3.PNG

contented3.zip

contented4.PNG

contented4.zip

contented5.PNG

contented5.zip

contented6.PNG

contented6.zip

contented7.PNG

contented7.zip


*I added some more for Business-use. check http://cakephp.seesaa.net/article/20603204.html*
posted by SDozono at 11:56| ロサンゼルス 🌁| Comment(4) | TrackBack(1) | CakePHP template | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。