Este capítulo mostra a você como modificar quase qualquer coisa do layout do seu site Plone, explicando os elementos de uma página, as skins e caixas.Existem outras maneiras mais rapidas de se customizar as cores do seu plone site, mais este artigo tem como objetivo mostrar algumas das propiedades da folha de estilo do Plone.

Skins

Uma pele é um conteúdo visual. Ela pode conter pequenas porções de lógicas diretamente relacionadas para aquela representação visual. Quando você instala o Plone você verá a pele padrão, esta é a que os usuários estão mais familiarizados e é o padrão que você verá no plone.org e em outros sites. Escrevendo uma nova skin você pode mudar o jeito do layout do Plone.

Mas o Plone não tem que se parecer com todos os outros ou até mesmo ser reconhecido vagamente, como um site Plone. Pegue, por exemplo, a lista de sites encontrados aqui - todos eles são totalmente diferentes e adaptados a vontado do usuário. Na maioria dos casos os sites podem facilmente mover-se entre as skins oferecendo diferentes skins para os usuários. Muito sites usam o poder e a flexibilidade da interface do Plone internamente assim os usuários podem adicionar e editar conteúdo facilmente, apesar de apresentar uma visualização externa totalmente diferente.

As skins são definidas na ZMI na ferramenta portal_skins. Quando clicar no portal_skins clique em properties. Isto apresentará uma lista de skins disponíveis neste site. Por exemplo, há uma skin chamada "Plone Default". No formulário você verá uma entrada para esta skin e alguns valores próximos a ele, estas são as camadas.

Na aba properties um usuário pode alterar a skin padrão para ser mostrada aos usuários e ou permitir que os usuários mudem suas skins Se os usuários podem mudar suas skins eles podem ir para a tela my preferences e mudá-la.

Layers (Camadas)

Cada skin contém camadas. Uma camada é um conjunto individual de templates e scripts que são apresentados aos usuários, combinando estas camadas uma skin é formada. Isto permite que um usuário adicione ou remova facilmente componentes em uma skin alterando estas camadas. Novamente, por exemplo, na skin "Plone Default" (acessada através da ZMI indo por portal_skins -> properties), tem uma série de camadas, "custom, ..." e assim por diante. Estas são as camadas para esta skin.

Duas coisas são importante para saber sobre camadas:

• a ordem das camadas é importante, a que estiver no topo será checada primeiro para um objeto
• cada camada é uma entrada em portal_skins -> contents, e é geralmente uma Visualização do Diretório do Filesystem ou um Folder.

Mudando o logo, um rápido exemplo

Depois de ler acima, você está provavelmente intimidado a tentar alterar algo. A pergunta mais comum é "como eu faço para mudar o logo no canto superior esquerdo do logo do Plone". Isto é uma coisa muito simples de se fazer.

• na ZMI vá até portal_skins -> plone_images
• ache logo.jpg na lista e clique nele
• clique no botão Customize
• carregue uma nova imagem usando a navegação e clique em Upload

É isto, volte para a interface do Plone, a imagem foi alterada. Simples.

Alterando o logo, a explicação

No exemplo acima mostramos como mudar o logo da página principal. Isto acontece porque usamos uma das principais características das skins, as camadas como descrevemos acima. Uma das coisas mais importantes sobre camadas é a ordem da busca, a camada que está mais acima (a primeira da lista) será sempre verificada primeiro para achar o item procurado.

Assim, primeiro vamos olhar as camadas da skin "Plone Default". A primeira camada é "custom", esta é a pasta padrão achada em portal_skins -> custom. Em algum lugar abaixo desta lista você vai achar a camada plone_images. Ela mapeia o Filesystem Directory View e estes arquivos podem ser encontrados no sistema de arquivos dentro da instalação do Plone. QUando você clica na imagem image (portal_skins -> ploneimages, não haverá opção para editar a imagem, mas você pode customizá-la, o texto na imagem abaixo vai ajudar a explicar isto.

Clicar em customise faz uma cópia da imagem dentro da pasta de customização dentro do ZODB e leva você diretamente a ela. Se você olhar com atenção você verá que o caminho da imagem foi alterado, o meta type mudou e agora você pode editar a imagem.

Por que isto é feito, porque em nossa lista de camadas vem antes a camada plone_images, depois que esta imagem foi copiada dentro da pasta de customização esta imagem é agora a primeira imagem a ser procurada. Assim quando quando o browser requer logo.jpg, ele vai procurar em cada camada, achando a imagem na customização primeiro, e retornará aquela imagem.

Agora, no quarto passo acima carregamos uma nova imagem. Este logo.jpg é alterado e a imagem será encontrada como primeira da lista.

Este é o conceito básico de skins e camadas no Plone. Alterando as camadas e movendo os elementos individualmente entre as camadas vocÊ pode facilmente alterar e customizar seu site. Permite que você customize tanto quanto quisero seu site.

Depois:

Antes de você se embrenhar nas customização do site e dos page templates, o primeiro lugar para olhar são as stylesheets (folhas de estilo).

Style sheets

A maioria dos estilos do Plone são controlados das folhas de estilo e configurar estas folhas de estilo faz você mudar radicalmente o Plone. Há quatro stylesheets no portal_skins -> plone_styles:

• ploneCustom.css: são as stylesheet padrão, está em branco. Você deve customizar esta primeiro. Nota: Esta folha foi adicionada no Plone1.1.
• plone.css: são as stylesheet principais que controlam a maioria das configuração para o site, se possível altere o ploneCustom.css primeiro.
• ploneNS4.css: são as stylesheet para o Netscape 4
• plonePresentation.css: contém código para o modo de apresentação do Opera
• plonePrint.css: contém código para páginas impressas

Um elemento futuro, stylesheet_properties contém todas as definições de cores, fontes e tamanhos correntes que são usados nos stylesheets acima. Customizar estas propriedades é uma maneira fácil de alterar o layout. Por exemplo se você customizar este ojeto e você pode alterar a fonte principal, alterando a propriedade mainFont para "65% Verdana, Helvetica, Arial, sans-serif".

As outras pastas no portal_skins -> plone_styles são skins que vêm com o Plone e oferecem bom exemplos de sites diferentes.

Customizando a resolução

Usando a folha de estilo do plone, podemos facilmente alterar a resolução do seu plone site de 100% do seu browser para a que você deseje. Neste exemplo vamos mostrar como alterar o tamanho da resolução, inserir um fundo e as bordas laterais do plone site:

Tamanho original:

Alterando para 80% da tela e com as bordas:

#visual-portal-wrapper {
    background-color:white;
    margin: 0 auto;
    padding: 0;
    width: 80%;
    border-left: 1px solid #666666;
    border-right: 1px solid #666666;
}

Resultado:

Alterando a cor de fundo

body {
    background-color:#999999;
}

Resultado:

Images

Todas as imagens (exceto produtos específicos) estão contidas no plone_images.

Plone content

Contém os templates relacionados ao conteúdo. Estes são todos Page Templates, que é Zope templating languages, usado mais que HTML e usado quase exclusivamente pelo Plone. Page Templates são um exemplo extremamente poderoso e elegante de linguagem de templating language[1]. Alterando qualquer um deste templates você pode alterar como o conteúdo está apresentado.

Plone templates

Aqui está, provavelmente a parte mais importante do site, os templates principais, o cabeçalho e rodapé padrão e assim por diante.

Realmente a maneira principal de customizar um novo site é achar as partes que você precisa que sejam customizadas. Isto é atualmente fácil de se fazer. Primeiro ache a URL da página que você está chamando, se há um último elemento como login_form ou document_edit, então estes serão relacionados diretamente aos objetos no diretório portal_skins. Para achar o objeto atual vá para portal_skins -> find e digite o último elemento da URL. Para elementos mais complicados você vai precisar examinar a ferramenta portal_types para ver que ação está sendo chamada. Se todos este falharem, use o find ou grep para achar os arquivos no sistema de arquivos.

Fazendo uma skin totalmente nova

Certamente modificar skins é bom e legal, mas agora vamos fazer uma nova skin.

• vá para portal_skins e adicione uma pasta, dê o nome de alpha
• então vá ao portal_skins -> properties e adicione uma skin, para fazer isto digite o nome e alista de camadas, apenas digite alpha

Para uma nova skin você pode querer ou não adicionar ao seu Plone anterior e aos elementos do CMF, se você adicioná-los depois na camada alpha. É isto, você tem uma nova skin chamada alpha que pega os itens primeiramente da camada alpha.

Exemplo de sites

Alguns exemplos de sites que usam Plone: News!

Outras configurações

Abas

Abas são determinadas por "Actions" e "Action Providers", abordadas no Capítulo 5 do Livro do Plne. Abas são geradas pela criação de ações. O campo categoria afeta as abas da seguinte maneira:

• se a categoria é portal_tabs será mostrada no topo do site,(por exemplo: News)
• se a categoria é object_tabs será mostrada na borda verde editável (por exemplo: Edit)
• se a categoria é folder_buttons será mostrada como um botão no folder_contents (por exemplo: Folder Contents)

Exemplo: Adicionando uma aba no Plone.org para documentação

Uma tarefa comum é adicionar uma aba no topo do portal apontando para uma pasta de conteúdo. Por exemplo no Plone.org toda a documentação está em uma pasta chamada documentation. Depois queremos que usuários possam acessar facilmente a documentação, uma ação foi adicionada.

• Na interface do Plone:
• Crie uma pasta chamada documentation na raiz do seu site Plone.
• Publique esta pasta (se necessário)
• Na ZMI:
• Vá até portal_actions
• Vá até o final da página para a seção Add e digite o seguinte:
• Name: documentation
• Id: documentation
• Action: string:$portal_url/documentation
• Condition: leave blank
• Permission: View
• Category: portal_tabs
• Visible: checked
• Selecione Add

Você agora tem uma aba visível para qualquer um, para documentação.

Customizando as abas

Mudando a cor de fundo das abas, confira o exemplo:

1. Este bloco de código muda a cor do link, do fundo e da borda da aba:
   

#portal-globalnav li a {
background-color: #eeeeee;
border-color: #333333;
color: #333333;
}

2. Este bloco define a cor de uma aba quando ela estiver sendo acessada:

#portal-globalnav li.selected a {
background-color: #eeeeee;
border: 1px solid #666666;
border-bottom: #eeeeee 1px solid;
color: &dtml-globalFontColor;;
}

3. Este bloco define a cor de uma aba quando o mouse estiver "hover":

#portal-globalnav li a:hover {
background-color: #cccccc;
border-color: #666666;
border-bottom-color: #eeeeee;
color: #666666;
}

Confira o resultado:

BreadCrumb

O BreadCrumb é uma barra onde mostra o path que você está acessando no momento.

#portal-breadcrumbs {
    margin-top: 1em;
    background-color: #f6f6f6;
    border-top: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
}

Resultado:

Personaltools

O Personal Tools é uma barra onde fica alguns links referente a usuário.

Define a cor de fundo, alinhamento, e marge do personaltools:

#portal-personaltools {
    line-height: 1.5em;
    background-color:#eeeeee;
    border-top: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
    font-weight: bold;
    padding: 0em 1em 0em 1em;
}

Define a cor dos links do personaltools:

#portal-personaltools li a {
    color: #666666;
}

Resultado:

Datas

O Plone apresenta data em um certo formato para melhor ler. Estes formatos podem ser alterados da Zope Management Interface. Os valores estão armazenados como propriedades no site. Na ZMI vá até portal_properties -> site properties.

• localTimeFormat são data e hora curtas
• localLongTimeFormat são data e hora em um formato longo

Ambos valores usam o módulo de formato de hora do Python para produzir o formato da hora. A referência para estes formatos podem ser encontrados aqui - Se você não está familiarizado com este módulo, aqui está um rápido resumo.

• %a Abrevia nome dos dias da semana (exemplo: Mon)
• %A Nome completo dos dias da semana (exemplo: Monday)
• %b Nome abreviado do mês (exemplo: Jan)
• %B Nome completo do mês (exemplo: January)
• %d Dia do mês como um número decimal
• %H Hora (24) como um número decimal
• %I Hora (12) como um número decimal
• %m Mês como um número decimal
• %M Minuto como um número decimal
• %S Segundos como um número decimal
• %y Ano sem século como um número decimal
• %Y Ano com século como um número decimal

Por exemplo a configuração padrão para o localTimeFormat é %b. %d, %y. Isto formata a data fazendo com que esteja no formato de mês abreviado. dia númérico, ano com dois dígitos, por exemplo: Oct. 24, 02. Se queremos incluir o nome do dia, tem uma maneira simples de alterar o localTimeFormat para ler %A, %b. %d, %y. Produz o seguinte: Thursday, Oct. 24, 02.

Renderizando as páginas do Plone

Aqui abordamos como uma página do Plone é renderizada assim você pode alterar ou editar esta renderização e adequá-la ao seu próprio site. A apresentação do conteúdo no Plone se dá através do page template chamado main_template.pt, que pode ser encontrado no sistema de arquivos en skins\plone_templates e através da ZMI para customização em portal_skins -> plone_templates -> main_template. Sendo assim as qualquer página pdorerá ser customizada para melhor atende-lo.