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 官網也有提供預設的樣式表，想動手大改一番的話，可以從官網下載回來慢慢看。（當然同樣的一份樣式表也有放在你的設定檔資料夾中）

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