Fandom Theme

Link to article: Fandom Theme.

@import url(https://scp-wiki.wdfiles.com/local--code/theme%3Afandom/1);

```
margin:400px
```

```
blockquote
```

[[iftags +theme]]
[[=]]
[[module rate]]
[[/=]]

+ GOD DAMMIT KRIS WHERE THE HELL ARE WE?!

This is an aesthetic theme for the Eventyr April Fools 2025 article, [https://scp-wiki.wikidot.com/fandation Fandation], featuring [[*user SynthPanda\_]], [[*user sailorenoch]], [[*user Prismal]], [[*user Miss Lapis]], [[*user Harmacy]], [[*user Guaire]], [[*user FrankEntropy]], [[*user DrBleep]], [[*user AstersQuill]], and [[*user Alexander245]]. The theme was created by [[*user Fish^12]].

This theme is a [https://scp-wiki.wikidot.com/component:sigma-plus  Sigma Plus] theme and uses the [https://scp-wiki.wikidot.com/component:toggle-sidebar  Toggle Sidebar Component]. Aesthetically, the theme is a simple overhaul that strongly mirrors a certain other wiki.

To include this theme on your page, use the following code:

[[=]]
> [[include :scp-wiki:theme:fandom]]
[[/=]]

This theme was designed around two very specific variables: {{@@--primcolor@@}} and {{@@--secocolor@@}}. As is implied, the first variable controls the primary color of the page, while the second variable controls the accents. By default, the theme will be in purple and white. You can manipulate these variables to better create a wiki page that reflects the vibe.

Copy the following and paste it below the theme include.

[[div class="blockquote"]]
@@[[module css]]@@
:root {
@@--@@primcolor: purple;
@@--@@secocolor: white;
}
@@[[/module]]@@
[[/div]]

[[image https://scp-wiki.wikidot.com/local--files/theme:fandom/chameleon.gif]]

Behold the possibilities.

[[div style="margin:400px"]]
[[/div]]

[[collapsible show="Theme Source" hide="Theme Source"]]
[[code type="CSS"]]

/*
    Fandom Theme
    [2025 Wikidot Theme]
    by Fish^12
*/

@import url('https://fonts.bunny.net/css2?family=Roboto+Slab:wght@100..900&display=swap');
@import url('https://fonts.bunny.net/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

:root {
    --primcolor: purple;
    --secocolor: white;

    --stylish: 3px solid;

    --robo: "Roboto Slab";
    --rubi: "Rubik";

    --header-title: "Foundation Wiki";
    --header-subtitle: "";
    --sp_header-logo: none;
    --sp_header-title-size: 2rem;

    --sp_header-height: 3.2rem;
    --sp_top-bar-height: 1rem;

    --sp_top-bar-gradient-top-color: var(--primcolor);
    --sp_top-bar-gradient-bottom-color: var(--primcolor);

    --sp_top-bar-link-color: var(--secocolor);
    --sp_top-bar-link-hover-color: var(--primcolor);
    --sp_top-bar-link-hover-background: var(--secocolor);

    --sp_dropdown-link-color: var(--secocolor);
    --sp_dropdown-link-hover-color: var(--primcolor);
    --sp_dropdown-link-background: var(--primcolor);
    --sp_dropdown-link-hover-background: var(--secocolor);
    --sp_dropdown-link-border: none;

    --sp_rate-module-background: var(--primcolor);
    --sp_rate-module-text-color: var(--secocolor);
    --sp_rate-module-button-color: var(--secocolor);
    --sp_rate-module-button-background: var(--primcolor);
    --sp_rate-module-sub-color: var(--secocolor);
    --sp_rate-module-button-hover-color: var(--primcolor);
    --sp_rate-module-button-hover-background: var(--secocolor);

    --sp_hovertip-background: var(--secocolor);
    --sp_hovertip-border: var(--stylish) var(--primcolor);

    --sp_tab-text-color: var(--primcolor);
    --sp_tab-background: var(--secocolor);
    --sp_tab-border-color: var(--primcolor);
    --sp_tab-hover-text-color: var(--secocolor);
    --sp_tab-hover-background: var(--primcolor);
    --sp_tab-hover-border-color: var(--primcolor);
    --sp_tab-selected-text-color: var(--secocolor);
    --sp_tab-selected-background: var(--primcolor);
    --sp_tab-selected-border-color: var(--primcolor);
}


    									/* ================ */
    									/* STYLINGS PROPER */
    									/* ================ */

#container {
    background-color: var(--primcolor);
    overflow-x: hidden;
}
#content-wrap {
    background-color: var(--secocolor);
    padding: 0 3em;
    margin: 0 auto;
    width: fit-content;
}
#login-status {
    grid-column: 3 / 8;
    padding-right: 12px;
    color: var(--secocolor);
}
#login-status a {
    color: var(--secocolor);
    font-weight: bold;
    text-decoration: none;
}
#account-topbutton {
    border: 1px solid var(--secocolor);
    color: var(--primcolor);
    background-color: var(--secocolor);
}
#account-topbutton:hover {
    border: 1px solid var(--secocolor);
    color: var(--secocolor);
    background-color: var(--primcolor);
}
#account-options {
    margin-right: 12px;
    border: none;
    background-color: var(--secocolor);
    font-weight: bold;
}
#account-options li a:hover {
    color: var(--secocolor);
    background-color: var(--primcolor);
    text-decoration: none;
}
#search-top-box {
    flex-direction: row-reverse;
    grid-column: 5 / 8;
    padding-right: 12px;
}
#search-top-box-form input[type=submit] {
    background-color: var(--secocolor);
    background-image: none;
    color: var(--primcolor);
    box-shadow: none;
    border: solid 1px var(--secocolor);
    border-radius: 0;
    transition: 200ms;
}
#search-top-box-form input[type=submit]:hover {
    background-color: var(--primcolor);
    background-image: none;
    border: solid 1px var(--secocolor);
    color: var(--secocolor);
    box-shadow: none;
}
#header {
grid-template-areas:
    ". . . . ."
    ". . . . ."
    "h1 . . login login"
    "h1 . . search search"
    ". . . . ."
    "top-bar top-bar top-bar top-bar top-bar";
    grid-template-columns: repeat(5, 1fr);
    background-color: var(--primcolor);
    background-image: none;
    padding-bottom: 0px;
}
#header h1 {
    padding-inline-start: 3rem;
    display: flex;
    align-items: center;
    grid-column: 1 / 4;
}
#header h1 a::before {
    font-family: var(--rubi);
    font-size: 24px;
    color: var(--secocolor);
    font-weight: bold;
    text-shadow: none;
}
#top-bar {
    padding: 0;
}
#top-bar ul li {
    flex-grow: 1;
}
#top-bar ul li ul {
    border: none;
    box-shadow: none;
}
#top-bar ul li ul {
    border-width: 0 0;
    box-shadow: 0 0.5em 1em -0.5em black;
    border-bottom: 3px solid var(--primcolor);
}
#top-bar > div[class*="top-bar"] {
    width: 100vw;
    max-width: 100vw;
}
#top-bar .open-menu a {
    border: solid 3px var(--primcolor);
    background-color: var(--secocolor);
    color: var(--primcolor);
    top: 7px;
    left: 7px;
    border-radius: 0;
    transition: 200ms;
}
#top-bar .open-menu a:hover {
    background-color: var(--primcolor);
    color: var(--secocolor);
}
#side-bar {
    background-color: rgba(0, 0, 0, 0.5);
}
#side-bar .menu-item a {
    padding: 2px;
}
#side-bar .menu-item a:hover {
    background-color: var(--primcolor);
    color: var(--secocolor);
    text-decoration: none;
}
#interwiki .heading, #side-bar .heading {
    color: black;
    border-bottom: var(--stylish) var(--primcolor);
    font-family: var(--robo);
}
#side-bar .side-block.media, #side-bar .side-block.resources, #side-bar .side-block, #interwiki .side-block {
    border: var(--stylish) var(--primcolor);
    border-radius: 3px;
    background-color: var(--secocolor);
    box-shadow: none;
}

    									/* ============ */
    									/* PAGE PROPER */
    									/* ============ */

#page-content {
    position: relative;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--robo);
    font-weight: bold;
    color: #3a3a3a;
}
hr {
    height: 5px;
    border-radius: 10px;
    background-color: var(--primcolor);
}
blockquote, .blockquote, div.blockquote, table.wiki-content-table th, table.wiki-content-table td {
    border: var(--stylish) var(--primcolor);
}
body, html {
    font-family: var(--rubi);
}
a, a:visited, #interwiki a, #side-bar a, #account-options li a {
    color: var(--primcolor);
    transition: 200ms;
}
#page-title {
    color: #3a3a3a;
    font-size: 2.25rem;
    font-weight: 300;
    line-height: 3rem;
    font-family: var(--rubi);
    padding-top: 0.5em;
    text-align: right;
    border-color: var(--primcolor);
    border-width: 3px;
}
#footer {
    background: var(--secocolor);
    color: black;
    margin-top: 2.5rem;
}
#footer a {
    color: var(--primcolor);
}
#license-area {
    color: var(--secocolor);
}
#license-area a {
    font-weight: bold;
    color: var(--secocolor);
}
.owindow {
    border: 5px solid var(--primcolor);
    outline: var(--stylish) var(--secocolor);
}
.owindow .title {
    cursor: auto;
    background-color: var(--primcolor);
    color: var(--secocolor);
    font-family: var(--robo);
    text-align: center;
    padding: 1em;
}
.owindow img {
    background-color: transparent !important;
    padding: 0 !important;
    border: var(--stylish) var(--primcolor);
    margin-right: 1em;
}
.owindow td img {
    display: none;
}
div.buttons input, input.button, button, file, a.button, .owindow .button-bar a {
    border: 3px solid var(--primcolor);
    transition: 200ms;
}
.page-tags span {
    border-top: solid 3px var(--primcolor);
}

    									/* ================= */
    									/* TYPABLE ELEMENTS */
    									/* ================= */

#toc {
    border: var(--stylish) var(--primcolor);
}
#toc #toc-action-bar {
    text-align: center;
}
.page-rate-widget-box, div.page-rate-widget-box, .rate-box-with-credit-button {
    border-radius: 3px;
    box-shadow: none;
    text-transform: capitalize;
    transition: 200ms;
}
.yui-navset .yui-nav {
    font-weight: bold;
}
.yui-navset .yui-nav, .yui-navset .yui-navset-top .yui-nav {
    border-width: 0;
}
.yui-navset.yui-navset-top .yui-nav li a {
    border-width: 3px;
}
.yui-navset .yui-content, .yui-navset .yui-navset-top .yui-content {
    margin-top: -3px;
    border: var(--stylish);
    border-top-color: var(--primcolor);
    position: relative;
    z-index: 1;
}

    									/* ======== */
    									/* RESIZING */
    									/* ======== */

@media only screen and (max-width: 800px) {
#content-wrap {
    background-color: var(--secocolor);
    width: auto;
    padding: 0 1em;
    }
#page-content {
    font-size: 0.8rem;
    }
}
[[/code]]
[[/collapsible]]

[[/iftags]]

[[include :scp-wiki:component:sigma-plus]]
[[include :scp-wiki:component:toggle-sidebar]]

[[module css]]
@import url(https://scp-wiki.wdfiles.com/local--code/theme%3Afandom/1);
[[/module]]
[[include :scp-wiki:component:interwiki-style
| priority=1
| theme=https://scp-wiki.wdfiles.com/local--code/theme%3Afandom/1
]]

Fandom Theme

Module Styles

Inline Styles

Includes

CSS Classes

Page Source