Este é um tema mais “avançado” dos que eu já comentei por aqui: como criar meu próprio theme para Drupal.
As etapas básicas para criar o tema são:
- Layout
- Arquivos html, css, imagens, etc
- html –> php, inserindo os campos necessários (baseado no bluemarine)
- modificar o .info
- subsitua o page.tpl.php original pelo seu arquivo html modificado
- habilitar o novo tema no drupal =)
1. Eu quero que meu site Drupal tenha um tema +/- assim: bem quadradão, simplório, com fundo dégradé, domínio de cores escuras (preto e cinza) e que possua os cinco blocos mais comuns de páginas web: cabeçalho, rodapé, conteúdo, colunas à esquerda e à direita …. tchanam:
* tema bem simplão mesmo! eheh =P
Se você não tiver paciência para criar um seu ou quiser pegar um pronto (e também não tem paciência de procurar na net): baixe o PSD aqui.
2. Transformar o desenho acima em um arquivo html é bem simples, você pode fazer usando table, div, etc… o que vc preferir. Aqui, você pode baixar a versão que eu fiz.
3. A parte a seguir, eu segui basicamente este tutorial do Drupal-br:
http://drupal-br.org/tutoriais/criando-um-tema-para-o-drupal
* atenção: a versão usada no tutorial é a 5.x e a versão que eu uso aqui é a 6.3.
Crie uma pasta chamada themes dentro de \sites\all\ do seu drupal e, nela, crie uma cópia da pasta bluemarine (\themes\bluemarine). Renomeie esta cópia para o nome que deseja dar ao seu novo tema (simple template). Copie os arquivos do template dentro da pasta renomeada.
Abra o arquivo html do seu template lado a lado com o arquivo page.tpl.php, para facilitar as alterações.
Primeiro vamos começar pelo cabeçalho HTML e pelo Header em si. Eu sugiro substituir ambos pelo que existe no page.tpl.php, ou seja, trocar:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Template</title>
<link href="style/default.css" rel="stylesheet" type="text/css">
</head>
Pelo código:
<?php
// $Id: rwj.info,v 1.5 2008/12/01 goba Exp $
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php print $language->language ?>" xml:lang="<?php print $language->language ?>" dir="<?php print $language->dir ?>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title><?php print $head_title ?></title>
<?php print $head ?>
<?php print $styles ?>
<?php print $scripts ?>
<script type="text/javascript" src="/misc/jquery.js"></script>
<script type="text/javascript" src="<?php print base_path() . path_to_theme() ?>/scripts/iepngfix_tilebg.js"></script>
<script type="text/javascript" src="<?php print base_path() . path_to_theme() ?>/scripts/functions.js"></script>
<link href="<?php print base_path() . path_to_theme() ?>/style/default.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<style type="text/css">
.pngfix
{
behavior: url("<?php print base_path() . path_to_theme() ?>/scripts/iepngfix.htc");
}
</style>
<![endif]-->
<noscript>
<style type="text/css">
div.detail-box{
display: block;
}
div.details-caller-link{
display: none;
}
</style>
</noscript>
</head> Obs.: Caso você tenha alguma referência a arquivos javascript ou css, salve estas e insira no novo Header, como eu fiz com a linha em negrito.
Obs. 2: Inseri o código PHP para corrigir o caminho relativo do css linkado: <?php print base_path() . path_to_theme() ?>/
No arquivo page.tpl.php, podemos ver vários campos sendo usados, porém como estamos fazendo um tema simples, usaremos apenas alguns destes.
Nos nossos DIVs, copiaremos os seguintes códigos correspondentes:
- HEADER:
<?php if ($site_name) { ?><h1 class='site-name'><a href="<?php print $front_page ?>" title="<?php print t('Home') ?>"><?php print $site_name ?></a></h1><?php } ?> - LEFT:
<?php if ($left) { print $left; } ?> - MAIN:
<?php print $breadcrumb ?>
<h1 class="title"><?php print $title ?></h1>
<div class="tabs"><?php print $tabs ?></div>
<?php if ($show_messages) { print $messages; } ?>
<?php print $help ?>
<?php print $content; ?>
<?php print $feed_icons; ?> - RIGHT:
<?php if ($right) { print $right; } ?> - FOOTER:
<?php print $footer_message ?>
<?php print $footer ?>
* alguns trechos estao um pouco modificados, para melhor adaptar ao código que eu utilizei no meu template.
E para fechar, inclua a seguinte linha antes de fechar a tag body:
<?php print $closure ?>
4. Vamos modificar o info file, que nada mais é a maneira como o Drupal identifica este tema.
Primeiro mude o nome de bluemarine.info para o nome do seu tema: simple template.info.
Abra o arquivo e altere as seguintes informações:
- name = Simple Template
- description = Meu tema simples para testes.
5. Penúltimo passo é apagar o seu arquivo page.tpl.php original (ou renomear para algo como old.page.tpl.php) e renomear o seu arquivo html para page.tpl.php.
6. Para verificar se tudo deu certo, entre em: http://localhost/training/admin/build/themes
Agora habilite, configure como Default e salve para ver se tudo deu certo =)
![FireShotcapture47DrupalTraininglocal[1]](http://lh6.ggpht.com/_O2hxqQLH05I/SpPymbnFXZI/AAAAAAAAGqo/m9c6SombIPE/FireShot%20capture%20%2347%20-%20%27Drupal%20Training%27%20-%20localhost_training_thumb%5B1%5D.png?imgmax=800 "FireShotcapture47DrupalTraininglocal[1]")
É isso!
Caso de dúvidas e/ou correções, a seção de comentários está logo abaixo ;)
Fix: baixe aqui o tema pronto :)
Fix2: para quem quiser substituir o screenshot que aparece na página de temas: redimensione a figura acima para 150x90 e substitua o screenshot.png na pasta do tema.
Postagens
Olá. Gostaria de saber se existe algum tutorial para fazer com a versão 7.x Abraços.
ResponderExcluir