Your SlideShare is downloading. ×
0
Construindo temas para Plone com Diazo
Construindo temas para Plone com Diazo
Construindo temas para Plone com Diazo
Construindo temas para Plone com Diazo
Construindo temas para Plone com Diazo
Construindo temas para Plone com Diazo
Construindo temas para Plone com Diazo
Construindo temas para Plone com Diazo
Construindo temas para Plone com Diazo
Construindo temas para Plone com Diazo
Construindo temas para Plone com Diazo
Construindo temas para Plone com Diazo
Construindo temas para Plone com Diazo
Construindo temas para Plone com Diazo
Construindo temas para Plone com Diazo
Construindo temas para Plone com Diazo
Construindo temas para Plone com Diazo
Construindo temas para Plone com Diazo
Construindo temas para Plone com Diazo
Construindo temas para Plone com Diazo
Construindo temas para Plone com Diazo
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Construindo temas para Plone com Diazo

5,277

Published on

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

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,277
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
54
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Criando Temas com Diazo World Plone Day 2012 Brasilia
  • 2. O que é o DiazoNova maneira de criar temas para o PlonePermite aplicar qualquer HTML no Plone
  • 3. Como funcionaCom um simples XML você substitui elementosde seu ‘template’ html por conteúdo geradopelo Plone.
  • 4. Requisitos•Plone 4.1.x + plone.app.themingOu•Plone 4.2
  • 5. Estrutura BásicaUm tema é um simples arquivo .zip contendopelo menos 2 arquivos: • index.html • rules.xml
  • 6. Estrutura BásicaNormalmente o arquivo é bem mais complexo.Contém CSS e imagens.Mas podemos começar dessa maneira...
  • 7. Crie uma pastaCrie a pasta com o nome do seu temaEsta pasta irá guardar os arquivos do seu tema
  • 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. 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. 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. 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. 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. 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. <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. <before /> e <after /><after css:content="#portal-searchbox" css:theme="#conteudo" />Este exemplo colocara o busca do Plone no final da página.
  • 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. <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. 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. Tema mais completoVocê pode encontrar um exemplo de tema mais completo noseguinte endereço:http://plone.org/products/beyondskins.responsive
  • 20. Criando Temas com Diazo World Plone Day 2012 Brasilia

×