Cadastro Emprego

Fruns

Manual

Traduo

Tutoriais

OpenAtrium

Eventos

Ofertas de

Login do usurio
Incio Tutoriais

Nome de usurio: *

Criando um tema para o Drupal

Senha: * Esse tutorial mostra como transformar um template HTML em um tema do Drupal.

tweet

Login
Como pr-requisito para entender esse tutorial voc vai precisar entender um pouco de PHP, HTML e CSS para conseguir acompanhar tudo. Update: Update Esse tutorial foi feito com base no Drupal 5.x assim no deve funcionar plenamente nas verses superiores sem algumas alteraes. Para esse tutorial tambm necessrio que voc j tenha uma instalao do Drupal na sua mquina. Caso voc ainda no tenha ou no saiba como fazer essa instalao pode ver esse tutorial e esse screencast. Para o melhor entendimento desse tutorial, quando nos referimos a template estaremos falando de um layout feito em HTML e que ainda no tem funcionalidade no Drupal. Quando nos referirmos a tema estamos nos referindo a um template j funcionando no Drupal. Ento, antes de mais nada, precisamos encontrar um template. No nosso tutorial vamos pegar um template j pronto na Internet, no seu caso voc mesmo pode fazer um ou pagar um designer para que o faa. O template escolhido para esse tutorial foi o Standardized disponvel em http://www.freecsstemplates.org/preview/standardized. Esse template grtis, podendo ser baixado gratuitamente. Voc precisar manter os crditos do tema, pois ele est licenciado sob a Creative Commons, mas isso no problema pois estamos em uma comunidade se Software livre no ? :-) Em seguida precisaremos montar nosso tema propriamente dito. Eu tenho por hbito partir de um tema pr-existente, mas voc no precisa fazer isso, uma questo pessoal. Para esse tutorial, vou usar como base o tema Bluemarine que j vem com toda instalao do Drupal. Assim, a primeira coisa a fazer baixar o template (acima voc tem o endereo para download). Em seguida entramos na pasta themes da nossa instalao do Drupal e copiamos toda a pasta do tema bluemarine com um nome diferente, no nosso caso o nome do nosso tema ser tutorial O resultado final ser algo como mostrado abaixo. tutorial. Criar uma conta Recuperar senha

Pesquisa no site

Pesquisar

Assine o RSS do Drupal-BR

RSS dos itens mais ativos RSS contedo pgina inicial RSS de todo contedo RSS dos comentrios

Lista de Discusso
Drupal-BR

Download

ltimas verses
Drupal 7.12 Drupal 6.22

Contribuies
Mdulos Temas Traduo

Em seguida copiamos alguns elementos do template para a pasta do nosso novo tema. No caso desse nosso tema, vamos copiar a pasta images e o arquivo default.css que esto na pasta do template para a pasta do nosso tema. Em seguida, apagamos o arquivo style.css que j estava na pasta do nosso tema e renomeamos o arquivo default.css para style.css. Isso necessrio pois o Drupal entende, por padro, que o nome do arquivo de CSS do nosso tema se chama style.css style.css. Obviamente podemos ter outros aquivos CSS, mas para o nosso tema vamos fazer seguindo o padro. Uma outra coisa que podemos fazer baixar um thumbnail para substituir o que j existe do bluemarine. Isso No imprescindvel mas importante pois atravs desse thumbnail que vamos poder visualizar na rea de administrao de temas qual o nosso tema. No caso do template que baixamos, ele j tem um thumbnail em http://www.freecsstemplates.org/download/thumbnail/standardized. Baixe esse arquivo e substitua o arquivo screenshot.png que est na pasta do nosso tema. Com isso terminamos os preparativos e podemos partir para a construo do tema propriamente dita. Como eu disse me baseio em um tema para construir os meus, ento o trabalho aqui um pouco de copiar e colar, e vou mostrar como estava antes e depois at o resultado final. Para comear o trabalho, primeiro renomeamos o arquivo page.tpl.php do tema que copiamos para algo como page.tpl.php.old e copiamos o arquivo index.html do template para a pasta do tema com o nome page.tpl.php. page.tpl.php.old. page.tpl.php No final poderemos apagar o page.tpl.php.old Em seguida abrimos os dois arquivos para montar o tema. Para facilitar o entendimento, dividi em partes de forma que podemos ir acompanhando pedao por pedao da construo do tema. Comeamos com a tag HTML do nosso tema. No tema original ela assim:

Itens ativos
Publicar contedo Modulo CIELO para Drupal Commerce Erro function.unserialize aps instalar site em outro servidor Site fora do ar Contedo de slideshow traduzivel Agenda e erro em pginas com comentrios aps enviar um formulrio de contato, como obter o status do envio? Mail MIME Taxonomia: diferenas entre D6 e D7 Alterar o layout de um tipo de contedo Veja mais

Aqui vemos duas marcaes em PHP, com a varivel $language que o cdigo do idioma do site. Isso usado para formatar o HTML de acordo com os padres da W3C. No nosso template veio assim:

Perceba que aqui existe um comentrio sobre a licena do template, e a tag HTML no tem designao de idioma, ento modificamos para que fique assim:

Pronto, temos essa parte terminada. Em seguida vamos para os cabealhos. nessa parte que so declarados os estilos, javascript e vrias outras partes importantes do tema do Drupal. Abaixo o original, no tema bluemarine:

E abaixo o original no nosso template:

Por fim temos o resultado final:

Veja que o resultado final igual ao original do bluemarine. Nem sempre ser, no nosso tema vamos usar a estrutura bsica, ento no precisamos de alteraes. Agora uma breve explicao do que cada uma das variveis nessa seo: $head_title - Essa varivel traz o ttulo da pgina. Poderamos preencher o ttulo diretamente, mas perderamos o ttulo que gerado diretamente para cada pgina. Se voc nunca reparou que cada pgina tem um ttulo no Drupal, da prxima vez que voc acessar um site com o Drupal, d uma olhada na barra de ttulo do seu navegador. $head - Essa varivel carrega uma srie de informaes importantes para o seu site. por ela que so carregadas as informaes de quais os RSS disponveis no seu site, o cone que aparece na barra de endereos (conhecido com favicon alm da favicon) codificao da pgina (utf-8, iso-8859-1 e etc). $styles - Como o nome mesmo diz, aqui onde vem as declaraes de estilos. O Drupal pode carregar vrios arquivos

CSS, e de fato ele faz isso. Se voc olhar o cdigo fonte de uma pgina gerada pelo Drupal ver que ele tem vrias chamadas de arquivos CSS, uma para cada mdulo que implementa isso. Em um futuro tutorial sobre construo de mdulo veremos isso. Veja tambm, no cdigo fonte gerado, que existe uma chamada para um estilo chamado style.css esse o style.css do nosso style.css, tema, que a gente copiou do template original, lembra? $scripts - faz exatamente a mesma coisa que a $styles, mas, ao invs de fazer isso com os estilos, faz com os javascript do site. Por ltimo tem uma chamada vazia para um javascript, que no tem funo, mas que deixamos apenas para exemplificar que nem tudo precisa tem uma funo definida na hora de construir o template. Quando houver casos como esse, voc pode remover aqui fica s de exemplo. Agora vamos ver a parte do cabealho do nosso tema. Se voc j deu uma olhada no tema que escolhemos como padro, lembrar que ele tem um cabealho com o menu, em uma barra verde, e abaixo um ttulo. Vamos ento ver como fazer isso. Primeiro vemos como no tema original, o bluemarine:

E depois como veio no template:

Por ltimo vemos como ficou:

Vejamos o que cada uma dessas variveis: $site_name - Contm o nome do site, que preenchemos nas configuraes do site. $base_path - O caminho at a raiz do nosso site. Suponhamos que nosso site seja http://site.com.br/drupal esse ser o $base_path. muito til para poder construirmos links como o caso acima. $site_slogan - o slogan que preenchemos nas configuraes do site. Vemos no original tambm a varivel $logo que a URL do logotipo do site. No caso do tema bluemarine o Drupalicon (gota), no nosso caso no vamos us-lo. Voc, obviamente, pode usar o endereo da imagem diretamente no seu tema, mas smpre bom utilizar a varivel logo pois assim podemos alterar pela interface do Drupal sem precisar mexer no template. Note ainda que mativemos a estrutura do HTML bsico do nosso template. Isso porque podem haver elementos HTML que precisaremos para manter o estilo pretendido. No caso, deixamos o DIV com sua classe header que ele j possui.

Em seguida vamos para a seo que trata do menu. Vejamos como o original no bluemarine

E como o template escolhido trata essa parte:

Por fim, como ficou com a alterao que fizemos:

Antes de mais nada, veja que cortamos algumas coisas no nosso cdigo. O Drupal vem com dois nveis de menu, prontos para serem usados: o primrio e o secundrio. No nosso caso, s vamos usar o primrio, e o secundrio foi excludo. Outra coisa que exclumos foi a caixa de pesquisa, pois vamos usar um bloco para isso. Ento vejamos o que significa cada uma dessas variveis: $secondary_links - Essa varivel que montaria o menu secundrio, que no nosso caso no ir exisitr. $primary_links - Essa a varivel que monta no menu principal. No confunda com o menu de navegao lateral. O menu primrio aqui o menu que o dono do site ir para disponibilizar os itens para os seus usurios acessarem as vrias partes do site. Veremos como inserir um link aqui, logo abaixo $search_box - a caixa de busca do site. Note que essa varivel no carrega o bloco que contm a caixa de busca, mas sim monta uma outra caixa de busca, por isso no vamos us-la, pois faremos isso com o bloco que contem a caixa de busca. Vemos tambm o uso da funo theme com a constante links links. Essa funo monta um menu com os vrios links contidos na varivel que passada para ele. No nosso caso final, temos a montagem do menu primrio. Tambm nos dada a oportunidade de personalizar a classe e o id utilizado nesse menu. Esse tutorial no cobre o uso dessa funo. Agora vamos para a parte principal do nosso tema. O tema nos permite personalizar a apresentao do contedo do site. O Drupal entende que o contedo tudo que exibido na parte principal do do seu site, assim nem tudo que exibido nessa seo de fato contedo, mas coisas como os formulrios de edio, configurao e etc. tambm so

exibidos nessa rea. Vejamos como o original no bluemarine:

Em seguida como veio no nosso template. Note que no est tudo que h no template, apenas uma parte.

Por ltimo como ficou depois de alterarmos:

Novamente veja que mudamos apenas o que precisamos do Drupal. Parte da formatao original do template ficou. Vejamos o que cada uma dessas variveis: $breadcrumb - Essa varivel carrega o breadcrumb, que nada mais do que a trilha ou caminho pelo qual voc passou at chegar em uma determinada parte d site. $title - o ttulo do contedo que voc est vendo. Note aqui que no temos apenas o ttulo de tipos de contedo, mas de toda pgina que acessamos. $tabs - Quando logado temos algumas abas de edio, e essa varivel que as carrega. $help - Mensagens de ajuda so exibidas em algumas partes do site, essa a varivel responsvel por isso. $messages - Toda vez que voc realiza uma ao que necessria alguma mensagem, seja de sucesso ou erro, aqui que ela ser carregada. $content - Aqui onde vem o contedo em si. $feed_icons - Toda vez que uma pgina disponibiliza o contedo em RSS, essa varivel preenchida com um link com uma imagem para o RSS dessa pgina.

Veremos agora a nossa barra lateral da esquerda, que ter a caixa de busca, caixa de login, e, quando logado, o menu de administrao (tambm conhecido como navegao). Vejamos ento o original no bluemarine:

Como o template escolhido veio:

E como ficou no final:

Nesse caso temos apenas uma varivel, $sidebar_left, que ir carregar $sidebar_left todos os blocos que posicionarmos na esquerda. Nesse momento cabe uma explicao sobre como carregar os blocos no Drupal e quais variveis so usadas para isso. O Drupal trabalha com um conceito de regio. Por padro ele define 5 regies onde podemos posicionar blocos. Essas regies so mostradas no template page.tpl.php em forma de variveis como abaixo: $header - Varivel que carrega os blocos posicionados no cabealho de um tema $sidebar_left - Que j vimos e sabemos que carrega os blocos posicionados na barra lateral da esquerda $sidebar_right - Que faz o mesmo que a $sidebar_left mas ao $sidebar_left, invs carrega os blocos na barra lateral da direita

 $content - Que carrega, por padro, os blocos abaixo do contedo $footer_message - Que carrega os blocos posicionados no rodap. possvel que se defina outras regies, mas esse tutorial no ir cobrir isso. Num futuro tutorial falaremos disso. Agora veremos a ltima parte do nosso tema, o rodap. Abaixo a vero original no bluemarine:

E em seguida o template:

Por fim, a verso alterada no nosso tema:

Novamente, parte do template foi mantida, pois ela fundamental para a formatao correta do site. Vejamos o que cada uma dessas variveis: $footer_message - J vimos essa varivel, ela responsvel por carregar os blocos posicionados no rodap. $closure - Essa varivel carrega algumas instrues, geralmente javascript, que devem ser executadas aps o processamento total da pgina. Um bom exemplo o cdigo do Google Analytics. Cada mdulo pode definir o que vir nessa varivel. Por padro ela vem vazia. Pronto, para esse tema que escolhemos, isso tudo que precisamos mexer com PHP/HTML. Veremos agora como deixar mais prximo do template original, pois ainda so necessrios alguns pequenos ajustes de CSS. Antes de mais nada, precisamos habilitar o nosso novo tema. Assim voc deve se logar como administrador, e ir na parte de temas (Adminsitrar -> Construo do site -> Temas) e habilitar o nosso novo tema, e defin-lo como padro:

Vejamos como ficou o site com essas mudanas que fizemos (clique na imagem para ampliar):

Veja que ainda existem coisas a serem feitas. Precisamos colocar o bloco de login, a caixa de busca e formatar o contedo. Vamos criar um item que aparea no menu superior. Para isso crie uma pgina (Criar contedo -> Pgina) e preencha os campos que desejar e em opes de menu preencha como abaixo:

Isso far com que aparea um menu na barra verde. Vejam que, como eu disse antes, o primary links diferente do menu de navegao. Agora ns temos um item no menu superior, podemos criar tantos quantos desejarmos.

Agora vamos habilitar a caixa de busca na barra lateral da esquerda, para isso v at a pgina de adminstrao de blocos (Administrar ->

Construo do Site - > Blocos) e habilitamos o bloco da busca na

esquerda conforme abaixo:

Para que usurios annimos acessem a caixa de busca, precisamos dar a permisso correta:

Pronto, temos todos os elementos que precisamos no nosso site. Nossa caixa de busca ficou assim:

Agora faltam os ajustes de CSS. Precisaremos identificar quais as classes que definem a cor das duas caixas, login e busca alm dos botes e caixa de texto. Olhando o cdigo fonte do template, identifiquei que a caixa de login, no template, tem aplicada a classe boxA e a de busca boxB. Olhando o cdigo gerado pelo site at o momento, pude identificar que o bloco de login possui a classe block-user e o bloco de busca possui a classe blockblock-search. blockAssim, tendo mapeado as classes de origem e destino, editamos o arquivo style.css e trocamos todas as ocorrncias de uma classe (no caso boxA e boxB) por outra (no caso block-user e block-search). blockblockAssim temos o resultado para a caixa de busca:

Mas ainda ainda no est como espervamos. Nem o boto nem a caixa de texto est como espervamos, para isso precisaremos trocar mais uma parte do CSS pelas classes corretas. Vejamos ento. A caixa de texto padro do template utiliza a classe text que vamos ter que trocar pela classe que o Drupal utiliza, chamada form-text. Para isso, editamos novamente o arquivo style.css e formprocuramos or todas as ocorrncias de input.text e trocamos por input.form-text. Igualmente com o boto, que no template tem a input.formclasse button e no Drupal a classe form-submit. formPronto, com todas as classes trocadas, temos como resultado final:

Ento at o momento temos o seguinte com usurio annimo(clique para ampliar):

E com usurio administrador(clique para ampliar):

No entanto no est 100% igual ao que desejamos, pois acima de cada bloco temos um ttulo, coisa que no h no nosso template original. Assim precisamos desabilitar isso. Para tanto acesse a rea de adminstrao dos blocos (Administrar -> Construo do site -> configurar" Blocos) e escolha a opo "configurar dos dois blocos que queremos configurar tirar o ttulo e troque o nome do ttulo do bloco para <none> como <none>, abiaxo:

Por fim, precisamos definir o nome do site, o slogan e a mensagem de rodap. Para isso acesse a rea de adminsitrao do site na parte de informaes (Administrar -> Configurao do site -> Informaes do site) e altere os dados como abaixo e depois salve as informaces (clique para ampliar):

Isso por si s far com que voc tenha esses dados configurado. Porm o slogan do site depende do seu tema. Alguns desse elementos so controlados individualmente por cada tema, e o nosso tema est com o slogan desativado, ento teremos que ativ-lo. Para isso acesse a rea

de configurao do tema (Administrar -> Construo do site -> Temas) e clique na opo "Configurar do nosso tema e, em seguida, Configurar" Configurar marque a caixa de "Slogan do site conforme abaixo: site", Slogan

Pronto, isso termina com a configurao do nosso site, veja como ficar na verso final, com usurio annimo(clique para ampliar):

E com o usurio logado(clique para ampliar):

Temos um template aplicado no nosso site. bom lembrar novamente que esse no o nico mtodo de fazer temas, e para algumas pessoas no o melhor. Tambm deve-se lembrar que esse um exemplo simples e que o Drupal te deixa fazer muito mais coisa do que foi mostrado nesse simples tutorial. Abaixo voc pode baixar o template pronto Duvidas, sugestes e comentrios so bem vindos. Um abrao e espero que seja til para voc. Anexo Tamanho

tutorial.zip 14.14 KB Criando sua prpria autenticao do Drupal acima Desenvolvendo Portais com o CMS Drupal

Enviado por rafael em dom, 12/16/2007 - 15:50 leituras

5.x Verso para

impresso Se logue ou se registre para poder enviar comentrios 24239

Em seg, 12/17/2007 - 13:24 danieldocki disse: aprendi e muito com esse tutorial e espero mais alguns...
Se logue ou se registre para poder enviar comentrios

Em qui, 12/30/2010 - 09:49 nuvenus disse: Outro material muito completo sobre o assunto! Essa comunidade s tem fera mesmo! amo muito tudo isso!
Se logue ou se registre para poder enviar comentrios

Em qua, 01/05/2011 - 09:14 marketingdovale disse: Poh amigo esse outro link que voc postou ai no est com nada. esse tutorial j tem um tempo mais achei muitas coisas interessantes nele. Valeu pelas informaes. Marketing do Vale - links patrocinados - criao de sites
Se logue ou se registre para poder enviar comentrios

Em qua, 12/19/2007 - 22:01 Alucard disse: Excelente tutorial, um dos melhores do gnero que vi na web at hoje, ficou muito bem explicado. Valeu! J
Se logue ou se registre para poder enviar comentrios

Em qui, 02/07/2008 - 11:05 thi.dias disse: Gostei do tutorial. J deu pra me tirar do zero. Agora tenho umas dvidas. Primeiro: O menu horizontal fica em que regio? header ou content? Segundo: No ficou muito claro pra mim quanto ao cdigo fonte do site. Pra fazer toda modificao que eu preciso, s vou mexer no cdigo do page.tpl.php? No preciso modificar o cdigo dos blocos? D uma detalhada mais quanto a isso, se possvel. Obrigado desde j. E parabns.

Se logue ou se registre para poder enviar comentrios

Em qui, 02/07/2008 - 13:16 rafael disse: Ol, O menu pode ficar onde voc quiser. Voc pode posicionar qualquer menu em qualquer regio, pois sempre que voc cria um menu (pela interface do Drupal) automaticamente disponibilizado um bloco com esse menu (na rea de blocos da administrao do Drupal). L voc coloca o bloco em qualquer regio. Se voc est se refereindo ao menu "primary links" que j vem por padro, esse voc posiciona onde desejar, movendo a varivel $primary_links no page.tpl.php Vou ver se melhoro a explicao dos outros elementos. Mas j adianto. No geral vc vai precisar mexer no page.tpl.php se voc quiser mudar o estilo de formatao dos blocos, voc pode mexer no block.tpl.php tb. Espero que ajude. Abrao, -Rafael Ferreira Silva http://www.rafaelsilva.net
Se logue ou se registre para poder enviar comentrios

Em seg, 02/11/2008 - 10:10 thi.dias disse: Vlw, vou aguardar os detalhes, mas j vou meter a mo na massa. Faz tempo que adio esse projeto. Agora vai! Muito obrigado.
Se logue ou se registre para poder enviar comentrios

Em qua, 10/15/2008 - 22:00 SpyderIt disse: Muito bom mesmo!! faltou o passo de alterar o .info para identificar o theme, mas vou te falar, precisamos de mais material como esse em portugus. parabns e obrigado rss, Flavio Ribeiro www.spyderit.com.br Flavio Ribeiro www.spyderit.com.br
Se logue ou se registre para poder enviar comentrios

Em sex, 10/24/2008 - 16:53 Tonscosta disse:

Pois cara... como eu fao pra alterar o info, pois o meu template num t aparecendo l nos temas
Se logue ou se registre para poder enviar comentrios

Em qua, 11/12/2008 - 08:58 chico_melo disse: Eae Tonscosta! ento cara, pra alterar o arquivo info moleza. No pacote do template que foi mostrado no vem o arquivo info, ento basta voc copiar de algum outro modulo (bluemarine por ex) o arquivo "bluemarine.info", altere o nome para o nome do seu template (tutorial.info por ex) e edite ele em qualquer editor de texto! basicamente vc ir encontrar a seguinte estrutura: name = Bluemarine description = Table-based multi-column theme with a marine and ash color scheme. version = VERSION core = 6.x ento basta alterar o name (nome do seu template), description (descrio do seu template), version (verso dele tipo 0.1 pra comear xD) e o core (seria para qual verso do drupal ser o template) aps esses itens modificados seu template jah ir aparecer na lista dos temas disponives ! vlw =D =D
Se logue ou se registre para poder enviar comentrios

Em sex, 11/21/2008 - 14:37 cesarioalvim disse: E ai beleza? o tutorial e realmente muito bom so qeu nao estou conseguindo fazer a minha pagina aHTML aparecer la dentro ela ta cheia de flash fotos e tudo pronto mudei o nome do info tb ela aprece la s qe fica tudo desconfigurado as figuras nao aparecem la... nem os textos. como que fao?
Se logue ou se registre para poder enviar comentrios

Em ter, 05/12/2009 - 15:46 flavio_tito disse: recoverable fatal error: Object of class stdClass could not be converted to string in C:\xampp\htdocs\drupal-6.11 \themes\tutorial\page.tpl.php on line 7. Segui o tutorial em cada detalhe, mas esse erro aparece no topo da minha pgina. Minha verso drupal-6.11.

algum sabe me dizer o que acontece? obrigado.

Se logue ou se registre para poder enviar comentrios

Em qui, 05/21/2009 - 09:15 rafael disse: Flvio, Esse tutorial foi feito pensando no Drupal 5, ento alguma coisa pode, de fato, dar errado na verso 6. Vou tentar fazer uma atualizao para que ele funcione no 6 e posto aqui. Abrao -Rafael Ferreira Silva http://www.rafaelsilva.net
Se logue ou se registre para poder enviar comentrios

Em sex, 09/11/2009 - 04:24 Jhonatta disse: Flvio e Rafael, o mesmo problema ocorreu comigo. Encontrei a soluo aqui: http://drupal.org/node/241896 Bsicamente, s substituir $language por $language->language, no arquivo citado na mensagem de erro
Se logue ou se registre para poder enviar comentrios

Em qua, 01/05/2011 - 09:09 claudiorodrigues disse: Tambm estava tendo esse problema e ai abandonei um pouco o projeto, quando voltei no tpico estava a soluo no tpico que voc postou. Obrigado pela ajuda ai. Vagas POA - Anunciar vagas de Emprego
Se logue ou se registre para poder enviar comentrios

Em qui, 05/21/2009 - 12:44 flavio_tito disse: obrigado Rafael!

Se logue ou se registre para poder enviar comentrios

Em qua, 11/23/2011 - 14:02 dilsondourado disse: Tutorial excelente!!!!!

Se logue ou se registre para poder enviar comentrios

Este site feito, orgulhosamente, com Drupal.

Gentilmente hospedado por