主题

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="&quot;$(ProjectDir)tools\node\lessc.cmd&quot;
        &quot;$(ProjectDir)Content\site\site.less&quot; &gt;
        &quot;$(ProjectDir)Content\site\site.css&quot;">
    </Exec>
</Target>
...

site.less会被编译成存放在相同文件夹中对应的 css 文件。

有关 LESS 编译器和语法的更多信息请查看http://lesscss.org/

results matching ""

    No results matching ""