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 7happy7
Special thanks: Boyu12 Boyu12 , C-take C-take , Dr Devan Dr Devan , Etinjat Etinjat , MrPines MrPines , Nanimono Daemon does not match any existing user name, physicslike physicslike , Sekai_s Sekai_s , shu_yabiyabi shu_yabiyabi , Zyn Zynrating: +258
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!
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>" 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
» sidebar » div.side-block » background
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>
<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>
<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> | 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> | 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> | 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 Aelanna Aelanna |
||||
|---|---|---|---|---|
| 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 Aelanna Aelanna |
||||
|---|---|---|---|---|
| 颜色代码 | H | S | V | |
| 链接 | #bb0011 | 355deg | 100% | 73% |
| 0deg | / | / | ||
| 侧边栏背景 | #ffffff | 0deg | 0% | 100% |
| / | / | 100% | ||
| 滤镜: | 色调偏移(360deg) — — — |
|||
| default color (Sigma-9) by Aelanna Aelanna |
||||
|---|---|---|---|---|
| カラーコード | H | S | V | |
| リンク | #bb0011 | 355deg | 100% | 73% |
| 0deg | / | / | ||
| side-bg | #ffffff | 0deg | 0% | 100% |
| / | / | 100% | ||
| filter: | hue-rotate(360deg) — — — |
|||
| MC&D Theme by Randomini Randomini |
||||
|---|---|---|---|---|
| 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 Randomini Randomini |
||||
|---|---|---|---|---|
| 颜色代码 | H | S | V | |
| 链接 | #6C4279 | 285deg | 45% | 47% |
| -70deg | / | / | ||
| 侧边栏背景 | #ffffff | 0deg | 0% | 100% |
| / | / | 100% | ||
| 滤镜: | 色调偏移(290deg) — 饱和度(45%) — |
|||
| MC&D Theme by Randomini Randomini |
||||
|---|---|---|---|---|
| カラーコード | 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 ZeroStrider ZeroStrider , Salamander724 Salamander724 |
||||
|---|---|---|---|---|
| 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 ZeroStrider ZeroStrider , Salamander724 Salamander724 |
||||
|---|---|---|---|---|
| 颜色代码 | H | S | V | |
| 链接 | #059400 | 117deg | 100% | 58% |
| -238deg | / | / | ||
| 侧边栏背景 | #ffffff | 0deg | 0% | 100% |
| / | / | 100% | ||
| 滤镜: | 色调偏移(122deg) — — — |
|||
| Serpent's Hand THeme by ZeroStrider ZeroStrider , Salamander724 Salamander724 |
||||
|---|---|---|---|---|
| カラーコード | H | S | V | |
| リンク | #059400 | 117deg | 100% | 58% |
| -238deg | / | / | ||
| side-bg | #ffffff | 0deg | 0% | 100% |
| / | / | 100% | ||
| filter: | hue-rotate(122deg) — — — |
|||
| Third Law Theme by GreenWolf GreenWolf , Randomini Randomini |
||||
|---|---|---|---|---|
| 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 GreenWolf GreenWolf , Randomini Randomini |
||||
|---|---|---|---|---|
| 颜色代码 | H | S | V | |
| 链接 | #4682B4 | 207deg | 61% | 70% |
| -148deg | / | / | ||
| 侧边栏背景 | #E2E4E7 | 216deg | 2% | 90% |
| / | / | 90% | ||
| 滤镜: | 色调偏移(212deg) — 饱和度(61%) 亮度(90%) |
|||
| Third Law Theme by GreenWolf GreenWolf , Randomini Randomini |
||||
|---|---|---|---|---|
| カラーコード | 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 PeppersGhost PeppersGhost |
||||
|---|---|---|---|---|
| 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 PeppersGhost PeppersGhost |
||||
|---|---|---|---|---|
| 颜色代码 | H | S | V | |
| 链接 | #0c499c | 214deg | 92% | 61% |
| -141deg | / | / | ||
| 侧边栏背景 | #ffffff | 0deg | 0% | 100% |
| / | / | 100% | ||
| 滤镜: | 色调偏移(219deg) — 饱和度(92%) — |
|||
| SPC Theme by PeppersGhost PeppersGhost |
||||
|---|---|---|---|---|
| カラーコード | H | S | V | |
| リンク | #0c499c | 214deg | 92% | 61% |
| -141deg | / | / | ||
| side-bg | #ffffff | 0deg | 0% | 100% |
| / | / | 100% | ||
| filter: | hue-rotate(219deg) — saturate(92%) — |
|||
| Pataphysics Department Theme by Lt Flops Lt Flops , TSATPWTCOTTTADC TSATPWTCOTTTADC , Woedenaz Woedenaz |
||||
|---|---|---|---|---|
| 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 Lt Flops Lt Flops , TSATPWTCOTTTADC TSATPWTCOTTTADC , Woedenaz Woedenaz |
||||
|---|---|---|---|---|
| 颜色代码 | H | S | V | |
| 链接 | #5b2f8e | 268deg | 67% | 56% |
| -87deg | / | / | ||
| 侧边栏背景 | #f3f3f3 | 0deg | 0% | 95% |
| / | / | 95% | ||
| 滤镜: | 色调偏移(273deg) — 饱和度(67%) 亮度(95%) |
|||
| Pataphysics Department Theme by Lt Flops Lt Flops , TSATPWTCOTTTADC TSATPWTCOTTTADC , Woedenaz Woedenaz |
||||
|---|---|---|---|---|
| カラーコード | 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 stormbreath stormbreath |
||||
|---|---|---|---|---|
| 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 stormbreath stormbreath |
||||
|---|---|---|---|---|
| 颜色代码 | H | S | V | |
| 链接 | #151a61 | 236deg | 78% | 38% |
| -119deg | / | / | ||
| 侧边栏背景 | #e5e5e5 | 0deg | 0% | 90% |
| / | / | 90% | ||
| 滤镜: | 色调偏移(241deg) — 饱和度(78%) 亮度(90%) |
|||
| SAPPHIRE Theme by stormbreath stormbreath |
||||
|---|---|---|---|---|
| カラーコード | 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 djkaktus djkaktus |
||||
|---|---|---|---|---|
| color code | H | S | V | |
| Link | #e80e0e | 0deg | 93% | 90% |
| -5deg | 93% | / | ||
| side-bg | #161616 | 0deg | 0% | 8% |
| / | / | 8% | ||
| filter: | invert(92%) hue-rotate(189deg) saturate(1200%) |
|||
| IJAMEA Theme by Dr Solo Dr Solo |
||||
|---|---|---|---|---|
| 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) |
|||