首頁 › 開發、把玩 drupal 指引

theme user login block form

四, 2008-07-31 16:00 — hom

之前在 怎樣styling user login block ?討論內 回應的內容上有一些錯誤
回應的內容已經沒辦法編輯
所以修改後另外PO一篇

在版型資料夾下的 template.php 內加上

function theme_user_login_block($form){
//自訂登入畫面 block
return _phptemplate_callback('login_block_form', array('form' => $form));
}

然後在版型資料夾下增加一個 login_block_form.tpl.php 的檔案作為樣板檔
直接在樣板檔裡排成我想要的樣子

<div id="custom-login-bar">
<div class="form-label">帳號</div><?php print drupal_render($form['name']) ?>
<div class="form-label">密碼</div><?php print drupal_render($form['pass']) ?>
<div class="form-item">
  <?php print drupal_render($form['submit']) ?>
  <?php print drupal_render($form['form_id']) ?>
</div>
</div>

drupal 的表單必須把 $form['form_id'] & $form['form_token'] 必須 print 出來 表單才有作用
不過 user_login_block 似乎是例外 表單結構內原本就沒有 $form['form_token']
所以這邊只 render $form['form_id']

另外 搭配 imagebutton 還可以把原本的submit按鈕改成圖片

<?php
  $form['submit']['#type'] = 'imagebutton';
  $form['submit']['#image'] = 'xxx/xxx.jpg';
  print drupal_render($form['submit']);
?>

註冊新帳號 & 忘記密碼的連結 也都是定義在$form裡面
在樣板檔裡 print_r($form) 看一下就知道了

然後再加入css (這邊只是簡單示意一下 詳細的 css 請自己再作設定)

<style>
#custom-login-bar  .form-item label {
  display:none;
}

#custom-login-bar .form-item, #custom-login-bar .form-label {
  float:left;
}
</style>

要直接加在樣板檔的檔案內
或版型的 style.css 檔案內都可以
如果是只有一個樣板檔用到的 style
個人是喜歡直接放在樣板檔裡

在樣板檔裡就像一般的網頁製作一樣
隨你怎麼排列
只要知道 element 的名字
想在哪 render 都可以 也不用照 $form 裡的順序
可以改出單用 css 或 hook_form_alter 沒辦法達成的排版

雖然在 $form['name']['title'] 可以把標題改成空字串 而不顯示標題
但是不建議這樣做
因為表單的錯誤訊息會沒有欄位的名稱
例如 請填寫密碼欄位 的錯誤訊息會變成 請填寫 欄位
如果表單的欄位有5個欄位沒填 就會變成

請填寫 欄位
請填寫 欄位
請填寫 欄位
請填寫 欄位
請填寫 欄位

根本沒辦法辨識是哪個欄位未輸入
所以 #title 還是留著比較好
不想顯示標題的時候 建議還是用 css 把 label 隱藏掉

‹ 我是初學者，想要自行開發該如何上手上一層函數庫 ›
‹ theme()的問題 使用Earthen版型造成位置導覽列無法顯示狀況 ›
五, 2008-08-01 07:34 — adrianmak
adrianmak 的照片

Re: theme user login block form

謝謝hom 大~~~~~~~~

日, 2009-01-04 17:58 — 097633
097633 的照片

Re: theme user login block form

<?php  global $user; ?>
<?php if ($user->uid) : ?>
  <span class="login_text"><b>Logged in as: </span> <?php print l($user->name,'user/'.$user->uid); ?> |
  <?php print l("logout","logout"); ?>
    <?php else : ?>
<form action="user/login" method="post" id="user-login">
      <span class="login_text">Username:</span><span class="form-required" title="This field is required.">*</span>
      <input type="text" maxlength="60" name="name" id="edit-name"  size="5" value="" tabindex="1" class="form-text required" /></label>
      <label for="edit-pass"><span class="login_text">Password:</span><span class="form-required" title="This field is required.">*</span>
      <input type="password" maxlength="" name="pass" id="edit-pass"  size="5"  tabindex="2" class="form-text required" /></label>
      <input type="hidden" name="form_id" id="edit-user-login" value="user_login"  />
     <input type="submit" name="op" value="Log in"  tabindex="3" id="edit-submit" class="form-submit" /></form>
      <?php endif; ?>
用这个试试，呵呵，这个是drupal5版本的，刚找到，感觉挺好的。

三, 2009-09-23 09:33 — 大魔王
大魔王 的照片

Re: theme user login block form

想詢問建立template.php和login_block_form.tpl.php
那怎測試預覽效果呢?

像function theme_user_login_block($form)中的theme指的是如果我的theme叫rootcandy的話
就改為function rootcandy_user_login_block($form)?

function theme_user_login_block($form){
//自訂登入畫面 block
return _phptemplate_callback('login_block_form', array('form' => $form));
}

三, 2009-09-23 10:59 — hom
hom 的照片

Re: theme user login block form

不用 function rootcandy_user_login_block($form)
使用 function theme_user_login_block($form) 就可以了

三, 2009-09-23 11:39 — 大魔王
大魔王 的照片

Re: theme user login block form

hom謝謝
那想詢問怎預覽效果呢?因為我打上路徑login_block也看不到這頁。

三, 2009-09-23 12:25 — hom
hom 的照片

Re: theme user login block form

請把使用者登入區塊啟用

RSS feed