Fresh!

ではCSSを作ります。
私はCSSは素人もいいところなので必要最低限のものってことで。
まずこないだ作った管理者用のレイアウトファイル admin.ctp を開いて、

	<?php echo $html->css('cake.generic'); ?>

となっている部分を以下のように書き換えます。

	<?php echo $html->css('admin'); ?>

こうすると出力されるソースは

	<link rel="stylesheet" type="text/css" href="/~bob/cake/app/webroot/css/admin.css" />

となるので、その場所 /app/webroot/css に新規に admin.css を作ります。
なにはともあれ、レフトメニューにしたいので、main と menu をこんな感じで。

#main {
	background: #f0f0f0;
	font-size: 105%;
	padding: 15px;
	margin: 0px 10px 10px 165px;
	height: 100%;
}

#menu {
	background: #f0f0f0;
	font-size: 105%;
	padding: 15px;
	margin: 0px 10px 10px 10px;
	float: left;
	width: 115px;
	height: 100%;
}

footer もそれっぽくなるように

#footer {
	background-color: #003d4c;
	color: #efe5d0;
	text-align: right;
	padding: 6px 10px;
	margin: 10px;
	font-size: 90%;
	clear: both;
}

header には CakePHP のアイコンを入れて

#header {
	background-color: #003d4c;
	padding: 10px 20px;
	margin: 10px;
}

#header h1 {
	background: #003d4c url('../img/cake.icon.gif') no-repeat left;
	color: #fff;
	padding: 0px 30px;
}

あとは文字サイズ調整とか、お好みで

h1 {
	font-size: 120%;
	color: #000;
}

h2 {
	font-size: 110%;
}

テーブルに線がないのでこちらも適当に

table {
	margin-left:	20px;
	margin-right:	20px;
	border:	thin solid black;
	border-collapse:	collapse;
}

td, th {
	border:	thin dotted gray;
	padding:	5px;
}

th {
	background-color:	#a9a9a9;
}

あとは登録フォームの label とかその辺を整形。 label を block 要素にして左に float してきれいに並べるってやつですか。

form {
	margin:10px;
}
form label {
	width:94px;
	display:block;
	float:left;
}
form div.input {
	margin:13px;
}
form div.submit {
	margin:20px 0 0 12px;
}

pagingの部分は面倒なのでオリジナルの cake.generic.css からコピーして背景色だけ削除。

/* Paging */
div.paging {
	color: #ccc;
	margin-bottom: 2em;
}
div.paging div.disabled {
	color: #ddd;
	display: inline;
}
div.paging span {
}
div.paging span.current {
	color: #000;
}
div.paging span a {
}

最後エラーとかのメッセージ関係も一応コピーしておく

/* Notices and Errors */
div.message {
	color: #900;
	font-size: 140%;
	font-weight: bold;
}
div.error-message {
	color: #900;
	font-weight: bold;
}
p.error {
	background-color: #e32;
	color: #fff;
	font-family: Courier, monospace;
	font-size: 120%;
	line-height: 140%;
	padding: 0.8em;
	margin: 1em 0;
}
p.error em {
	color: #000;
	font-weight: normal;
	line-height: 140%;
}
.notice {
	background: #ffcc00;
	color: #000;
	display: block;
	font-family: Courier, monospace;
	font-size: 120%;
	line-height: 140%;
	padding: 0.8em;
	margin: 1em 0;
}
.success {
	background: green;
	color: #fff;
}

見た目が全然いまいち、とかいろいろ意見はあると思いますが(^^;、とりあえず格好になっていればいいので。
あとは本職のデザイナーさんにまかせましょう。
ヘッダーも画像とか作ってもらえばいいと思うし。

>>次のページ「確認画面」へ