Error message

Notice: Undefined offset: 1 in counter_get_browser() (line 70 of /volume1/librarythings/www/sites/all/modules/counter/counter.lib.inc).

Drupal Views CSS

Categories : 

Drupal的Views,可以說是使用Drupal架站中,最重要的一個模組 Views可以幫助你撈出你的Nodes,你可以設定Filter,顯示特定的Content Type,還可以設定要顯示的類別、發佈狀態、作者...等等等 Views的顯示,亦可以選擇要以Table、Grid、Html List等各種多元的型態來呈現 但困擾的地方來了,有時候你的內容可能會很多,導致Views在呈現上有點跑版 這時候,就要依靠萬能的CSS了,最近在製作網站時,剛好找到了有關Views的CSS相關介紹,真是一大福音,趕緊來瞧瞧吧!

網站連結:


Using CSS with Views:http://views-help.doc.logrus.com/help/views/theme-css Views的介紹:http://views-help.doc.logrus.com/help/views/style

應用


  •  以大部分的例子來說,Drupal中,所有的views都會被一個名為"view"的class所包住,當然你也可以在views中自行設定views的名稱(myview)
<div>...</div>
  • 在你的CSS中,你可以這樣修改:
div.view { border: 1px solid black; }
  • 你也可以依據你自訂的名稱來做設定:
div.view-myview { background: yellow; }
  • 在views的預設設定中,也有提供下面的classes供你做CSS的設定:
.view-header .view-filters .view-content .view-empty (if an "empty" text is used when the view has no results) .view-footer .feed-icon .attachment-before (if using an "attachment" display) .attachment-after (if using an "attachment" display)
  • 一些CSS的範例:
div.view-myview div.view-header { /* make the header stand out */ font-size: 120%; font-weight: bold; } div.view-myview div.view-footer { /* Make the footer less important */ font-size: 80%; font-style: italic; color: #CCC; }
  • 當你的views中,包含了許多欄位時(fields),你也可以根據各個欄位做設定,例如欄寬、置中、顏色...等。這些fields有會有ID標籤,可以使用這些標籤來做CSS的設定(根據CSS的規定,任何" _ "的符號,會自訂轉換為" - ",所以如果你的欄位的ID是" edit_node "(這個欄位是由provide an "edit" link to a node所產生),這時他就會變成" edit-node "。此外,為了避免views的ID與其他系統的ID混淆,views的class前必須加上" views-field- ",因此,以edit-note為例,最後的class就會是" views-field-edit-node "。如果是你自己新增的欄位,例如ISBN欄位,這時便會根據你所設定的機讀名稱(machine name),也就是field-isbn,最後你的class就會是" views-field-field-isbn "。
  • 下面就是一些實際應用的例子,大部分就跟CSS的語法有關係了,大家就自己研究一下囉~
.view-myview th { color: red; /* make all headers red */ } .view-myview .views-field-title { font-weight: bold; /* Make the 'title' field bold */ } .view-myview td.views-field-body { font-size: 60%; /* Make the text in the body field small */ }
  • 我個人最常寫的是,設定標題欄位(title)的寬度,我通常是這樣子寫的
tr.odd td.views-field-title { width:400px; padding: 5px; } tr.even td.views-field-title { width:400px; padding: 5px; }
以上跟大家分享,看完這篇文章,希望大家可以稍稍多一些概念!
我也是在網路上Google如何應用後,才對views的CSS設定稍微有點頭緒~
Read more about: