自定义样式

此功能最低要求 1.0.2 版本，如低于此版本，请升级 到最新版本。

---

一览（动图）

http://sr.ksria.cn/custom%20theme.gif

入口

界面说明

优先级

简悦跟 CSS 有关的地方共有两处：

• 阅读模式中的 主题 字体样式 字体大小 版面布局
• 选项页 → 高级设定 → 自定义样式

优先级的顺序：（高 → 底）

• 自定义 CSS；（上图 ① 所示）
• 全局、标题与描述、正文、代码段（上图 ② 所示）
• 阅读模式中的 主题 字体样式 字体大小 版面布局；

图示：

简悦 HTML 标签说明

Class 说明

• .simpread-font
  定义阅读模式的字体样式，如：

.simpread-font {
    font: 300 16px/1.8 -apple-system,PingFang SC,Microsoft Yahei,Lantinghei SC,Hiragino Sans GB,Microsoft Sans Serif,WenQuanYi Micro Hei,sans-serif;
    color: #333;
    text-rendering: optimizelegibility;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;

• simpread-theme-root
  用来描述主题的 背景色 与 字体颜色，如：

.simpread-theme-root {
    background-color: #fff;
    color: #555;
}

HTML Tag 说明（普通页面）

• sr-read
  阅读模式的根节点

• sr-rd-title
  标题

• sr-rd-desc
  描述

• sr-rd-content
  正文

• sr-rd-footer
  页脚

图示（普通页面）

HTML Tag 说明（论坛类面）

• sr-rd-mult
  每段内容的根节点

• sr-rd-mult-avatar
  头像

• sr-rd-mult-content
  每段内容的正文

HTML Tag 说明（分页面）

• sr-page
  分页的根节点

图示（论坛类页面 与 分页）

如何自定义

一般情况下，只需要在 高级设定 → 自定义样式 → 自定义 CSS 段覆盖除 .simpread-font 以外的上述内容，即可。

提交你的样式

https://github.com/Kenshin/simpread/issues/71

无法更新阅读模式的：主题、字体样式、字体大小、版面布局

当遇到如图的请看时，则发生了无法设定的问题。

• 当 自定义样式 中包含了对应的设置，则无法使用 主题 字体样式 字体大小 版面布局；
• 如果想要使用 主题 字体样式 字体大小 版面布局 则需要删除相关项；
• 详细请看 优先级关系

对应项的代码如下：

    switch( type ) {
        case "layout":
        case "margin":
            return styles.global.marginLeft != "" || styles.css != "";
        case "fontsize":
            return styles.title.fontSize != "" ||
                   styles.desc.fontSize != ""  ||
                   styles.art.fontSize != ""   ||
                   styles.css != "";
        case "fontfamily":
            return styles.global.fontFamily != "" || styles.css != "";
        case "theme":
            return styles.css.search( "simpread-theme-root" ) != -1;
    }