win7simu 中文文档 下载 App

Win7 Simu Theme Studio CSS 入门:从零开始改主题

前置知识

Theme Studio 需要的 CSS 知识非常基础——下面这几条足够改出一个像样的主题:

CSS 概念说明示例
选择器选要改的元素.window-title-bar(所有窗口标题栏)
属性改什么background: rgba(0,0,0,0.5)
值改成什么color: #ff0000(红色)
注释用 /* 注释内容 */ 写说明,不影响效果/* 这是窗口背景 */

最小可行主题示例

在 Theme Studio 编辑器里写这段:

/* 把所有窗口标题栏改成深蓝色 */
.window-title-bar {
  background: #0066cc;
  color: white;
}

/* 把按钮边框改成圆角 */
button {
  border-radius: 6px;
}

/* 把桌面背景改成深灰色 */
.desktop {
  background: #2b2b2b;
}

写完保存 → 应用,模拟器里的窗口标题栏变成深蓝色、按钮有圆角、桌面变深灰。就这么简单。

Win7 Simu 内置的 CSS 类选择器

模拟器为每个 UI 元素都预置了 CSS 类名——官方提供了一份 selectors 文档,完整列表太长,最常用的几个:

类名对应元素
.desktop桌面背景
.window-title-bar窗口标题栏(含毛玻璃层)
.window-content窗口内容区
.taskbar底部任务栏
.start-menu开始菜单面板
.button / button所有按钮
.menu-item菜单条目
.text-input输入框

查看完整列表:Theme Studio → 顶部菜单 Selectors → 弹出完整文档。

颜色与透明度

CSS 里表示颜色有几种方式:

方式示例
十六进制#ff0000(红)、#0066cc(蓝)
RGBrgb(255, 0, 0)
RGBA(带透明度)rgba(0,0,0,0.5)(半透明黑)
颜色名red、blue、transparent

调试技巧

继续读:实时预览与临时应用