Blood Theme

Link to article: Blood Theme.

/*
    Blood Theme
    by ubergoober, 2026
    Based on Sigma-9, from the SCP Wiki
*/

/* ---- VARS ---- */
:root {

    --header-title: "SCP Foundation";
    --header-subtitle: "Secure, Contain, Protect";
    --lgurl: url(https://scp-wiki-cdn.nyc3.cdn.digitaloceanspaces.com/theme/en/black-highlighter/img/logo.svg);

    --header-color: #661d1d;
    --subtitle-color: white;
    --background-color: #191919;

    --accent-color: #f54242;
    --visited-color: #D25B5B;
    --bright-color: #C03535;
    --dark-color: #6d0000;
    --darker-color: #4c1717;
}

/* ---- SITE BANNER ---- */
div#container-wrap {
    background-image: none;
}

#header,
div#header {
    background-image: none;
}

#header::before {
    position: absolute;
    width: 100%;
    height: 100%;
    content: "";
    margin-top: 0.5em;
    background-image: var(--lgurl);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: auto 9em;
    opacity: .33;
}

#header h1,
#header h2 {
    float: none;
    margin-left: 0;
    text-align: center;
}

#header h1 span,
#header h2 span {
    display: none;
}

#header h1 a::before {
    position: relative;
    bottom: .15em;
    color: var(--title-color);
    font-size: 115%;
    font-weight: 700;
    content: var(--header-title);
}

#header h2::before {
    position: relative;
    top: .1em;
    color: var(--subtitle-color);
    font-size: 130%;
    font-weight: 600;
    content: var(--header-subtitle);
}

/* ---- TOP BAR ---- */
#top-bar {
    right: 0;
    display: flex;
    justify-content: center;
}

#top-bar ul li ul {
    border-bottom: 1px solid hsl(0, 0%, 40%);
    box-shadow: none;
}

/* ---- BODY ---- */
#container {
    background: linear-gradient(to bottom, var(--header-color), var(--background-color) 200px);
}

body {
    background: var(--background-color);
    color: #f9f9f9;
}

/* -- Link Colors -- */

a {
    color: var(--accent-color);
}

 a:visited {
    color: var(--visited-color);
}

a.newpage {
    color: #e67b3e;
}

.hovertip {
    background: var(--background-color);
    border: 1px solid #808080;
}

/* ----SIDEBAR ---- */
#side-bar a,
#side-bar a:visited,
#side-bar a.newpage,
#interwiki a,
#interwiki a:visited,
#interwiki a.newpage {
    color: var(--accent-color);
}

#side-bar .heading, 
#interwiki .heading {
    border-bottom: solid 1px #999;
    color: #999;
}

#side-bar .side-block,
#side-bar .side-block.media,
#side-bar .side-block.resources,
#interwiki .side-block {
    background: var(--background-color);
    border-color: #808080;
    box-shadow: none;
}

#interwiki {
    background: transparent;
}

#interwiki body {
    background-image: unset;
}

#top-bar .open-menu a {
    background: #161616;
}

@media (max-width: 767px) {
    #side-bar {
        background-color: #332733;
    }
}

#top-bar .open-menu a {
    position: fixed;
    top: 0.5em;
    left: 0.5em;
    z-index: 5;
    font-family: 'Lucida Sans Unicode','Lucida Grande','Lucida Sans','Times New Roman',Helvetica,Roboto,sans-serif;
    font-size: 30px;
    font-weight: 700;
    width: 30px;
    height: 30px;
    line-height: 0.9em;
    text-align: center;
    border: 0.2em solid #888;
    background-color: #fff;
    border-radius: 3em;
    color: #888;
    pointer-events: auto;
}

@media not all and (max-width: 767px) {
    #top-bar .mobile-top-bar {
        display: block;
        pointer-events: none;
    }

    #top-bar .mobile-top-bar li {
        display: none;
    }

    #main-content {
        max-width: 44.5rem;
        margin: 0 auto;
        padding: 0;
        transition: max-width 0.2s ease-in-out;
    }

    #side-bar {
        display: block;
        position: fixed;
        top: 0;
        left: -18rem;
        width: 15.25rem;
        height: 100%;
        margin: 0;
        overflow-x: hidden;
        overflow-y: auto;
        z-index: 10;
        padding: 1em 1em 0 1em;
        background-color: rgba(0,0,0,0.1);
        transition: left 0.4s ease-in-out;
        scrollbar-width: thin;
    }

    #side-bar:target,
    #side-bar:focus-within {
        left: 0;
    }

    #side-bar:target .close-menu {
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        margin-left: 17rem;
        opacity: 0;
        z-index: -1;
        visibility: visible;
    }

    #side-bar:not(:target) .close-menu {
        display: none;
    }

    #top-bar .open-menu a:hover {
        text-decoration: none;
    }
}

/* -------------- PAGE ELEMENTS -------------- */
/* -- Page Classes -- */

blockquote,
div.blockquote,
.code,
#lock-info {
    background: #0e0e0e;
    border: solid 1px #333;
    color: white;
}

.divider {
  display: block;
  max-width: 100%;
  border-top: 1.5px solid #aaa;
  border-bottom: 1.5px solid #aaa;
  text-align: center;
  font-size: 125%;
  font-weight: bold;
  padding: 1em;
  margin: 50px auto;
}

/* -- Images --*/

/* uses :root hack to override base sigma priority */
:root .scp-image-block {
    margin-bottom: 2em;
}

.scp-image-block .scp-image-caption {
    background-color: #111;
    color: #f9f9f9;
    padding: 5px;
}

/* -- Rate Module -- */
div.page-rate-widget-box .rate-points {
    background-color: var(--background-color) ;
    border-color: #aaa9a9;
    color: #aaa9a9;
}

div.page-rate-widget-box .rateup,
div.page-rate-widget-box .ratedown {
    background-color: #aaa9a9;
    border-top-color: #aaa9a9;
    border-bottom-color: #aaa9a9;
}

div.page-rate-widget-box .rateup a,
div.page-rate-widget-box .ratedown a {
    color: var(--background-color);
}

div.page-rate-widget-box .rateup a:hover,
div.page-rate-widget-box .ratedown a:hover {
    background: var(--background-color);
    color: #aaa9a9;
}

div.page-rate-widget-box .cancel {
    background-color: var(--background-color);
    border-color: #aaa9a9;
}

div.page-rate-widget-box .cancel a {
    color: #aaa9a9;
}

div.page-rate-widget-box .cancel a:hover {
    background: #aaa9a9;
    color: var(--background-color);
}

/* -- ToC -- */

#toc {
    background-color: #333;
    border: none;
    box-shadow: 1px 1px 5px rgba(0,0,0,.8);
}

/* -- Info Module -- */
#page-content .rate-box-with-credit-button {
    background-color: var(--background-color);
    border-color: #aaa9a9;
    border-radius: 5px;
    box-shadow: 1px 1px 3px rgba(0,0,0,.5);
}

#page-content .creditButton p a {
    border-left-color: #aaa9a9;
}

.rate-box-with-credit-button .cancel {
    border-radius: 0;
}

#page-content .creditButton p a:hover {
    color: var(--accent-color);
}

div.modalbox {
    background: linear-gradient(#0e0e0e 51px, var(--background-color) 51px, var(--background-color));
}

/* -- Titles -- */
#page-title,
.meta-title,
h1 {
    color: var(--accent-color);
}

/* -- Tables -- */

table.wiki-content-table {
    margin: 2em auto;
}

table.wiki-content-table tr td,
table.wiki-content-table tr th {
    border: solid 1px #333;
    color: white;
}

table.wiki-content-table tr th {
    background: #0e0e0e; 
}

/* -- Tabviews -- */
.yui-navset {
    margin: 2em auto;
}

.yui-navset .yui-content, .yui-navset .yui-navset-top .yui-content {
    background-color: #0e0e0e;
    border-color: #aaa9a9;
}

.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
    background: #373636;
    color: white;
}

.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a em,
.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a:hover {
    background: var(--dark-color);
    border-color: #aaa9a9;
}

.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
    background: var(--darker-color);
}

/* -- Footnote Box -- */
div.footnote {
  color: black;
}

/* -- Code Highlighting -- */
/* code highlighter stuff */
.hl-identifier,
.hl-code,
.hl-brackets {
    color: #dddddd;
}

.hl-reserved {
    color: #7895ff;
}

.hl-var {
    color: #aa5dc2;
}
 
.hl-special,
.hl-quotes {
    color: #ff4545;
}
 
.hl-number,
.hl-string {
    color: #5dc267;
}

/* -- Other -- */
del,
ins {
    color: #333;
}

.content.modal-body {
    color: black;
}

/* ---- PAGE TITLE ---- */
.meta-title,
#page-title {
    text-align: center;
}

/* ---- MOBILE DISPLAY ---- */
@media (max-width: 767px) {
    #search-top-box {
        top: 1.85em;
        width: unset;
    }

    .mobile-top-bar {
        position: relative;
        left: 0;
        display: flex;
        justify-content: center;
    }

    #login-status {
        top: 0;
        right: 0;
    }

    #header .printuser {
        font-size: 0;
    }

    #header .printuser img.small {
        margin: 0;
        transform: translate(6px, 4px);
    }

    #my-account {
        display: none;
    }

    #account-topbutton {
        margin-left: 2px;
    }
}

/* Grid CSS - NOT part of theme */

.grid-container {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  margin: 2em auto;
}

.cell {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: monospace;
  font-size: 1.5em;
  padding: 1em;
}

/* Top row */
.cell:nth-child(1),
.cell:nth-child(2) {
  grid-column: span 2;
}

/* Bottom row */
.cell:nth-child(3),
.cell:nth-child(4),
.cell:nth-child(5),
.cell:nth-child(6) {
  grid-column: span 1;
}

@media (max-width: 767px) {
  .grid-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}

```
background-color: var(--accent-color);
```
```
background-color: var(--header-color);
```

background-color: var(--background-color);

```
background-color: var(--bright-color);
```
```
background-color: var(--dark-color);
```
```
background-color: var(--darker-color);
```

```
grid-container
```
```
cell
```
```
cell
```
```
cell
```
```
cell
```
```
cell
```
```
cell
```
```
blockquote
```
```
code
```
```
blockquote
```
```
divider
```
```
code
```
```
divider
```
```
licensebox
```

[[module css]]
/*
    Blood Theme
    by ubergoober, 2026
    Based on Sigma-9, from the SCP Wiki
*/

/* ---- VARS ---- */
:root {

    --header-title: "SCP Foundation";
    --header-subtitle: "Secure, Contain, Protect";
    --lgurl: url(https://scp-wiki-cdn.nyc3.cdn.digitaloceanspaces.com/theme/en/black-highlighter/img/logo.svg);

    --header-color: #661d1d;
    --subtitle-color: white;
    --background-color: #191919;

    --accent-color: #f54242;
    --visited-color: #D25B5B;
    --bright-color: #C03535;
    --dark-color: #6d0000;
    --darker-color: #4c1717;
}

/* ---- SITE BANNER ---- */
div#container-wrap {
    background-image: none;
}

#header,
div#header {
    background-image: none;
}

#header::before {
    position: absolute;
    width: 100%;
    height: 100%;
    content: "";
    margin-top: 0.5em;
    background-image: var(--lgurl);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: auto 9em;
    opacity: .33;
}

#header h1,
#header h2 {
    float: none;
    margin-left: 0;
    text-align: center;
}

#header h1 span,
#header h2 span {
    display: none;
}

#header h1 a::before {
    position: relative;
    bottom: .15em;
    color: var(--title-color);
    font-size: 115%;
    font-weight: 700;
    content: var(--header-title);
}

#header h2::before {
    position: relative;
    top: .1em;
    color: var(--subtitle-color);
    font-size: 130%;
    font-weight: 600;
    content: var(--header-subtitle);
}

/* ---- TOP BAR ---- */
#top-bar {
    right: 0;
    display: flex;
    justify-content: center;
}

#top-bar ul li ul {
    border-bottom: 1px solid hsl(0, 0%, 40%);
    box-shadow: none;
}

/* ---- BODY ---- */
#container {
    background: linear-gradient(to bottom, var(--header-color), var(--background-color) 200px);
}

body {
    background: var(--background-color);
    color: #f9f9f9;
}

/* -- Link Colors -- */

a {
    color: var(--accent-color);
}

 a:visited {
    color: var(--visited-color);
}

a.newpage {
    color: #e67b3e;
}

.hovertip {
    background: var(--background-color);
    border: 1px solid #808080;
}

/* ----SIDEBAR ---- */
#side-bar a,
#side-bar a:visited,
#side-bar a.newpage,
#interwiki a,
#interwiki a:visited,
#interwiki a.newpage {
    color: var(--accent-color);
}

#side-bar .heading, 
#interwiki .heading {
    border-bottom: solid 1px #999;
    color: #999;
}

#side-bar .side-block,
#side-bar .side-block.media,
#side-bar .side-block.resources,
#interwiki .side-block {
    background: var(--background-color);
    border-color: #808080;
    box-shadow: none;
}

#interwiki {
    background: transparent;
}

#interwiki body {
    background-image: unset;
}

#top-bar .open-menu a {
    background: #161616;
}

@media (max-width: 767px) {
    #side-bar {
        background-color: #332733;
    }
}

#top-bar .open-menu a {
    position: fixed;
    top: 0.5em;
    left: 0.5em;
    z-index: 5;
    font-family: 'Lucida Sans Unicode','Lucida Grande','Lucida Sans','Times New Roman',Helvetica,Roboto,sans-serif;
    font-size: 30px;
    font-weight: 700;
    width: 30px;
    height: 30px;
    line-height: 0.9em;
    text-align: center;
    border: 0.2em solid #888;
    background-color: #fff;
    border-radius: 3em;
    color: #888;
    pointer-events: auto;
}

@media not all and (max-width: 767px) {
    #top-bar .mobile-top-bar {
        display: block;
        pointer-events: none;
    }

    #top-bar .mobile-top-bar li {
        display: none;
    }

    #main-content {
        max-width: 44.5rem;
        margin: 0 auto;
        padding: 0;
        transition: max-width 0.2s ease-in-out;
    }

    #side-bar {
        display: block;
        position: fixed;
        top: 0;
        left: -18rem;
        width: 15.25rem;
        height: 100%;
        margin: 0;
        overflow-x: hidden;
        overflow-y: auto;
        z-index: 10;
        padding: 1em 1em 0 1em;
        background-color: rgba(0,0,0,0.1);
        transition: left 0.4s ease-in-out;
        scrollbar-width: thin;
    }

    #side-bar:target,
    #side-bar:focus-within {
        left: 0;
    }

    #side-bar:target .close-menu {
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        margin-left: 17rem;
        opacity: 0;
        z-index: -1;
        visibility: visible;
    }

    #side-bar:not(:target) .close-menu {
        display: none;
    }

    #top-bar .open-menu a:hover {
        text-decoration: none;
    }
}

/* -------------- PAGE ELEMENTS -------------- */
/* -- Page Classes -- */

blockquote,
div.blockquote,
.code,
#lock-info {
    background: #0e0e0e;
    border: solid 1px #333;
    color: white;
}

.divider {
  display: block;
  max-width: 100%;
  border-top: 1.5px solid #aaa;
  border-bottom: 1.5px solid #aaa;
  text-align: center;
  font-size: 125%;
  font-weight: bold;
  padding: 1em;
  margin: 50px auto;
}

/* -- Images --*/

/* uses :root hack to override base sigma priority */
:root .scp-image-block {
    margin-bottom: 2em;
}

.scp-image-block .scp-image-caption {
    background-color: #111;
    color: #f9f9f9;
    padding: 5px;
}

/* -- Rate Module -- */
div.page-rate-widget-box .rate-points {
    background-color: var(--background-color) ;
    border-color: #aaa9a9;
    color: #aaa9a9;
}

div.page-rate-widget-box .rateup,
div.page-rate-widget-box .ratedown {
    background-color: #aaa9a9;
    border-top-color: #aaa9a9;
    border-bottom-color: #aaa9a9;
}

div.page-rate-widget-box .rateup a,
div.page-rate-widget-box .ratedown a {
    color: var(--background-color);
}

div.page-rate-widget-box .rateup a:hover,
div.page-rate-widget-box .ratedown a:hover {
    background: var(--background-color);
    color: #aaa9a9;
}

div.page-rate-widget-box .cancel {
    background-color: var(--background-color);
    border-color: #aaa9a9;
}

div.page-rate-widget-box .cancel a {
    color: #aaa9a9;
}

div.page-rate-widget-box .cancel a:hover {
    background: #aaa9a9;
    color: var(--background-color);
}

/* -- ToC -- */

#toc {
    background-color: #333;
    border: none;
    box-shadow: 1px 1px 5px rgba(0,0,0,.8);
}

/* -- Info Module -- */
#page-content .rate-box-with-credit-button {
    background-color: var(--background-color);
    border-color: #aaa9a9;
    border-radius: 5px;
    box-shadow: 1px 1px 3px rgba(0,0,0,.5);
}

#page-content .creditButton p a {
    border-left-color: #aaa9a9;
}

.rate-box-with-credit-button .cancel {
    border-radius: 0;
}

#page-content .creditButton p a:hover {
    color: var(--accent-color);
}

div.modalbox {
    background: linear-gradient(#0e0e0e 51px, var(--background-color) 51px, var(--background-color));
}

/* -- Titles -- */
#page-title,
.meta-title,
h1 {
    color: var(--accent-color);
}

/* -- Tables -- */

table.wiki-content-table {
    margin: 2em auto;
}

table.wiki-content-table tr td,
table.wiki-content-table tr th {
    border: solid 1px #333;
    color: white;
}

table.wiki-content-table tr th {
    background: #0e0e0e; 
}

/* -- Tabviews -- */
.yui-navset {
    margin: 2em auto;
}

.yui-navset .yui-content, .yui-navset .yui-navset-top .yui-content {
    background-color: #0e0e0e;
    border-color: #aaa9a9;
}

.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
    background: #373636;
    color: white;
}

.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a em,
.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a:hover {
    background: var(--dark-color);
    border-color: #aaa9a9;
}

.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
    background: var(--darker-color);
}

/* -- Footnote Box -- */
div.footnote {
  color: black;
}

/* -- Code Highlighting -- */
/* code highlighter stuff */
.hl-identifier,
.hl-code,
.hl-brackets {
    color: #dddddd;
}

.hl-reserved {
    color: #7895ff;
}

.hl-var {
    color: #aa5dc2;
}
 
.hl-special,
.hl-quotes {
    color: #ff4545;
}
 
.hl-number,
.hl-string {
    color: #5dc267;
}

/* -- Other -- */
del,
ins {
    color: #333;
}

.content.modal-body {
    color: black;
}

/* ---- PAGE TITLE ---- */
.meta-title,
#page-title {
    text-align: center;
}

/* ---- MOBILE DISPLAY ---- */
@media (max-width: 767px) {
    #search-top-box {
        top: 1.85em;
        width: unset;
    }

    .mobile-top-bar {
        position: relative;
        left: 0;
        display: flex;
        justify-content: center;
    }

    #login-status {
        top: 0;
        right: 0;
    }

    #header .printuser {
        font-size: 0;
    }

    #header .printuser img.small {
        margin: 0;
        transform: translate(6px, 4px);
    }

    #my-account {
        display: none;
    }

    #account-topbutton {
        margin-left: 2px;
    }
}
[[/module]]

[[iftags +theme]]
[[>]]
**Rating:**
[[module Rate]]

**Rating w/ Info Pane:**
[[/>]]

[[include :scp-wiki:info:start]]
Info about your page.
[[include :scp-wiki:info:more]]
More information about your page.
[[include :scp-wiki:info:end]]

This is the Blood Theme, a Sigma-9 theme by [[*user ubergoober]] inspired by [https://scp-wiki.wikidot.com/theme:dark Dark Theme]. Use this theme for anything you like. 

To use this theme, put the following syntax at the very top of your article:

> @@[[include :scp-wiki:theme:blood]]@@

[[module css]]
/* Grid CSS - NOT part of theme */

.grid-container {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  margin: 2em auto;
}

.cell {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: monospace;
  font-size: 1.5em;
  padding: 1em;
}

/* Top row */
.cell:nth-child(1),
.cell:nth-child(2) {
  grid-column: span 2;
}

/* Bottom row */
.cell:nth-child(3),
.cell:nth-child(4),
.cell:nth-child(5),
.cell:nth-child(6) {
  grid-column: span 1;
}

@media (max-width: 767px) {
  .grid-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
[[/module]]

These are the base theme colors. You can change these to be whatever color you'd like.

[[div class="grid-container"]]
[[div class="cell" style="background-color: var(--accent-color);"]]
[[size 150%]] @@--accent-color@@ [[/size]]
#f54242
[[/div]]

[[div class="cell" style="background-color: var(--header-color);"]]
[[size 150%]] @@--header-color@@ [[/size]]
#a62d2d
[[/div]]

[[div class="cell" style="background-color: var(--background-color);"]]
@@--background-color@@
#191919
[[/div]]

[[div class="cell" style="background-color: var(--bright-color);"]]
[[size 125%]] @@--bright-color@@ [[/size]]
#c03535
[[/div]]

[[div class="cell" style="background-color: var(--dark-color);"]]
[[size 125%]] @@--dark-color@@ [[/size]]
#6d0000
[[/div]]

[[div class="cell" style="background-color: var(--darker-color);"]]
[[size 125%]] @@--darker-color@@ [[/size]]
#4c1717
[[/div]]
[[/div]]

You can change the title, subtitle, or logo – or change the entire color scheme – by inserting the following code into the [https://www.wikidot.com/doc-modules:css-module CSS Module] and altering it as you please. The following code, for example, will make the page have a blue color scheme instead of red.

[[code type="css"]] 

:root {

  /* Header */
    --header-title: "SCP Foundation";
    --header-subtitle: "Secure, Contain, Protect";
    --lgurl: url(https://scp-wiki-cdn.nyc3.cdn.digitaloceanspaces.com/theme/en/black-highlighter/img/logo.svg);
 
  /* Colors */
    --header-color: #1d1d66;
    --subtitle-color: white; 
    --background-color: #191919; 
 
    --accent-color: #4242f5;
    --visited-color: #5B5BD2;
    --bright-color: #3535C0;
    --dark-color: #00006D;
    --darker-color: #17174C;
}

[[/code]]

Horizontal rules are created using four to six hyphens, but I prefer five (@@-----@@). However, it literally does not matter and doesn't affect how they look.

-----

[[collapsible show="+ This is a collapsible. Below are some headings." hide="- Close"]]

[[toc]]

+ Heading 1
++ Heading 2
+++ Heading 3
++++ Heading 4
+++++ Heading 5
++++++ Heading 6

[[/collapsible]]

[[[This link doesn't exist.]]]
[https://en.wikipedia.org/wiki/1921%E2%80%9322_Clarkson_Golden_Knights_men%27s_ice_hockey_season This is a link you have not visited, probably.]
[[[theme:blood | This is a link you have visited. It's a little bit darker.]]]
[[tabview]]
[[tab Tabulator]]
This is a tab view.
[[/tab]]
[[tab Tabulation]]
As you can see, I copy-pasted this from another theme page.

How exciting.
[[/tab]]
[[tab Long Tab]]
This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.
[[/tab]]

[[tab Longer Tab]]
This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.
[[/tab]]

[[tab Empty Tab]]
Just kidding.
[[/tab]]

[[tab Actually Empty Tab]]
[[/tab]]
[[/tabview]]

||||~ This is a table ||
|| bottom text || etc ||

> This is a blockquote.

[[div class="blockquote"]]
This is a blockquote div, which looks identical but is easier to use. You can create it like this:
[[div class="code"]]
@@[[div class="blockquote"]]@@
Text goes here!
@@[[/div]]@@
[[/div]]

> Nested blockquote.[[footnote]]Footnote.[[/footnote]]

[[/div]]

[[span class="divider"]] Look! [[/span]]

[[include component:image-block
|name=chernobyl.jpg
|caption=A nice public domain image with a caption.
|alt=Image demonstration. A forested river in Chernobyl.
]]

You can create cool-looking dividers like this:

[[div class="code"]]
@@[[span class="divider"]]@@ Text goes here! @@[[/span]]@@
[[/div]]

You can also add images using the image block component, as seen to the right. The default size is 300px. 

@@ @@

[[collapsible show="+ Theme Source" hide="- Close"]]
[[code type="css"]]
/*
    Blood Theme
    by ubergoober, 2026
    Based on Sigma-9, from the SCP Wiki
*/

/* ---- VARS ---- */
:root {

    --header-title: "SCP Foundation";
    --header-subtitle: "Secure, Contain, Protect";
    --lgurl: url(https://scp-wiki-cdn.nyc3.cdn.digitaloceanspaces.com/theme/en/black-highlighter/img/logo.svg);

    --header-color: #661d1d;
    --subtitle-color: white;
    --background-color: #191919;

    --accent-color: #f54242;
    --visited-color: #D25B5B;
    --bright-color: #C03535;
    --dark-color: #6d0000;
    --darker-color: #4c1717;
}

/* ---- SITE BANNER ---- */
div#container-wrap {
    background-image: none;
}

#header,
div#header {
    background-image: none;
}

#header::before {
    position: absolute;
    width: 100%;
    height: 100%;
    content: "";
    margin-top: 0.5em;
    background-image: var(--lgurl);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: auto 9em;
    opacity: .33;
}

#header h1,
#header h2 {
    float: none;
    margin-left: 0;
    text-align: center;
}

#header h1 span,
#header h2 span {
    display: none;
}

#header h1 a::before {
    position: relative;
    bottom: .15em;
    color: var(--title-color);
    font-size: 115%;
    font-weight: 700;
    content: var(--header-title);
}

#header h2::before {
    position: relative;
    top: .1em;
    color: var(--subtitle-color);
    font-size: 130%;
    font-weight: 600;
    content: var(--header-subtitle);
}

/* ---- TOP BAR ---- */
#top-bar {
    right: 0;
    display: flex;
    justify-content: center;
}

#top-bar ul li ul {
    border-bottom: 1px solid hsl(0, 0%, 40%);
    box-shadow: none;
}

/* ---- BODY ---- */
#container {
    background: linear-gradient(to bottom, var(--header-color), var(--background-color) 200px);
}

body {
    background: var(--background-color);
    color: #f9f9f9;
}

/* -- Link Colors -- */

a {
    color: var(--accent-color);
}

 a:visited {
    color: var(--visited-color);
}

a.newpage {
    color: #e67b3e;
}

.hovertip {
    background: var(--background-color);
    border: 1px solid #808080;
}

/* ----SIDEBAR ---- */
#side-bar a,
#side-bar a:visited,
#side-bar a.newpage,
#interwiki a,
#interwiki a:visited,
#interwiki a.newpage {
    color: var(--accent-color);
}

#side-bar .heading,
#interwiki .heading {
    border-bottom: solid 1px #999;
    color: #999;
}

#side-bar .side-block,
#side-bar .side-block.media,
#side-bar .side-block.resources,
#interwiki .side-block {
    background: var(--background-color);
    border-color: #808080;
    box-shadow: none;
}

#interwiki {
    background: transparent;
}

#interwiki body {
    background-image: unset;
}

#top-bar .open-menu a {
    background: #161616;
}

@media (max-width: 767px) {
    #side-bar {
        background-color: #332733;
    }
}

#top-bar .open-menu a {
    position: fixed;
    top: 0.5em;
    left: 0.5em;
    z-index: 5;
    font-family: 'Lucida Sans Unicode','Lucida Grande','Lucida Sans','Times New Roman',Helvetica,Roboto,sans-serif;
    font-size: 30px;
    font-weight: 700;
    width: 30px;
    height: 30px;
    line-height: 0.9em;
    text-align: center;
    border: 0.2em solid #888;
    background-color: #fff;
    border-radius: 3em;
    color: #888;
    pointer-events: auto;
}

@media not all and (max-width: 767px) {
    #top-bar .mobile-top-bar {
        display: block;
        pointer-events: none;
    }

    #top-bar .mobile-top-bar li {
        display: none;
    }

    #main-content {
        max-width: 44.5rem;
        margin: 0 auto;
        padding: 0;
        transition: max-width 0.2s ease-in-out;
    }

    #side-bar {
        display: block;
        position: fixed;
        top: 0;
        left: -18rem;
        width: 15.25rem;
        height: 100%;
        margin: 0;
        overflow-x: hidden;
        overflow-y: auto;
        z-index: 10;
        padding: 1em 1em 0 1em;
        background-color: rgba(0,0,0,0.1);
        transition: left 0.4s ease-in-out;
        scrollbar-width: thin;
    }

    #side-bar:target,
    #side-bar:focus-within {
        left: 0;
    }

    #side-bar:target .close-menu {
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        margin-left: 17rem;
        opacity: 0;
        z-index: -1;
        visibility: visible;
    }

    #side-bar:not(:target) .close-menu {
        display: none;
    }

    #top-bar .open-menu a:hover {
        text-decoration: none;
    }
}

/* -------------- PAGE ELEMENTS -------------- */
/* -- Page Classes -- */

blockquote,
div.blockquote,
.code,
#lock-info {
    background: #0e0e0e;
    border: solid 1px #333;
    color: white;
}

.divider {
  display: block;
  max-width: 100%;
  border-top: 1.5px solid #aaa;
  border-bottom: 1.5px solid #aaa;
  text-align: center;
  font-size: 125%;
  font-weight: bold;
  padding: 1em;
  margin: 50px auto;
}

/* -- Images --*/

/* uses :root hack to override base sigma priority */
:root .scp-image-block {
    margin-bottom: 2em;
}

.scp-image-block .scp-image-caption {
    background-color: #111;
    color: #f9f9f9;
    padding: 5px;
}

/* -- Rate Module -- */
div.page-rate-widget-box .rate-points {
    background-color: var(--background-color) ;
    border-color: #aaa9a9;
    color: #aaa9a9;
}

div.page-rate-widget-box .rateup,
div.page-rate-widget-box .ratedown {
    background-color: #aaa9a9;
    border-top-color: #aaa9a9;
    border-bottom-color: #aaa9a9;
}

div.page-rate-widget-box .rateup a,
div.page-rate-widget-box .ratedown a {
    color: var(--background-color);
}

div.page-rate-widget-box .rateup a:hover,
div.page-rate-widget-box .ratedown a:hover {
    background: var(--background-color);
    color: #aaa9a9;
}

div.page-rate-widget-box .cancel {
    background-color: var(--background-color);
    border-color: #aaa9a9;
}

div.page-rate-widget-box .cancel a {
    color: #aaa9a9;
}

div.page-rate-widget-box .cancel a:hover {
    background: #aaa9a9;
    color: var(--background-color);
}

/* -- ToC -- */

#toc {
    background-color: #333;
    border: none;
    box-shadow: 1px 1px 5px rgba(0,0,0,.8);
}

/* -- Info Module -- */
#page-content .rate-box-with-credit-button {
    background-color: var(--background-color);
    border-color: #aaa9a9;
    border-radius: 5px;
    box-shadow: 1px 1px 3px rgba(0,0,0,.5);
}

#page-content .creditButton p a {
    border-left-color: #aaa9a9;
}

.rate-box-with-credit-button .cancel {
    border-radius: 0;
}

#page-content .creditButton p a:hover {
    color: var(--accent-color);
}

div.modalbox {
    background: linear-gradient(#0e0e0e 51px, var(--background-color) 51px, var(--background-color));
}

/* -- Titles -- */
#page-title,
.meta-title,
h1 {
    color: var(--accent-color);
}

/* -- Tables -- */

table.wiki-content-table {
    margin: 2em auto;
}

table.wiki-content-table tr td,
table.wiki-content-table tr th {
    border: solid 1px #333;
    color: white;
}

table.wiki-content-table tr th {
    background: #0e0e0e;
}

/* -- Tabviews -- */
.yui-navset {
    margin: 2em auto;
}

.yui-navset .yui-content, .yui-navset .yui-navset-top .yui-content {
    background-color: #0e0e0e;
    border-color: #aaa9a9;
}

.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
    background: #373636;
    color: white;
}

.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a em,
.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a:hover {
    background: var(--dark-color);
    border-color: #aaa9a9;
}

.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
    background: var(--darker-color);
}

/* -- Footnote Box -- */
div.footnote {
  color: black;
}

/* -- Code Highlighting -- */
/* code highlighter stuff */
.hl-identifier,
.hl-code,
.hl-brackets {
    color: #dddddd;
}

.hl-reserved {
    color: #7895ff;
}

.hl-var {
    color: #aa5dc2;
}
 
.hl-special,
.hl-quotes {
    color: #ff4545;
}
 
.hl-number,
.hl-string {
    color: #5dc267;
}

/* -- Other -- */
del,
ins {
    color: #333;
}

.content.modal-body {
    color: black;
}

/* ---- PAGE TITLE ---- */
.meta-title,
#page-title {
    text-align: center;
}

/* ---- MOBILE DISPLAY ---- */
@media (max-width: 767px) {
    #search-top-box {
        top: 1.85em;
        width: unset;
    }

    .mobile-top-bar {
        position: relative;
        left: 0;
        display: flex;
        justify-content: center;
    }

    #login-status {
        top: 0;
        right: 0;
    }

    #header .printuser {
        font-size: 0;
    }

    #header .printuser img.small {
        margin: 0;
        transform: translate(6px, 4px);
    }

    #my-account {
        display: none;
    }

    #account-topbutton {
        margin-left: 2px;
    }
}
[[/code]]
[[/collapsible]]

[[footnoteblock]]

[[div class="licensebox"]]
[[collapsible show="‡ Licensing / Citation" hide="‡ Hide Licensing / Citation"]]
Cite this page as:
[[module listpages range="."]]
> "%%title_linked%%" by ubergoober, from the [https://scpwiki.com SCP Wiki]. Source: https://scpwiki.com/%%fullname%%. Licensed under [https://creativecommons.org/licenses/by-sa/3.0/ CC BY-SA].
[[/module]]
For information on how to use this component, see the [[[component:license-box|License Box component]]]. To read about licensing policy, see the [[[Licensing Guide]]]. 

> **Filename:** chernobyl.jpg
> **Name:** Pripyat River in Chernobyl 2019 G2
> **Author:** George Chernilevsky
> **License:** Public Domain
> **Source Link:** [https://commons.wikimedia.org/wiki/File:Pripyat_River_in_Chernobyl_2019_G2.jpg Wikimedia Commons]]
[[/collapsible]]
[[/div]]

[[/iftags]]

Blood Theme

Module Styles

Inline Styles

Includes

CSS Classes

Page Source