定位文字

個人部落格
在CheLinChan.com外的Che-Lin Chan,
一個用來記錄各種事情的網站。

2016年12月3日 星期六

比較好看的 Board Game Arena 樣式


關於

BGA(Board Game Arena)是一個線上桌遊網站,能在線上與朋友或陌生人一同進行線上版的桌遊。

對我來說,BGA網站的預設界面樣式可以說是非常「驚悚」的,在進行一段時間的遊戲後,眼睛感覺非常痛,原因是來自網站過小的字體(對於中文字來說)、過高的對比以及過少的留白。

幸好,BGA提供了CSS的修改功能。因此,我花了一個晚上來對BGA進行了大量的CSS修改,大幅調整了文字尺寸與整體界面比例、配色以及陰影等視覺效果,讓BGA更有現代網站的風貌,並透過這篇文章來將CSS代碼公開。

這個CSS代碼或許會不定期地更新來進行更多樣式上的改善。

更好看的 Board Game Arena 樣式

以下圖片展示了這個CSS代碼對網站的改變(點擊圖片來放大):

首頁 

預設

套用樣式後

遊戲桌
預設

套用樣式後

遊戲列表
預設 
套用樣式後

競賽
預設
套用樣式後

設定

預設

套用樣式後

如何使用?

一、首先,到這個頁面來取得CSS代碼。

二、進入到BGA的進階設定頁面,並將網頁中CSS代碼的「第一部分」全數貼到BGA的「本站自定外觀」內。

當完成以上部分後,會發現「您已加入遊戲桌...」的樣式與圖上不同,原因在是BGA對於這類訊息的CSS修改會被網站本身忽略,請跟隨以下步驟安裝瀏覽器擴充套件來完成樣式修改。

一、安裝Stylish擴充套件(SafariChromeFirefox

二、Safari用戶:
  1. 安裝完擴充套件後,點擊右上角的Stylish符號,並點選「Find More」按鈕。

  2. 在之後開啟的頁面中,選擇左側的「Edit」


  3. 將CSS頁面中的「第二部分」全數貼到Edit Style內「CSS」的區塊,並將Title填入「BGS Message Style Force Replace」,在下方Applies to: 設為「Domain」,並填入「bordergamearena.com」,全數完成後,點選「Save Style」。
  
  以上步驟完成後,回到BGA畫面,即可看到替換後的訊息樣式。


  Chrome、Firefox用戶:

  1. 安裝完擴充套件後,點選Stylish按鈕,並選擇「編寫樣式給:zh.boardgamearena.com/此網址」按鈕。

  2. 在之後開啟的頁面中,在「樣式段」的「*代碼 1」中填入CSS頁面中「第二部分」的所有代碼,並在「添加樣式」下方的「請輸入名稱。」中填入「BGA Message Style Force Replace」以及確認「適用於」為「該域名上的網址」,且內容為「boardgamearena.com」。


  一旦確認無誤,點擊「添加樣式」下方的「保存」來儲存。以上步驟完成後,回到BGA畫面,即可看到替換後的訊息樣式。

結語

祝大家使用愉快,有任何問題歡迎在下方留言區域提出。