Drupal - Construindo template com ZEN Theme

De Pontão Nós Digitais

ZEN Template

ZEN é um simples e poderoso tema para Drupal, feito com HTML5 e design responsivo. Se você está montando sua própria instalação standard drupal, você poderá facilitar o trabalho utilizando ZEN ao invés dos temas padrão Galard, Stark ou Bartik. Esse tema tem bastante documentação em foruns de ajuda, código amigável, comentários em php, html, css e SASS. Até o presente a maior parte dessa documentação é em inglês, mas já há algum material em português.

Por que você deveria usar ZEN? E por que você deveria criar seu próprio tema como um sub-tema ao invés de um tema padrão? Muitas razões.

Se você estiver rodando uma instalação Drupal 7.x e pensa em trabalhar com ZEN 5.x, então você irá precisar do SASS e do Compass Tools. Eles não estão instalados por padrão na maior parte das distribuições linux (e com certeza não no Rwindos). Mas você pode encontrar alguns tutoriais de ajuda na internet de como obtê-lo, como esse: https://drupal.org/node/1548946

Por que e como usar ZEN?

  1. Suporte: prover ou receber suporte para qualquer tema do Drupal pode ser uma tarefa custosa. A primeira razão para isso é que a pessoa que tenta prover suporte não tem o código exato ou nunca viu antes o código do tema que você está usando. Se você modificou um tema já existente, algumas vezes a única resposta para sua dúvida é "Bem, no tema original está funcionando sem problemas. =(". Se você modificou um tema de um jeito desconhecido, será extremamente difícil obter ajuda. Entretanto, se você seguir as linhas-guia de um sub-tema com ZEN (sem modificar, portanto, qualquer arquivo do núcleo do ZEN), qualquer necessidade de suporte será mais simples e rápida. Para isso você deverá modificar os arquivos STARTERKITS de maneiras apropriadas. O núcleo do ZEN é cuidadosamente testado por muitas pessoas, em diversos navegadores diferentes para que seja conhecida toda performance desse tema em diferentes cenários. Dessa forma, qualquer diferença ou problema entre um sub-tema e o núcleo do ZEN pode ser rapidamente isolada para sobrescrita de funções em seu template.php ou em seus arquivos .tpl.php.
  2. Sem Bugs: ocasionalmente podem ser encontrados bugs no núcleo do tema ZEN. Se você modificou qualquer arquivo do núcleo do ZEN, será dificil incorporar atualizações do núcleo na sua versão modificada. Por outro lado, se você modificou apenas os arquivos em um sub-tema feito com ZEN, obter consertos para estes bugs será muito mais fácil. Apenas substuindo o código antigo pelo novo do núcleo o problema estará resolvido. Se seu sub-tema sobrescrever algum código php ou css onde há algum bug, o conserto será cuidadosamente documentado online para que seja mais fácil fazer um update do seu sub-tema.
  3. Novas funcionalidades: De tempos em tempos novas funcionalidades são incorporadas ao núcleo do tema ZEN.

Instalando ZEN

  1. Baixe o pacote do tema no site do projeto: http://drupal.org/project/zen
  2. Descompacte os arquivos baixados em seu-site/sites/all/themes
  3. Logue no painel de sua instalação Drupal com privilégios de administrador e vá para Aparência. Você verá todos os temas instalados listados nessa página. Clique em "Ativar e definir como padrão" e salve as configurações.
 Nota: Pode haver algum conflito desse tema com diretórios já criados no seu sistema por você ou por outros módulos. 
 Esses conflitos as vezes causam problemas como quebra de página, falha no CSS, entre outras coisas. Para ver esses 
 problemas reportados você pode acessar essa página: https://drupal.org/node/457390

Criando um tema com ZEN

O que são temas-base (base themes), subtemas e tema de partida?

Frequentemente, a melhor jeito de aprender um sistema ou um tema é pegar um exemplo existente e modificá-lo para ver como ele funciona. Uma grande desvantagem deste método de aprendizagem é que se você quebrar alguma coisa e não houver um exemplo original para comparar modelos, você poderá ter dificuldades para retroceder passos.

O sistema de temas do Drupal tem uma solução pra isso: temas pai (também chamado de tema-base) e sub-temas. Um "sub-tema" herdará toda marcação HTML, CSS e código PHP do seu tema-base. Desse modo é fácil substituir em um subtema apenas o partes do tema pai que quer modificar.

Já o "tema de partida" é um sub-tema desenhado especificamente para ser um bom ponto de partida para o desenvolvimento de um tema personalizado para o seu site. Geralmente é emparelhado com um tema base.

Como criar um tema com ZEN?

The Zen theme includes the Zen base theme as well as a starter theme called “STARTERKIT”. You shouldn’t modify any of the CSS or PHP files in the zen/ folder; but instead you should create a sub-theme of zen and put it in a folder outside of the root zen/ folder.

Detailed instructions on how to create a Zen sub-theme are available for each major version of Zen.

Como construir um sub-tema (Zen 7.x-5.x) - Manualmente

The base Zen theme is designed to be easily extended by its sub-themes. You shouldn't modify any of the CSS or PHP files in the zen/ folder; but instead you should create a sub-theme of zen which is located in a folder outside of the root zen/ folder. The examples below assume zen and your sub-theme will be installed in sites/all/themes/, but any valid theme directory is acceptable (read the sites/default/default.settings.php for more info.)

IMPORTANT NOTE: In Drupal 7, the theme system caches which template files and which theme functions should be called. This means that if you add a new theme, preprocess or process function to your template.php file or add a new template (.tpl.php) file to your sub-theme, you will need to rebuild the "theme registry." See http://drupal.org/node/173880#theme-registry

Drupal 7 also stores a cache of the data in .info files. If you modify any lines in your sub-theme's .info file, you MUST refresh Drupal 7's cache by simply visiting the Appearance page at admin/appearance.

Drush: If you use Drush, you can take advantage of the drush zen command to automatically generate a sub-theme. For information, type drush help zen. Or view the Drush handbook page How to build your own sub-theme (7.x-5.x) using Drush.

   Setup the location for your new sub-theme.
   Copy the STARTERKIT folder out of the zen/ folder and rename it to be your new sub-theme. IMPORTANT: The name of your sub-theme must start with an alphabetic character and can only contain lowercase letters, numbers and underscores.
   For example, copy the sites/all/themes/zen/STARTERKIT folder and rename it as sites/all/themes/foo.
   Why? Each theme should reside in its own folder. To make it easier to upgrade Zen, sub-themes should reside in a folder separate from the base theme.
   Setup the basic information for your sub-theme.
   In your new sub-theme folder, rename the STARTERKIT.info.txt file to include the name of your new sub-theme and remove the ".txt" extension. Then edit the .info file by editing the name and description field.
   For example, rename the foo/STARTERKIT.info file to foo/foo.info. Edit the foo.info file and change "name = Zen Sub-theme Starter Kit" to "name = Foo" and "description = Read..." to "description = A Zen sub-theme".
   Why? The .info file describes the basic things about your theme: its name, description, features, template regions, CSS files, and JavaScript files. See the Drupal 7 Theme Guide for more info
   Then, visit your site's Appearance page at admin/appearance to refresh Drupal 7's cache of .info file data.
   Choose your preferred page layout method or grid system.
   By default your new sub-theme is using a responsive layout. If you want a fixed-width layout for your theme, delete the unneeded responsive-sidebars and responsive-sidebars-rtl css/sass files and edit your sub-theme's .info file and replace the reference to responsive-sidebars.css with fixed-width.css.
   For example, edit foo/foo.info and change this line:
   stylesheets[all][]   = css/layouts/responsive-sidebars.css
   to:
   stylesheets[all][]   = css/layouts/fixed-width.css
   Why? The "stylesheets" lines in your .info file describe the media type and path to the CSS file you want to include. The format for these lines is: stylesheets[MEDIA][] = path/to/file.css
   Alternatively, if you are more familiar with a different CSS layout method, such as GridSetApp or 960.gs, etc., you can replace the "css/layouts/responsive-sidebars.css" line in your .info file with a line pointing at your choice of layout CSS file.
   Then, visit your site's Appearance page at admin/appearance to refresh Drupal 7's cache of .info file data.
   Edit your sub-theme to use the proper function names.
   Edit the template.php and theme-settings.php files in your sub-theme's folder; replace ALL occurrences of "STARTERKIT" with the name of your sub-theme.
   For example, edit foo/template.php and foo/theme-settings.php and replace every occurrence of "STARTERKIT" with "foo".
   It is recommended to use a text editing application with search and "replace all" functionality.
   Set your website's default theme.
   Log in as an administrator on your Drupal site, go to the Appearance page at admin/appearance and click the "Enable and set default" link next to your new sub-theme.
   Optional steps:
   Modify the markup in Zen core's template files.
   If you decide you want to modify any of the .tpl.php template files in the zen folder, copy them to your sub-theme's folder before making any changes. And then rebuild the theme registry.
   For example, copy zen/templates/page.tpl.php to foo/templates/page.tpl.php.
   Modify the markup in Drupal's search form.
   Copy the search-block-form.tpl.php template file from the modules/search/ folder and place it in your sub-theme's template folder. Don't forget to rebuild the theme registry.
   You can find a full list of Drupal templates that you can override in the templates/README.txt file or http://drupal.org/node/190815
   Why? In Drupal 7 theming, if you want to modify a template included by a module, you should copy the template file from the module's directory to your sub-theme's template directory and then rebuild the theme registry. See the Drupal 7 Theme Guide for more info.
   Further extend your sub-theme.
   Discover further ways to extend your sub-theme by reading Zen's documentation and Drupal 7's Theme Guide.



 Referência: https://drupal.org/node/1549668



Referências: