Felix Felicis 默认主题修改

microjo

大部分汉化

将主题中大部分英文译成中文，并添加一些配合中文显示的 CSS 样式，包括中文文章 article 中段落开头缩进两个汉字、脚注的上标加上中括号等：

article:lang(zh) .entry-content p:before { content: "　　"; }
article:lang(zh) .entry-content li p:first-child:before { content: ""; }
sup:lang(zh) {
    font-family: Verdana;
    margin: 0 2px;
}
sup:lang(zh):before { content: "["; }
sup:lang(zh):after { content: "]"; }

修改样式表 style.css

主要是添加/修改代码和表格显示的 CSS 样式：

/* 代码块 */
pre { overflow:auto; padding: 8px; }
code { padding: 1px 2px; }
pre code { padding:0!important; border: 0px !important; }

/* 表格 */
table{
    margin: 1em 0;
    border: 1px solid #dadada;
}
thead{
    background: #ccc;
    color: #fff;
    border: 1px solid #bbb;
}
th, td{
    border: 1px solid #dadada;
    padding: 0.2em 0.4em;
}
tbody tr:nth-child(2n) {
    background: #eee;
}

实现 lightbox 效果

从 The Lightbox Clones Matrix 页面挑选一个满足需求的 Shadowbox.js，对其进行了修改和设置，对帖子中所有的图片，实现 lightbox 效果，超出显示范围的图片可以拖动。目前有个不完美的地方，就是对于带链接的图片，链接会自动失效。

使用说明

Shadowbox.js 修改版

将下载的修改版 Shadowbox.js 解压缩到 static 目录，同时主题模板文件 post.html 增加如下内容：

<script type="text/javascript" src="{{ static_url('shadowbox/shadowbox.js') }}">
</script>
<script type="text/javascript">
Shadowbox.init({ handleOversize: "drag" });
window.onload = function() {
    Shadowbox.setup(".entry-content img", { gallery: "{{post.title}}", counterType: "skip" });
};
</script>

增加图标美化

参考 CSS3 icon font 完全指南，利用网上漂亮的、免费图标字体 Font Awesome，简单美化了一下主题，就差搜索框没有增加图标。另外从这篇 CSS Buttons with Pseudo-elements 学习添加一个漂亮的下载按钮。

实现主要是 CSS 的编写，这样可以避免改动图标时修改主题模板文件，拿其中一个举例，这是首页前增加图标的 CSS 内容：

[id^="nav-"] a:before, [id*=" nav-"] a:before {
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    text-decoration: inherit;
    font-size: 1.1em;
    width: 1.5em;
    text-align: center;
}
#nav-home a:before { content: "\f015"; }

在学习修改 CSS 的过程中，搜罗到不少有用的站点或帖子：

发布：

修改：

标签：