Login na horizontal

Hoje, pela manhã, enquato dava uma navegada pelo site da Trellon achei a solução para um problema comum que, provavelmente, quase ninguém sabe.

Criar um login na horizontal sem ter que escrever um form em html.

O grande lance é que o tema permite usar o hook_theme no template.php onde o hook eh o nome do seu tema... ex: garland_theme. Agora tudo fica mais fácil pois podemos criar itens para novos itens de tema ou sobrescrever existentes.

Bem, vamos à solução:

Primeiro precisamos criar o hook_theme para dar as coordenadas ao template engine do Drupal dizendo para ele que deve usar o template "user-login-block" para o form id "user_login_block" no arquivo template.php .

  1. <?php
  2. //....
  3.  
  4. function meutema_theme($existing, $type, $theme, $path) {
  5. return array(
  6. //...
  7. 'user_login_block' => array(
  8. 'arguments' => array('form' => NULL),
  9. 'template' => 'user-login-block', // this is the name of the template
  10. ),
  11. //...
  12. );
  13. }
  14.  
  15. //...
  16. ?>

Agora que já dissemos ao Drupal para renderizar o formulario "user_login_block" usando o template "user-login-block", vamos criar o template.

Crie o arquivo user-login-block.tpl.php no diretorio do seu tema e coloque o código que desejar. Para você ver e testar essa solução eu fiz da seguinte forma:

  1. <?php
  2.  
  3. $form['name']['#title'] = $form['pass']['#title'] = '';
  4.  
  5. $form['name']['#size'] = $form['pass']['#size'] = 6;
  6.  
  7. ?>
  8. <div id="user_login_block">
  9.  
  10. <div id="user-name"><?php print drupal_render($form['name']); ?></div>
  11. <div id="user-pass"><?php print drupal_render($form['pass']); ?></div>
  12. <div id="user-login"><?php print drupal_render($form['submit']); ?></div>
  13. <div id="user-links"><?php print drupal_render($form['links']); ?></div>
  14.  
  15. <?php print drupal_render($form); ?>
  16.  
  17. Template modicficado!
  18.  
  19. </div>

Agora falta o CSS para colocar um campo do lado do outro... como eu não sou expert nisso, vou deixar para algum design resolver isso mas acho que com float: left; resolveria.

Simples né? Agora limpe o cache e atualize a página para ver o resultado.

flw.

Fonte:
http://trellon.com/content/blog/theming-user-register-form-d6

Categoria: