Criando e usando um arquivo CSS customizado

Para o momento iremos criar um arquivo CSS com algumas funções básicas, sem nenhuma saída visual notável, e dizer para o nosso layout principal usar este arquivo. As próximas partes deste tutorial irão usar fortemente os códigos presentes neste arquivo CSS.

Criando o arquivo CSS.

Crie o arquivo design/docedesejo/stylesheets/docedesejo.css com o seguinte conteúdo:

body { background-color: #eeeeee; font-family: arial; }

td { font-size: 100%; }

hr { text-align: center; width: 80%; height: 0px; }

a { color: #ef8e00; text-decoration: none; }
a:visited { color: #ef8e00; }
a:hover { color: #ff0000; text-decoration: none; }

.main { width: 780px; margin-left: auto; margin-right: auto; 
background-color: #ffffff; }

.menu { width: 80%; margin-left: auto; margin-right: auto; 
text-align: center; padding: 2px; }
.menu a { color: #000000; text-decoration: none; }
.menu a:visited { color: #000000; }
.menu a:hover { color: #eeeeee; text-decoration: none; }

.conteudo { padding-left: 40px; padding-right: 40px;
padding-bottom: 36px; text-align: justify; }

.rodape { color: #bbbbbb; padding: 4px; text-align: center; font-size: 80%; }
.rodape a { color: #eeeeee; }
.rodape a:visited { color: #eeeeee; }
.rodape a:hover { color: #ef8e00; }

.tituloPagina { font-size: 170%; padding-top: 18px; padding-bottom: 10px; }

Usando o arquivo CSS

Edite o arquivo template principal design/docedesejo/templates/pagelayout.tpl . Adicione o seguinte código logo após os arquivos CSS já existentes:

<link rel="stylesheet" type="text/css" 
        href={"stylesheets/docedesejo.css"|ezdesign} />

Esta linha irá dizer para o eZ publish usar o arquivo CSS que acabamos de criar.



Comentários

Entre com seu usuário e senha ou registre-se no site para comentar.

Escrito por:
Leandro Alves
(27/02/2006 14:55)

Última modificação:
Leandro Alves
(28/02/2006 23:26)