Sigma-9 Themes
/*
    Paperstack Theme
    [2020 Wikidot Theme]
    By EstrellaYoshte
    Based on:
      Inkblot Theme by Croquembouche
      Word Processor Theme by stormbreath
      Modern Theme by Azamo
      Simple Yonder Theme by EstrellaYoshte
*/
 
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oxygen&display=swap');
@import url(https://fonts.googleapis.com/css2?family=Fira+Code&display=swap);
 
#page-content { font-size: 0.87rem; }
body { font-family: 'Oxygen', sans-serif; }
 
body {
    color: #000000;
    background-image: linear-gradient(
        to bottom, 
        #EFEFEF, #EFEFEF 276px, 
        #D3D3D3 276px, #ffffff 282px,
        #ffffff 282px, #ffffff 100%);
    background-repeat: no-repeat;
}
 
#main-content {
    top: -1.6rem;
    padding: 0.2em;
}
 
.page-source, .code pre, .code p, .code, tt{ 
    font-family: "Fira Code", monospace;
}
 
/* ---- HEADER ---- */
 
div#container-wrap {
     background-image: url(none);
}
div#header {
    background-image: url(none);
}
 
#header h1, #header h2 { margin-left: 0; float: none; text-align: center; }
/* Move the subtitle down a smidge */
#header h2 { margin-top: 0.45rem; }
/* Hide the existing text */
#header h1 span, #header h2 span { font-size: 0; display: none;}
/* Style the new text */
#header h1 a::before, #header h2::before {
  color: #333333;
  font-family: 'Josefin Sans', sans-serif;
  text-shadow: none;
}
/* Set the new text's content from variable */
#header h1 a::before {
  content: var(--header-title, "SCP FOUNDATION");
  font-weight: 300;
  font-size: 1.3em;
}
#header h2::before {
  content: var(--header-subtitle, "SECURE - CONTAIN - PROTECT");
  font-weight: 600;
  font-size: 1.22em;
}
 
#login-status,
#login-status a {
    color: #333333;
}
 
#page-title {
    display: none;
}
 
#footer, #footer a {
    background: transparent;
    color: #333333;
}
 
#search-top-box-input,
#search-top-box-input:hover,
#search-top-box-input:focus,
#search-top-box-form input[type=submit],
#search-top-box-form input[type=submit]:hover,
#search-top-box-form input[type=submit]:focus {
    border: none;
    background: #333333;
    box-shadow: none;
    border-radius: 0px;
    color: #efefef;
}
#search-top-box input.empty {
    color: #999999;
}
 
#search-top-box {
    top: 2.3rem!important;
    right: 8px;
}
 
/* ---- TOP BAR ---- */
 
#top-bar { 
   display: flex;
   justify-content: center;
   right: 0;
   top: 7.9rem;
}
#top-bar, #top-bar a {
    color: #333333;
}
 
/* ---- SIDE BAR ---- */
 
#side-bar .side-block {
    border: transparent;
    border-radius: 0;
    box-shadow: 0px 0px 7px #999999;
    background: #ffffff;
}
 
#top-bar div.open-menu a {
    border-radius: 0;
    box-shadow: 0px 1px 4px 0 rgba(0, 0, 0, 0.2), 0px 3px 10px 0 rgba(0, 0, 0, 0.19);
    border: 1px white;
}
 
@media (max-width: 767px) {
    #main-content {
        padding: 0;
        margin: 0 5%;
        border-left: none;
    }
    #page-title {
        margin-top: 0.7em;
    }
    #side-bar {
        background-color: #fff;
        left: -19em;
    }
    #side-bar:target {
        border: none;
        box-shadow: 3px 0 1px -2px rgba(0,0,0,0.04), 1px 0 5px 0 rgba(0,0,0,0.2);
    }
    #side-bar .close-menu {
        transition: width 0.5s ease-in-out 0.1s,
                    opacity 1s ease-in-out 0s;
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        right: 0;
        background: rgba(0,0,0,0.3);
        background-position: 19em 50%;
        z-index: -1;
        opacity: 0;
        pointer-events: none;
    }
    #side-bar:target .close-menu {
        width: calc(100% - 19em);
        right: 0;
        left: auto;
        opacity: 1;
        pointer-events: auto;
    }
    #page-content > hr, #page-content > .list-pages-box > .list-pages-item > hr {
        margin: 3em -5.5%;
    }
    #side-bar {
        top: 0;
    }
    #side-bar .heading {
        padding-left: 1em;
        margin-left: -1em;
    }
    #search-top-box {
        top: 107px;
    }
}
 
/* ---- TABS ---- */
 
/* ---- YUI TAB BASE ---- */
.yui-navset .yui-nav a,.yui-navset .yui-navset-top .yui-nav a{background-color:inherit;background-image:inherit}.yui-navset .yui-nav a:hover,.yui-navset .yui-nav a:focus{background:inherit;text-decoration:inherit}.yui-navset .yui-nav .selected a,.yui-navset .yui-nav .selected a:focus,.yui-navset .yui-nav .selected a:hover{color:inherit;background:inherit}.yui-navset .yui-nav,.yui-navset .yui-navset-top .yui-nav{border-color:inherit}.yui-navset li{line-height:inherit}
 
/* ---- YUI TAB CUSTOMIZATION ----*/
 
 .yui-navset .yui-nav,
 .yui-navset .yui-navset-top .yui-nav{
     display: flex;
     flex-wrap: wrap;
     width: calc(100% - .125rem);
     margin: 0 auto;
     border-color: #333333;
     box-shadow: none;
}
 .yui-navset .yui-nav a, /* ---- Link Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav a{
     color: #333333;
    /* ---- Tab Background Colour | [UNSELECTED] ---- */
     background-color: #efefef;
     border: unset;
     box-shadow: none;
     box-shadow: none;
}
 .yui-navset .yui-nav a:hover,
 .yui-navset .yui-nav a:focus{
     color: #ffffff;
    /* ---- Tab Background Colour | [HOVER] ---- */
     background-color: #333333;
}
 .yui-navset .yui-nav li, /* ---- Listitem Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav li{
     position: relative;
     display: flex;
     flex-grow: 2;
     max-width: 100%;
     margin: 0;
     padding: 0;
     color: #ffffff;
     background-color: #ffffff;
     border-color: transparent;
     box-shadow: none;
}
 .yui-navset .yui-nav li a,
 .yui-navset-top .yui-nav li a,
 .yui-navset-bottom .yui-nav li a{
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
}
 .yui-navset .yui-nav li em{
     border: unset;
}
 .yui-navset .yui-nav a em,
 .yui-navset .yui-navset-top .yui-nav a em{
     padding: .35em .75em;
 
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
}
 .yui-navset .yui-nav .selected, /* ---- Selection Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav .selected{
     flex-grow: 2;
     margin: 0;
     padding: 0;
    /* ---- Tab Background Colour | [SELECTED] ---- */
     background-color: #333333;
}
 .yui-navset .yui-nav .selected a,
 .yui-navset .yui-nav .selected a em{
     border: none;
}
 .yui-navset .yui-nav .selected a{
     width: 100%;
     color: #ffffff;
}
 .yui-navset .yui-nav .selected a:focus,
 .yui-navset .yui-nav .selected a:active{
     color: #ffffff;
     background-color: #333333;
}
 .yui-navset .yui-content {
    background-color: #ffffff;
    box-shadow: 0px 0px 4px #999999;
}
 .yui-navset .yui-content,
 .yui-navset .yui-navset-top .yui-content{
     padding: .5em;
     border: none;
}
 
/* ---- INFO BAR ---- */
 body{
     --barColour: #333333;
}
 
 .info-container .collapsible-block-content{
     padding: 0 .5em 30px;
}
 .info-container .collapsible-block-content .wiki-content-table{
     width: 100%;
}
 
/* ---- INFO PANE ---- */
 
#page-content .creditRate{
    margin: unset;
    margin-bottom: 4px;
}
#page-content .rate-box-with-credit-button {
    background-color: #ffffff;
    border: solid 1px #ffffff;
    box-shadow: 0px 0px 7px #999999;
    border-radius: 0;
}
 
#page-content .rate-box-with-credit-button .fa-info {
    border: none;
    color: #333333;
}
 
#page-content .rate-box-with-credit-button .fa-info:hover {
    background: #333333;
    color: #ffffff;
}
 
.rate-box-with-credit-button .cancel {
    border: solid 1px #ffffff;
}
 
/* ---- PAGE RATING ---- */
 
.page-rate-widget-box {
    box-shadow: 0px 0px 7px #999999;
    margin: unset;
    margin-bottom: 4px;
    border-radius: 0;
}
 
.page-rate-widget-box .rate-points {
    background-color: #ffffff !important;
    color: #333333 !important;
    border: solid 1px #ffffff;
    border-radius: 0;
}
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {
    background-color: #ffffff;
    border-top: solid 1px #ffffff;
    border-bottom: solid 1px #ffffff;
}
 
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {
    background: transparent;
    color: #333333;
}
 
.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover {
    background: #333333;
    color: #ffffff;
}
 
.page-rate-widget-box .cancel {
    background: transparent;
    background-color: #ffffff;
    border: solid 1px #ffffff;
    border-radius: 0;
}
 
.page-rate-widget-box .cancel a {
    color: #333333;
}
.page-rate-widget-box .cancel a:hover {
    background: #333333;
    color: #ffffff;
    border-radius: 0;
}
 
/* ---- PAGE ELEMENTS ---- */
 
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #333333;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: bold;
}
 
blockquote,
div.blockquote,
#toc,
.code {
    background-color: #F8F8F8;
    border: solid 1px #F8F8F8;
    box-shadow: 0px 0px 4px #999999;
}
 
.scp-image-block {
    border: solid 8px #ffffff;
    box-shadow: 0px 0px 5px #999999;
    box-sizing: border-box;
}
.scp-image-block .scp-image-caption {
    background-color: #ffffff;
    border-top: solid 4px #ffffff;
    color: black;
}
 
#page-content .wiki-content-table tr th {
    border: solid 1px #999999;
    background-color: #efefef;
    /* set border for table title */
}
#page-content .wiki-content-table tr td {
    border: solid 1px #999999;
    /* set border for table content */
}
 
/*-- tags --*/
 
#main-content .page-tags span { max-width: 100%; }
 
#main-content .page-tags a {
    height: 0.9rem;
    line-height: 0.9rem;
    font-size: 0.76rem;
    background-color: #FDFDFD;
    border-radius: 0.6rem 0.12rem;
    margin: .25rem .2rem; .5rem .2rem;
    padding: 0.2rem 0.42rem 0.25rem 0.46rem;
    box-shadow: 0.6px 0.6px 1.9px 0.8px rgba(0,0,0,0.27);
}
 
#main-content .page-tags a:before {
    content: "•";
    font-size: 1.1rem;
    float: left;
    position: relative;
    top: -0.19rem;
    left: -0.24rem;
    color: #ffffff;
    background-color: #B8B8B8;
    color: transparent;
    text-shadow: 1px 1px 0.7px rgba(255,255,255, 0.82);
    -webkit-background-clip: text;
       -moz-background-clip: text;
            background-clip: text;
}
 
/* ---- CUSTOM SYNTAX ---- */
 
.header-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
  justify-content: space-around;
  align-content: space-between;
  width: 100%;
  left: 0;
  align-items: flex-start;
  row-gap: 2px;
}
 
.text-item {
  flex-grow: 1;
  max-width: 25%;
  text-align: center;
}
 
.grid-item {
  flex-grow: 1;
  min-width: 25%;
  text-align: center;
  margin: 8px 6px;
}
@media (max-width: 1200px) {
  .grid-item {
    min-width: 50%; 
  }
}
 
.logo {
  position: absolute;
  width: 180px;
  top: -154px;
  left: -17em;
  z-index: -1;
}
@media (max-width: 767px) {
  .logo {
    width: 36%;
    top: -9.7em;
    left: 32%;
  }
}
 
.textbox {
  position: absolute;
  width: 42%;
  top: 7.5rem;
}
@media (max-width: 960px) and (min-width: 767px), (max-width: 666px) {
  .textbox {
    position: relative;
    width: 100%;
    top: 0;
  }
}
/* source: http://ah-sandbox.wikidot.com/component:collapsible-sidebar-x1 */
 
#top-bar .open-menu a {
        position: fixed;
        top: 0.5em;
        left: 0.5em;
        z-index: 5;
        font-family: 'Nanum Gothic', san-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;
}
 
@media (min-width: 768px) {
 
    .mobile-top-bar {
        display: block;
    }
 
    .mobile-top-bar li {
        display: none;
    }
 
    #main-content {
        max-width: 708px;
        margin: 0 auto;
        padding: 0;
        transition: max-width 0.2s ease-in-out;
    }
 
    #side-bar {
        display: block!important;
        position: fixed;
        top: 0;
        left: -19em;
        width: 17em;
        height: 100%;
        overflow-y: auto;
        z-index: 10;
        padding: 0.3em 0.675em;
        background-color: rgba(0,0,0,0.1);
        transition: left 0.5s ease-in-out;
    }
 
    #side-bar:target {
        display: block;
        left: 0;
        width: 17em;
        margin: 0;
        z-index: 10;
    }
 
    #side-bar:target .close-menu {
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: -1;
    }
 
    #top-bar .open-menu a:hover {
        text-decoration: none;
    }
 
    .close-menu {
        margin-left: 19em;
        opacity: 0;
    }
}
rating: +64+x

What Is This?

This is a (relatively) exhaustive list of all site themes based on Sigma-9 — the Wiki's main theme — sorted alphabetically by author.

Hover over any image to view its blurb. Each one explains (relatively) what the theme is for. Or, click the image to proceed to its theme page and use it directly. To view the blurbs on mobile, tap the frame below the image rather than the image itself. That way, the blurb will show up rather than you getting redirected to the theme page.

For rules on contributing, please see the Editorial Guide.


Theme Contributors

Aelanna

sigma-9.png

Sigma-9 — Site Theme

The Wiki's Charming Stylish Semblance, c. 2014. Co-opted with Dr DevanDr Devan.

pets.png

Super Cute Pets

A Super Cute Theme for all Super Cute Pets! articles.


aismallard

sigma-9-s.png

Sigma-9 (Joke)

The Wiki's normal theme, again, but this time with 90% more shitposts.


CityToast

cargo.png

Unusual Cargo

A papery theme for all sailors and swashbucklers.


Croquembouche

ar.png

Anderson Robotics

Theme for the Anderson Robotics GoI.

ink.png

Inkblot

Waldon Studio minor GoI's tailor-made theme.


Cyantreuse

bm.png

Broken Masquerade

Backgrounds behind Broken Masquerade made manifest.


DrMacro

dj.png

Dustjacket (Sigma-9 Version)

The Wanderers' Library - modernized, then backported.

offices.png

SCP Offices (Sigma-9 Version)

The Old Offices - now even older. Co-created with Dr LekterDr Lekter.


DrMagnus

magnus-web.png

Magnus Web Format

DrMagnusDrMagnus' personal CSS layout.


Ellie3

trans.png

SCP Trans Pride

Theme for Pride!


etoisle

y2k.png

Y2K

Theme for those who like the early 2000s aesthetics a bit too much.


EstrellaYoshte

chr.png

Christmas

Theme for the snowy holiday seasons. Based on Dc_YerkoDc_Yerko's work and co-created with stormbreathstormbreath.

paper.png

Paperstack

Theme for those who like their articles clean.

pnb.png

Penumbra

Theme for those who like their articles clean, and in a different color.

simple.png

Simple Yonder

Like Sigma-9, but streamlined.

aiad.png

Technoblast

The AIAD canon, rendered.


GreenWolf

3l.png

Third Law

The Third Law canon's distinctive look.

7w.png

7th Occult War

The reds of the 7th Occult War.

uiu.png

Unusual Investigations

Theme for the The Unusual Investigations of Kenneth Spencer and Robin Thorne series.


Lt Flops

classic.png

Classic SCP Foundation

Adaptation of the wiki's pre-2014 looks.

flopstyle.png

Flopstyle CSS

Lt FlopsLt Flops' personal CSS layout.

pata.png

'Pataphysics Dept.

Theme for one interpretation of the Pataphysics Dept.

sapp.png

SAPPHIRE

Theme for the French GoI SAPPHIRE. Created in collaboration with Uncle NicoliniUncle Nicolini under the guidance of stormbreathstormbreath.


MrPines

pl.png

Prometheus Labs

Prometheus Labs' Interface, now available for all.


Nanigashi Sato

ij-re.png

Revised IJAMEA

Theme for the IJAMEA GoI, reborn.


Nagiros

nr.png

Night Rush

Theme mostly associated with the Site-17 Deepwell Catalog canon, though with no official connections.


NatVoltaic

star.png

Ad Astra

The settings of Ad Astra Per Aspera, visualized.

2h.png

Second Hytoth

Theme for the Church of the Second Hytoth GoI. Adapted from the work of DrMacroDrMacro.


NewyRose

hlwn.png

Halloween

Theme for that spooky time of the year. Made with assistance from Uncle NicoliniUncle Nicolini and CroquemboucheCroquembouche.


PeppersGhost

oct.png

OCT

Theme for the Original Character Tournament.

spc.png

Shark Punching Centre

The Shark Punching Centre's punchy visuals.


Placeholder McD

oldaiad.png

Retro AIAD

Retro AIAD's visual palette.


Randomini

mcd.png

Marshall, Carter & Dark

Theme for the half-legal businesses of Marshall, Carter & Dark.


Rounderhouse

aae.png

Aces and Eights

Aces and Eights canon, now in parchment.

alex.png

Alexylva University

Theme for the Alexylva University and all its students.

horizon.png

Horizon Initiative

Theme for the Horizon Initiative GoI.

i57.png

Installation 57

Spanish Branch's Facility-57 canon's looks, visiting the English Branch. Co-created with Dc_YerkoDc_Yerko and
Uncle NicoliniUncle Nicolini.

zyn.png

Kiryu Labs

Theme for all articles concerning Kiryu Labs.


Silberescher

mcdg.png

MC&D (Gray)

The look of the very illegal actions of Marshall, Carter & Dark.


stormbreath

jgt.png

Just Girly Things

Just Girly Things' UI, with 50% more pink than ever before.

mcf.png

Manna Charitable Foundation

Manna Charitable Foundation's colors of help. Originally by Dr ReachDr Reach and reworked alongside Uncle NicoliniUncle Nicolini.

minimal.png

Minimal

Theme minimalizing the Wiki's looks.

plant.png

Super Cool Plants

Theme for all who wish the Super Cool Plants! event lasted forever.

harmony.png

Wanderer's (Classic Version)

The classic looks of the Wanderers' Library, now available to the Jailors. Originally by ZeroStriderZeroStrider and adapted with Salamander724Salamander724.

woaf.png

War On All Fronts (Sigma-9 Version)

The colors of War On All Fronts' sea monsters in theme form.

wws.png

Wilson's Wildlife Solutions

The outlook of all critters and volunteers of Wilson's Wildlife Solutions. Co-created with DarkStuffDarkStuff.

word.png

Word Processor

Theme for those who wish Wikidot was more like Notepad.


taylor_itkin

drw.png

Dr. Wondertainment

Theme for the Dr. Wondertainment GoI and related content. Co-created with DarkStuffDarkStuff.


TyGently

sms.png

Skies Made Strange

Theme for the Skies Made Strange series.

3l2.png

Third Law — Cracked

Third Law doesn't feel so good.


The Great Hippo

parawatch.png

Creepypasta

Parawatch's interface and site layout, available to the public.


Von Pincier

sotm.png

Straight On Till Morning

Theme for the Straight On Till Morning canon.


Others

cal.png

Alternate SCP Logos

Options for different cool logos, by Calibri BoldCalibri Bold.

tabs.png

Old-Timey Tabs

Old paper file-style tabs, by PeppersGhostPeppersGhost.

pride.png

Pride Highlighter

Numerous Foundation Pride logos, by WoedenazWoedenaz.

template.png

SCP Pride Template

Another Foundation Pride logo, by The Great HippoThe Great Hippo.


Editorial Guide

Feel free to add anything you think is missing, or edit the blurb of your theme to your taste!

When editing, please use the following template:

++ __Author__
[[div class="tcontainer"]]

[[div class="caser"]]
[[image thumbnail1.png link="http://scp-wiki.wikidot.com/theme:link-to-theme1"]]
++++* Name1
[[span class="hoverdesc"]]Short blurb that appears on hover.[[/span]]
[[/div]]

[[div class="caser"]]
[[image thumbnail2.png link="http://scp-wiki.wikidot.com/theme:link-to-theme2"]]
++++* Name2
[[span class="hoverdesc"]]Short blurb that appears on hover.[[/span]]
[[/div]]

[[/div]]

The thumbnail should have a square(-ish) ratio and (relatively) small filesize.


See Also

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License