自己動手輕松制作閃游瀏覽器個性酷靚皮膚

2019-11-28 04:27:15

字體：大中小

來源：轉載

供稿：網友

4月14日晚間，閃游瀏覽器0.9發布的，除了開啟速度的優化提升，這次更是加入了個性皮膚的切換支持。

閃游瀏覽器官方皮膚下載網頁：http://www.saayaa.com/skin
　
一、閃游瀏覽器的皮膚構造

閃游瀏覽器的皮膚是一個擴展名為.sks的zip文檔，可以用WinRar、Winzip或者7-Zip等軟件直接打開，也可以直接把這個擴展名改成.zip直接雙擊打開。這個擴展名為.sks的zip文件包內由許多圖像和一個描述性的文本文件組成的。閃游瀏覽器推薦使用 .PNG 圖像格式來支持界面元素的透明效果，定義皮膚的文本文件必須使用 .INI 擴展名，使用 “SaaYaa_skin.ini” 文件名的文件將作為該皮膚的默認樣式定義文件。

二、閃游瀏覽器的皮膚安裝使用

1、下載官方示例皮膚并雙擊安裝：

大家可以下載官方皮膚頁面的一個示例皮膚（官方示例皮膚下載：http://www.saayaa.com/skin/download.aspx?skinid=1），下載這個名為Metal.sks的皮膚文件，雙擊這個皮膚文件Metal.sks，將自動打開閃游瀏覽器并應用這個皮膚，如果您的閃游瀏覽器正在運行中，那么也將直接即時更換刷新成您指定的皮膚。

閃游瀏覽器官方提供下載的皮膚將會有很多種，我們會不定期的添加，請隨時關注http://www.saayaa.com/skin或者官方皮膚論壇：http://bbs.ruanmei.com/forum-54-1.html

注意：如果雙擊下載的皮膚文件彈出一個對話框，說明皮膚文件沒有被正確的關聯上，請運行最新版本的閃游瀏覽器，或者在那個彈出的對話框里面指定用閃游瀏覽器打開?；蛘撸堰@個皮膚文件直接拖到閃游瀏覽器上面。

皮膚將安裝在閃游瀏覽器所在的安裝目錄下的一個名為skin 的文件夾下，例如上面的Metal.sks 這個皮膚，就會在skin/Metal 下面。大家可以到這個文件夾下面去看看，里面包含 SaaYaa_skin.ini 這個界面定義的文本設置文件，還產生 metal/control 和 metal/toolbar 兩個文件夾，里面都是新皮膚所用到的圖片資源文件。

2、切換皮膚

點擊下閃游瀏覽器右上角的個性設置按鈕，即可方便的進行皮膚切換（默認皮膚還支持膚色變化），也可以點擊進入官方皮膚下載頁面。

三、閃游瀏覽器的皮膚制作：

如果大家想修改已經安裝的皮膚，那么直接修改ini文件的設置和替換control、toolbar這兩個文件夾下面的圖片就可以了。如果要新制作一個，那就首先在閃游安裝文件夾下面的 skin 文件夾里面新建一個文件夾，以皮膚的英文名、拼音來命名行了（如果你喜歡用中文也可以）。

然后將官方提供的示例皮膚里面的 SaaYaa_skin.ini 復制過來（如果是只讀的就右鍵屬性去掉它的只讀屬性），方便我們一會的修改，新建control 和 toolbar 文件夾用來存放我們的皮膚圖片，這兩個文件夾的名字都是可以在 ini文件中修改的。

當然，我們的建議是，你最好不用新建文件夾，而是復制官方的示例皮膚文件夾然后改名，例如你復制一下metal文件夾，改名成你自己的。然后修改里面的設置文件和替換圖片即可。這樣，可以更直觀的隨時看到預覽效果。

1、為皮膚的工具欄制作背景

閃游瀏覽器頂部的工具欄背景圖片分為左中右三個部分，左面和右面我們可以放上一個皮膚的固定標志性圖片，放個小貓小狗花花草草或者自己的照片都可以，中間的部分是在瀏覽器改變大小時用來平鋪的部分，示例中只有中間的圖片，名字為 ini中定義的

;工具欄背景
Background_Image=control/title_bg.png 如果需要的話還可以在下面加上左面和右面的圖片

;工具欄左側背景
Background_Image_Left = control/back_left.png

;工具欄右側背景
Background_Image_Right = control/back_right.png

2、增加工具欄按扭

閃游皮膚每一個按鈕都有三種狀態，一般是默認狀態，禁止狀態(disable)和鼠標移上(hover)。

圖片名字和大小我們可以自已定義

從左到右依次是

;新建按鈕因新建按鈕帶有下拉框那個下拉按鈕，所以其寬度 = 30 + 14
NewBtn_Size = 44,32
NewBtn_Normal = toolbar/new.png
NewBtn_Hover = toolbar/new_hover.png

;后退按鈕
BackBtn_Size = 30,32
BackBtn_Normal = toolbar/back.png
BackBtn_Hover = toolbar/back_hover.png
BackBtn_Disable= toolbar/back.disable.png

;前進按鈕
NextBtn_Size = 30,32
NextBtn_Normal = toolbar/forward.png
NextBtn_Hover = toolbar/forward_hover.png
NextBtn_Disable= toolbar/forward.disable.png

;更多(More)按鈕
MoreBtn_Size = 16,18
MoreBtn_Normal = toolbar/split.png
MoreBtn_Hover = toolbar/split.png
MoreBtn_Disable= toolbar/split.disable.png

;刷新按鈕
;Space_Width 用于指定此按鈕與前一個按鈕的間隔寬度默認是0,即無間隔
RefreshBtn_Size = 30,32
RefreshBtn_Normal = toolbar/refresh.png
RefreshBtn_Hover = toolbar/refresh_hover.png
RefreshBtn_Space_Width = 9

;停止按鈕
StopBtn_Size = 30,32
StopBtn_Normal = toolbar/stop.png
StopBtn_Hover = toolbar/stop_hover.png

;主頁按鈕
HomeBtn_Size = 30,32
HomeBtn_Normal = toolbar/home.png
HomeBtn_Hover = toolbar/home_hover.png

;撤銷按鈕
RestoreBtn_Size = 45,32
RestoreBtn_Normal = toolbar/undo.png
RestoreBtn_Hover = toolbar/undo_hover.png
RestoreBtn_Disable = toolbar/undo.disable.png

;Go按鈕
GoBtn_Size = 45,32
GoBtn_Normal = toolbar/go.png
GoBtn_Hover = toolbar/go_hover.png
GoBtn_Space_Width = 5

;查找按鈕
SearchBtn_Size = 30,32
SearchBtn_Normal = toolbar/24_search.png
SearchBtn_Hover = toolbar/24_search_hover.png
SearchBtn_Space_Width = 5

;高亮按鈕
HighLightBtn_Size = 30,32
HighLightBtn_Normal = toolbar/highlight.png
HighLightBtn_Hover = toolbar/highlight_hover.png

;以下Btn默認的大小:16x16,另外Hover狀態的圖片不必指定

;收藏欄上的添加收藏夾按鈕
FavBtn_Normal = toolbar/16_favorites.png

;Tab欄上的側邊欄,添加,全屏按鈕
Tab_Slider_Normal = control/tab_sidebar.png
Tab_Slider_Favorite = toolbar/16_favorites.png
Tab_Slider_History = toolbar/16_history.png
Tab_Slider_Active = control/sidebar_tab_active.png
Tab_Slider_BK_Left = control/panetab_bg.png
Tab_Slider_BK_Right = control/panetab_right.png
Tab_Slider_BK_Top = control/panetab_top.png

Tab_New_Normal = control/tab_new.png
Tab_FullScreen_Normal = control/TabBar_FullScreen.png
Tab_Close_Normal = control/tab_close.png
Tab_Close_Hover = control/tab_close_hover.png

標題欄上的四個按鈕更換皮膚，最小化，最大化，關閉

[Buttons]
;Windows系統按鈕大小與圖片大小相等
;Windows系統按鈕圖片,正常狀態和高亮狀態
Win_System_Btn = control/skin_selector.png
Win_System_Btn_Hover = control/skin_selector_hover.png
Win_Min_Btn = control/win_minimize.png
Win_Min_Btn_Hover = control/win_minimize_hover.png
Win_Max_Btn = control/win_maximum.png
Win_Max_Btn_Hover = control/win_maximum_hover.png
Win_Close_Btn = control/win_close.png
Win_Close_Btn_Hover = control/win_close_hover.png
Win_Restore_Btn = control/win_restore.png
Win_Restore_Btn_Hover = control/win_restore_hover.png

3、地址欄和搜索欄輸入框

這兩個輸入框（術語是textbox）采用一樣的圖片，也是分為左中右，并且每個圖片有兩種狀態，默認狀態和鼠標移上(hover)后顯示的狀態。

Edit_Height=23
Edit_Left = control/combo_left.png
Edit_Left_Hover = control/combo_left_hover.png

Edit_Center = control/combo.png
Edit_Center_hover = control/combo_hover.png

Edit_Thumb_Width = 16
Edit_Thumb_Normal = control/combo_dropdown.png
Edit_Thumb_Hover = control/combo_dropdown_hover.png

4、標簽欄

定義當前標簽

Tab_Active_Left = control/tab_active_left.png
Tab_Active_Center = control/tab_active_center.png
Tab_Active_Right = control/tab_active_right.png

非激活標簽

Tab_InActive_Left = control/tab_inactive_left.png
Tab_InActive_Center = control/tab_inactive_center.png
Tab_InActive_Right = control/tab_inactive_right.png

標簽欄背景

Tab_BK = control/tab_bg.png

5、菜單字體，顏色，邊框

;Windows外邊框顏色
Frame_Border_Color1 = #DADADA

;Windows內邊框顏色
Frame_Border_Color2 = #DADADA

;工具欄字體顏色
ToolBar_Text_Color = #335f91

;Menu背景顏色
Menu_BK_Color = #EFEFEF

;Menu邊框顏色
Menu_Border_Color=#666666

;Menu分隔線顏色
Menu_Separator_Color=#BDBDBD

;Menu字體顏色
Menu_Text_Color = #333333

;高亮字體顏色
HighLight_Text_Color = #333333

;禁用字體顏色
Disable_Text_Color = #BDBDBD

;編輯框(Edit) 顏色
Edit_Text_Color = #333333

四、皮膚的發布

哇，終于做出了自己“版權所有”的皮膚了，快到http://bbs.ruanmei.com/forum-54-1.html這兒來分享一下吧！分享之前需要做什么？對，打包。

用你習慣的壓縮軟件，把剛才你做好的文件夾壓縮成一個.Zip格式的文件（不要壓成rar或者7z等其他格式），然后，把這個文件改名成 .sks 結尾的文件。好吧，上傳到論壇給大家分享一下吧。軟媒會不定期的舉辦評比和有獎比賽，看看誰的皮膚更酷更風行！

五、補充說明

制作完全屬于自己的個性化皮膚其實不是那么難的吧？如果大家想邊制作邊看效果，這就涉及到刷新問題了，閃游瀏覽器0.9版本里面，要看到自己做出的效果，需要你點擊右上角的下拉箭頭（個性設置按鈕），然后切換到其他皮膚再切換回來。這可能不方便，我們會在4月17日前發布一個0.91版本，可以直接點擊你皮膚的名字進行即時的刷新，這樣邊制作，邊刷新，會更方便！

當然了，要說的是，閃游瀏覽器的膚色換色功能，是只支持默認皮膚的目前。我們后期會考慮是否支持全部皮膚，但是團隊內部感覺這個意義不大，還是保持皮膚的原汁原味好些！

最后，祝大家使用閃游瀏覽器更愉快，每天都有好的心情。

上一篇：Windows下所有的軟件默認安裝路徑都在C盤的原理及修改方法

下一篇：3種不用重裝的辦法解決壓縮Vista系統文件夾導致崩潰情況