OBS.: A maioria das capturas de tela deste tutorial foi feita usando Firefox com a extensão web developer, que permite coisas como destacar elementos de bloco, demarcar células de tabelas, verificar a utilização dos atributos ID e CLASS, e até mesmo editar CSS em tempo real na própria página. Indispensável para desenvolvedores de skins!

Antes de começar: um pouco sobre papéis

O Plone é capaz de reconhecer vários papéis de usuários. Cada papel atribuído (em geral, algo entre Anonymous, Member, Reviewer, Manager ou, possivelmente, alguns mais) determina o que o usuário pode ver ou fazer no site:

• Usuários Anonymous geralmente não recebem privilégios para adicionar ou editar conteúdo, e portanto não visualizarão tais opções ao visitar o site.
• Quando um Member faz login, sua visualização do site muda para incluir os elementos necessários para adicionar ou editar conteúdos, bem como alterar suas preferências pessoais no site.
• O papel de Reviewer é semelhante ao de Member, mas com a responsabilidade adicional de aprovar ou rejeitar novos conteúdos que forem enviados para publicação.
• Managers podem fazer tudo: eles recebem controle completo do site.

A Estrutura

A imagem a seguir ilustra a estrutura básica de um site Plone do ponto de vista de um usuário autenticado. O Plone faz um belo trabalho ao separar estrutura, apresentação e conteúdo.

A Apresentação

Abaixo você pode observar a apresentação de um site Plone, com destaques ao redor dos seus elementos de bloco. Iremos passar por cada elemento e explicar onde encontrar os templates e CSSs que os controlam.

OBSERVAÇÕES:

• Você deve ser capaz de fazer a maioria (ou todas) as modificações através de folhas de estilo CSS, sem precisar modificar nenhum template.
• O Plone vem pré-configurado para dar preferência para quaisquer personalizações CSS feitas em ploneCustom.css (localizado em[site]/portal_skins/plone_styles). Logo, ao modificar quaisquer elementos CSS, mova-os para dentro de ploneCustom.css, e deixe as folhas de estilo originais intocadas.
• Para determinar qual CSS está sendo utilizado, abra o código do template e procure pelos atributos class e id. Seus valores indicam o elemento CSS que está sendo puxado do arquivo CSS.

Iremos destacar cada elemento e estabelecer a localização do template e do CSS que controlam a sua apresentação.

Seguiremos este padrão:

• [object]: [image_name]
  • Localização: [site]/[location]

  OBS:

  Esse é o caminho na ZMI iniciando na raiz do seu site Plone. No exemplo abaixo, o [site] chama-se demo.

  

• Template: [template_name]
  • Localização: [site]/[location]
• CSS: [css_class e/ou css_id]
  • Localização: [site]/[location]/[file_name]

  OBS:

  A última parte, [file_name], é o nome do arquivo que contém as definições CSS relevantes.

• ECMA: (javascript) [function_name]
  • Localização: [site]/[location]/[file_name]

  OBS:

  A última parte, [file_name], é o nome do arquivo que contém o código ECMAScript relevante.

Informações adicionais:

Esta seção trará algumas dicas, truques ou simplesmente informações úteis.

OBS:

É possível que nem todas as classes ou IDs associados a cada elemento sejam listados. 

Personalização visual do Plone 3

No Plone 3, a maioria dos templates listados neste tutorial foram movidos para a ferramenta portal view customizations([site]/portal_view_customizations). Ao clicar na aba Registrations (a visão padrão) e em seguida no nome de um dos templates (ex:plone.footer), será exibida uma tela com o conteúdo do template padrão, e será oferecida a opção de criar uma versão personalizada por meio do botão Customize.

Além disso, o Plone 3 inclui um link Manage Portlets em cada página, por meio do qual você pode controlar quais portlets aparecem na visualização do objeto, e em qual ordem.

• Imagem: logo.jpg
  • Localização: [site]/portal_skins/plone_images
• Template: 
  No Plone 2.x: global_logo
  • Localização: [site]/portal_skins/plone_templates
  No Plone 3 ou 4: plone.logo
• Localização: [site]/portal_view_customizations

• CSS: #portal-logo e #portal-logo a
  No Plone 2.x:
  • Localização: [site]/portal_skins/plone_styles/plone.css
  No Plone 3 ou 4:
• Localização: [site]/portal_skins/plone_styles/public.css

Alterando o logo

No Plone 2.x:

• Clique na pasta custom
  
  • Localização: [site]/portal_skins
• Faça o upload/adicione uma image
• Clique em base_properties
  • Localização: [site]/portal_skins/plone_styles
• Clique no botão Customize
  • Uma cópia do template será movida para a pasta custom
    • Localização: [site]/portal_skins/custom
• Altere o campo logoName para o nome da nova imagem que você adicionou. 
  Se você tiver problemas com estilos CSS desaparecendo, talvez precise adicionar a extensão do arquivo que você subiu ao campo id (ex:newlogo.jpg).

OBS:

Para retornar ao base_properties uma vez que ele foi criado na pasta custom: navegue até [site]/portal_skins/custom, clique embase_properties, e então clique na aba Properties.

Na versão 3 do Plone, a maneira mais simples de personalizar o logo é ainda o caminho acima.

No Plone 4: 

XXX TODO

OBS:

Para ver a mudança, certifique-se de atualizar o cache do seu navegador. Para mais informações nesse tópico, veja Change the Logo.

 

• Template: global_searchbox
  • Localização: [site]/portal_skins/plone_templates
• CSS: #portal-searchbox e input.searchButton
  • Localização: [site]/portal_skins/plone_styles/plone.css

No Plone 3 ou 4:

• Template: plone.searchbox
  • Localização: [site]/portal_view_customizations
• CSS: #portal-searchbox e input.searchButton
  • Localização: [site]/portal_skins/plone_styles/public.css

   

Isto se aplica somente a sites Plone 2. O Plone 3 e 4 incorporam esse recurso em uma página específica para acessibilidade.

• Imagens: textsize_small.gif, textsize_normal.gif, textsize_large.gif, e textsize_huge.gif
  • Localização: [site]/portal_skins/plone_images
• Template: global_siteactions
  • Localização: [site]/portal_skins/plone_templates
• CSS: ploneTextSmall.css, ploneTextLarge.css, e ploneTextHuge.css

  OBS:

  Todo o CSS para cada A está em seu respectivo arquivo.

  • Localização: [site]/portal_skins/plone_styles
• ECMA: setActiveStyleSheet(title, reset)
  • Localização: [site]/portal_skins/plone_ecmascript/plone_javascript.js

  
  
  

Informações adicionais:

• Para desativar a exibição dos 3 As:
  • Clique em /[site]/portal_actions
• Desmarque a opção Visible para todas as Actions com a categoria site_actions
• Clique em Save no final do formulário.

Observações para Plone 3 e 4:

O interruptor AAA não é mais incluído por padrão nos skins do Plone 3 ou 4. Os controles para mudar o tamanho do texto são disponibilizados no painel de controle de Acessibilidade: 
[site]/accessibility-info

A função JavaScript para manipular o tamanho do texto no Plone 3 ou 4 é chamada com:

setBaseFontSize();

Os seguintes argumentos são aceitos:

(['largeText'|''|'smallText'],1)

... onde '' indica "tamanho normal".

No Plone 2.x:

• Template: global_sections
  • Localização: [site]/portal_skins/plone_templates
• CSS: #portal-globalnav, #portal-globalnav li, #portal-globalnav li a, #portal-globalnav li.selected a, #portal-globalnav li a:hover
  • Localização: [site]/portal_skins/plone_styles/plone.css

No Plone 3 ou 4:

• Template: navigation.pt
  • Localização: [site]/portal_view_customizations
• CSS: #portal-globalnav, #portal-globalnav li, #portal-globalnav li a, #portal-globalnav li.selected a, #portal-globalnav li a:hover
  • Localização: [site]/portal_skins/plone_styles/public.css

Informações adicionais:

Para desativar as abas:

• Clique em [site]/portal_actions
• Desmarque a opção Visible? para todas as Actions da categoria portal_tabs
• Clique em Save no final do formulário

• XXX TODO

No Plone 2.x:

• Template: global_personalbar
  • Localização: [site]/portal_skins/plone_templates
• CSS: #portal-personaltools, #portal-personaltools .portalUser, #portal-personaltools .portalNotLoggedIn, #portal-personaltools li, #portal-personaltools li a
  • Localização: [site]/portal_skins/plone_styles/plone.css

No Plone 3 ou 4:

• Template: plone.personal_bar
  • Localização: [site]/portal_view_customizations
• CSS: #portal-personaltools, #portal-personaltools .portalUser, #portal-personaltools .portalNotLoggedIn, #portal-personaltools li, #portal-personaltools li a
  • Localização: [site]/portal_skins/plone_styles/public.css

Informações adicionais:

Os itens que aparecem na personal bar são provenientes de alguns locais. Para desativar a maioria deles:

No Plone 2.x:

• Clique em [site]/portal_membership
• Clique na aba Actions
• Desmarque Visible? para tudo que você não quer que seja exibido
• Clique em Save no final do formulário

No Plone 3 ou 4:

• Clique em [site]/portal_actions
• Clique no objeto User
• Clique no nome do objeto que você quer desativar (join, undo, etc.)
• Desmarque Visible?
• Clique em Save Changes no final do formulário

Para desativar join no Plone 2.x:

• Clique em [site]/portal_registration
• Desmarque Visible?
• Clique em Save

Para desativar undo no Plone 2.x:

• Clique em [site]/portal_undo
• Desmarque Visible?
• Clique em Save

 

No Plone 2.x:

• Template: global_pathbar
  • Localização: [site]/portal_skins/plone_templates
• CSS: #portal-breadcrumbs
  • Localização: [site]/portal_skins/plone_styles/plone.css

No Plone 3 ou 4:

• Template: plone.path_bar
  • Localização: [site]/portal_view_customizations
• CSS: #portal-breadcrumbs
  • Localização: [site]/portal_skins/plone_styles/public.css

   

A principal seção de conteúdo fica entre o cabeçalho e o rodapé e compreende três áreas principais: left_slots, main_content, e right_slots

As tabelas

• Template: main_template
  • Localização: [site]/portal_skins/plone_templates ou [site]/portal_skins/plone_tableless
• CSS: ploneColumns.css
  • Localização: [site]/plone_skins/plone_styles [site]/plone_skins/plone_tableless

Informações adicionais:

O main_template, como seu nome implica, é o controle principal da estrutura das páginas exibidas. É onde todas as seções da página são definidas. O main template é a base sobre a qual todos os outros templates preenchem suas informações e estruturas.

Os portlets são as partes da página que são exibidas na coluna esquerda e direita. Cada portlet tem seu próprio template.

• Templates: portlet_calendar, portlet_events, portlet_favorites, portlet_login, portlet_navigation, portlet_news,portlet_recent, portlet_related, portlet_review
  • Localização: [site]/portal_skins/plone_portlets
• CSS: .portlet, .portlet h4, .portlet h5, .portlet h6, .portletBody, .portletDetails, .portletMore, .portletContent,.portletClose, .portlet .even, .portlet .odd, .portlet input, .portlet ul, .portlet li
  • Localização: [site]/portal_skins/plone_styles/plone.css

OBS:

O slot de calendário possui CSS adicional

• CSS: .dayPopup, .date, .ploneCalendar, .ploneCalendar a, .ploneCalendar a:hover, .ploneCalendar th, .ploneCalendar td,.ploneCalendar .weekdays td, .ploneCalendar .event, .ploneCalendar .todayevent, .ploneCalendar .todaynoevent
  • Localização: [site]/portal_skins/plone_styles/plone.css

Informações adicionais:

Para controlar quais slots são exibidos e onde:

No Plone 2.x:

• Navigate até a raiz do seu site Plone
• Clique na aba Properties ao topo. Você deve ver:

• Cada linha nos campos left_slots e right_slots correspondem a uma entrada para um portlet
• Excluir qualquer linha de left_slots ou right_slots removerá aquele portlet
• Mover qualquer linha de left_slots para right_slots ou vice-versa mudará o lado da página no qual o portlet aparece
• Reordenar as linhas mudará a ordem em que os portlets aparecem
• Lembre-se de clicar em Save Changes

OBS

Aqui está um how-to de como criar um portlet estático.

OBS

Isso também pode ser feito em qualquer outra pasta em seu site Plone a fim de exibir ou esconder diferentes portlets em diferentes locais do site. Caso os campos left_slots ou right_slots não apareçam na ZMI, você pode adicioná-los: 

• Ao final da página de Properties, insira left_slots ou right_slots no campo Name
• Escolha strings como valor do campo Type
• Insira o nome e caminho acima para o portlet adequado como o campo Value
• Clique em Add

No Plone 3 ou 4:

• Clique em Manage Portlets
• Para remover um portlet tanto do lado esquerdo como direito, clique no ícone de um X vermelho à direita do seu nome
• Para acrescentar um portlet a qualquer lado, selecione seu nome do menu drop-down Add portlet
• Para editar o comportamento de alguns portlets, clique em seu nome e edite suas configurações

Portlet de navegação no Plone 3 ou 4:

Em sites Plone 3 ou 4 com as configurações padrão, a seção left_slots está oculta na página inicial, devido à configuração padrão do portlet deNavegação instalado no objeto front-page. Para ativar a exibição do portlet de Navegaao na página inicial do site:

• Clique em Manage Portlets
• Clique no portlet de Navegação
• No campo Start Level, altere o valor de 1 para 0
• Clique em Save

 

No Plone 2.x:

• Imagens: extedit_icon.gif, mail_icon.gif, print_icon.gif, site_icon.gif, rss.gif
  • Localização: [site]/portal_skins/plone_images
• Template: document_actions
  • Localização: [site]/portal_skins/plone_content
• CSS: .documentActions, .documentActions ul, .documentActions li, .documentActions a
  • Localização: [site]/portal_skins/plone_styles/plone.css

No Plone 3 ou 4:

• Imagens: extedit_icon.gif, mail_icon.gif, print_icon.gif, site_icon.gif, rss.gif
  • Localização: [site]/portal_skins/plone_images
• Template: veja Document Actions Now Use Zope 3 Viewlets
• CSS: .documentActions, .documentActions ul, .documentActions li, .documentActions a
  • Localização: [site]/portal_skins/plone_styles/public.css

Informações adicionais:

Para desativar os ícones das ações sobre o documento:

No Plone 2.x:

• Navegue até [site]/portal_actions
• Desmarque a opção Visible para todas as Actions com a categoria document_actions
• Clique em Save no final do formulário

No Plone 3 ou 4:

• Navegue até [site]/portal_actions
• Clique no nome do objeto que você deseja desativar (rss, print, etc.)
• Desmarque a opção Visible?
• Clique em Save Changes

No Plone 2.x:

• Template: global_contentviews
  • Localização: [site]/portal_skins/plone_templates
• CSS: .contentViews, .contentViews li, .contentViews li a, .contentViews .selected a, .contentViews li a:hover, .actionItems li
• Localização: [site]/portal_skins/plone_styles/plone.css

No Plone 3 ou 4:

• Template: plone.contentviews
  • Localização: [site]/portal_view_customizations
• CSS: .contentViews, .contentViews li, .contentViews li a, .contentViews .selected a, .contentViews li a:hover, .actionItems li
• Localização: [site]/portal_skins/plone_styles/authoring.css

Informações adicionais:

As abas podem ser desativadas, no entanto são definidas em poucas áreas e variam de acordo com o conteúdo.

Para desativar a aba Contents:

No Plone 2.x:

• Navegue até [site]/portal_actions

  OBS

  Você verá duas ações com o nome Contents e o ID folderContents, mas as categorias são diferentes: objetos de categoria controlam se cada ação aparece para conteúdos que não sejam pastas, e Category folder controla se ela aparece ao visualizar uma pasta (Folder).

• Desmarque Visible?
• Clique em Save no final do formulário

No Plone 3 ou 4:

• Navegue até [site]/portal_actions
• Clique em object
• Clique em folderContents (Contents), ou no nome de qualquer outro objeto de aba que você deseja desativar (Syndication, Rules, Sharing, etc.)
• Desmarque a opção Visible?
• Clique em Save Changes

O restante das abas no Plone 2 são diferentes para cada tipo de conteúdo. Como exemplo, as desativaremos para um documento:

OBS:

Os outros tipos de conteúdo trabalham basicamente da mesma forma.

• Navegue até [site]/portal_types

OBS

Você verá todos os diferentes tipos de conteúdo listados.

• Clique em Document
• Clique na aba Actions no topo da página
• Desmarque a opção Visible? próxima ao nome de qualquer aba que você não quer exibida para objetos de documento
• Clique em Save no final do formulário

OBS

Uma alteração comumente solicitada por usuários e administradores Plone é modificar a caixa das abas (ex: alterar o texto de forma que seja exibido Na Forma De Títulos em vez de totalmente em minúsculas). Isso é facilmente feito alterando o valor da propriedade textTransform delowercase para none em base_properties.

 

No Plone 2.x:

• Template: global_contentmenu
  • Localização: [site]/portal_skins/plone_templates
• CSS: .contentActions, .contentActions ul, .contentActions li, .contentActions ul, .contentActions li, .menuPosition,.actionMenu li, .actionMenu li a, .actionMenu li a:hover, .actionMenu, .actionSeperator a, .actionSingular, .actionItems li
• Localização: [site]/portal_skins/plone_styles/plone.css

No Plone 3 ou 4:

• Template: plone.contentactions
  • Localização: [site]/portal_view_customizations
• CSS: .contentActions, .contentActions ul, .contentActions li, .contentActions ul, .contentActions li, .menuPosition,.actionMenu li, .actionMenu li a, .actionMenu li a:hover, .actionMenu, .actionSeperator a, .actionSingular, .actionItems li
• Localização: [site]/portal_skins/plone_styles/authoring.css

Informações adicionais:

Para desativar um tipo de conteúdo do menu Add New Item em todo o site:

• Navegue até [site]/portal_types
• Clique no tipo de conteúdo que você quer desativar
• Desmarque a opção Implicitly addable?
• Clique em Save
  Voilà! O tipo de conteúdo não será mais exibido no menu Add New Item.

Os estados exibidos no menu States são controlados por meio de [site]/portal_workflow

Todos os tipos de conteúdo do Plone 2 são associados com no mínimo dois templates: um para visualização, e um para edição. Os tipos de conteúdo para Plone 3 ou 4 são associados com no mínimo um template de visualização.

OBS:

Os templates de visualização usam muito CSS que redefinem as tags HTML. Os formulários de edição usam todo o CSS associado a formulários. Todos esses estilos são definidos em uma folha única: 

• No Plone 2.x: [site]/portal_skins/plone_styles/plone.css
• No Plone 3 ou 4: [site]/portal_skins/plone_styles/public.css

O Plone vem equipado com 8 tipos de conteúdo por padrão:

Página

• Templates: 
  No Plone 2.x: document_view e document_edit_form
  No Plone 3.x: document_view
  • Localização: [site]/portal_skins/plone_content
• CSS: .documentDescription, .discreet, e todos os .stx

Evento

• Templates: 
  No Plone 2.x: event_view e event_edit_form
  No Plone 3.x: event_view
  • Localização: [site]/portal_skins/plone_content
• CSS: .documentDescription

Arquivo

• Templates: 
  No Plone 2.x: file_view e file_edit_form
  No Plone 3.x: file_view
  • Localização: [site]/portal_skins/plone_content
• CSS: .documentDescription e .discreet

Pasta

• Templates: 
  No Plone 2.x: folder_contents, folder_listing, e folder_edit_form
  No Plone 3.x: folder_tabular_view, folder_summary_view, folder_listing, e folder_edit_form
  • Localização: [site]/portal_skins/plone_templates e [site]/portal_skins/plone_content
• CSS: .link-parent, .hiddenLabel, .standalone, .documentEditable * .standalone, .listing, .noborder, .documentEditable *.noborder, .state-expired, .context, .documentEditable * .context e muito mais.

Imagem

• Templates: 
  No Plone 2.x: image_view e image_edit_form
  No Plone 3.x: image_view e image_view_fullscreen
  • Localização: [site]/portal_skins/plone_content
• CSS: .documentDescription

Link

• Templates: 
  No Plone 2.x: link_view e link_edit_form
  No Plone 3.x: link_view
  • Localização: [site]/portal_skins/plone_content
• CSS: .documentDescription

Notícia

• Templates: 
  No Plone 2.x: newsitem_view e newsitem_edit_form
  No Plone 3.x: newsitem_view
  • Localização: [site]/portal_skins/plone_content
• CSS: .documentDescription, .discreet, e todos os .stx

Coleção

Uma Coleção é uma busca previamente salva e automaticamente atualizada que lista itens de um site de acordo com um critério específico.

OBS:

Em versões anteriores ao Plone 3, as Coleções são chamadas de Tópicos ou Pastas Espertas. O nome legado "topic" persiste no nomes dos templates das Coleções do Plone 3 ou 4. 

• Templates: 
  No Plone 2.x: topic_view, topic_edit_form, topic_criteria_form, e topic_subtopics_form
  No Plone 3.x: atct_topic_view, e atct_topic_subtopics
  • Localização: 
    No Plone 2.x: [site]/portal_skins/plone_3rdParty/CMFTopic
    No Plone 3.x: [site]/portal_skins/ATContentTypes
• CSS: .documentDescription, .listing, .even

 

No Plone 2.x:

• Template: footer
  • Localização: [site]/portal_skins/plone_templates
• CSS: #portal-footer
  • Localização: [site]/portal_skins/plone_styles/plone.css

• Template: plone.footer
  • Localização: [site]/portal_view_customizations
• CSS: #portal-footer
  • Localização: [site]/portal_skins/plone_styles/public.css

Colophon

No Plone 2.x:

• Template: colophon
  • Localização: [site]/portal_skins/plone_templates
• CSS: #portal-colophon, #portal-colophon ul, #portal-colophon ul li, #portal-colophon ul li a, #portal-colophon ul li
  • Localização: [site]/portal_skins/plone_styles/plone.css

• Template: plone.colophon
  • Localização: [site]/portal_view_customizations
• CSS: #portal-colophon, #portal-colophon ul, #portal-colophon ul li, #portal-colophon ul li a, #portal-colophon ul li
  • Localização: [site]/portal_skins/plone_styles/public.css

   

A seção de cabeçalho carrega consigo arquivos CSS e ecmascript. Nada visível da tela provém do cabeçalho.

No Plone 2.x:

• Template: header
  • Localização: [site]/portal_skins/plone_templates

• Template: plone.header
  • Localização: [site]/portal_view_customizations