您在這裡

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去掉回應下方文字,這個我再試試。