主頁 > 知識(shí)庫 > 自己動(dòng)手輕松制作閃游瀏覽器個(gè)性酷靚皮膚

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

熱門標(biāo)簽:呼叫中心案例 萬科 電話機(jī)器人搭建 電銷機(jī)器人源碼 鐵路電話系統(tǒng) 科大訊飛語音識(shí)別系統(tǒng) 硅谷的囚徒呼叫中心 電銷機(jī)器人
4月14日晚間,閃游瀏覽器0.9發(fā)布的,除了開啟速度的優(yōu)化提升,這次更是加入了個(gè)性皮膚的切換支持。

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

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

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

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

大家可以下載官方皮膚頁面的一個(gè)示例皮膚(官方示例皮膚下載:http://www.saayaa.com/skin/download.aspx?skinid=1),下載這個(gè)名為Metal.sks的皮膚文件,雙擊這個(gè)皮膚文件Metal.sks,將自動(dòng)打開閃游瀏覽器并應(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ì)話框,說明皮膚文件沒有被正確的關(guān)聯(lián)上,請(qǐng)運(yùn)行最新版本的閃游瀏覽器,或者在那個(gè)彈出的對(duì)話框里面指定用閃游瀏覽器打開?;蛘?,您把這個(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)入官方皮膚下載頁面。

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

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

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

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

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

閃游瀏覽器頂部的工具欄背景圖片分為左中右三個(gè)部分,左面和右面我們可以放上一個(gè)皮膚的固定標(biāo)志性圖片,放個(gè)小貓小狗花花草草或者自己的照片都可以,中間的部分是在瀏覽器改變大小時(shí)用來平鋪的部分,示例中只有中間的圖片,名字為 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,即無間隔
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默認(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ù)語是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這兒來分享一下吧!分享之前需要做什么?對(duì),打包。

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

五、補(bǔ)充說明

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



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

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



標(biāo)簽:新余 南通 株洲 呼和浩特 六安 黃石 黔東 天門

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《自己動(dòng)手輕松制作閃游瀏覽器個(gè)性酷靚皮膚》,本文關(guān)鍵詞  ;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 收縮
    • 微信客服
    • 微信二維碼
    • 電話咨詢

    • 400-1100-266