皮肤自定义开发是 HooryOS 实现个性化定制的其中一块,这篇文档主要简单介绍下如果开发一款皮肤。

新建目录

首先先来看下皮肤的目录结构吧

├─ hoorayos
│ ├─ img
│ │ ├─ skins (皮肤目录)
│ │ │ ├─ chrome (chrome皮肤文件夹)
│ │ │ │ │─ ... (chrome皮肤所需图片素材)
│ │ │ │ └─ preview.png (chrome皮肤预览图,尺寸:256*156)
│ │ │ ├─ default (default皮肤文件夹)
│ │ │ ├─ qq (qq皮肤文件夹)
│ │ │ ├─ chrome.css (chrome皮肤样式)
│ │ │ ├─ default.css (default皮肤样式)
│ │ │ ├─ qq.css (qq皮肤样式)

可以看出大致目录结构是:skins 目录下一个皮肤分别有 xxx.css 样式文件,和同名的 xxx 文件夹,并且文件夹里有一个名为 preview.png 的预览图。这样我们就可以按照这一结构新建好新皮肤的文件目录

编写样式

这里要记住一点,编写皮肤就是 覆盖现有样式,增加新样式

我们先来看一下在不调用任何皮肤样式的情况下,系统的默认皮肤样式是什么样的,也就是 default 皮肤。

窗口 HTML 代码结构可用开发者工具,如 chrome 自带的开发者工具,或者火狐的 firebug 进行查看。

/*窗口*/
.window-container{position:absolute;background:#ccc;border:1px solid #000}
/*当前窗口*/
.window-current{background:#fff}
/*标题*/
.title-bar{position:relative;z-index:1;height:30px;line-height:30px;overflow:hidden;cursor:default;background:#ccc}
/*当前窗口标题*/
.window-current .title-bar{background:#fff}
/*标题图标*/
.title-bar .icon{position:absolute;top:7px;left:7px;width:16px;height:16px}
/*标题文字*/
.title-bar .title{display:inline-block;width:100%;text-align:center;color:#000;font-size:14px}
/*窗口右上角操作按钮*/
.title-handle{position:absolute;z-index:1;top:4px;right:4px;font-size:0;cursor:pointer}
.title-handle a{position:relative;text-decoration:none;letter-spacing:normal;text-align:center;display:inline-block;*display:inline;zoom:1;vertical-align:top;font-family:tahoma,arial,\5b8b\4f53,sans-serif;color:#000;font-size:22px;width:22px;height:22px;line-height:22px}
.title-handle a b{display:block;position:absolute;overflow:hidden;cursor:pointer}
.title-handle .ha-close{}
.title-handle .ha-close:hover{color:#03F}
.title-handle .ha-fullscreen{}
.title-handle .ha-fullscreen:hover{color:#03F}
.title-handle .ha-max .max-b{top:6px;left:4px;width:10px;height:5px;border:2px solid #000;border-top-width:4px}
.title-handle .ha-max:hover .max-b{border-color:#03F}
.title-handle .ha-revert .revert-b{top:5px;left:6px;width:8px;height:4px;border:2px solid #000;border-top-width:3px}
.title-handle .ha-revert .revert-t{top:9px;left:3px;width:8px;height:4px;border:2px solid #000;border-top-width:3px;background:#fff}
.title-handle .ha-revert:hover .revert-b,
.title-handle .ha-revert:hover .revert-t{border-color:#03F}
.title-handle .ha-hide .hide-b{top:12px;left:5px;width:12px;height:2px;border-bottom:2px solid #000}
.title-handle .ha-hide:hover .hide-b{border-color:#03F}
/*窗口内部iframe*/
.window-frame{position:absolute;top:30px;right:0;bottom:30px;left:0;background:#fff;border-top:1px solid #000;border-bottom:1px solid #000}
/*底部*/
.set-bar .btn .icon{position:absolute;width:18px;height:18px;left:6px;top:2px;background-image:url(google_ui_sprite.png)}
.set-bar{position:absolute;background:#ccc;height:30px;left:0;right:0;bottom:0}
.window-current .set-bar{background:#fff}
.set-bar .btn{position:relative;margin-top:3px;margin-right:5px;border:1px solid #ccc;color:#000;cursor:pointer;display:inline-block;height:22px;text-decoration:none}
.window-current .set-bar .btn{border:1px solid #fff}
.set-bar .btn:hover{border:1px solid #000;background:#fff}
.set-bar .btn .btn-con{height:20px;line-height:20px;overflow:hidden;padding:0 6px 0 30px}

这就是窗口的默认样式了,建议新手第一次编写时,可以针对字体颜色、大小,背景颜色等简单的样式进行修改,以便快速熟悉。

为开发方便,以下提供一个开发模版,只需把你想修改的样式写入即可(注:不要修改/覆盖原有样式里具有 position 样式,可能会造成窗口错乱)

/*窗口*/
.window-container{ }
/*当前窗口*/
.window-current{ }
/*标题*/
.title-bar{ }
/*当前窗口标题*/
.window-current .title-bar{ }
/*标题图标*/
.title-bar .icon{ }
/*标题文字*/
.title-bar .title{ }
/*窗口右上角操作按钮*/
.title-handle{ }
.title-handle a{ }
.title-handle a b{ }
.title-handle .ha-close{ }
.title-handle .ha-close:hover{ }
.title-handle .ha-fullscreen{ }
.title-handle .ha-fullscreen:hover{ }
.title-handle .ha-max .max-b{ }
.title-handle .ha-max:hover .max-b{ }
.title-handle .ha-revert .revert-b{ }
.title-handle .ha-revert .revert-t{ }
.title-handle .ha-revert:hover .revert-b,
.title-handle .ha-revert:hover .revert-t{ }
.title-handle .ha-hide .hide-b{ }
/*窗口内部iframe*/
.window-frame{ }
/*底部*/
.set-bar .btn .icon{ }
.set-bar{ }
.set-bar .btn{ }
.window-current .set-bar .btn{ }
.set-bar .btn:hover{ }
.set-bar .btn .btn-con{ }

当你熟悉后,可以学习下框架自带的 qq 皮肤样式代码,该样式为 @一丝yisi 编写提供于 lhgdialog 使用,我在他的基础上进行的修改,就变成了现在适用于 hoorayos 的皮肤样式。

留言