TOMBEZ DANS LE TERRIER DU
LAPIN BLANC DU CSS…
Ce truc avec quoi vous pouvez faire de simple thème CSS. Si vous voulez apprendre plus de magie wikidot, regardez les pages suivantes :
- Outils de préparation de thème CSS
- "Où sont les options que je cherches ?"
- tips1: text-shadow
- tips2: box-shadow
- tips3: border
- tips4: Interwiki filter
Outils de préparation de thème CSS
Comment l'utiliser ?
Vous cherchez plus d'informations ? Regardez ce tab : ""Où sont les options que je cherches ?""!
Please sign in to Wikidot…
Cet outil a été créé pour les gens voulant changer le thème de leurs articles. Vous voulez l'utiliser ? Allez y !
Table des matières
|
Créez la couleur que vous voulez utiliser.
- » Selecteur d'échantillon et de couleur
Le "selecteur d'échantillon et de couleur" préparera votre couleur original.
Veuillez suivre les étapes ci-dessous;
Changer le titre du site de la "Fondation SCP"
» 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.
Changer le sous-titre de "Sécuriser, Contenir, Protéger"
» 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)
Changer le fond du header
» header » div#container-wrap
Changer la couleur des liens
» 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.
3. Copy "@import url('https://fonts.googleapis.com/css?family=XXXXX');" and paste it into "α".
4. Copy "'<YOUR FONT>', <BASIC FONT KEYWORDS>1" and paste it into "β".
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
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%) — |
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 |
||||
---|---|---|---|---|
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 |
||||
---|---|---|---|---|
颜色代码 | H | S | V | |
链接 | #bb0011 | 355deg | 100% | 73% |
0deg | / | / | ||
侧边栏背景 | #ffffff | 0deg | 0% | 100% |
/ | / | 100% | ||
滤镜: | 色调偏移(360deg) — — — |
default color (Sigma-9) by 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 |
||||
---|---|---|---|---|
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 |
||||
---|---|---|---|---|
颜色代码 | H | S | V | |
链接 | #6C4279 | 285deg | 45% | 47% |
-70deg | / | / | ||
侧边栏背景 | #ffffff | 0deg | 0% | 100% |
/ | / | 100% | ||
滤镜: | 色调偏移(290deg) — 饱和度(45%) — |
MC&D Theme by 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, 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, Salamander724 |
||||
---|---|---|---|---|
颜色代码 | H | S | V | |
链接 | #059400 | 117deg | 100% | 58% |
-238deg | / | / | ||
侧边栏背景 | #ffffff | 0deg | 0% | 100% |
/ | / | 100% | ||
滤镜: | 色调偏移(122deg) — — — |
Serpent's Hand Theme by ZeroStrider, 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, 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, Randomini |
||||
---|---|---|---|---|
颜色代码 | H | S | V | |
链接 | #4682B4 | 207deg | 61% | 70% |
-148deg | / | / | ||
侧边栏背景 | #E2E4E7 | 216deg | 2% | 90% |
/ | / | 90% | ||
滤镜: | 色调偏移(212deg) — 饱和度(61%) 亮度(90%) |
Third Law Theme by GreenWolf, 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 |
||||
---|---|---|---|---|
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 |
||||
---|---|---|---|---|
颜色代码 | H | S | V | |
链接 | #0c499c | 214deg | 92% | 61% |
-141deg | / | / | ||
侧边栏背景 | #ffffff | 0deg | 0% | 100% |
/ | / | 100% | ||
滤镜: | 色调偏移(219deg) — 饱和度(92%) — |
SPC Theme by PeppersGhost |
||||
---|---|---|---|---|
カラーコード | H | S | V | |
リンク | #0c499c | 214deg | 92% | 61% |
-141deg | / | / | ||
side-bg | #ffffff | 0deg | 0% | 100% |
/ | / | 100% | ||
filter: | hue-rotate(219deg) — saturate(92%) — |
Darkbody Theme by djkaktus |
||||
---|---|---|---|---|
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 djkaktus |
||||
---|---|---|---|---|
颜色代码 | H | S | V | |
链接 | #2F4F4F | 180deg | 40% | 30% |
-175deg | / | / | ||
侧边栏背景 | #DCDCDC | 0deg | 0% | 86% |
/ | / | 86% | ||
滤镜: | 色调偏移(185deg) — 饱和度(40%) 亮度(86%) |
Darkbody Theme by djkaktus |
||||
---|---|---|---|---|
カラーコード | 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 FloppyPhoenix ne correspond à aucun identifiant existant, TSATPWTCOTTTADC, 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 FloppyPhoenix ne correspond à aucun identifiant existant, TSATPWTCOTTTADC, Woedenaz |
||||
---|---|---|---|---|
颜色代码 | H | S | V | |
链接 | #5b2f8e | 268deg | 67% | 56% |
-87deg | / | / | ||
侧边栏背景 | #f3f3f3 | 0deg | 0% | 95% |
/ | / | 95% | ||
滤镜: | 色调偏移(273deg) — 饱和度(67%) 亮度(95%) |
Pataphysics Department Theme by FloppyPhoenix ne correspond à aucun identifiant existant, TSATPWTCOTTTADC, 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 |
||||
---|---|---|---|---|
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 |
||||
---|---|---|---|---|
颜色代码 | H | S | V | |
链接 | #151a61 | 236deg | 78% | 38% |
-119deg | / | / | ||
侧边栏背景 | #e5e5e5 | 0deg | 0% | 90% |
/ | / | 90% | ||
滤镜: | 色调偏移(241deg) — 饱和度(78%) 亮度(90%) |
SAPPHIRE Theme by 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 |
||||
---|---|---|---|---|
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 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) |