O objetivo é criar um tema padrão com 3 colunas, cabeçalho, barra de menu e rodapé:

Transcrição

1 Este artigo tem por objetivo mostrar de maneira simples e direta o passo-a-passo de como criar um tema para XOOPS de maneira rápida e simples. Não vou adentrar a explicação de código, vou postando as estruturas de repetição responsáveis por trazer cada informação como os blocos do XOOPS e as informações de cabeçalho, rodapé e variáveis internas. O objetivo é criar um tema padrão com 3 colunas, cabeçalho, barra de menu e rodapé: 1

2 Capítulo 1: Variáveis do tema. Vamos começar com uma lista de variáveis que você terá que conhecer antes de começar a criar seu template, são elas: <{$xoops_module_header> Carrega o cabeçalho dos módulos XOOPS, como scripts e arquivos de CSS. É inserido antes da tag </head>, ou seja, dentro do cabeçalho do documento. <{$xoops_sitename> <{$xoops_pagetitle> <{$xoops_charset> <{$xoops_langcode> <{$xoops_meta_keywords> Exibe o nome do site, deve ficar dentro da tag <title> Exibe o título da página, slogan e titulo de páginas. Deve ficar dentro da tag <title> Define o Charset do seu tema, não colocar esta variável corretamente ou deixa-la ausente causa um velho problema conhecido de todos nós, ou seja, o seu site com icones desconfigurados. De ver inserida no cabeçalho do documento. Esta variável define a linguagem do seu site. Deve estar presente também no cabeçalho do documento. Exibe as palavras chave do seu site. A mesma fica dentro do cabeçalho. <{$xoops_meta_description> Exibe a descrição de seu site, a mesma fica dentro do cabeçalho e é imprescindível sua presença. <{$meta_copyright> <{$xoops_meta_author> <{$meta_rating> <{$meta_robots> <{$xoops_themecss> <{$xoops_banner> <{$xoops_footer> <{$xoops_imageurl> <{$xoops_url> <{$xoops_contents> Exibe o copyright do site. Exibe o nome do autor do site. Exibe a classificação etária do seu site. Define o que será indexado em seu site. Carrega o caminho da folha de estilo do seu tema. Exibe o Banner do XOOPS, escolha uma área no tema para inserir esta variável. Carrega a mensagem do rodapé de seu tema. Carrega o caminho de uma imagem dentro do diretório do seu tema, não necessita de / após a variável. Carrega a url do site, necessita de / após a variável. Exibe o título de um bloco. Exibe o conteúdo de um bloco. Carrega o conteúdo da página. 2

3 Capítulo 2: Estrutura do Cabeçalho Vamos começar mostrando como é a estrutura de um cabeçalho de uma página HTML comum:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="pt_br" lang="pt_br">  <head>  <meta http-equiv="content-type" content="text/html; charset=utf-8" />  <meta http-equiv="content-language" content="pt_br" />  <meta name="robots" content="index,follow" />  <meta name="keywords" content="palavras chave do site aqui" />  <meta name="description" content="descrição do site aqui" />  <meta name="rating" content="classificação do site" />  <meta name="author" content="autor do site" />  <meta name="copyright" content="copyright do site" />  <title>meu Site - XOOPS</title>  <link rel="stylesheet" type="text/css" media="all" href="caminho da folha de estilo aqui" /> </head> 3

4 Vamos agora adequar isso ao padrão do XOOPS, fazer com que ele preencha essas informações dinamicamente através do painel de controle adicionando as variáveis que citamos no capitulo 1, o cabeçalho ficaria assim: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="<{$xoops_langcode>" lang="<{$xoops_langcode>"> <head> <meta http-equiv="content-type" content="text/html; charset=<{$xoops_charset>" /> <meta http-equiv="content-language" content="<{$xoops_langcode>" /> <meta name="robots" content="<{$xoops_meta_robots>" /> <meta name="keywords" content="<{$xoops_meta_keywords>" /> <meta name="description" content="<{$xoops_meta_description>" /> <meta name="rating" content="<{$xoops_meta_rating>" /> <meta name="author" content="<{$xoops_meta_author>" /> <meta name="copyright" content="<{$xoops_meta_copyright>" /> <meta name="generator" content="xoops" />  <meta http-equiv="x-ua-compatible" content="ie=100" /> <title><{$xoops_sitename> <{if $xoops_pagetitle!=''> - <{$xoops_pagetitle><{/if></title> <link href="<{$xoops_url>/favicon.ico" rel="shortcut ICON" /> <link rel="stylesheet" type="text/css" media="all" href="<{$xoops_url>/xoops.css" /> <link rel="stylesheet" type="text/css" media="all" href="<{$xoops_themecss>" /> <{$xoops_module_header> </head> Pronto, feito isso temos uma estrutura de um cabeçalho no formato do XOOPS, assim poderemos editar seus valores dentro da administração do XOOPS sem precisar editar diretamente o HTML do seu site, simples não?! 4

5 Capítulo 3: Os Blocos do XOOPS! Sabemos que no XOOPS utilizamos blocos para exibir o conteúdo do nosso site, ao todo são 8 (oito) blocos, são eles: Bloco da Esquerda Bloco da Direita Bloco Central Bloco Central Esquerda Bloco Central Direita Bloco Central Inferior Bloco Central Inferior da Esquerda Bloco Central Inferior da Direita Podemos customizar a forma de exibição destes bloco infinitamente, mais no tutorial vou abordar a transposição do conteúdo em colunas, onde o conteúdo vai se dividir em: 1. Coluna da Esquerda: Será exibido os blocos da esquerda 2. Coluna da Direita: Será exibido os blocos da direita 3. Coluna central: Serão exibidos os blocos central, central direita e esquerda, central inferior e central inferior direita e esquerda. Qualquer duvida quanto a transposição da informação basta ver o gráfico que simboliza esta estrutura no topo deste tutorial. Um bloco XOOPS contem as seguintes informações: 1. Uma estrutura de repetição que diz que enquanto existir blocos ele vai exibi-los. 2. Dentro da estrutura de repetição de um bloco é exibido um título e um conteúdo distinto de cada bloco, cada bloco tem uma identificação única, o que torna possível trazer estas informações. 5

6 Abaixo podemos ver o código de cada posição de bloco XOOPS: Bloco da Esquerda: <{foreach item=block from=$xoblocks.canvas_left> Bloco da Direita: <{foreach item=block from=$xoblocks.canvas_right> Bloco do Centro: <{foreach item=block from=$xoblocks.page_topcenter> Bloco Esquerdo do Centro: <{foreach item=block from=$xoblocks.page_topleft> Bloco Direito do Centro: <{foreach item=block from=$xoblocks.page_topright> Bloco Central Inferior: <{foreach item=block from=$xoblocks.page_bottomcenter> Bloco Central Inferior Esquerdo: <{foreach item=block from=$xoblocks.page_bottomright> Bloco Central Inferior Direito: <{foreach item=block from=$xoblocks.page_bottomleft> Só para fixar, como vocês podem ver, cada bloco é composto por 3 partes: 6

7 O bloco propriamente dito, onde cada bloco é indicado após a variável $xoblocks(canvas_left, canvas_right, page_topcenter, page_topleft, page_topright, page_bottomcenter, page_bottomright, page_bottomleft) e esta devidamente dentro de uma estrutura de repetição(foreach). O título do bloco O conteúdo do bloco Favor ver a imagem do início do capítulo para melhor entendimento. Agora que já temos os códigos necessários para montar a estrutura de blocos do nosso tema XOOPS podemos partir para o próximo capitulo onde iremos ver como criar a seção de conteúdo, que é onde serão exibidos os conteúdos de suas páginas e como criar o rodapé do site. Vale lembrar que não é obrigatório o uso de todas as posições dos blocos do XOOPS, o webdesign pode escolher quais ele vai trabalhar minimizando ainda mais a tarefa de criação de um tema simples, que não necessite de tantas posições. 7

8 Capítulo 4: Área de Conteúdo, Banner e Rodapé Estamos quase finalizando a parte teórica e em breve vamos ver como montar tudo, neste capitulo iremos ver como inserir a área de conteúdo, que é onde os textos gerados pelos módulos como conteúdos, imagens e etc... irão aparecer dentro do tema. Para inserir uma área de conteúdo iremos usar a variável <{$xoops_contents>, a localização dela deve estar no topo dos blocos centrais, ou seja, acima do primeiro bloco central, mais na frente vamos ver onde a colocar, para exibir os banners nativos do XOOPS usaremos a variável <{$xoops_banner>, esta variável deverá ficar em uma área de sua preferência, geralmente é inserida no topo, o uso da mesma não é obrigatório. Para inserir o rodapé basta utilizar a variável <{$xoops_footer>, a mesma fica na parte inferior do site e é responsável por exibir as informações inseridas no rodapé de seu site no painel administrativo. A transposição das informações ficará desta forma: 8

9 Capítulo 5: Criando um Novo Tema Neste capitulo iremos criar um template para XOOPS com as informações que já foram passadas até aqui, para começar vá até a pasta themes de sua instalação XOOPS e crie uma nova pasta com o nome de seu tema, escolha o nome que mais lhe agradar e mãos a obra! Após criar a pasta do seu tema no diretório themes crie um arquivo chamado theme.html e outro chamado style.css, ou seja, o arquivo fonte de seu tema e sua folha de estilo, neste artigo não vou abordar a criação de temas com imagens, faremos tudo via HTML e CSS, é imprescindível o conhecimento mínimo dessas duas linguagens para que possamos prosseguir daqui. 9

10 Agora vamos editar os arquivos de nosso novo tema, para iniciar é bom usar um editor de texto mais limpo, recomendo o Notepad++ que pode ser baixado aqui: Depois de baixar e instalar, clique com o botão direito do mouse em cima do arquivo theme.html e escolha a opção Editar com Notepad++, vamos agora começar a codificar o tema, iniciaremos obviamente inserindo o cabeçalho do template: Código: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="<{$xoops_langcode>" lang="<{$xoops_langcode>"> <head> <meta http-equiv="content-type" content="text/html; charset=<{$xoops_charset>" /> <meta http-equiv="content-language" content="<{$xoops_langcode>" /> <meta name="robots" content="<{$xoops_meta_robots>" /> <meta name="keywords" content="<{$xoops_meta_keywords>" /> <meta name="description" content="<{$xoops_meta_description>" /> <meta name="rating" content="<{$xoops_meta_rating>" /> <meta name="author" content="<{$xoops_meta_author>" /> <meta name="copyright" content="<{$xoops_meta_copyright>" /> <meta name="generator" content="xoops" /> <meta http-equiv="x-ua-compatible" content="ie=100" /> <title><{$xoops_sitename> - <{$xoops_pagetitle></title> <link href="<{$xoops_url>/favicon.ico" rel="shortcut ICON" /> <link rel="stylesheet" type="text/css" media="all" href="<{$xoops_themecss>" /> <{$xoops_module_header> </head> 10

11 Agora vamos criar o corpo do nosso documento, nele ficam os banners, blocos, área de conteúdo e rodapé. Código: <body> <{$xoops_sitename> <{$xoops_banner>  <{foreach item=block from=$xoblocks.canvas_left>  <{foreach item=block from=$xoblocks.canvas_right>  <{$xoops_contents> 11

12  <{foreach item=block from=$xoblocks.page_topcenter>  <{foreach item=block from=$xoblocks.page_topleft>  <{foreach item=block from=$xoblocks.page_topright>  <{foreach item=block from=$xoblocks.page_bottomcenter>  <{foreach item=block from=$xoblocks.page_bottomright>  <{foreach item=block from=$xoblocks.page_bottomleft> <{$xoops_footer> </body> </hmtl> Pronto, o tema está criado! Agora é só começar a estilizar ele, para isso iremos criar a estrutura tableless que vai alinhar todas as informações, lembram do nosso prototipo do início do artigo? Então, baseado nele iremos criar a nossa estrutura de divs para deixar o resultado final igual ao planejado. Lembrando, o conhecimento básico de HTML e CSS são necessários, pois neste tutorial não vou adentrar a explicações sobre as linguagens, então se tiver duvidas quanto algum termo citado aqui, por favor, acesse o site: 12

13 Capítulo 6: Aplicando o Estilo ao Tema Vamos começar estruturando o corpo do tema, antes de qualquer coisa precisamos criar uma estrutura de DIVs seguindo a ordem abaixo: 1. Uma DIV que engloba todo o tema, vou chama-la de corpo ; 2. Uma DIV com o nome cabecalho onde vai ficar o titulo do site e o banner; 3. Fecharemos a div cabecalho ; 4. Criaremos uma div com o nome menu e fecharemos; 5. Abaixo de menu criaremos a div da esquerda; 6. Abaixo da div da esquerda criaremos a div da direita; 7. Agora criaremos uma div com o nome centro, dentro dela ficarão todas as demais divs centrais, são elas: conteudo, blococentro, blococentroesq, blococentrodir, centroinferior, inferiordireito, inferioresquerdo. 8. Fecharemos a div centro; 9. Criaremos uma div com o nome rodape ; 10. Fecharemos a DIV Corpo; Abaixo os códigos das DIVs, vejam como deverá ficar: <div id="corpo">  <div id="cabecalho">  </div>  <div id="menu">  </div>  </div>  <div id="direita">  </div>  <div id="centro">  <div id="conteudo">  </div>  <div id="blococentro">  </div>  13

14 <div id="blococentroesq">  </div>  <div id="blococentrodir">  </div>  <div id="centroinferior">  </div>  <div id="inferioresquerdo">  </div>  <div id="inferiordireito">  </div>  </div>  <div class="clear"></div>  </div>  <div id="rodape">  </div>  14

15 Lembrando que essa é nossa estrutura de DIVs, ainda esta faltando o estilo, vamos abrir o nosso arquivo style.css e criar as IDs e Classes que referenciamos no nosso theme.html, o codigo do style.css ficará assim por enquanto: *{ margin:0; padding:0; body{ background:#6d6d6d; div{ margin-bottom:5px; /*Somente para vizualizar as divs, depois removeremos*/.clear{clear:both; margin:0; padding:0; width:auto; height:0px; #corpo{ background:#acacac; width:800px; margin:0 auto; #cabecalho{ background:#ebebeb; width:auto; height:100px; #menu{ background:#ebebeb; width:auto; height:30px; #esquerda{ background:#ebebeb; width:150px; float:left; min-height:150px; 15

16 #direita{ background:#ebebeb; width:150px; min-height:150px; float:right; #centro{ background:#fff; margin:0 auto; width:490px; min-height:150px; #conteudo{ /*Sera inserido mais a frente*/ #blococentro{ background:#d6d6d6; width:480px; min-height:50px; margin:0 auto; #blococentroesq{ background:#d6d6d6; float:left; width:235px; min-height:50px; margin-left:5px; margin-top:5px; #blococentrodir{ background:#d6d6d6; float:right; width:235px; min-height:50px; margin-right:5px; margin-top:5px; #centroinferior{ background:#d6d6d6; width:480px; min-height:50px; 16

17 float:left; margin-left:5px; #inferioresquerdo{ background:#d6d6d6; float:left; width:235px; min-height:50px; margin-left:5px; #inferiordireito{ background:#d6d6d6; float:right; width:235px; min-height:50px; margin-right:5px; #rodape{ background:#ebebeb; margin:5px auto; width:800px; height:30px; line-height:30px; text-align:center; 17

18 Lembrando que esta estrutura é apenas para exemplificar como deverá ficar o alinhamento das DIVs que irão abrigar os seus devidos blocos ou elementos do tema, cada ID esta com um nome que sugere o bloco ou elemento que ela irá carregar. Vamos agora montar tudo, alimentar cada DIV com seu devido bloco/elemento. <div id="corpo">  <div id="cabecalho">  <{$xoops_sitename> <{$xoops_banner> </div>  <div id="menu">  <{foreach item=block from=$xoblocks.canvas_left> </div>  <div id="direita">  <div id="centro">  <div id= conteudo >  <{$xoops_contents> </div>  <div id="blococentro">  <{foreach item=block from=$xoblocks.page_topcenter> </div>  18

19 <div id="blococentroesq">  <{foreach item=block from=$xoblocks.page_topleft> </div>  <{foreach item=block from=$xoblocks.page_topright> </div>  <div id="centroinferior">  <{foreach item=block from=$xoblocks.page_bottomcenter> </div>  <div id="inferioresquerdo">  <{foreach item=block from=$xoblocks.page_bottomleft> </div>  <div id="inferiordireito">  <{foreach item=block from=$xoblocks.page_bottomright> </div>  </div>  <div class="clear"></div>  </div>  <div id="rodape">  <{$xoops_footer> </div>  19

20 Só para lembrar, o código citado acima deve estar dentro do corpo do seu theme.html, ou seja, entre as tags: <body>...código... </body>. Feito isso já está quase tudo pronto, se você alterar o tema padrão do XOOPS para o tema que acabou de criar, ele vai exibir o seu conteúdo normalmente no seu site. No próximo capitulo iremos aplicar o estilo aos títulos dos blocos e ao elementos do XOOPS, como títulos de noticias e as suas tabelas internas. 20

21 Capítulo 7: Aplicando Estilo aos Elementos Neste capitulo iremos customizar o banner, logo, titulo dos blocos, conteudo dos blocos, área de conteúdo, rodapé, menu principal e pessoal, notícias e tabelas. Se você criou o seu theme.html e style.css corretamente seguindo todas as informações contidas aqui seu tema estará parecido com este: 21

22 Nenhum pouco atraente ainda, concordam? Vamos começar a deixa-lo com uma cara mais amigável, começaremos pelo cabeçalho, alinhando o banner e o logo do site. Vá para sua folha de estilo (style.css) e crie duas classes: logo e banner No theme.html na variável <{$xoops_sitename> atribua a ela um H1 com a classe logo e na váriavel <{$xoops_banner> coloque a mesma em uma div atribuindo a mesma a classe banner. Seu código irá ficar assim: theme.html <h1 class="logo"><{$xoops_sitename></h1> <div class="banner"><{$xoops_banner></div> Vejam o resultado abaixo: style.css.logo{ float:left; margin-left:5px; line-height:100px;.banner{ width:468px; height:60px; margin:0; position:relative; float:right; margin-right:5px; margin-top:20px; Bem melhor não é verdade? Vamos Agora arrumar o Menu, na sua folha de estilo procure a ID menu, para deixar organizado, abaixo dela crie mais duas ID s: menu a e menu a:hover que nada mais é do que o estilo do seu link ativo e do link quando o mouse passar por cima do mesmo. Código: #menu a{ float:left; width:90px; line-height:30px; text-decoration:none; text-align:center; color:#0080c0; font-variant:small-caps; #menu a:hover{ background:#fff; color:#005279; font-variant:normal; 22

23 Vejam abaixo o resultado desta alteração: Agora vamos aplicar estilo aos blocos. Notem que os links do menu principal estão alinhados lado a lado e que os titulos dos blocos não se diferenciam de seu texto, para mudar isso vá até sua folha de estilo e crie as ID s: 1. #mainmenu a > Estilo dos links ativos do menu principal do XOOPS. 2. #usermenu a > Estilo dos links ativos do menu pessoal do XOOPS. 3. #mainmenu a:hover > Estilo do menu principal do XOOPS quando o mouse esta em cima do Link. 4. #usermenu a:hover > Estilo do menu pessoal do XOOPS quando o mouse esta em cima do Link. 5. #blocotitulo > Este será o estilo dos títulos de todos os blocos de seu tema, é importante que você vá em cada variável e atribua a ela uma div com a ID #blocotitulo. O resultado será este: <div id= blocotitulo > </div>, não esqueça de fazer isso em todos os blocos de seu tema. 6. #conteudobloco > Faça o mesmo procedimento que fez com os títulos dos blocos, neste caso vá em todas as variáveis e atribua a cada uma div com um ID #conteudobloco. O Resultado será este: <div id= conteudobloco > </div>, não esqueça de fazer isso em todos os blocos de seu tema. Após aplicar as ID s #blocotitulo e #conteudobloco as suas devidas variáveis em todo o tema vamos aplicar os atributos na nossa folha de estilo (style.css), o código ficará assim: #mainmenu a, #usermenu a{ 23

24 color:#09c; display:block; text-decoration:none; line-height:25px; border-bottom:1px dashed #09C; padding-left:3px; #mainmenu a:hover, #usermenu a:hover{ color:#069; border-bottom:1px dotted #069; #blocotitulo{ color:#6d6d6d; font-size:1.2em; #conteudobloco{ padding-left:3px; padding-right:3px; text-align:justify; Veja abaixo o resultado em seu tema: 24

25 Agora vamos editar a área de conteúdo do nosso tema, não há muito o que fazer nesta parte, no meu caso vou apenas dar algumas margens pois como podem ver o conteudo esta muito colado nas laterais da DIV, vejam: Então é só ir na sua folha de estilo e aplicar o seguinte código na ID #conteudo: #conteudo{ width:480px; margin:0 auto; Feito isso veja como ficará o resultado: 25

26 Notem que agora há um espaçamento entre as laterais da área de conteúdo, é possível ainda notar uma div vazia do lado direito, isso ocorre porque nesta seção não existe um bloco definido, ou seja, não tratarei neste artigo sobre temas com centro fluído, isso ficará para próximos artigos, aos mais ansiosos aconselho visitar a documentação do Theme Factory para ver como trabalhar com este recurso. Bom, aqui finaliza o artigo, isso é basicamente o que você precisa saber para criar um tema para XOOPS, afim de conhecer mais a estrutura de um template aconselho que baixem templates e analisem os códigos dos mesmos para aperfeiçoar seus conhecimentos, ainda é válido e indicado verificar a documentação do Smarty PHP para aprender mais sobre todos os recursos que esta linguagem tem a oferecer, não se limitem ao que esta escrito neste tutorial, busquem mais conhecimento e compartilhem o que aprenderem, isso é software livre! Links Úteis: Documentação Smarty em Português: Tudo sobre CSS: Site oficial do XOOPS: Site oficial de suporte brasileiro: Site do autor deste material: