主题
Serene启动时使用一套“蓝黑”主题。我们可以通过点击右上角的按钮替换主题。
这个特性是通过替换 body CSS class 来实现的。
查看代码可以看到 标签里面使用了 skin class,如下:
<body id="s-DashboardPage" class="fixed sidebar-mini hold-transition
skin-blue has-layout-event">
如果你选择 light yellow skin,上面这段代码会变成:
<body id="s-DashboardPage" class="fixed sidebar-mini hold-transition
skin-yellow-light has-layout-event">
修改之后需要刷新页面才能看到效果。
同时一个名称为“ThemePreference”内容为“yellow-light”的cookie会添加到浏览器中。因此下次你启动 Serene 可以看到 Serene 记住了你的选择使用黄色的主题。
皮肤相关文件放在Serene.Web项目的“Content/adminlte/skins/”中:
_all-skins.less
skin.black-light.less
site.blue.less
site.yellow-light.less
site.yellow.less
我们使用 LESS 生成 CSS,所以你应该修改 LESS 文件儿不是 CSS 文件。下次你编译的时候 LESS 会被编译成 CSS (使用 Node 的 Less.js 编译器)。
这个编译过程配置在 Serene1.Web.csproj 中:
...
<Target Name="CompileSiteLess" AfterTargets="AfterBuild">
<Exec Command=""$(ProjectDir)tools\node\lessc.cmd"
"$(ProjectDir)Content\site\site.less" >
"$(ProjectDir)Content\site\site.css"">
</Exec>
</Target>
...
site.less会被编译成存放在相同文件夹中对应的 css 文件。
有关 LESS 编译器和语法的更多信息请查看http://lesscss.org/。