Altere o logo no Plone

Finalidade

Depois de ter seu site Plone instalado e funcionando, a primeira coisa que posso recomenda-lo a fazer é substituir o logo do Plone pelo seu próprio logo. Sei que você tem ambições maiores para a aparência de seu site, mas substituindo o logo é uma boa maneira de começar o aprendizado sobre as técnicas de temas.

Pré-requisitos

Vamos assumir que você já esteja familiarizado com HTML e CSS, embora as personalizações mostradas aqui sejam bem básicas, não será exigido muito conhecimento sobre isso. Uma coisa que será necessária é que você esteja logado no site com perfil de Administrador, considerando isso entre na área Configurações do Site.

O Básico

No Plone 3, o logo é simplesmente uma imagem com um link apontando para a página inicial.

<a id="portal-logo" href="http://[seu site]" accesskey="1">
    <img width="252" height="57" title="Plone" alt=" " src="http://[seu site]/logo.jpg"/>
</a>

1. Alterando a Imagem e o Título

A imagem do logo - logo.jpg - esta dentro da pasta de skins do Plone Default Theme. Substitua a imagem simplesmente fazendo o upload da sua imagem com o mesmo nome:

• Vá para  Zope Management Interface (Configurações do Site > Zope Management Interface)
• Entre em portal_skins > plone_images
• Clique em logo.jpg e depois no botão Personalizar
• Agora substitua a imagem clicando no botão browser e escolha a nova imagem do seu sistema de arquivos
• Altere o campo título (isso irá garantir as alterações do título no atributo HTML)
• Salve as alterações e atualize seu navegador e veja as novas alterações do seu site.

Abordagem Alternativa

O nome (ID) da imagem do logo esta especificado no base_properties - uma lista de valores úteis que são armazenados e utilizados em todo css do Plone Default Theme. Com isso além de poder colocar sua própria logo no site, você ainda poderá dar o nome que quiser, lembrando é claro de alterar este nome no base_properties.

• Vá para Zope Management Interface (Configurações do Site > Zope Management Interface)
• Certifique-se de que você mudou seu registro CSS para o modo de depuração (Debug/development mode) dentro do portal_css
• Vá para portal_skins > custom na combo situada no canto superior direito e selecione o item Image.
• Faça o Upload da sua nova imagem dando uma identificação e um título. Exemplo:   
  

  ID = MyLogo.jpg
  Title = My Logo

• Vá para portal_skins > plone_styles, clique em base_properties e em seguida clique no botão customize
• Você terá agora uma versão personalizada do base_properties na pasta custom dentro de portal_skins que você pode alterar como quiser. Encontre o campo logoName e substitua o valor logo.jpg com o ID que você atribuiu a sua imagem (se você atribuiu ao seu ID a extensão jpg ou gif, certifique-se de incluir e lembrar que ela é sensível a caixa) por exemplo:

• logoName = MyLogo.jpg

• Salve suas alterações e atualize seu navegador

Observação: Quando você voltar ao seu base_properties personalizado dentro de custom > portal_skins, ele parecerá uma pasta vazia. Clique na aba properties para ver a lista de propriedades.

2. Alterando o estilo do portal_logo

Não existem estilos definidos para #portal-logo, mas há alguns para #img da logo do portal no arquivo basic.css. Use um complemento do Firefox chamado Firebug para trabalhar com estes estilos. A forma mais simples é substituir estilos padrões com os seus próprios estilos dentro do arquivo ploneCustom.css.

• Vá para Zope Management Interface (Configurações do Site > Zope Management Interface)
• Certifique-se que o modo de depuração esta ativado no Registro de CSS (portal_css)
• Clique em portal_skins > plone_styles > ploneCustom.css e depois clique no botão customize
• Você terá agora uma versão editável do ploneCustom.css na pasta custom dentro de portal_skins
• Adicione os seus próprios estilos dentro do arquivo  ploneCustom, clique em Salvar e atualize seu navegador para ver as alterações

3. Alterando o HTML

O HTML do logo esta situado no arquivo logo.pt, um template que faz parte de uma viewlet chamada plone.logo. Para personalizar esta área através da web, você vai precisar usar portal_view_customizations.

• Vá para portal_view_customizations dentro de Zope Management Interface (Configurações do Site > Zope Management Interface)

• Clique no plone.logo em seguida no botão customize
• Você agora tem um template que pode ser reescrito, veremos na próxima seção um exemplo para você começar.
• Salve as alterações e atualize seu navegador e veja as novas alterações do seu site.

Observação: caso não queira mais fazer alterações posteriores, você verá que plone.logo ficará destacado em uma lista no portal_view_customizations, clique sobre ele para editá-lo. Se você deseja remover as personalizações completamente, use a guia conteúdo portal_view_customizations, marque a caixa ao lado de seu modelo e clique em Excluir.

A Teoria

Aqui está o modelo logo.pt. Está escrito na linguagem de templates utilizados pelo Plone - TAL (ou ZPT). Leia um pouco sobre isso (não demora muito para aprender), mas vamos voltar ao exemplo:

<a metal:define-macro="portal_logo"
   id="portal-logo"
   accesskey="1"
   tal:attributes="href view/navigation_root_url"
   i18n:domain="plone">
    <img src="logo.jpg" alt=""
         tal:replace="structure view/logo_tag" />
</a>

Primeiro temos a tag "a" que representa um link:

Você pode desconsiderar metal:define-macro="portal_logo" este é apenas um código de envolvimento para algo que possa ser reutilizado, se necessário. 
Este trecho é importante tal: attributes="href view/navigation_root_url", este é o código que fornece a URL do site para o atributo href do link. 
Há uma variável mágica aqui, chamada "navigation_root_url", que parece ter surgido do nada. Na verdade, a visão é uma coleção de propriedades calculadas pelo viewlet plone.logo e facilmente passada para o modelo logo.pt.

Aqui estão algumas varidisponíveis: 
navigation_root_url 

logo_tag

portal_title

Agora olhe para a tag de imagem do modelo. 
A chave aqui é  tal:replace="structure view/logo_tag". Isso significa que o modelo não vai prover o tag de imagem realmente escrita aqui, em vez disso, ele irá substituir a coisa toda com a tag gerada pelo viewlet plone.logo.

Se você não quiser que isso aconteça, então você deve apagar esta linha. 
Nota: O nome  structure significa tratar o valor como HTML em vez de uma seqüência de texto. 

Examplo 1: Um título de texto simples

Aqui está uma versão personalizada do modelo, usando  view/portal_title ao invés de  view/logo_tag, para lhe dar um cabeçalho de texto em vez da logo propriamente dita (se você já usou o Plone 2, então você poderia reconhecer isto):

<h1 metal:define-macro="portal_logo"
   id="portal-logo">
   <a accesskey="1"
   tal:attributes="href view/navigation_root_url"
   i18n:domain="plone" tal:content="view/portal_title">
    </a>
</h1>

É claro que se você quiser fornecer seus próprios estilos, olhe a Seção 2 deste tutorial para informações sobre como definir estilos em ploneCustom.css. Assim você poderá usar uma técnica acessível de substituição de imagem no seu CSS.

Examplo 2: Fornecendo sua própria tag de imagem

Você não tem que usar logo_tag se você não quiser:

<a metal:define-macro="portal_logo"
   id="portal-logo"
   accesskey="1"
   tal:attributes="href view/navigation_root_url"
   i18n:domain="plone">
    <img src="[Meu ID do logo]" alt="[Meu Logo]"
         width="[Minha Largura]" height="[Minha Altura]" 
         tal:attributes="title view/portal_title" />
</a>

Você vai, precisar carregar o seu próprio logo para a pasta custom em portal_skins, consulte as instruções na Seção 1 deste tutorial.

Mais Informações

• Existem ainda outros tutoriais sobre  personalização avançada de logo na documentação do Plone.
• Mais orientações sobre ZPT e TAL podem ser encontrados no  tutorial de ZPT.
• Se você deseja transferir as alterações para o sistema de arquivos em seu próprio produto de tema, o Plone 3 Theme Reference vai lhe dar um esboço dos arquivos e modelos que você vai precisar (Logo seção viewlet).