您在這裡

怎樣styling user login block ?

adrianmak's 的頭像
adrianmak 在 2008-06-04 (三) 12:00 發表

原來放在left side region

客戶想放到最頂,一行過,像以下ps 圖

除了將user login block 由left side region 移到header region
要一行過顯示要怎樣做到?

當移到header 就變了這樣子 ,不是我想要的

1. 不是一行過
2. 不是在banner 之上

我目前的做法是

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


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

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

帳號

<?php drupal_render($form['name']) ?>

密碼

<?php drupal_render($form['pass']) ?>

<?php drupal_render($form[submit]) ?>
<?php drupal_render($form['form_id']) ?>
<?php drupal_render($form['form_token']) ?>

$form['form_id'] & $form['form_token'] 必須 print 出來 表單才有作用
另外 搭配 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.css下都可以
只有一個樣板檔用到的個人是喜歡直接放在樣板檔裡

在樣板檔裡就像一般再製作網頁一樣
隨你怎麼排列
只要知道 element 的名字
想在哪 render 都可以 也不用照 $form 裡的順序

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

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

根本沒辦法辨識 所以 #title 還是留著比較好

改好之後只要把登入區塊改到 header region 就行

banner部分的問題
你可把 banner 的部分也作成block 在 header region 裡面調整順序

請教一下你這個方法輸出會包含 form tag 嗎?
我照著嘗試但是似乎有蠻多問題的
不知道是不是版本的差異, 我用的是 5.7/5.8

首先是 drupal_render() 會回傳 html code, 所以 <?php drupal_render() ?> 並不會有任何輸出
再來是 drupal_render() 的 html code 已經包含 label 了, 所以上面的例子會重複出現 label
如果要改的話應該怎麼修改會比較漂亮?
然後就是 form tag 的問題, 沒有 form 不曉得選登入會作怎麼樣的處理呢?
或者是我要自己加上去?

  • 5.x 版都一樣 沒有差異
  • drupal_render() 沒有輸出是正常的 必須要傳入表單或表單元素才行
  • label 的問題 建議用css把 label 設為 display:none 讓它隱藏
  • form tag 會自動"圍住"整個 block

有關 drupal_render() 你誤會我的意思了, 是我沒講清楚
我是指要用 <?= drupal_render($var) ?> 才能把 html code 顯示出來
我的 login_block_form.tpl.php 是改成這樣

Member Login
<?= drupal_render($form['name']) ?>
<?= drupal_render($form['pass']) ?>
<?= drupal_render($form[submit]) ?>
<?= drupal_render($form['form_id']) ?>
<?= drupal_render($form['form_token']) ?>
<?= drupal_render($form[links]) ?>


產生的結果大致上是這樣, 裡面看來並沒有 form tag

Member Login
帳號:*
密碼:*

sorry
上面 <?php drupal_render($form['name']) ?>
少打了 print
應該是 <?php print drupal_render($form['name']) ?>

form tag 應該在

的外面
會被 block 內的
包住

//***

然後表單元素的 id 和 name 都沒有出來
form_id 和 form_token 也沒有出現
看起來怪怪的
在最開頭先 print_r($form) 看看 $form 內的元素是否正確

$form[submit] 我少打了引號

我自己還沒發現到少了 form_id 跟 form_token 的問題
看來應該在呼叫的地方沒處理好, 我再研究看看

Ok. 我完成了
我後來重新仔細看一遍這討論串, 以及相關的連結以後, 才搞清楚作法的差異

hom 提供的作法是套用到現成的「使用者登入」這個區塊上
原理大概是這樣
「使用者登入」這個區塊是由呼叫 user_block('view', 0) 產生的, 表示是由 user module 提供的第一個 block
user_block('view', 0) 裡會呼叫 drupal_get_form('user_login_block') 傳回值是 html 形式的字串

drupal_get_form() 會傳入一個 function name, 這個 function 會產生 drupal 用的 form element
在這裡是呼叫 user_login_block()
得到 form element 以後要轉換成 html 這就要透過 theme() 來做了
預設應該有一套方式, 但是發現有定義相對應的 theme_XXXX() 就會呼叫它
所以 hom 就教我們如何寫這個 theme_XXXX()

不過改寫以後的東西還是必須透過 block 來設定位置, 跟我要的不一樣
我目前需要在版型的 header 區塊裡放這個登入功能, 所以要從 page.tpl.php 裡直接呼叫
而不是透過 region 去設定
那直接從 page.tpl.php 去呼叫的作法就參考 http://drupal.org/node/92657 這篇
或是直接呼叫 drupal_get_form('user_login_block'), 然後把結果印出來就可以了