147 ratings
Steam Skin and Font Tutorial - 布景與字體修改教學
By Howar31
This guide will show you how to customize the Steam Skin and Steam Chat font style. You may simply achieve this by editing steam.style.
This article was originally a post in Steam group discussion by me. I create this guide so that I can upload screenshots in article.

本篇攻略教學如何修改Steam布景與字體,透過修改steam.style的參數可以客製化自己的Steam外觀
本文原本是我寫在 PTT群組討論區的一篇文章 ,方便在文章內加入截圖而移植到攻略
   
Award
Favorite
Favorited
Unfavorite
Introduction for Steam Skin - Steam 布景介紹
There are tons of Steam Skins since this feature has online for years. Many designers created lots of awesome masterpieces. If you were tired for default skin, you could try using some custom Steam Skins.
Steam布景有非常多,自從功能上線以來已經很多年,有很多作者做了很多好看的布景,看膩原生布景的使用者可以考慮使用自製布景。

Steam Skin can be highly customized. Such as layout, position, size, font style, border, background, etc. You can customize almost everything with Steam Skin. Thus, a good Steam Skin will give you a whole new Steam experience.
布景可以修改的範圍非常廣,包含所有介面的排版、位置、大小、字體、邊框、背景等等,幾乎全部都能改,所以一個好的布景可以讓使用者有玩全煥然一新的感覺。

For me, I recommand Metro for Steam
至於推薦,我個人選用 Metro for Steam 這個布景
Metro for Steam 3.8.6
Skin Installation - 布景安裝方式
Skin is a complete feature in Steam. You can easily install a Steam Skin with few steps:
布景在Steam已經上線好幾年,整個系統非常完善,安裝布景很簡單只要幾個步驟即可:
  1. First, you have to choose a custom skin and download the files. The file format depends on the author and upload platform. Generally, a Steam Skin should be a folder.
    首先要先選一個布景,然後下載該布景檔案,布景檔案每個人發佈的方式不同,依照作者習慣與上傳平台而異,一般而言布景檔案會是一整個資料夾
  2. Copy the skin folder to
    將布景資料夾複製到
    Steam installation folder\skins Steam 安裝資料夾\skins
    default path for 64-bit WIndows is
    64bit作業系統預設位置是
    C:\Program Files (x86)\Steam\skins
  3. Go to Steam Settings > Interface > Select the skin you wish Steam to use, and choose the skin you just downloaded
    到Steam的設定 > 介面 > 選擇您希望Steam使用的面板,選擇剛剛下載的布景
  4. Restart Steam and it's done.
    重新啟動Steam,就完成了
Font Style, Font Size and Font Color - 修改字型、字體大小與顏色
By editing the Steam Skin file, you can tweak how the skin looks like. For easy illustration, I'll use Metro for Steam 3.8.6 as example:
藉由手動調整Steam布景檔案的內容,就可以將布景微調成自己喜歡的模式,為了以下說明方便,會以Metro for Steam 3.8.6版來做說明:
  1. First, locate the Steam Skin files
    首先找到字體檔案,一般是放置在
    Steam folder\skins\Skin name\resource\styles Steam資料夾\skins\布景名稱\resource\styles
    For example
    例如本篇範例路徑是
    C:\Program Files (x86)\Steam\skins\Metro for Steam 3.8.6\resource\styles
  2. Locate the style file "steam.styles and open it with text editor, such as notepad (Notepad++ recommanded)
    找到字體檔案「steam.styles」並使用文字編輯軟體開啟,例如記事本(個人推薦Notepad++)
  3. This file contains lots of skin settings. By editing this file you can highly customize the Steam Skin. Here I'm going to explain some entries about Steam Chat. You can easily find these entries by searching.
    這檔案包含各種項目設定,可以將布景手動修改成各種自己喜歡的樣子,這邊簡單敘述跟聊天室字體有關的項目,可以用搜尋直接找要改的比較快
    console_text_error
    Connection lost, reconnect message
    斷線、離開、加入聊天室訊息
    friends_chat_text
    Other's chat text
    其他人的聊天內容
    friends_chat_text_self
    Your chat text
    你自己的聊天內容
    friends_chat_history
    History chat text
    舊的聊天內容紀錄
    friends_chat_event
    Friend Status Changes
    狀態改變訊息
    friends_chat_bright_event
    Your Status Changes/Connection/Game (Someone is now playing something. Click here to join.)
    某人正在玩什麼遊戲,按此加入
    friends_chat_url
    Chat URLs
    超連結文字
    friends_chat_name_ingame
    ID while in-game
    遊戲中的ID
    friends_chat_self
    Time stamp
    時間戳記
    friends_chat_name
    ID while online
    上線的ID
    friends_chat_accountid
    Normal ID
    一般的ID
    friends_chat_securitylink
    Never tell your password to anyone.
    千萬不要將密碼告訴任何人
    These are some common entries only not all of them. You could find more in the file and edit if needed.
    以上只列出常用的幾個,其他更多如果有需要可以自己修改探索
  4. Find the entry you want to edit and here's some argument descriptions.
    找到想改的項目之後再來是參數說明
    textcolor
    Text color
    字體顏色
    font-size
    Text size
    字體大小
    font-family
    Text font name. If not set the default will be used.
    字體名稱,直接打字型名稱可以修改,若沒有會改用預設
    font-style=uppercase
    All words capitalized
    全字母大寫
    selectedtextcolor
    Text selection text color
    滑鼠圈選時的文字顏色
    selectedbgcolor
    Text selection background color
    滑鼠圈選時的背景顏色
    And here are some color you can use.
    這些是一些可用的顏色參數
    White45
    Grey
    灰色
    White
    White
    白色
    White75
    Bright white
    亮白色
    Friends.OnlineColor
    Skin default Online color
    布景預設的上線顏色
    Friends.InGameColor
    Skin default In-Game color
    布景預設的遊戲中顏色
    Friends.IgnoredColor
    Skin default Blocked color
    布景預設的黑名單顏色
    Focus
    Skin default selection color
    布景預設的圈選顏色
    or you can use custom color with "r g b a", e.g. "201 201 141 255"
    或是可以用 "r g b a" 自訂,例如 "201 201 141 255"
  5. Save the file and restart Steam and it now should work.
    修改好之後存檔,然後重開Steam即可生效
For Lazy and TL;DR - 懶人包
If you have no time to modified it yourself, you may wanna take a look at my work. I slightly changed the text format in Steam Chat and left others untouched. With my modify, I increase the chat text size, decrease the timestamp size and system message, and make self chat golden. Looks great under 1920x1080 desktop resolution!
如果懶得自行修改的話,可以使用我自己目前使用的檔案,主要是加大聊天字體、縮小時間、縮小進出聊天室與系統訊息、本人講話金色高亮,使用1920x1080解析度看起來很舒服!

And here's the modded file link
這是修改檔案的下載連結

Note that this file is modified for Metro for Steam 3.8.6. Different version might experience some layout error!
To use this mod, you have to install Metro for Steam 3.8.6 first, and overwrite the file in this folder
Steam folder\skins\Metro for Steam 3.8.6\resource\styles
注意此檔案適用於Metro for Steam 3.8.6,版本不同可能會有些微錯誤喔!
使用方式為安裝好Metro for Steam 3.8.6之後,將下載的檔案覆蓋在下列資料夾中即可
Steam資料夾\skins\Metro for Steam 3.8.6\resource\styles
6 Comments
忆安 3 Apr, 2016 @ 1:27pm 
怎么改中文字体?作者你说的方法改的只是英文吧。
℧$.♌ 12 Mar, 2016 @ 1:25am 
請問~"字體名稱,直接打字型名稱可以修改,若沒有會改用預設"
字體名稱可以用甚麼呢?我Word有的字體不一定能套用對吧?怎麼看有哪些字體可以用呢?
Kamic 8 Jan, 2016 @ 9:58pm 
圖文並茂就是讚!
阿尼 12 Dec, 2015 @ 7:58am 
感謝~終於不用再眼睛拖窗的盯著那小小字體了XD:steamhappy:
UNknowMing 23 Oct, 2015 @ 12:26pm 
俺把你的MEGA檔下來後,然後照著裡面的數據改(大成功
orcia 3 Mar, 2015 @ 9:57pm 
ptt網友推