Construindo temas para Plone com Diazo

5,985 views
5,861 views

Published on

Oficina de introdução ao Diazo ministrada por André Nogueira durante o World Plone Day 2012 em Brasília

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,985
On SlideShare
0
From Embeds
0
Number of Embeds
3,382
Actions
Shares
0
Downloads
56
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Construindo temas para Plone com Diazo

  1. 1. Criando Temas com Diazo World Plone Day 2012 Brasilia
  2. 2. O que é o DiazoNova maneira de criar temas para o PlonePermite aplicar qualquer HTML no Plone
  3. 3. Como funcionaCom um simples XML você substitui elementosde seu ‘template’ html por conteúdo geradopelo Plone.
  4. 4. Requisitos•Plone 4.1.x + plone.app.themingOu•Plone 4.2
  5. 5. Estrutura BásicaUm tema é um simples arquivo .zip contendopelo menos 2 arquivos: • index.html • rules.xml
  6. 6. Estrutura BásicaNormalmente o arquivo é bem mais complexo.Contém CSS e imagens.Mas podemos começar dessa maneira...
  7. 7. Crie uma pastaCrie a pasta com o nome do seu temaEsta pasta irá guardar os arquivos do seu tema
  8. 8. Criando o arquivo index.html <html> <head> <title>Meu primeiro Diazo</title> </head> <body> <h1 id="title">Meu primeiro Diazo</h1> <div id="menu">menu do site</div> <div id="conteudo">Lorem ipsum... </div> </body> </html>
  9. 9. Criando o arquivo rules.xml<?xml version="1.0" encoding="UTF-8"?><rulesxmlns="http://namespaces.plone.org/diazo"xmlns:css="http://namespaces.plone.org/diazo/css"xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><theme href=“index.html" css:if-content="#visual-portal-wrapper" /><replace css:content="#portal-globalnav" css:theme="#menu" /><replace css:content="#portal-columns" css:theme="#conteudo" /></rules>
  10. 10. Criando o arquivo rules.xmlDefine qual o template utilizado<theme href=“index.html" css:if-content="#visual-portal-wrapper" />Adiciona a navegação do Plone<replace css:content="#portal-globalnav" css:theme="#menu" />Adiciona o Conteúdo<replace css:content="#portal-columns" css:theme="#conteudo" />
  11. 11. Colocando em prática• Crie um arquivo ZIP com a sua pasta• Adicione ao Portal • Configuração do Portal / Diazo Theme • Clique na Aba Import Theme e adicione seu arquivo Importante, a página de configuração do DIazo não é modificada por segurança.
  12. 12. Colocando em práticaApós aplicar o tema, você deferá ver o seu HTML,com o menu e o conteúdo do Plone.Entretanto os estilos do Plone não são aplicados
  13. 13. Adicionando estilosImportando CSS do Plone<replace css:content="head" css:theme="head" />Essa chamada substitui todo o HEAD do seu HTMLpelo HEAD do Plone
  14. 14. <replace /><replace css:theme="title" css:content="title"/>O resultado aqui é que o elemento <title /> no temaserá substituido pelo elemento <title /> do conteúdo (dinamico).
  15. 15. <before /> e <after /><after css:content="#portal-searchbox" css:theme="#conteudo" />Este exemplo colocara o busca do Plone no final da página.
  16. 16. <drop /><drop css:content="#portal-searchbox .searchSection" />É usado para apagar elementos do tema ou do conteúdoque não serão usados.O exemplo acima apagará o “apenas nesta seção”que vem junto da busca do Plone.
  17. 17. <merge /><merge attributes="class" css:theme="body" css:content="body" / >Usado para combinar os valores dos atributos, especialmenteusado para combinar classes de CSS.• Se o tema possui uma tag body assim: <body class="alpha beta">• e o conteúdo possui uma tag body assim: <body class="delta gamma">• o resultado do exemplo acima seria: <body class="alpha beta delta gamma">
  18. 18. Ordem de ExecuçãoO Diazo executará as regras segundo uma ordem própria e nãonecessariamente segundo a ordem escrita. Não é precisodecorar, mas é bom ter anotado:1º lugar: <before>2º lugar: <drop />3º lugar: <replace>4º lugar: Regras que usam attributes.5º lugar: Regras usando "theme-children"6º e último lugar: <after/>
  19. 19. Tema mais completoVocê pode encontrar um exemplo de tema mais completo noseguinte endereço:http://plone.org/products/beyondskins.responsive
  20. 20. Criando Temas com Diazo World Plone Day 2012 Brasilia

×