GO DOWN THE RABBIT HOLEC S S…
This thing with which you can make simple CSS Theme. If you want to learn more wikidot magic, check out following pages:
Info
CSS Theme Preparation Tool
Author: 7happy7
Special thanks: Boyu12,
C-take,
Dr Devan,
Etinjat,
MrPines,
Nanimono Demonai,
physicslike,
Sekai_s,
shu_yabiyabi,
Zyn
- CSS Theme preparation tool
- "Where is the options what I am looking for?"
- tips1: text-shadow
- tips2: box-shadow
- tips3: border
- tips4: Interwiki filter
CSS Theme preparation tool
How to use?
(1) Insert values
(2) Click RELOAD
(3) Click COPY
(4) …and paste it!
Are you looking for the more information? Check the tab ""Where is the options what I am looking for?""!
Please sign in to Wikidot…
This tool is created for the people who want to change the theme of page for their article. Do you want to use it? Let's go!
|
Table of Contents
|
Create the color which you want to use.
- » color picker & sample
The "color picker & sample" will prepare your original color.
Please follow the below steps;
(1) "THIS IS MY COLOR!"
(2) Click RELOAD
(3) Chose the form and click substitute the value of picker
Change the site title from "SCP Foundation"
» header » pseudo title » title (div#header h1 a:before)
Note: When not required the form of title, forms of "color" and "text-shadow" will not function.
Change the site sub-title from "Secure, Contain, Protect"
» header » pseudo title » sub title (div#header h2 span:before)
Note: When not required the form of title, forms of "color" and "text-shadow" will not function.
Change the header logo
» header » logo (div#header)
Change the header background
» header » div#container-wrap
Change the link color
» general options » a (link) color
Change the text color
» general options » body » text color
Change the standard background color
» general options » body » background
Change the heading elements color
» general options » heading elements » color
Note: You can choose "h1 only" or "All"(h1, h2, h3, h4, h5, h6).
Change the standard font
- : » general options » font » @import (Google font)
- : » general options » body » font-family
Note: "1." to "3." is disabled due to prohibited using Google Fonts in EN wiki.
1. Go to https://fonts.google.com/.
2. Select your font.
Select your font
3. Copy "@import url('https://fonts.googleapis.com/css?family=XXXXX');" and paste it into "α".
without "<style>" and "</style>"
4. Copy "'<YOUR FONT>', <BASIC FONT KEYWORDS>1" and paste it into "β".
without "font-family:" and ";"
Change the heading elements' font
» general options » font » @import (Google font)
» general options » heading elements » font-family
Note: Please check "Change the font" (4.).
Change sidebar color
Change sidebar header color
» sidebar » div.side-block » color (div.side-block div.heading)
Change mobile sidebar button color
» sidebar » open-menu » color
Change tab background color
» tab » div.yui-content » background
Change tab selector color
» tab » normal selector
» tab » hovered selector
» tab » active selector
active/hovered/normal selector
Adjust Interwiki color
» Interwiki » div.scpnet-interwiki-wrapper » filter
Note: Check the tab " tips4: Interwiki filter" if you want more information.
Change Rate module color
» Rate module » background
» Rate module » color
text-shadow
<offset-x>, <offset-y>: Required. These length values specify the shadow's distance from the text. <offset-x> specifies the horizontal distance; a negative value places the shadow to the left of the text. <offset-y> specifies the vertical distance; a negative value places the shadow above the text. If both values are 0, the shadow is placed directly behind the text, although it may be partly visible due to the effect of <blur-radius>.
<length>2
<blur-radius>: Optional. This is a length value. The higher the value, the bigger the blur; the shadow becomes wider and lighter. If not specified, it defaults to 0.
<length>2
<color>: Optional. The color of the shadow. It can be specified either before or after the offset values. If unspecified, the color's value is left up to the user agent, so when consistency across browsers is desired you should define it explicitly.
<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*/
/* Use defaults for color and blur-radius */text-shadow: 5px 10px;
text-shadow - CSS: Cascading Style Sheets | MDN
by Mozilla Contributors
CC-BY-SA 2.5
box-shadow
It's the same as "text-shadow" without a keyword of <inset>.
<inset>: If not specified (default), the shadow is assumed to be a drop shadow (as if the box were raised above the content).
The presence of the inset keyword changes the shadow to one inside the frame (as if the content was depressed inside the box). Inset shadows are drawn inside the border (even transparent ones), above the background, but below content.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;
/* Any number of shadows, separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4em olive;
box-shadow - CSS: Cascading Style Sheets | MDN
by Mozilla Contributors
CC-BY-SA 2.5
border
<width>: Sets the thickness of the border. Defaults to medium if absent.
<length>2 | thin | medium | thick
<style>: Sets the style of the border. Defaults to none if absent.
none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
<color>: Sets the color of the border. Defaults to currentcolor if absent.
<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: Cascading Style Sheets | MDN
by Mozilla Contributors
CC-BY-SA 2.5
| H | S | V |
|---|---|---|
| 355deg | 100% | 73% |
| hue-rotate | saturate | / |
| 0deg | 0% | 100% |
| / | / | brightness |
| … | ||
| … | ||
| filter: | hue-rotate(0deg) saturate(100%) — |
|
"How to adjust Interwiki color?"
a
Note 1: You can calculate only rough values by using the above tool.
Note 2: If the side-block color is not monotone(#ffffff, #DCDCDC, etc.), this method will not function well like "Third Law Theme"(#E2E4E7).
Note 3: hue-rotate(-70deg) = hue-rotate(290deg)
Basics
| default color (Sigma-9) by |
||||
|---|---|---|---|---|
| color code | H | S | V | |
| Link | #bb0011 | 355deg | 100% | 73% |
| 0deg | / | / | ||
| side-bg | #ffffff | 0deg | 0% | 100% |
| / | / | 100% | ||
| filter: |
hue-rotate(360deg) — |
|||
| default color (Sigma-9) by |
||||
|---|---|---|---|---|
| 颜色代码 | H | S | V | |
| 链接 | #bb0011 | 355deg | 100% | 73% |
| 0deg | / | / | ||
| 侧边栏背景 | #ffffff | 0deg | 0% | 100% |
| / | / | 100% | ||
| 滤镜： | 色调偏移(360deg) — — — |
|||
| default color (Sigma-9) by |
||||
|---|---|---|---|---|
| カラーコード | H | S | V | |
| リンク | #bb0011 | 355deg | 100% | 73% |
| 0deg | / | / | ||
| side-bg | #ffffff | 0deg | 0% | 100% |
| / | / | 100% | ||
| filter: | hue-rotate(360deg) — — — |
|||
| MC&D Theme by |
||||
|---|---|---|---|---|
| color code | H | S | V | |
| Link | #6C4279 | 285deg | 45% | 47% |
| -70deg | 45% | / | ||
| side-bg | #ffffff | 0deg | 0% | 100% |
| / | / | 100% | ||
| filter: |
hue-rotate(290deg) — |
|||
| MC&D Theme by |
||||
|---|---|---|---|---|
| 颜色代码 | H | S | V | |
| 链接 | #6C4279 | 285deg | 45% | 47% |
| -70deg | / | / | ||
| 侧边栏背景 | #ffffff | 0deg | 0% | 100% |
| / | / | 100% | ||
| 滤镜： | 色调偏移(290deg) — 饱和度(45%) — |
|||
| MC&D Theme by |
||||
|---|---|---|---|---|
| カラーコード | H | S | V | |
| リンク | #6C4279 | 285deg | 45% | 47% |
| -70deg | / | / | ||
| side-bg | #ffffff | 0deg | 0% | 100% |
| / | / | 100% | ||
| filter: | hue-rotate(290deg) — saturate(45%) — |
|||
| Serpent's Hand Theme by |
||||
|---|---|---|---|---|
| color code | H | S | V | |
| Link | #059400 | 117deg | 100% | 58% |
| -238deg | / | / | ||
| side-bg | #ffffff | 0deg | 0% | 100% |
| / | / | 100% | ||
| filter: |
hue-rotate(122deg) — |
|||
| Serpent's Hand Theme by |
||||
|---|---|---|---|---|
| 颜色代码 | H | S | V | |
| 链接 | #059400 | 117deg | 100% | 58% |
| -238deg | / | / | ||
| 侧边栏背景 | #ffffff | 0deg | 0% | 100% |
| / | / | 100% | ||
| 滤镜： | 色调偏移(122deg) — — — |
|||
| Serpent's Hand Theme by |
||||
|---|---|---|---|---|
| カラーコード | H | S | V | |
| リンク | #059400 | 117deg | 100% | 58% |
| -238deg | / | / | ||
| side-bg | #ffffff | 0deg | 0% | 100% |
| / | / | 100% | ||
| filter: | hue-rotate(122deg) — — — |
|||
| Third Law Theme by |
||||
|---|---|---|---|---|
| color code | H | S | V | |
| Link | #4682B4 | 207deg | 61% | 70% |
| -148deg | 61% | / | ||
| side-bg | #E2E4E7 | 216deg | 2% | 90% |
| / | / | 90% | ||
| filter: |
hue-rotate(212deg) — |
|||
| Third Law Theme by |
||||
|---|---|---|---|---|
| 颜色代码 | H | S | V | |
| 链接 | #4682B4 | 207deg | 61% | 70% |
| -148deg | / | / | ||
| 侧边栏背景 | #E2E4E7 | 216deg | 2% | 90% |
| / | / | 90% | ||
| 滤镜： | 色调偏移(212deg) — 饱和度(61%) 亮度(90%) |
|||
| Third Law Theme by |
||||
|---|---|---|---|---|
| カラーコード | H | S | V | |
| リンク | #4682B4 | 207deg | 61% | 70% |
| -148deg | / | / | ||
| side-bg | #E2E4E7 | 216deg | 2% | 90% |
| / | / | 90% | ||
| filter: | hue-rotate(212deg) — saturate(61%) brightness(90%) |
|||
| SPC Theme by |
||||
|---|---|---|---|---|
| color code | H | S | V | |
| Link | #0c499c | 214deg | 92% | 61% |
| -141deg | 92% | / | ||
| side-bg | #ffffff | 0deg | 0% | 100% |
| / | / | 100% | ||
| filter: |
hue-rotate(219deg) — |
|||
| SPC Theme by |
||||
|---|---|---|---|---|
| 颜色代码 | H | S | V | |
| 链接 | #0c499c | 214deg | 92% | 61% |
| -141deg | / | / | ||
| 侧边栏背景 | #ffffff | 0deg | 0% | 100% |
| / | / | 100% | ||
| 滤镜： | 色调偏移(219deg) — 饱和度(92%) — |
|||
| SPC Theme by |
||||
|---|---|---|---|---|
| カラーコード | H | S | V | |
| リンク | #0c499c | 214deg | 92% | 61% |
| -141deg | / | / | ||
| side-bg | #ffffff | 0deg | 0% | 100% |
| / | / | 100% | ||
| filter: | hue-rotate(219deg) — saturate(92%) — |
|||
| Darkbody Theme by |
||||
|---|---|---|---|---|
| color code | H | S | V | |
| Link | #2F4F4F | 180deg | 40% | 30% |
| -175deg | 40% | / | ||
| side-bg | #DCDCDC | 0deg | 0% | 86% |
| / | / | 86% | ||
| filter: |
hue-rotate(185deg) — |
|||
| Darkbody Theme by |
||||
|---|---|---|---|---|
| 颜色代码 | H | S | V | |
| 链接 | #2F4F4F | 180deg | 40% | 30% |
| -175deg | / | / | ||
| 侧边栏背景 | #DCDCDC | 0deg | 0% | 86% |
| / | / | 86% | ||
| 滤镜： | 色调偏移(185deg) — 饱和度(40%) 亮度(86%) |
|||
| Darkbody Theme by |
||||
|---|---|---|---|---|
| カラーコード | H | S | V | |
| リンク | #2F4F4F | 180deg | 40% | 30% |
| -175deg | / | / | ||
| side-bg | #DCDCDC | 0deg | 0% | 86% |
| / | / | 86% | ||
| filter: | hue-rotate(185deg) — saturate(40%) brightness(86%) |
|||
| Pataphysics Department Theme by |
||||
|---|---|---|---|---|
| color code | H | S | V | |
| Link | #5b2f8e | 268deg | 67% | 56% |
| -87deg | 67% | / | ||
| side-bg | #f3f3f3 | 0deg | 0% | 95% |
| / | / | 95% | ||
| filter: |
hue-rotate(273deg) — |
|||
| Pataphysics Department Theme by |
||||
|---|---|---|---|---|
| 颜色代码 | H | S | V | |
| 链接 | #5b2f8e | 268deg | 67% | 56% |
| -87deg | / | / | ||
| 侧边栏背景 | #f3f3f3 | 0deg | 0% | 95% |
| / | / | 95% | ||
| 滤镜： | 色调偏移(273deg) — 饱和度(67%) 亮度(95%) |
|||
| Pataphysics Department Theme by |
||||
|---|---|---|---|---|
| カラーコード | H | S | V | |
| リンク | #5b2f8e | 268deg | 67% | 56% |
| -87deg | / | / | ||
| side-bg | #f3f3f3 | 0deg | 0% | 95% |
| / | / | 95% | ||
| filter: | hue-rotate(273deg) — saturate(67%) brightness(95%) |
|||
| SAPPHIRE Theme by |
||||
|---|---|---|---|---|
| color code | H | S | V | |
| Link | #151a61 | 236deg | 78% | 38% |
| -119deg | 78% | / | ||
| side-bg | #e5e5e5 | 0deg | 0% | 90% |
| / | / | 90% | ||
| filter: |
hue-rotate(241deg) — |
|||
| SAPPHIRE Theme by |
||||
|---|---|---|---|---|
| 颜色代码 | H | S | V | |
| 链接 | #151a61 | 236deg | 78% | 38% |
| -119deg | / | / | ||
| 侧边栏背景 | #e5e5e5 | 0deg | 0% | 90% |
| / | / | 90% | ||
| 滤镜： | 色调偏移(241deg) — 饱和度(78%) 亮度(90%) |
|||
| SAPPHIRE Theme by |
||||
|---|---|---|---|---|
| カラーコード | H | S | V | |
| リンク | #151a61 | 236deg | 78% | 38% |
| -119deg | / | / | ||
| side-bg | #e5e5e5 | 0deg | 0% | 90% |
| / | / | 90% | ||
| filter: | hue-rotate(241deg) — saturate(78%) brightness(90%) |
|||
Exception
| The Way It Ends Theme by |
||||
|---|---|---|---|---|
| color code | H | S | V | |
| Link | #e80e0e | 0deg | 93% | 90% |
| -5deg | 93% | / | ||
| side-bg | #161616 | 0deg | 0% | 8% |
| / | / | 8% | ||
| filter: | invert(92%)4 hue-rotate(189deg)5 saturate(1200%) |
|||
| IJAMEA Theme by |
||||
|---|---|---|---|---|
| color code | H | S | V | |
| Link | #000000 | 0deg | 0% | 0% |
| / | / | / | ||
| side-bg | #FFFFFF | 0deg | 0% | 100% |
| / | / | / | ||
| filter: | grayscale(100%) drop-shadow(0 1px 1px #000000) |
|||
