怎樣styling user login block ?

週三, 2008-06-04 12:00 — adrianmak

原來放在left side region

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

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

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

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

版型

如果想要發表回應，請先登入或註冊。
瀏覽次數： 491

週四, 2008-06-05 00:24 — charlesc

Re: 怎樣styling user login block ?

1. 改 css, float~~~~
2. 改 page.tpl.php，把 header region 放到 logo 上面？

如果想要發表回應，請先登入或註冊。

週四, 2008-06-05 11:25 — adrianmak

Re: 怎樣styling user login block ?

在drupal 官方站找到這編 http://drupal.org/node/92657 跟著作就行!!

如果想要發表回應，請先登入或註冊。

週四, 2008-06-05 15:24 — hom

Re: 怎樣styling user login block ?

我目前的做法是

在版型資料夾下的 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 drupal_render($form['name']) ?>
<div class="form-label">密碼</div><?php drupal_render($form['pass']) ?>
<div class="form-item">
  <?php drupal_render($form[submit]) ?>
  <?php drupal_render($form['form_id']) ?>
  <?php drupal_render($form['form_token']) ?>
</div>
</div>

$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>
#custom-login-bar  .form-item label {
  display:none;
}

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

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

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

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

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

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

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

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

如果想要發表回應，請先登入或註冊。

週五, 2008-07-25 15:35 — sylin

Re: 怎樣styling user login block ?

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

首先是 drupal_render() 會回傳 html code, 所以

<?php
 drupal_render() 
?>

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

如果想要發表回應，請先登入或註冊。

週五, 2008-07-25 16:37 — hom

Re: 怎樣styling user login block ?

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

如果想要發表回應，請先登入或註冊。

週五, 2008-07-25 17:05 — sylin

Re: 怎樣styling user login block ?

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

<div id="custom-login-bar">
  <h3>Member Login</h3>
  <div class="vv">
  <?= drupal_render($form['name']) ?>
  <?= drupal_render($form['pass']) ?>
  </div>
  <div class="vv">
  <div class="form-item">
    <?= drupal_render($form[submit]) ?>
    <?= drupal_render($form['form_id']) ?>
    <?= drupal_render($form['form_token']) ?>
  </div>
  </div>
  <div class="vv">
    <?= drupal_render($form[links]) ?>
  </div>
  <div class="spacer"></div>
</div>

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

<div id="custom-login-bar">
  <h3>Member Login</h3>
  <div class="vv">
  <div class="form-item">
 <label>帳號：<span class="form-required" title="此欄位為必填。">*</span></label>
 <input type="text" maxlength="60" name="" id=""  size="15" value="" class="form-text required" />
  </div>
  <div class="form-item">
 <label>密碼：<span class="form-required" title="此欄位為必填。">*</span></label>
 <input type="password" name="" id=""  maxlength="60"  size="15"  class="form-text required" />
  </div>
  </div>
  <div class="vv">
  <div class="form-item">
    <input type="submit" id="" value="登入"  class="form-" />
  </div>
  </div>
  <div class="spacer"></div>
</div> 
</div>

如果想要發表回應，請先登入或註冊。

週五, 2008-07-25 17:47 — hom

Re:

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

form tag 應該在 <div id="custom-login-bar"> 的外面
會被 block 內的 <div class="content">包住

<div id="block-user-0" class="block block-user">
<div class="content">
<form id="user-login-form" method="post" action="/dli_mc/home?destination=home">
//***
</form>
</div>
</div>

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

$form[submit] 我少打了引號

如果想要發表回應，請先登入或註冊。

週五, 2008-07-25 18:04 — sylin

Re:

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

如果想要發表回應，請先登入或註冊。

週五, 2008-07-25 17:53 — hom

Re: 怎樣styling user login block ?

我把你的樣板檔貼到我的樣板檔內輸出如下

<div id="block-user-0" class="block block-user">
	<div class="content">
		<form action="/dli_mc/home?destination=home"  method="post" id="user-login-form">
			<div>
				<div id="custom-login-bar">
					<h3>Member Login</h3>
					<div class="vv">
						<div class="form-item">
							<label for="edit-name">使用者名稱：<span class="form-required" title="此欄位為必填。">*</span></label>
							<input type="text" maxlength="60" name="name" id="edit-name"  size="15" value="" class="form-text required" />
						</div>
						<div class="form-item">
							<label for="edit-pass">密碼：<span class="form-required" title="此欄位為必填。">*</span></label>
							<input type="password" name="pass" id="edit-pass"  maxlength="60"  size="15"  class="form-text required" />
						</div>
					</div>
					<div class="vv">
						<div class="form-item">
							<input type="submit" name="op" id="edit-submit" value="登入"  class="form-submit" />
							<input type="hidden" name="form_id" id="edit-user-login-block" value="user_login_block"  />
					    </div>
					</div>
					<div class="vv">
						<div class="item-list"><ul><li><a href="/dli_mc/user/register" title="建立一個新的使用者帳號。">註冊新帳號</a></li><li><a href="/dli_mc/user/password" title="透過電子郵件索取新密碼">索取新密碼</a></li></ul></div>  </div>
					<div class="spacer"></div>
				</div>
			</div>
		</form>
	</div>
</div>

如果想要發表回應，請先登入或註冊。

週五, 2008-07-25 18:16 — hom

Re: 怎樣styling user login block ?

user_login_block 應該是特例
原始的狀態就沒有 form_token
但還是有 form_id

如果想要發表回應，請先登入或註冊。

週二, 2008-07-29 14:28 — sylin

Re: 怎樣styling user login block ?

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'), 然後把結果印出來就可以了

如果想要發表回應，請先登入或註冊。

Drupal Taiwan 正體中文支援站