Criando Temas com Diazo        World Plone Day 2012                      Brasilia
O que é o DiazoNova maneira de criar temas para o PlonePermite aplicar qualquer HTML no Plone
Como funcionaCom um simples XML você substitui elementosde seu ‘template’ html por conteúdo geradopelo Plone.
Requisitos•Plone 4.1.x + plone.app.themingOu•Plone 4.2
Estrutura BásicaUm tema é um simples arquivo .zip contendopelo menos 2 arquivos:    • index.html    • rules.xml
Estrutura BásicaNormalmente o arquivo é bem mais complexo.Contém CSS e imagens.Mas podemos começar dessa maneira...
Crie uma pastaCrie a pasta com o nome do seu temaEsta pasta irá guardar os arquivos do seu tema
Criando o arquivo index.html     <html>      <head>        <title>Meu primeiro Diazo</title>      </head>      <body>     ...
Criando o arquivo rules.xml<?xml version="1.0" encoding="UTF-8"?><rulesxmlns="http://namespaces.plone.org/diazo"xmlns:css=...
Criando o arquivo rules.xmlDefine qual o template utilizado<theme href=“index.html" css:if-content="#visual-portal-wrapper...
Colocando em prática• Crie um arquivo ZIP com a sua pasta• Adicione ao Portal     • Configuração do Portal / Diazo Theme  ...
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...
Adicionando estilosImportando CSS do Plone<replace css:content="head" css:theme="head" />Essa chamada substitui todo o HEA...
<replace /><replace css:theme="title" css:content="title"/>O resultado aqui é que o elemento <title /> no temaserá substit...
<before /> e <after /><after css:content="#portal-searchbox" css:theme="#conteudo" />Este exemplo colocara o busca do Plon...
<drop /><drop css:content="#portal-searchbox .searchSection" />É usado para apagar elementos do tema ou do conteúdoque não...
<merge /><merge attributes="class" css:theme="body" css:content="body" /  >Usado para combinar os valores dos atributos, e...
Ordem de ExecuçãoO Diazo executará as regras segundo uma ordem própria e nãonecessariamente segundo a ordem escrita. Não é...
Tema mais completoVocê pode encontrar um exemplo de tema mais completo noseguinte endereço:http://plone.org/products/beyon...
Criando Temas com Diazo        World Plone Day 2012                      Brasilia
Construindo temas para Plone com Diazo
Upcoming SlideShare
Loading in...5
×

Construindo temas para Plone com Diazo

5,416

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,416
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
54
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×