theming

Theme-ing "login to post comment", theme_comment_post_forbidden()

Recently, i have find some theme-ing functions that cannot be simply find by theme developer module, as that theme function only calls when you are anonymous user.

comment.module theme_comment_post_forbidden() is an example.
This function render the "Please login to post comments" to anonymous user, request them to login in order to get access to the comment form.

As theme developer do not appears when you are not admin, so when i want to theme this sentence, i spend some time to find out the function is defined in comment module, which is reasonable.

Hope this small tips helps someone.

加js, css file 到theme, Add a theme specific js/css to a page

如題, 你可以在 theme 的 .info file 用以下的方法

scripts[] = js/gallery.js

stylesheets[all][] = css/gallery.css

你可以加第三方的 js/css, 例如 jquery ui, fancybox 之類
如果你看到你的page.tpl.php 有<script type="text/javascript" src=""></script>你可能會考慮用以上的方法include 了

Note1: 路徑是相對到theme 的資料夾
Node2: 它們會被優化的, 如果你開啟了壓縮 js/css 檔案的話

As titled, if you want to add a js or css file only to a theme, you may:

scripts[] = js/gallery.js

stylesheets[all][] = css/gallery.css

This should contain mostly contain some 3rd party js/css libraries/frameworks.
if you find you put some <script type="text/javascript" src=""></script> in page.tpl.php, you better think again to put it like above.

Note1: the path they refered is CURRENT_THEME directory
Node2: They will got aggregated if you turn on compressing js/css files in "Performance" page

將註冊時連續輸入兩次密碼的表單的字眼改掉

將註冊時連續輸入兩次密碼的表單的字眼改掉的方法:

theme 的 template.php 內:

<?php
function phptemplate_password($element) {
  if(
$element['#id']=='edit-pass-pass1'){
   
$element['#title']=t('joe');
  }

  if(
$element['#id']=='edit-pass-pass2'){
   
$element['#title']=t('confirm joe');
  }

 
$size = $element['#size'] ? ' size="'. $element['#size'] .'" ' : '';
 
$maxlength = $element['#maxlength'] ? ' maxlength="'. $element['#maxlength'] .'" ' : '';

 
_form_set_class($element, array('form-text'));
 
$output = '<input type="password" name="'. $element['#name'] .'" id="'. $element['#id'] .'" '. $maxlength . $size . drupal_attributes($element['#attributes']) .' />';
  return
theme('form_element', $element, $output);
}
?>

其實其他的form 元素都可以用同一個方法改
甚至改為select 都可以
但亂改一通可能會令數據庫資料丟失
所以, 結構邏輯的修改還是使用 hook_form_alter() 吧

Drupal6.x 自定form template

今日重看form template 的組成 :http://www.joetsuihk.com/form_templates6
混亂得我自己都看不明白, 所以重寫

目的: 重新排位, 令建立新node 的表單簡單點

假設: 要重新排位的 content type 名為 story

  1. 在theme 內建立檔案 node_form.tpl.php
  2. http://api.drupal.org/api/function/theme_node_form 的函數內容貼到 node_form.tpl.php (除去函數開頭結尾), return 改為 print (或直接使用附件)
  3. 打開theme 內的 template.php
  4. 建立函數 function phptemplate_preprocess_node_form()
  5. function phptemplate_preprocess_node_form(&$vars) {
      $vars['template_files'][] = $vars['form']['type']['#value']."-node_form";
    }

  6. 複製node_form.tpl.php 為 story-node_form.tpl.php (theme 內要保留一個可用的node_form.tpl.php)
  7. 修改為:(附件2)
  8.   $output = "\n<div class=\"node-form\">\n";

      $admin = '';
      if (isset($form['author'])) {
        $admin .= "    <div class=\"authored\">\n";
        $admin .= drupal_render($form['author']);
        $admin .= "    </div>\n";
      }
      if (isset($form['options'])) {
        $admin .= "    <div class=\"options\">\n";
        $admin .= drupal_render($form['options']);
        $admin .= "    </div>\n";
      }
      $buttons = drupal_render($form['buttons']);

      $advance = drupal_render($form['menu']);
      $advance .= drupal_render($form['revision_information']);
      $advance .= drupal_render($form['comment_settings']);

      // Everything else gets rendered here, and is displayed before the admin form
      // field and the submit buttons.
      $output .= "  <div class=\"standard\">\n";
      $output .= drupal_render($form);
      $output .= "  </div>\n";

      if (!empty($admin)) {
        $output .= "<div><fieldset class='collapsible collapsed advanced standard'>";
        $output .= "<legend>Advance</legend>";
        $output .= "<div class='fieldset-wrapper'>";
        $output .= $admin.$advance;
        $output .= "</fieldset></div></div>\n";
       
      }
      $output .= "<div>$buttons</div>";
      $output .= "</div>\n";

      print $output;

重點:
第四步, $vars['form']['type']['#value'] 是content type 名, $vars 可以用kprint_r() 或者 theme developer 查看可以變數
第五步, 一定要留一個node_form.tpl.php 在theme 之內, 是Drupal 對自定義template 的要求
第六步, 使用過drupal_render() 的表單元素並不會在drupal_render($form); 再輸出, 只輸出未使用過的元素, 很方便

Devel block.tpl.php

devel 的 module block,
作為一個 Drupal 開發者, 是必須將它安放到 sidebar 吧
但這個 block 有一個很惱人的問題,
就是, 它太佔位置了
一整條長長的, 放了在 sidebar 之後
經常要使用滾動條, 十分不便

所以, 唯有用 theme 的方式, 將它獨立放到一個下拉式隱藏之內
省回些位置
做成了上圖的效果

製作: >Read more

Theming search form, 搜尋框的模版

因為 drupal 原本內建的search form 搜尋框實在太單調的關係,
修改一下它的外觀, 模版...

當然, 先打開 search module(今天的主角), devel module, theme developer(開發用主角)
將search block 放到 sidebar,
用 theme developer 指一下,
便知道 search module 已經內建了搜尋框的 template 以供使用, 修改
search-block-form.tpl.php 是在 block 之內的 template
search-theme-form.tpl.php 便是其他情況下使用的 template
可以直接到 [base_path]/module/search 之內
複製所需的template 到你的 theme 之內
清空你的 cache 緩存, 你的theme 便會自動使用這個你新增的 template 檔了

其實一個搜尋框只有三種元素 (element) >Read more

  1. 輸入框 (textfield)
  2. 確定按鈕 (button)
  3. 隱藏參數 (hidden variable)

print.css

Drupal 內的一個常用的theme, Garland
經常給我用作範本, 東改改西改改成為一個新的theme
因為他左右sidebar 都可以, header, template.php 變數都很齊備
這次簡單說明一下theme 內的print.css >Read more

簡介 *.tpl.php

這是Drupal 使用 *.tpl.php 的基本之中的基本 (無論Drupal5.x, Drupal6.x)
因為很多讀者始終不明白 *.tpl.php 的運作
所有後加這一篇最簡單的篇章
這一篇完成後, 你可以:
story 不顯示作者, 提交時間,
但page 則顯示 >Read more

Drupal6.x 自定form template

重寫版: http://www.joetsuihk.com/node/119

這一篇可真是費盡了心神, 開發時間估計有十小時以上...
請多多支持.....

一切事, 源於要修改 node/add 的form
因為太多摺了的選項, 想摺成一個"advanced options" 之內
(圖為最後成果)
>Read more

Drupal6.0 theming 模版初探(二)

繼續鑽研
先弄清上一篇的一些疑問, 關於"需要重新載入theme, 令theme 可以使用新增的 *.tpl.php"
主站有一個官方的說明:(翻譯)

現在所有的theme 都需要註冊到資料庫(是之為theme registry). 在5.x 的環境, theme 是即場更新的. 但在6.x, theme 的每一個輸出都會經過hook_theme() 但不需要擔心, phptemplate 會幫你註冊新的theme 到hook_theme()

但有一個例外, forms表格不需要, 也不會註冊(往後的Drupal版本可以會改變做法)
更多的資源你可以參考theming 手冊

重要! 當你新增 >Read more