您在這裡

首頁 » Forums » 疑難雜症 » 版型/Themes

Drupal區塊捲軸

jesselue's 的頭像
由 jesselue 在 2009-12-28 (週一) 19:30 發表

Drupal區塊捲軸：2009年12月28日星期一
適用於：Drupal初學者，想更改Drupal theme外觀 的人，對CSS有興趣的人。
會想要替Drupal區塊加個捲軸？以捲動下圖<右欄><最新回應>下的內容為例，說明如下。
(一)以使用localhost為例，用firefox先打開http://localhost/drupal，Click<工具/Firebug/開啟Firebug到新視窗>(安裝及使用Firebug桉這裡)，就會出現螢幕正中的<Firebug視窗>，

  1. 接著Click <body ...>左方的+號，會出現一排div，
  2. Click id為wrapper左方的+號，會出現一排div，
  3. Click id為container左方的+號，會出現一排div，
  4. Click id為sidebar-right左方的+號，會出現一排div，
  5. Click id為block-views-comments_recent-block左方的+號，會出現一排div，
  6. 試著將滑鼠移至class="content"的div(如下圖星號處)，會發現網站的<右欄><最新回應>下的內容(如下圖上方黑框)跟著反白，因此，知道其CSS id是block-views-comments_recent-block，而且在class="content"下。
  7. 因此，css的id及class應為#block-views-comments_recent-block .content{ }

(二)我用的是garland theme，所以用dreamweaver打開c:/xampp/htdocs/drupal/themes/garland/style.css，並加入：

#block-views-comments_recent-block .content{height:200px; /* originally no this line */overflow:auto; /* originally no this line */}

如此，<右欄><最新回應>下的內容會捲動。注意以下兩點：

  1. <右欄><最新回應>下的內容區域長200px(見上方height:200px; )。
  2. 如果<最新回應>顯示項目超過了區域長200px，自動出現捲軸若顯示項目小於區域長200px，不會出現捲軸，這是overflow:auto;的功能。

 

 

如果很多block都要修改，而且需要更有彈性的經常在好幾種css之間變換的話，可以考慮用 Block theme 這個模組, 這裡有Block theme 的video 教學 .

如果只是一個Block做小更改(像您的情況)，可以只在你的版型裏面的local.css修改就好。這樣做比上面的方法簡單，而且即使有一天你的版型要升級的話，您個人修改的部分，不會受到影響。 如果在style.css裏面修改的話，萬一有一天版型升級， 很可能您所有個人修改的地方，都會沒有了。

如果您的版型沒有提供local.css的檔案，那麽您除了在版型的檔案夾裏面增加local.css檔案外，還要在your_template_name.info 裏面增加這麽一行

stylesheets[all][] = local.css。

加在stylesheets[all][] = style.css下面即可。

如下:
stylesheets[all][] = style.css
stylesheets[all][] = local.css

hello joet, 謝謝，目前看過你的blog，已這麼做了。

hello danny，先謝謝你上次教我用better form去掉回應下方文字，這個我再試試。