开始你的梦中南柯C S S之旅……
用这东西你就能够弄出简单的CSS主题了。如果你想要学习更多的维基语法魔术，可以看看以下的文章：
- 你与高级格式
— 由DrMagnus 撰写
- SCP格式资源
— 由Shaggydredlocks 撰写
- Listpages 魔法与你
— 由Croquembouche 和
Rounderhouse 撰写
- 维基语法
— 由ghostchibi 撰写
著作信息
CSS主题制作工具
作者：7happy7
特别鸣谢（以字母顺序排列）：Boyu12,
C-take,
Dr Devan,
Etinjat,
MrPines,
Nanimono Demonai,
physicslike,
Sekai_s,
shu_yabiyabi,
Zyn
- CSS主题制作工具
- “我想要找到的选项在哪里？”
- 提示1：text-shadow 文字阴影
- 提示2：box-shadow 边框阴影
- 提示3：border 边缘
- 提示4：Interwiki filter 跨维基滤镜
CSS主题制作工具
请先登入Wikidot…
这个工具是为那些想要为自己页面更改主题的人而设的。你想要试试吗？那就让我们立即开始吧！
选择你想要使用的颜色。
- » 颜色选择器与例子
"颜色选择器与例子" 可以为你准备自定颜色。
请跟从下列步骤：
(1) “这是我想要的颜色！”
(2) 点击 重新载入
(3) 点选列表上的 以选择器数值取代
将页面版头标题从 “SCP基金会” 改变
» 版头 » 伪标题 » 标题 (div#header h1 a:before)
备注： 当此栏未被填写，“颜色” 和 “字体阴影” 栏将不会起作用。
将页面版头副标题从 “控制，收容，保护” 改变
» 版头 » 伪标题 » 副标题 (div#header h2 span:before)
备注： 当此栏未被填写时，“颜色” 和 “字体阴影” 栏将不会起作用。
将页面版头标志从 改变
» 版头 » 标志 (div#header)
将页面版头背景从 改变
» 版头 » div#container-wrap
改变链接颜色
» 一般选项 » 链接颜色
改变字体颜色
» 一般选项 » 内容 » 字体颜色
改变标准背景颜色
» 一般选项 » 内容 » 背景
改变内容标题颜色
» 一般选项 » 内容标题 » 颜色
备注： 你可以选择 “只对 h1 有效” 或 “对所有内容标题有效”（h1, h2, h3, h4, h5, h6）。
改变标准字体
- : » 一般选项 » 字体 » @import （谷歌字体）
- : » 一般选项 » 内容 » 字体
备注：“1.” 到 “3.” 因谷歌字体在大陆被墙而禁用。
1. 去 https://fonts.google.com/。
2. 选择想用的字体。
选择想用的字体
3. 复制 "@import url('https://fonts.googleapis.com/css?family=XXXXX');" 并粘贴至 "α".
不要复制 “<style>” 和 “</style>”
4. 复制 "'<你的字体>', <字体关键词>1" 至 "β".
不要复制 "font-family:" 和 ";"
改变内容标题的字体
改变侧边栏颜色
» 侧边栏 » div.side-block » 背景
改变侧边栏标题颜色
» 侧边栏 » div.side-block » 颜色 (div.side-block div.heading)
改变移动端侧边栏按钮颜色
» 侧边栏 » open-menu（打开列表） » 颜色
改变 tab 背景颜色
» tab » div.yui-content » 背景
改变 tab 选择器颜色
» tab » 普通选择器
» tab » 悬浮选择器
» tab » 已选选择器
已选/悬浮/普通选择器
改变跨维基颜色
» 跨维基 » div.scpnet-interwiki-wrapper » 滤镜
备注： 更多资讯请参见 " 提示4：Interwiki filter 跨维基滤镜"。
改变评分模块颜色
» 评分模块 » 背景
» 评分模块 » 颜色
text-shadow 文字阴影
<offset-x>, <offset-y>: 必选。这些长度值指定阴影相对文字的偏移量。<offset-x> 指定水平偏移量，若是负值则阴影位于文字左边。 <offset-y> 指定垂直偏移量，若是负值则阴影位于文字上面。如果两者均为0，则阴影位于文字正后方（如果设置了<blur-radius> （模糊半径）则会产生模糊效果)。
<length>（长度）2
<blur-radius>: 可选。这是 <length> 长度值。如果没有指定，则默认为0。值越大，模糊半径越大，阴影也就越大越淡（wider and lighter）。
<length>（长度）2
<color>: 可选。可以在偏移量之前或之后指定。如果没有指定颜色，则使用UA（用户代理）自行选择的颜色。因此如果想确保跨浏览器的一致性，请明确地指定一种颜色。
<rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color>3 | currentcolor | <deprecated-system-color>
/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black;
/* color | offset-x | offset-y | blur-radius */
text-shadow: #fc0 1px 0 10px;
/* offset-x | offset-y | color */
text-shadow: 5px 5px #558abb;
/* color | offset-x | offset-y */
text-shadow: white 2px 5px;
/* offset-x | offset-y*/
/* color（颜色）和 blur-radius（模糊半径）使用预设值。 */text-shadow: 5px 10px;
text-shadow - CSS：层叠样式表 | MDN
由 Mozilla 贡献者 撰写
CC-BY-SA 2.5
box-shadow 边框阴影
其与 “text-shadow” 文字阴影类似，但可以选择<inset>。
<inset>: 不使用inset，默认阴影在边框外，即阴影向外扩散。
使用 inset 后，阴影在边框内（即使是透明边框），即阴影向内扩散，背景之上内容之下。
inset
/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;
/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;
/* offset-x | offset-y | blur-radius | spread-radius（阴影扩散半径） | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;
/* 指定多个阴影时，以逗号将阴影隔开。 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;
box-shadow - CSS：层叠样式表 | MDN
由 Mozilla 贡献者 撰写
CC-BY-SA 2.5
border
<width>: 设置盒子模型的边框宽度。如果这个值没有被设置，它的默认值是medium。
<length>2 | thin（薄） | medium（中等） | thick（厚）
<style>: 设定元素所有边框的样式。如果这个值没有被设置，它的默认值是none。
none（无） | hidden（隐藏） | dotted（点线） | dashed（虚线） | solid（实线） | double（双线） | groove（雕刻效果） | ridge（浮雕效果） | inset（陷入效果） | outset（突出效果）
<color>: 可以确定border的颜色。如果这个值没有设置，它的默认值是元素的当前颜色属性值（是文字颜色而非背景色）。
<rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color>3 | currentcolor | <deprecated-system-color>
/* style */
border: solid;
/* width | style */
border: 2px dotted;
/* style | color */
border: outset #f33;
/* width | style | color */
border: medium dashed green;
border - CSS：层叠样式表 | MDN
由 Mozilla 贡献者 撰写
CC-BY-SA 2.5
| H | S | V |
|---|---|---|
| 355deg | 100% | 73% |
| 色调偏移度 | 饱和度 | / |
| 0deg | 0% | 100% |
| / | / | 亮度 |
| … | ||
| … | ||
| 滤镜： |
hue-rotate(0deg) saturate(100%) — |
|
"如何更改跨维基板块颜色？"
a
备注1： 使用上面的工具只能计算出大概数值。
备注2： 如果侧边栏 side-block 的颜色并非单色 （#ffffff, #DCDCDC 等等），那么这个方法的效果并不会如同 “第三定律版式” （#E2E4E7）那样好。
备注3： 色调偏移度(-70deg) = 色调偏移度(290deg)
基本的例子
|
默认主题 (Sigma-9) 由 |
||||
|---|---|---|---|---|
| color code | H | S | V | |
| Link | #bb0011 | 355deg | 100% | 73% |
| 0deg | / | / | ||
| side-bg | #ffffff | 0deg | 0% | 100% |
| / | / | 100% | ||
| filter: |
hue-rotate(360deg) — |
|||
|
默认主题 (Sigma-9) 由 |
||||
|---|---|---|---|---|
| 颜色代码 | H | S | V | |
| 链接 | #bb0011 | 355deg | 100% | 73% |
| 0deg | / | / | ||
| 侧边栏背景 | #ffffff | 0deg | 0% | 100% |
| / | / | 100% | ||
| 滤镜： | 色调偏移(360deg) — — — |
|||
|
默认主题 (Sigma-9) 由 |
||||
|---|---|---|---|---|
| カラーコード | H | S | V | |
| リンク | #bb0011 | 355deg | 100% | 73% |
| 0deg | / | / | ||
| side-bg | #ffffff | 0deg | 0% | 100% |
| / | / | 100% | ||
| filter: | hue-rotate(360deg) — — — |
|||
|
由 |
||||
|---|---|---|---|---|
| color code | H | S | V | |
| Link | #6C4279 | 285deg | 45% | 47% |
| -70deg | 45% | / | ||
| side-bg | #ffffff | 0deg | 0% | 100% |
| / | / | 100% | ||
| filter: |
hue-rotate(290deg) — |
|||
|
由 |
||||
|---|---|---|---|---|
| 颜色代码 | H | S | V | |
| 链接 | #6C4279 | 285deg | 45% | 47% |
| -70deg | / | / | ||
| 侧边栏背景 | #ffffff | 0deg | 0% | 100% |
| / | / | 100% | ||
| 滤镜： | 色调偏移(290deg) — 饱和度(45%) — |
|||
|
由 |
||||
|---|---|---|---|---|
| カラーコード | H | S | V | |
| リンク | #6C4279 | 285deg | 45% | 47% |
| -70deg | / | / | ||
| side-bg | #ffffff | 0deg | 0% | 100% |
| / | / | 100% | ||
| filter: | hue-rotate(290deg) — saturate(45%) — |
|||
|
由 |
||||
|---|---|---|---|---|
| color code | H | S | V | |
| Link | #059400 | 117deg | 100% | 58% |
| -238deg | / | / | ||
| side-bg | #ffffff | 0deg | 0% | 100% |
| / | / | 100% | ||
| filter: |
hue-rotate(122deg) — |
|||
|
由 |
||||
|---|---|---|---|---|
| 颜色代码 | H | S | V | |
| 链接 | #059400 | 117deg | 100% | 58% |
| -238deg | / | / | ||
| 侧边栏背景 | #ffffff | 0deg | 0% | 100% |
| / | / | 100% | ||
| 滤镜： | 色调偏移(122deg) — — — |
|||
|
由 |
||||
|---|---|---|---|---|
| カラーコード | H | S | V | |
| リンク | #059400 | 117deg | 100% | 58% |
| -238deg | / | / | ||
| side-bg | #ffffff | 0deg | 0% | 100% |
| / | / | 100% | ||
| filter: | hue-rotate(122deg) — — — |
|||
| color code | H | S | V | |
|---|---|---|---|---|
| Link | #4682B4 | 207deg | 61% | 70% |
| -148deg | 61% | / | ||
| side-bg | #E2E4E7 | 216deg | 2% | 90% |
| / | / | 90% | ||
| filter: |
hue-rotate(212deg) — |
|||
| 颜色代码 | H | S | V | |
|---|---|---|---|---|
| 链接 | #4682B4 | 207deg | 61% | 70% |
| -148deg | / | / | ||
| 侧边栏背景 | #E2E4E7 | 216deg | 2% | 90% |
| / | / | 90% | ||
| 滤镜： | 色调偏移(212deg) — 饱和度(61%) 亮度(90%) |
|||
| カラーコード | H | S | V | |
|---|---|---|---|---|
| リンク | #4682B4 | 207deg | 61% | 70% |
| -148deg | / | / | ||
| side-bg | #E2E4E7 | 216deg | 2% | 90% |
| / | / | 90% | ||
| filter: | hue-rotate(212deg) — saturate(61%) brightness(90%) |
|||
|
由 |
||||
|---|---|---|---|---|
| color code | H | S | V | |
| Link | #0c499c | 214deg | 92% | 61% |
| -141deg | 92% | / | ||
| side-bg | #ffffff | 0deg | 0% | 100% |
| / | / | 100% | ||
| filter: |
hue-rotate(219deg) — |
|||
|
由 |
||||
|---|---|---|---|---|
| 颜色代码 | H | S | V | |
| 链接 | #0c499c | 214deg | 92% | 61% |
| -141deg | / | / | ||
| 侧边栏背景 | #ffffff | 0deg | 0% | 100% |
| / | / | 100% | ||
| 滤镜： | 色调偏移(219deg) — 饱和度(92%) — |
|||
|
由 |
||||
|---|---|---|---|---|
| カラーコード | H | S | V | |
| リンク | #0c499c | 214deg | 92% | 61% |
| -141deg | / | / | ||
| side-bg | #ffffff | 0deg | 0% | 100% |
| / | / | 100% | ||
| filter: | hue-rotate(219deg) — saturate(92%) — |
|||
|
由 |
||||
|---|---|---|---|---|
| color code | H | S | V | |
| Link | #2F4F4F | 180deg | 40% | 30% |
| -175deg | 40% | / | ||
| side-bg | #DCDCDC | 0deg | 0% | 86% |
| / | / | 86% | ||
| filter: |
hue-rotate(185deg) — |
|||
|
由 |
||||
|---|---|---|---|---|
| 颜色代码 | H | S | V | |
| 链接 | #2F4F4F | 180deg | 40% | 30% |
| -175deg | / | / | ||
| 侧边栏背景 | #DCDCDC | 0deg | 0% | 86% |
| / | / | 86% | ||
| 滤镜： | 色调偏移(185deg) — 饱和度(40%) 亮度(86%) |
|||
|
由 |
||||
|---|---|---|---|---|
| カラーコード | H | S | V | |
| リンク | #2F4F4F | 180deg | 40% | 30% |
| -175deg | / | / | ||
| side-bg | #DCDCDC | 0deg | 0% | 86% |
| / | / | 86% | ||
| filter: | hue-rotate(185deg) — saturate(40%) brightness(86%) |
|||
|
由 FloppyPhoenix 不匹配任何一个现有的用户名， |
||||
|---|---|---|---|---|
| color code | H | S | V | |
| Link | #5b2f8e | 268deg | 67% | 56% |
| -87deg | 67% | / | ||
| side-bg | #f3f3f3 | 0deg | 0% | 95% |
| / | / | 95% | ||
| filter: |
hue-rotate(273deg) — |
|||
|
由 FloppyPhoenix 不匹配任何一个现有的用户名， |
||||
|---|---|---|---|---|
| 颜色代码 | H | S | V | |
| 链接 | #5b2f8e | 268deg | 67% | 56% |
| -87deg | / | / | ||
| 侧边栏背景 | #f3f3f3 | 0deg | 0% | 95% |
| / | / | 95% | ||
| 滤镜： | 色调偏移(273deg) — 饱和度(67%) 亮度(95%) |
|||
|
由 FloppyPhoenix 不匹配任何一个现有的用户名， |
||||
|---|---|---|---|---|
| カラーコード | H | S | V | |
| リンク | #5b2f8e | 268deg | 67% | 56% |
| -87deg | / | / | ||
| side-bg | #f3f3f3 | 0deg | 0% | 95% |
| / | / | 95% | ||
| filter: | hue-rotate(273deg) — saturate(67%) brightness(95%) |
|||
|
由 |
||||
|---|---|---|---|---|
| color code | H | S | V | |
| Link | #151a61 | 236deg | 78% | 38% |
| -119deg | 78% | / | ||
| side-bg | #e5e5e5 | 0deg | 0% | 90% |
| / | / | 90% | ||
| filter: |
hue-rotate(241deg) — |
|||
|
由 |
||||
|---|---|---|---|---|
| 颜色代码 | H | S | V | |
| 链接 | #151a61 | 236deg | 78% | 38% |
| -119deg | / | / | ||
| 侧边栏背景 | #e5e5e5 | 0deg | 0% | 90% |
| / | / | 90% | ||
| 滤镜： | 色调偏移(241deg) — 饱和度(78%) 亮度(90%) |
|||
|
由 |
||||
|---|---|---|---|---|
| カラーコード | H | S | V | |
| リンク | #151a61 | 236deg | 78% | 38% |
| -119deg | / | / | ||
| side-bg | #e5e5e5 | 0deg | 0% | 90% |
| / | / | 90% | ||
| filter: | hue-rotate(241deg) — saturate(78%) brightness(90%) |
|||
例外
| 终结的方式版式 由 |
||||
|---|---|---|---|---|
| 颜色代码 | H | S | V | |
| 链接 | #e80e0e | 0deg | 93% | 90% |
| -5deg | 93% | / | ||
| 侧边栏背景 | #161616 | 0deg | 0% | 8% |
| / | / | 8% | ||
| 滤镜： | 反转效果(92%)4 色调偏移(189deg)5 饱和度(1200%) |
|||
| IJAMEA 版式主题 由 |
||||
|---|---|---|---|---|
| 颜色代码 | H | S | V | |
| 链接 | #000000 | 0deg | 0% | 0% |
| / | / | / | ||
| 侧边栏背景 | #FFFFFF | 0deg | 0% | 100% |
| / | / | / | ||
| 滤镜： | 灰阶(100%) 整体阴影(0 1px 1px #000000) |
|||