如何打造一个FB配色版AO3界面

鉴于目前互联网上关于AO3排版的中文教程非常稀缺，因此作者还在其中加入了许多乱七八糟的其他东西提供给作者们（良好的排版是吸引读者们阅读的一个好办法……）
阅读本文你将得到：
（1）一份配套的FB版Work Skins和Site Skins代码以及如何使用他们的保姆级教程
（2）关于如何进行AO3页面排版的教程和建议
（3）关于HTML和CSS的一些小tips。

(See the end of the work for more notes.)

Work Text:

谢谢你的点进来，想必你一定对我专门写的一篇文章分享的皮肤很感兴趣，现在先展示一下皮肤的效果：

移动端（手机）

这是移动端仪表板展示这是移动端作品展示

滑动查看

网页端（笔记本电脑）

这是网页端仪表板展示

这是网页端作品展示

滑动查看

总的来说，这两款皮肤主打一个简洁和蓝色的狂热爱好者狂喜（其实原本是想复刻FB款但是最后成果成这样了）

ps：目前尚未尝试其他的设备页面效果，如果有问题请联系我。

注：Parent Skin-Blue

好了，如果你也想拥有这个并且你知道怎么使用Skins，直接使用下面的代码吧：

工作皮肤代码：


#workskin {
  font-family: "SimSun", "Microsoft YaHei", "Arial", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #003366;
  background-color: #F0F8FF;
  text-align: left;
}

#workskin a {
  color: #4682B4;
  text-decoration: underline;
}

#workskin .Black {
  color: #000000;
}

#workskin .Blue {
  color: #0000FF;
}

#workskin .Grey {
  color: #808080;
}

#workskin .Green {
  color: #255;
}

#workskin .Red {
  color: #FF0000;
}

#workskin p {
  text-indent: 2em !important;
}

#workskin .no-indent {
  text-indent: 0 !important;
}

#workskin h1,
#workskin h2,
#workskin h3,
#workskin h4,
#workskin h5,
#workskin h6 {
  font-weight: bold !important;
}

#workskin .small-text {
  font-size: 70%;
}

#workskin .code-line {
  border-left: 2px solid #21217C;
  padding-left: 10px;
  font-family: monospace;
  font-size: 16px;
  color: #333;
  margin: 10px 0;
}

#workskin .code-container {
  width: 98%;
  height: 200px;
  overflow-y: auto;
  background-color: #9BB3BA;
  padding: 10px;
  border: 1px solid #ccc;
  font-family: monospace;
}

#workskin .image-border {
  border: 2px solid #3B7CA2;
  border-radius: 10px;
  padding: 3px;
  display: inline-block;
  text-align: center;
}

#workskin .image-container {
  justify-content: center;
  border: 2px solid #003D7A;
  border-radius: 10px;
  padding: 5px;
  height: 500px;
  overflow-y: scroll;
}

站点皮肤代码：


#outer {
  background: #F0F8FF;
}

.actions a,
.actions a:link,
.action,
.action:link,
.actions input,
input[type="submit"],
.actions button,
.current,
.actions label,
li.relationships,
.thread .even {
  background: #F0F8FF;
}

a:hover {
  color: #012F48;
}

#login-block,
li.blurb,
fieldset,
form dl,
#dashboard ul.navigation,
#dashboard ul,
#symbols-key dl,
.toggled form,
.dynamic form,
div.comment,
li.comment,
.comment div.icon,
.autocomplete div.dropdown ul,
#modal,
.bookmark p.count span,
.ui-sortable li:hover,
.actions a:hover,
.actions input:hover,
.userstuff blockquote {
  border-color: #04669B;
}

fieldset,
form dl,
fieldset dl dl,
fieldset fieldset fieldset,
fieldset fieldset dl dl,
dd.hideme,
form blockquote.userstuff {
  box-shadow: inset 1px 0 5px #012F48;
}

#header .actions a:hover,
#header .actions a:focus,
#header .dropdown:hover a,
#header .open a,
#header .menu,
#small_login,
#header .dropdown:hover .current + .menu,
#dashboard .current,
.actions a:active,
.current,
a.current,
.current a:visited,
span.unread,
.replied,
span.claimed,
dl.index dd,
.own,
.draft,
.draft .wrapper,
.unread,
.child,
.unwrangled,
.unreviewed {
  background: #DCEBF8;
}

.actions a,
.action,
.actions input,
input[type="submit"],
button,
.current,
.actions label,
a.cloud4,
a.cloud5 {
  color: #002B42;
}

a:visited,
a.cloud6 {
  color: #004368;
}

thead,
tfoot,
tfoot td,
th,
tr:hover,
col.name,
input,
textarea,
#modal .content,
.actions a,
.action,
.actions input,
input[type="submit"],
button,
.current,
.actions label,
span.unread,
.replied,
span.claimed,
.system .latest h3,
.system div.news h3,
.listbox,
fieldset fieldset.listbox,
dl.meta,
.picture .header,
.bookmark .user {
  border-color: #04669B;
}

input,
textarea {
  box-shadow: inset 0 1px 2px #012F48;
}

li.blurb,
.blurb .blurb,
.listbox .index,
.dashboard .listbox .index {
  box-shadow: inset 1px 1px 3px #012F48;
}

#header ul.primary {
  box-shadow: inset 0 -5px 10px rgba(0,0,0,0.5);
}

.autocomplete div.dropdown ul {
  box-shadow: 1px 3px 5px rgba(0,0,0,0.5);
}

form dl,
table,
#header #small_login,
fieldset,
thead td,
fieldset dl dl,
fieldset fieldset fieldset,
fieldset fieldset dl dl,
dd.hideme,
form blockquote.userstuff,
.ui-sortable li:hover,
fieldset fieldset.listbox,
.comment h4.byline,
.readings-index h3,
.search span.tip,
.flash,
.notice,
.error,
.comment_error {
  background: #B0C4DE;
}

.group.listbox .index,
li.relationships a {
  background: #F0F8FF !important;
}

li.relationships a {
  color: #0595B4 !important;
}

.listbox .heading,
#dashboard a:hover {
  color: #FFFFFF !important;
}

#dashboard a:hover,
.listbox {
  background: #21217C;
}

body,
#main.error,
#main.slow,
#main.maintenance,
.required .autocomplete,
.autocomplete .notice,
.post .required .warnings,
.userstuff h2,
.userstuff caption,
.userstuff table,
.userstuff td,
.userstuff col,
.userstuff tr,
.userstuff th a,
.userstuff thead,
.userstuff tfoot,
.userstuff tbody,
.userstuff th,
.userstuff thead td,
.userstuff th a:link,
a.cloud3,
#header .search input[type="text"] {
  color: #003366;
}

.draft {
  border-color: #0369A0;
}

.actions a,
.action,
.actions input,
input[type="submit"],
button,
.current,
.actions label,
span.unread,
.replied,
span.claimed {
  border-bottom-color: #0369A0;
}

.ui-sortable li:hover,
.secondary,
.wrapper,
.ui-draggable form {
  box-shadow: 1px 1px 5px #0369A0;
}

#header #small_login {
  box-shadow: inset 1px 0 5px rgba(0,0,0,0.75);
}

.delete a,
span.delete {
  box-shadow: -1px -1px 2px rgba(0,0,0,0.75);
}

#modal-bg {
  background: #000;
}

a,
a:link,
a:visited:hover,
#dashboard a,
#dashboard span,
.autocomplete div.dropdown ul,
.actions a:visited,
.actions a:active,
.current,
a.current,
.current a:visited,
a.tag,
.tags a,
a.cloud1,
a.cloud2 {
  color: #000E16;
}

.userstuff h3,
#header .primary a,
#header .primary .current,
#header .primary input,
#header .search input {
  border-color: #00273D;
}

.actions a:active,
.current,
a.current,
.current a:visited {
  box-shadow: inset 1px 1px 3px #00273D;
}

#header ul.primary,
#footer,
.autocomplete .dropdown ul li:hover,
li.selected,
a.tag:hover {
  background: #21217C;
}

#header #greeting img,
#header .heading a,
#header fieldset,
#header form,
#header p,
#header .user a:hover,
#header .user a:focus,
#header .user .current,
#dashboard a:hover,
.actions a:hover,
.actions input:hover,
.delete a,
span.delete,
span.unread,
.replied,
span.claimed,
.draggable,
.droppable,
span.requested,
a.work,
.blurb h4 a:link,
.blurb h4 img,
.system .latest h3,
.system div.news h3,
.system .tweets h3,
.required,
.error,
a.cloud7,
a.cloud8 {
  color: #21217C;
}

#outer #header #greeting .icon,
#dashboard.own,
.error,
.comment_error,
#header ul.primary,
.LV_invalid,
.LV_invalid_field,
input.LV_invalid_field:hover,
input.LV_invalid_field:active,
textarea.LV_invalid_field:hover,
textarea.LV_invalid_field:active,
#header .primary a,
#header .primary .current,
#header .primary input,
#header .search input {
  border-color: #21217C;
}

#dashboard a,
#dashboard span,
#dashboard.own,
#footer ul.navigation a,
fieldset dl,
fieldset.actions,
fieldset dl fieldset dl,
.dynamic form fieldset,
.toggled form fieldset,
.toggled form dl,
.secondary .toggled form,
.dashboard .own,
.mods li,
dl.stats dt,
dl.stats dd,
dl.stats,
.blurb .header .heading,
.blurb .header ul,
.blurb .header p.status,
.preface h3,
fieldset.comments,
.userstuff table,
.userstuff td,
.userstuff col,
.userstuff tr,
.userstuff thead,
.userstuff tfoot,
.userstuff tbody,
.userstuff th,
.userstuff thead td,
.userstuff th a,
.userstuff th a:link {
  background: transparent;
}

#footer a:hover,
fieldset dl,
fieldset.actions,
fieldset dl fieldset dl,
.dynamic form fieldset,
.toggled form fieldset,
.toggled form dl,
.secondary .toggled form,
.actions a,
.action,
.actions input,
input[type="submit"],
button,
.current,
.actions label,
#outer.wrapper,
#inner.wrapper,
dl.index,
dl.stats,
.listbox,
fieldset fieldset.listbox,
.listbox li.blurb,
fieldset.comments,
dl.nomination {
  box-shadow: none;
}

h2,
.system p#signup,
#header h2 {
  text-shadow: none;
}

那么接下来就有人要问了，鹅师傅鹅师傅，我不会代码啊，我一看到代码就头晕晕。

是这样的，这是一个傻瓜教程，所以别担心，你可以学会的。不会代码没有什么关系，你会复制，会粘贴，会点击，ok，你已经学会了一半。

首先，点击Skins，你会进入到以下页面，点击“Create Work Skins”或者“Create Site Skins”，都可以，影响不大。

然后，你就可以开始设计你的皮肤了：

（1）选择你的类型：是工作皮肤还是网站皮肤，两者的区别是之前作用于整个AO3界面。Site Skins只有你自己可以看到，如果有不适用的代码会有预警提醒你无法保存。Work Skins你在写文章的时候可以进行使用，读者可以选择关闭你的皮肤（但大多数读者不明白如何关闭所以问题不大）。并且对于不适用的代码它会选择直接给你删除（请在保存后判断是不是更新成功了否则会出现你更新了但实际上并没有写入新代码的情况）。如果你只是阅读而不创作，我建议你只使用网站皮肤。

（2）给你的皮肤命名一个你喜欢的标题，但我知道大多数人只写001。

（3）描述可以不用写入，但我喜欢写入一些代码注释，因为ao3并不会让你保留你的注释。

（4）上传预览必须选择一张照片上传，可以是png、jpg、gif任意格式，没有大小限制，但pdf无法使用。

（5）在CSS的输入框进行设置，你可以直接粘贴进我上面展示的代码，选择提交。

皮肤网页版指引2

如果你采用的是移动端，不用担心，这是完全类似的：

步骤与网页版完全类似，唯一的区别可能是一张封面图片可以直接直接一张手机图库（更方便了！）我这里是比较推荐移动端操作。

现在已经拥有了自己的一套皮肤，要如何使用呢？

Site Skins的使用非常简单，在My Site Skins里找到它，点击使用就可以啦！Work Skins则需要创作者在编辑的时候，在Select work Skin那一行选择好。

接下来是创作者时间

好吧，主要是为了让前面打的“高阶”标签名副其实一点。所以还有一些涉及工作站点的编程小技巧。

如何有一个基础的排版版本

这个教程的初衷其实还是源于某天晚上亲友让我给她推荐同人文，我点开书签找到了一篇符合她口味的，但是排版让我眼前一晕——密密麻麻的没有格式+小字体让我很担心推荐出去对方会没有阅读的欲望。

然后很尴尬的，我突然发现我的某些作品的几章居然也有这个问题！！我紧急研究了一下，发现这个问题是Word用户将文章粘贴进ao3的时候使用了HTML的锅，HTML会自动把文本里的分段记为“<br/>”结尾而不是“</p>”，这种格式电脑会默认结尾你还是同一段落，因此段与段之间采用的是行距而不是段距，造成排版拥挤的视觉效果。

针对这个问题，我要给所有创作者的第一个建议永远是，（1）粘贴文本进ao3，请将输入框设置调整为Rich Text。

当然，也存在选择了Rich Text也无法解决的情况，这很有可能是你不清楚的文本结构使用的是软回车（比如你在Word里用Shift+enter换行），粘贴到Rich Text输入框后仍然被记为“<br/>”结尾。那么针对这种问题，我们只需要事先将文本中所有的软回车删掉即可。以Word为例：选择替换，将“^l”全部替换为“^p”。

在这里再插播一点Word小技巧（说好的HTML教程呢！）：

（1）删除多余的空格：选择替换，将“ ”（一个空格）替换为“”（也不输入什么）。

（2）删除空白空行：选择替换，将“^p ^p”（中间要一个空格）替换为“”。

（3）删掉非缩进的段前空格：选择替换，将“^p ^p”（中间要两个空格）替换为“”。

（4）删除掉文本里的所有格式选择：Crtl A全文+橡皮擦，或者直接粘贴到记本里，这样你就可以得到一个真正的富文本，外表形状子粘贴进富文本里出现的就是什么样的子啦。

现在我们现在已经可以完美地把文本以一个比较“干净”的粘贴变成AO3了，却仍然是一个比较简陋的排版，甚至都没有段落首行缩进。那么这个时候，我们的工作皮肤的作用就凸显了。


#workskin p {
  text-indent: 2em !important;
}

#workskin .no-indent {
  text-indent: 0 !important;
}

加入以上两段代码的工作皮肤将具备自动将你的文本段前缩进两个字符的功能，即针对所有为“<p>我是个文本</p>”式的段落，会自动在前面空两格。（这就是为什么我认为前期文本处理很重要，你必须让系统认识到这是分段的，软回车是不管用的），得到的范式为：

我是一个文本

同时针对你不想缩进的段落，你需要加上标注，如：<p class="no-indent">我是一个不想要缩进的文本</p>，得到的范式为：

我是一个不需要的缩进的文本

因此，我的第二个建议是：（2）永远使用Work Skins，使用至少含有段前缩进的Skin。

如何有一个进阶的排版之文字篇

排版中的文字包括字体、字号、颜色等方面，然而ao3对于这方面的设置却非常麻烦。以下是我的一些小提示：

（1）富文本

是的，能够直接进行调整而不用写代码永远是我的最优选。点击富文本，选择你要调整的那一段文本，点击上面的粗体、斜体、下划线、划线，即直接进行调整，就这点而言还是非常方便的。

同时，你还可以选择：

左对齐左对齐左对齐左对齐左对齐左对齐左对齐左对齐左对齐左对齐左对齐左对齐左对齐左对齐左对齐左对齐左对齐左对齐左对齐左对齐左对齐左对齐左对齐

右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐右对齐

居中居中居中居中居中居中居中居中居中居中居中居中居中居中居中居中居中居中居中居中居中居中居中居中居中居中居中居中居中居中居中居中居中居中居中居中

两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐两边对齐

注意：ao3的两边对齐是默认模式，就是说……你压根不用选择它就是两边对齐。

（更新：刚得知默认是左对齐，需要两边对齐需要另外加Skins。）

（2）直接编写

Rich Text直接点击虽然好，选项却实在太少了。更多的恐怕就需要直接在HTML里编写了。然而不知道是AO3的还是限制什么原因，我发现好多语句我写没问题，在富文本框里看完美，一选择发布却直接被修改掉了。有没有懂的告诉我一下，是ao3的问题还是我的问题TT

（3）工作皮肤

是的，所以最终很多还是需要使用Work Skins先进行CSS的定义然后再调用。直接使用色彩调用会失败，然后我查阅了Goddess_of_the_arena老师的文章，发现首先进行定义再调用就没有问题了。，因此我们可以在Work Site中设置：


#workskin .Red {
  color: #FF0000;
}

对红色这个元素进行定义，后面的十六圈颜色编码可以直接在一些颜色网站查询，后续就可以在写作时进行调用：
我让后面这个字变成<span class="Red">红色</span>

表现形式为：
我想让后面这个字变成红色

同理，如果我想让字号缩小70%，也可以先定义：


#workskin .small-text {
   font-size: 70%;
}

在后续使用时，输入：
我想让后面这个字<span class="small-text">缩小</span>

表现形式为：
我想让后面的这个字变小

如何有一个进阶的排版之脚注篇

脚注我用的是Lucifer111老师的代码，效果非常好，很有知网感，可以通过点击索引到对应位置，问题就是每一个脚注都需要手动进行标注，我在直接标注《柏林1952》的时候差点给我标注崩溃了。如果你也是完美主义+不怕麻烦，以下是方法：

这是一段原文<sup> <a id=" 1 back" href="# 1 " rel="nofollow" name=" 1 back"> </a></sup> <a id=" 1 back" href="# 1 " rel="nofollow" name=" 1 back"> <sup>【1】</sup></a>

<a name="1" rel="nofollow" id="1"></a>【1】这是一段时期引用<a href="#1back" rel="nofollow">返回正文</a>

其中：里面的标注你可以按喜好改成*等，也可以选择把原文、引用任何部分放置到注释里面，需要注意，在多个脚注的情况下，需要把代码中的索引进行一一更改，并且每组都需要照应，不能存在多个脚注或者一个脚注对应多段原文的情况，否则就会回复失败。（这就是为什么我说标签让我崩溃了，有更简单的办法请告诉新手师傅，谢谢。）

效果如下：

这是一段译文^【1】

【1】这是一段引用返回正文

如何有一个进阶的排版之图片篇

图片插入我相信大部分人都会：

（1）寻找一个图床。

（2）上传图片，将网页贴图代码(HTML）贴到相应位置。

（3）没有了，直接发帖，就可以看到了。

基于你已经学会了最简单的贴图方式，现在我们来学一些进阶的知识吧。

（1）修改图片名称

例如这样的图片贴图代码：

我们本来可以直接贴到HTML的输入框，但是我看到了Poppy Child老师的文章，意识到alt后面的标注其实应该被更改，以方便视觉障碍者或者使用不显示图片阅读器的读者可以意识到这是什么东西。因此，我们其实可以修改为：

效果为：

（2）修改图片大小。

我们只需要在原始贴图代码中再加入一行宽度的定义即可。

如：<a href="https://imgse.com/i/pEHVlTg"><img src="https://iili.io/qJh28mb.jpg" alt="一张猫meme" border="0" width=50% /></a>

这里的50%为页面宽度的50%，使得图片可以适用不同的设备屏幕。

效果为：

（3）修改图片边框

我们只需要在原始的贴图代码里加入类似边框的定义就可以了（才怪！）

此操作又被ao3禁用了，因此我们还是用工作皮肤进行修改。

代码如下：


#workskin .image-inner img {
  border: 2px solid #000 !important;
  border-radius: 10px;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  box-sizing: border-box !important;
}

其中，实线指的是实线框，你还可以改为：dashed（虚线边框）、Dotted（小点框）、double（双线框）。padding设置是图片到边框的距离。

在插入图片时，我们之前进行过调用，使用定义好的CSS：

</div>

效果为：

一张猫表情包

（4）制作滑动的图片

图片太长？想让图片滑动起来？

我们仍然需要借助CSS：


#workskin .image-border {
  height: 500px;
  overflow-y: scroll;
}

在这个代码中。500px是设定的纵向距离，超出这个长度的图片将需要滑动来查看。

使用方法：

</div>

效果可以看前文已发过的图片。

好了，暂时就这样了。不过成功的排版固然重要，牛逼的文笔更令我卧槽……可以在已完成文本重要的基础上再去进阶排版，侧面说明AO3排版也太要命了（我这篇文就写得很难受）。祝大家都配好自己喜欢的Skins，吃到好饭饭，炒出好饭饭。

Notes:

写在文后：作者的HTML和CSS技术不精，是最近重捡于是抱着不用白不用的心态在处理自己的AO3账号页面，如果你有其他的tips/advice/experience欢迎和作者分享，有做的非常漂亮的作品页面也请分享在下方。

Series this work belongs to:

Part 1 of 沉迷于CSS和HTML😵 Next Work →

Actions

Kudos

dedeD_D, Shy_reader2012, RatlingYesyes, NextDoorKid, therealpasta, Retrouvailles_2, Charles_Rockafellor, zhengjiuyi, mitoeatmeat, ChineseChompingCabbage404, Kawayagina, Bahn42Binary, SudaKeina, LordeW, Inglenookfireplace, StellaMeow, caffeine_intolerance, megumizzz, GumbaBunny, elkphant, Ruania, MohnblumenKind, retroreflector, Vvvicky9497, Roe1116, ovower, and heitangxiaomaoyizhi as well as 2 guests left kudos on this work!

Comments

Sorry, this work doesn't allow non-Archive users to comment. You can however still leave Kudos!

Archive of Our Own

Actions

Work Header