訪客留言簿

星期三, 5月 28, 2008

Brief 自訂外觀說明文

前言

這篇文是為了配合 Brief 1.2 的「自訂消息來源欄位的外觀(Customize the appearance of feeds)」功能中提供的教學網頁而寫的,原始頁面是 Brief - a feed reading extension for Firefox

另外 Brief 是 Firefox 上用來閱讀 RSS/ATOM 資料用的附加元件啦,不過 Brief 1.2 版得要 Fx3 以後的版本才能用就是。

可以利用的元素

官網的教學文章寫得比較詳細,所以我這裡挑簡單的幾個元素來說明就好。還有官網的就是整個 Brief 的介面架構了,所以你可以按照官網的說明修改整個介面。

  • 各項目的標題超連結文字:就是「div class="article-title-link"
  • 各項目的時間跟作者資訊等的那一行:都放在「div class="article-subheader"」裡面
  • 各項目的內容:放在「div class="article-content"」這裡

然後眼尖的人可能會發現「各項目的標題超連結文字」有兩處,這是因為有分為「只顯示標題」的模式,跟「顯示全部內容」的模式兩種。總之「div class="article-container"」裡寫的就是完整顯示的內容,而「div class="article-container"」裡的則是收褶到只留標題的顯示模式。

可以利用的樣式

基本上可以填任何 Firefox 3 支援的 CSS 規則,不過各位最常用到的應該就是字型大小之類的吧,這裡先教這個就好。

舉例來說,想要修改各項目中的標題、時間跟作者資訊等等、還有內容的字型大小的話,只要這樣寫就好。

.article-title-link { font-size: 18px !important }
.article-subheader { font-size: 12px !important }
.article-content { font-size: 16px !important }

上面的三個數字就是改字型大小的,各位可以自行試試。

寫好後,開 Brief 選項視窗,在「顯示」的大項目下,有個「自訂」的按鈕,點下去會打開來一個新視窗,裡面是可以編輯的區域,還寫了一些字。

如果你看不懂的話,就不要管裡面寫了啥字,直接游標移到這個編輯區域最尾巴那,按幾下 Enter 鍵隔幾行,再貼上上面舉例的那三行之類的上去,然後按「確定」按鈕離開編輯畫面,就會即時顯示字型大小變化了。(大概吧)

淡化廣告項目

如果你有訂閱一些網誌的 RSS/ATOM 的話,應該也會有收到一堆廣告訊息更新的經驗吧。

利用自訂 Brief 外觀的功能,也可以把這些廣告的字體顏色改淡,這樣就比較不會跟主要內容搞混了。

下面是一些贊助商廣告會出現的標題關鍵字,不過「Theme」那是我拿來過濾 Firefox Add-ons 用的,所以當個參考就好。(另外我並不確定填中文有沒有用)

div[content*="Theme "] * ,
div[content*=" theme "] * ,
div[entrytitle*="PR: "] * ,
div[entrytitle*="AD: "] * {
  color: #ccc !important
  }

其它

請參考 Brief 官網的教學文章,或是 MozTW Wiki 中收錄的 Stylish 資源,裡面都會有一些 CSS 教學文件。

還有 Brief 官網也有提供預設的樣式表,想動手大改一番的話,可以從官網下載回來慢慢看。(當然同樣的一份樣式表也有放在你的設定檔資料夾中)

還是有問題的話,請在這篇文章底下留個言吧。

2 comments:

匿名 提到...

請問有辦法讓brief展開整個文章內容嗎?

wini 提到...

展開文章內容是 Brief 內建的功能,按 F 鍵,或是點 Brief 右上角,下拉選單左邊的圖示也可以。

 

本站著作(不包含圖片、影音以及回應留言)係採用 Creative Commons 姓名標示-非商業性-相同方式分享 2.5 台灣 (中華民國) 授權條款授權