CakePHP, CSS/HTML

Aplicando estilos CSS – CakePHP

Dando sequencia ao post sobre: Criação de layouts CakePHP – Introdução ao CakePHP para Web Designers , estaremos aplicando estilos CSS em nosso projeto.

Crie um arquivo com nome geral.css, e insira no mesmo o seguinte conteudo:

body {
	background: #ddd;
	font: 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#layout {
	margin: 20px auto;
	background: #fff;
	width: 800px;
}
#navegacao, #rodape {
	background: #333;
	padding: 8px 10px;
	color: #fff;
}
#navegacao a {
	color: #fff;
	text-decoration: none;
	font-size: 14px;
	margin: 0 15px;
}
#conteudo {
	padding: 5px 20px;
}
#conteudo h2 {
	margin: 0;
}
#rodape {
	font-size: 11px;
}

No diretório webroot da aplicação ( /projeto/app/webroot/css ) salve o arquivo geral.css citado acima.

Observe, que já  existe um arquivo .css de nome: cake.generic. Este é o arquivo padrão da instalação do cake.

Você poderá ter vários arquivos de estilo e aplica-los a componentes específicos do layout (Ex: geral.css – header.css – forms.css etc).

Vamos alterar o arquivo default.ctp ( /projeto/app/views/layouts/default.ctp ), criado no post anterior e  inserir o conteúdo abaixo.
Desta forma, o arquivo vai assumir a estrutura compatível com nossa folha de estilo.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title> Modelo com aplicacao de estilos </title>
	<?php echo $html->css(array('geral.css')); ?>
</head>
<body>
	<div id="layout">
		<div id="navegacao">
			<?php echo $html->link('Home', array('controller' => 'pages', 'action' => 'home')); ?> |
			<?php echo $html->link('Contato', array('controller' => 'pages', 'action' => 'contato')); ?> |
		</div>
		<div id="conteudo"><?php echo $content_for_layout; ?></div>
		<div id="rodape"> Rodape </div>
	</div>
</body>
</html>

Observe que agora, alem da estrutura de divs de nossa aplicação, ha tambem o trecho de código php:

echo $html->css(array('geral.css'));

É Neste trecho que informamos para a aplicação, qual arquivo css utilizar para renderizar o layout.

Boa sorte = )

Anúncios

4 comentários sobre “Aplicando estilos CSS – CakePHP

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s