自己動(dòng)手輕松制作閃游瀏覽器個(gè)性酷靚皮膚

2019-11-28 04:27:15

字體：大中小

供稿：網(wǎng)友

4月14日晚間，閃游瀏覽器0.9發(fā)布的，除了開(kāi)啟速度的優(yōu)化提升，這次更是加入了個(gè)性皮膚的切換支持。

閃游瀏覽器官方皮膚下載網(wǎng)頁(yè)：http://www.saayaa.com/skin
　
一、閃游瀏覽器的皮膚構(gòu)造

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

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

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

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

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

注意：如果雙擊下載的皮膚文件彈出一個(gè)對(duì)話框，說(shuō)明皮膚文件沒(méi)有被正確的關(guān)聯(lián)上，請(qǐng)運(yùn)行最新版本的閃游瀏覽器，或者在那個(gè)彈出的對(duì)話框里面指定用閃游瀏覽器打開(kāi)。或者，您把這個(gè)皮膚文件直接拖到閃游瀏覽器上面。

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

2、切換皮膚

點(diǎn)擊下閃游瀏覽器右上角的個(gè)性設(shè)置按鈕，即可方便的進(jìn)行皮膚切換（默認(rèn)皮膚還支持膚色變化），也可以點(diǎn)擊進(jìn)入官方皮膚下載頁(yè)面。

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

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

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

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

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

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

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

;工具欄左側(cè)背景
Background_Image_Left = control/back_left.png

;工具欄右側(cè)背景
Background_Image_Right = control/back_right.png

2、增加工具欄按扭

閃游皮膚每一個(gè)按鈕都有三種狀態(tài)，一般是默認(rèn)狀態(tài)，禁止?fàn)顟B(tài)(disable)和鼠標(biāo)移上(hover)。

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

從左到右依次是

;新建按鈕因新建按鈕帶有下拉框那個(gè)下拉按鈕，所以其寬度 = 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

;前進(jìn)按鈕
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 用于指定此按鈕與前一個(gè)按鈕的間隔寬度默認(rèn)是0,即無(wú)間隔
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

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

;撤銷(xiāo)按鈕
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默認(rèn)的大小:16x16,另外Hover狀態(tài)的圖片不必指定

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

;Tab欄上的側(cè)邊欄,添加,全屏按鈕
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

標(biāo)題欄上的四個(gè)按鈕更換皮膚，最小化，最大化，關(guān)閉

[Buttons]
;Windows系統(tǒng)按鈕大小與圖片大小相等
;Windows系統(tǒng)按鈕圖片,正常狀態(tài)和高亮狀態(tài)
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、地址欄和搜索欄輸入框

這兩個(gè)輸入框（術(shù)語(yǔ)是textbox）采用一樣的圖片，也是分為左中右，并且每個(gè)圖片有兩種狀態(tài)，默認(rèn)狀態(tài)和鼠標(biāo)移上(hover)后顯示的狀態(tài)。

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、標(biāo)簽欄

定義當(dāng)前標(biāo)簽

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

非激活標(biāo)簽

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

標(biāo)簽欄背景

Tab_BK = control/tab_bg.png

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

;Windows外邊框顏色
Frame_Border_Color1 = #DADADA

;Windows內(nèi)邊框顏色
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

四、皮膚的發(fā)布

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

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

五、補(bǔ)充說(shuō)明

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

當(dāng)然了，要說(shuō)的是，閃游瀏覽器的膚色換色功能，是只支持默認(rèn)皮膚的目前。我們后期會(huì)考慮是否支持全部皮膚，但是團(tuán)隊(duì)內(nèi)部感覺(jué)這個(gè)意義不大，還是保持皮膚的原汁原味好些！

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

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

下一篇：3種不用重裝的辦法解決壓縮Vista系統(tǒng)文件夾導(dǎo)致崩潰情況