Shoebill Theme

Link to article: Shoebill Theme.

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

```
font-family:var(--stic);font-size:150%
```
```
font-family:var(--tapr);font-size:150%
```
```
font-family:var(--robo);font-size:150%
```
```
margin: 300px
```

(none)

[[iftags +theme]]

[[>]]
[[module rate]]
[[/>]]

+ SANTA CLAUS HAS A FAT ASS.

This is the aesthetic theme for Site-225, primarily created by [[*user MetalRavioli]], a site dedicated to biological anomalies like birds and fish. This theme was created by me, [[*user Fish^12]] for Art Exchange.

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] and the [https://scp-wiki.wikidot.com/component:betterfootnotes Better Footnotes Component]. Aesthetically, this theme uses lots of large, chunky blocks and lots of oranges and green, cause science... is orange. And biology? Green.

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

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

----

@@ @@

[[include component:image-block name=shoebill-stork.png|caption=Example image block.]]

||~  @@ @@ ||~ Euclid ||~ Keter ||
||~ Man || Mathematician || King ||
||~ Religion || Pythagoreanism || Judaism ||

[[tabview]]
[[tab Click Me]]
You're in the right place.
[[/tab]]
[[tab Don't Click Me]]
Idiot.
[[/tab]]
[[/tabview]]

[[=]]
[[span style="font-family:var(--stic);font-size:150%"]]Header font is Stick No Bills.[[/span]]
[[span style="font-family:var(--tapr);font-size:150%"]]Subheader font is Taprom.[[/span]]
[[span style="font-family:var(--robo);font-size:150%"]]Body font is Roboto Flex.[[/span]]
[[/=]]

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

[[collapsible show="Theme Source" hide="Theme Source"]]
[[code type="CSS"]]
/*
    Shoebill Theme
    [2026 Wikidot Theme]
    by Fish^12
*/

@import url(https://fonts.bunny.net/css?family=stick-no-bills:200,300,400,500,600,700,800);
@import url(https://fonts.bunny.net/css?family=taprom:400);
@import url(https://fonts.bunny.net/css?family=roboto-flex:400);

:root {
    --green: #aadd56;
    --darkgreen: #007e30;
    --yellow: #ffec8e;
    --orange: #ff7f27;
    --white: #FCFBF4;
    --black: #171717;
    --trans: transparent;

    --stic: "Stick No Bills";
    --tapr: "Taprom";
    --robo: "Roboto Flex";

    --timer: 200ms;

    --fnColor: var(--darkgreen);

    --header-title: "SITE-225";
    --header-subtitle: "Protecting The Small";
    --sp_header-logo: url("https://scp-wiki.wikidot.com/local--files/theme:shoebill/225.webp");
    --sp_header-logo-adaptive-size: 0;
    --sp_header-title-size: clamp(2.5rem, 1.974rem + 2.807vw, 5.5rem);
    --sp_header-subtitle-size: clamp(1.3rem, 0.086rem + 3.238vw, 4rem);

    --sp_header-height: 20rem;
    --sp_top-bar-height: 2rem;

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

    --sp_top-bar-link-color: var(--black);
    --sp_top-bar-link-hover-color: var(--darkgreen);
    --sp_top-bar-link-hover-background: var(--white);

    --sp_dropdown-link-color: var(--black);
    --sp_dropdown-link-hover-color: var(--darkgreen);
    --sp_dropdown-link-background: var(--orange);
    --sp_dropdown-link-hover-background: var(--white);
    --sp_dropdown-link-border: none;

    --sp_rate-module-text-color: var(--black);
    --sp_rate-module-background: var(--orange);
    --sp_rate-module-sub-color: var(--black);
    --sp_rate-module-active-color: var(--black);
    --sp_rate-module-button-color: var(--black);
    --sp_rate-module-button-background: var(--white);
    --sp_rate-module-button-hover-color: var(--white);
    --sp_rate-module-button-hover-background: var(--orange);
 
    --sp_tab-text-color: var(--white);
    --sp_tab-background: var(--orange);
    --sp_tab-border-color: var(--orange);
    --sp_tab-hover-text-color: var(--black);
    --sp_tab-hover-background: var(--orange);
    --sp_tab-hover-border-color: var(--orange);
    --sp_tab-selected-text-color: var(--black);
    --sp_tab-selected-background: var(--orange);
    --sp_tab-selected-border-color: var(--orange);
 
    --sp_hovertip-background: var(--white);
    --sp_hovertip-border: 0.2em solid var(--orange);
}

/* From the top! */

#container {
    overflow-x: hidden;
}
#login-status {
    padding-right: 0.5em;
    padding-top: 0.5em;
    font-size: 1rem;
    color: var(--black);
    font-weight: bold;
}
#login-status a {
    color: var(--black);
    box-shadow: 0 2px 0 0 var(--trans);
    transition: var(--timer);
}
#login-status a:hover {
    box-shadow: 0 2px 0 0 var(--black);
    text-decoration: none;
}
#top-bar .open-menu a {
    height: 35px;
    border-radius: 100% / 125% 125% 80% 80%;
    border: 0.2rem solid var(--black);
    background-color: var(--white);
    color: var(--black);
    transition: var(--timer);
    align-content: center;
    filter: 
    	drop-shadow(2px 2px 0 var(--orange))
    	drop-shadow(-1px 2px 0 var(--orange))
    	drop-shadow(0px -2px 0 var(--orange))
    	drop-shadow(2px 0px 0 var(--orange));
}
#top-bar .open-menu a:hover {
    border: 0.2rem solid var(--darkgreen);
    background-color: var(--yellow);
    color: var(--darkgreen);
    box-shadow: 1px 1px 0 3px var(--black);
    filter: 
    	drop-shadow(2px 2px 0 var(--black))
    	drop-shadow(-1px 2px 0 var(--black))
    	drop-shadow(0px -2px 0 var(--black))
    	drop-shadow(2px 0px 0 var(--black));
    box-shadow: none;
}

/* Pop-up page. */

.owindow {
    background-color: var(--yellow);
    border: none;
    color: var(--black);
}
.owindow .title {
    cursor: auto;
    background-color: var(--orange);
    border-bottom: 0.2em solid var(--orange);
    text-align: center;
    font-family: var(--stic);
    padding: 0.8rem 0 0 0;
    text-transform: uppercase;
    font-size: 2.5rem;
}
.owindow img {
    background-color: var(--trans) !important;
    padding: 0 !important;
    margin-right: 1em;
}
.owindow td img {
    display: none;
}
.owindow .button-bar a {
    border-color: var(--orange);
    border-width: 0.2em;
    background-color: var(--orange);
    color: var(--black);
}
.owindow .button-bar a:hover {
    background-color: var(--white);
    color: var(--darkgreen);
    border-color: var(--white);
    box-shadow: 5px 0 var(--darkgreen), -5px 0 var(--darkgreen);
}
.odialog-shader {
    background-image:
    	linear-gradient(45deg, var(--trans) 10%, var(--orange) 10% 20%, var(--trans) 20%),
    	linear-gradient(135deg, var(--trans) 10%, var(--orange) 10% 20%, var(--trans) 20%),
    	linear-gradient(225deg, var(--trans) 10%, var(--orange) 10% 20%, var(--trans) 20%),
    	linear-gradient(315deg, var(--trans) 10%, var(--orange) 10% 20%, var(--trans) 20%),
    	linear-gradient(45deg, var(--trans) 45%, var(--red) 45% 55%, var(--trans) 55%),
    	linear-gradient(135deg, var(--trans) 45%, var(--red) 45% 55%, var(--trans) 55%);
}

/* Account and search buttons. */

#account-topbutton {
    font-size: 80%;
    border: none;
    margin-left: 0;
    transition: var(--timer);
    padding: 3px 2px 1px 2px;
}
#account-options {
    margin-top: 0.2em;
    margin-right: 0.5em;
    text-align: center;
    border: none;
    border-color: var(--trans);
    background-color: var(--orange);
    width: 8rem;
}
#account-options li a {
    color: var(--black);
    background-color: var(--orange);
    text-transform: capitalize;
    transition: var(--timer);
}
#account-options li a:hover {
    color: var(--darkgreen);
    background-color: var(--white);
    box-shadow:
    	5px 0 var(--darkgreen),
    	-5px 0 var(--darkgreen);
    text-decoration: none;
}
#search-top-box {
    align-items: flex-start;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    padding-right: 0.5em;
    padding-top: 0.5em;
    font-size: 1rem;
}
#search-top-box-form input[type=submit] {
    background-color: var(--orange);
    background-image: none;
    color: var(--black);
    border: 0.2em solid var(--orange);
    box-shadow: none;
    border-radius: 0;
    padding: 0 5px;
    transition: var(--timer);
}
#search-top-box-form input[type=submit]:hover, #search-top-box-form input[type=submit]:focus{
    background-color: var(--white);
    border: 0.2em solid var(--white);
    background-image: none;
    color: var(--darkgreen);
    box-shadow: 5px 0 var(--darkgreen), -5px 0 var(--darkgreen);
}

/* Header. */

#header {
    grid-template-areas:
    	". . login login login"
    	". . . . search"
    	"h1 h1 h1 h1 h1"
    	"h2 h2 h2 h2 h2"
    	". . . . ."
    	"top-bar top-bar top-bar top-bar top-bar";
    grid-template-columns: repeat(5, 1fr);
    background-color: var(--yellow);
    background-image:
    	url(https://scp-wiki.wikidot.com/local--files/theme:shoebill/shoebill-stork.png),
    	url(https://scp-wiki.wikidot.com/local--files/theme:shoebill/tropical-fish.png);
    background-size: 20rem;
    background-repeat: no-repeat;
    background-position:
    	-1rem 1rem,
    	100% 2rem;
    position: relative;
}
#header::before {
    grid-row: none;
    grid-column: none;
    width: 15rem;
    height: 15rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform:
    	translate(-50%, -50%)
    	rotate(15deg);
    opacity: 10%;
}
#header h1, #header h2 {
    padding-inline-start: 0;
    text-align: center;
    position: relative;
}
#header h1 a::before {
    font-family: var(--stic);
}
#header h2 span::before {
    font-family: var(--tapr);
}
#header h1 a::before, #header h2 span::before {
    color: var(--black);
}
#header h1 a, #header h2 span {
    text-shadow: none;
}

/* Top bar. */

#top-bar {
    box-shadow:
    	72vw -5px var(--darkgreen),
    	-72vw -5px var(--darkgreen),
    	68vw 5px var(--darkgreen),
    	-68vw 5px var(--darkgreen);
}
#top-bar ul li a {
    transition: var(--timer);
}
#top-bar ul li ul {
    border-width: 0 0;
    box-shadow: none;
}
#top-bar div[class*="top-bar"] > ul {
    justify-content: center;
}
#top-bar :is(.top-bar, .mobile-top-bar) ul li ul li a {
    line-height: 2;
    text-align: center;
    font-weight: bold;
}
#top-bar :is(.top-bar, .mobile-top-bar) ul li ul li a:is(:hover,:focus) {
    box-shadow: -5px 0 var(--darkgreen), 5px 0 var(--darkgreen);
}
#top-bar :is(.top-bar, .mobile-top-bar) > ul > li > a:hover, #top-bar :is(.top-bar, .mobile-top-bar) > ul > li:is(.sfhover, :hover, :focus-within) > a {
    box-shadow: 0 -5px var(--darkgreen);
}

/* Side bar and side bar button. */

#side-bar {
    background-color: rgba(0, 0, 0, 0.5);
}
#side-bar a {
    padding: 0 5px;
}
#side-bar a:hover {
    text-decoration: none;
}
#side-bar .menu-item {
    text-align: center;
}
html#interwiki {
    background-color: var(--trans);
}
#interwiki .menu-item {
    text-align: left;
}
#interwiki .menu-item img, #side-bar .menu-item img {
    filter: hue-rotate(180deg);
}
#interwiki .heading, #side-bar .heading {
    color: var(--black);
    border-bottom: solid 0.2em var(--darkgreen);
    font-weight: 400;
}
#side-bar .side-block.media, #side-bar .side-block.resources, #side-bar .side-block, #interwiki .side-block {
    background-color: var(--yellow);
    border-radius: 0;
    box-shadow: none;
    border: solid 0.2rem var(--orange);
}
#side-bar .side-block.media a {
    padding: 0;
}
#side-bar .side-block.media a:hover {
    background-color: var(--trans);
    filter: invert(1);
}

/* Body content. */

body, html {
    background-color: var(--white);
    font-family: var(--robo);
}
h1, h2, h3, h4, h5 {
    color: var(--darkgreen);
    font-family: var(--robo);
}
a, a.newpage, a:visited, #interwiki a, #side-bar a {
    color: var(--darkgreen);
    font-weight: 700;
    transition: var(--timer);
}
a:hover, a:visited:hover, #interwiki a:hover, #side-bar a:hover {
    color: var(--white);
    background-color: var(--darkgreen);
    text-decoration: none;
}
.licensebox a.collapsible-block-link:hover {
    background-color: var(--trans);
}
#page-title, .meta-title {
    font-family: var(--stic);
    font-weight: bold;
    color: var(--darkgreen);
    font-size: clamp(1.5rem, 0.786rem + 1.905vw, 2.5rem);
    margin-bottom: 2rem;
    border-color: var(--darkgreen);
    border-width: 5px;
}
#breadcrumbs, .pseudocrumbs {
    margin: 1em 0em 1em;
}
.preview-message {
    color: var(--black);
    background-color: var(--white);
    border: solid 0.2rem var(--darkgreen);
}

/* Stuff you make. */

table.wiki-content-table th {
    background-color: var(--green);
    border-color: var(--darkgreen);
}
table.wiki-content-table td {
    background-color: var(--yellow);
    border-color: var(--darkgreen);
}
#toc {
    border: solid 0.2rem var(--orange);
    background-color: var(--yellow);
}
blockquote, div.blockquote {
    background-color: rgba(255, 236, 142, 0.3);
    border-color: var(--trans);
    border-bottom: solid 0.2rem var(--orange);
}
.scp-image-block, div.scp-image-block {
    box-shadow: none;
    border-width: 0;
}
.scp-image-block img, div.scp-image-block img  {
    background-color: var(--yellow);
}
.scp-image-block .scp-image-caption, div.scp-image-block .scp-image-caption {
    background-color: var(--orange);
    border-top: 0;
    color: var(--black);
    padding: 0.5rem 0;
    font-weight: normal;
    font-size: 0.9rem;
}
.scp-image-block .scp-image-caption a, div.scp-image-block .scp-image-caption a {
    color: var(--white);
}
div.scp-image-block.block-right, .scp-image-block.block-right, div.scp-image-block.block-left, .scp-image-block.block-left {
    position: relative;
}
div.scp-image-block.block-right::after, .scp-image-block.block-right::after, div.scp-image-block.block-left::after, .scp-image-block.block-left::after {
    position: absolute;
    content: "";
    top: -2rem;
    width: 100vw;
    height: calc(100% + 2rem);
}
div.scp-image-block.block-right::after, .scp-image-block.block-right::after {
    left: calc(100% + 5px);
    clip-path:
    	polygon(2rem 0,
    	100% 0,
    	100% 2rem,
    	4rem 2rem,
    	2rem 4rem,
    	2rem calc(100% - 2rem),
    	0 100%,
    	0 2rem);
    background-image: linear-gradient(
90deg, var(--orange) 0 4rem, transparent 4rem calc(4rem + 5px), var(--orange) 4rem);
}
div.scp-image-block.block-left::after, .scp-image-block.block-left::after {
    right: calc(100% + 5px);
    clip-path:
    	polygon(0 0,
    	calc(100% - 2rem) 0,
    	100% 2rem,
    	100% 100%,
    	calc(100% - 2rem) calc(100% - 2rem),
    	calc(100% - 2rem) 4rem,
    	calc(100% - 4rem) 2rem, 0 2rem);
    background-image: linear-gradient(
270deg, var(--orange) 0 4rem, transparent 4rem calc(4rem + 5px), var(--orange) 4rem);
}
div.page-rate-widget-box, div.rate-box-with-credit-button, .page-rate-widget-box {
    text-transform: uppercase;
    box-shadow: none;
    border-radius: 3px;
    border: solid var(--orange);
    padding: 3px;
    position: relative;
}
div.page-rate-widget-box::before, div.rate-box-with-credit-button::before, .page-rate-widget-box::before{
    position: absolute;
    content: "";
    background-image: url(https://scp-wiki.wikidot.com/local--files/theme:shoebill/hummingbird.png);
    top: 35%;
    right: 102%;
    height: 3rem;
    width: 3rem;
    background-size: contain;
    transform: translate(0%, -50%);
}
#main-content div.page-rate-widget-box span:is(.rate-points) {
    border-radius: 3px 0 0 3px;
    background-color: var(--white);
}
#main-content div.page-rate-widget-box span:is(.btn) {
    border-radius: 0 3px 3px 0;
    background-color: var(--white);
}
div.page-rate-widget-box .ratedown, div.page-rate-widget-box .rateup, .page-rate-widget-box .ratedown, .page-rate-widget-box .rateup {
    background-color: var(--white);
}
div.page-rate-widget-box .cancel a:is(:hover,:focus), .page-rate-widget-box .cancel a:is(:hover,:focus) {
    color: var(--white);
    background-color: var(--orange);
}
.authorlink-wrapper > a {
    padding: 1px 5px;
}
.fncon {
    background-color: var(--white);
    border: solid 0.2rem var(--orange);
}
.fncon::before {
    color: var(--black);
    background-color: var(--orange);
}
.hovertip {
    width: fit-content;
    height: fit-content;
    box-shadow: 0 5px var(--orange);
}
hr {
    margin: 1ex 3ex;
    background-color: var(--darkgreen);
    height: 0.2rem;
}

/* Bottom of page and editor. */

#main-content .page-tags {
    border-top: 2rem solid var(--orange);
    padding-top: 5px;
    position: relative;
    margin: 5rem 0 0;
}
.page-tags::before, .page-tags::after {
    position: absolute;
    content: "";
    top: 0;
    width: 100vw;
    height: 4rem;
    transform: translate(0, -50%);
}
.page-tags::before {
    right: calc(100% + 5px);
    clip-path:
    	polygon(0 2rem,
    	calc(100% - 6rem) 2rem,
    	calc(100% - 4rem) 0,
    	100% 0,
    	100% 2rem,
    	calc(100% - 2rem) 2rem,
    	calc(100% - 4rem) 100%,
    	0 100%);
    background-image: linear-gradient(270deg, var(--orange) 6rem, var(--trans) 6rem calc(6rem + 5px), var(--orange) 6rem 100%);
}
.page-tags::after {
    left: calc(100% + 5px);
    clip-path:
    	polygon(0 0,
    	4rem 0,
    	6rem 2rem,
    	100% 2rem,
    	100% 4rem,
    	4rem 100%,
    	2rem 2rem,
    	0 2rem);
    background-image: linear-gradient(90deg, var(--orange) 6rem, var(--trans) 6rem calc(6rem + 5px), var(--orange) 6rem 100%);
}
#main-content .page-tags span {
    border-width: 0;
}
#main-content .page-tags a {
    padding: 0 5px;
}
#page-info, .page-watch-options {
    width: fit-content;
    margin: auto;
    padding: 2px 6px;
    margin-top: 0.5rem;
}
.page-watch-options a:hover {
    text-decoration: none;
}
.page-options-bottom {
    text-align: center;
    margin-top: 1rem;
}
a.action-area-close:hover {
    text-decoration: none;
    background-color: var(--darkgreen);
    color: var(--white);
}
#footer {
    align-items: center;
    color: var(--black);
    background-color: var(--orange);
    max-height: fit-content;
}
#footer a {
    color: var(--black);
    font-weight: 900;
}
#footer a:hover {
    color: var(--darkgreen);
    background-color: var(--white);
}
#license-area {
    background-color: var(--white);
}

@media (max-width: 500px) {
    #header {
    	background-position: -10rem 1rem, calc(100% + 11rem) 2rem;
    }
    #top-bar div[class*="top-bar"] > ul > li {
    	flex: 1 1 0px;
    }
}
[[/code]]
[[/collapsible]]

[[include :scp-wiki:component:license-box-theme]]
=====
> **Name:** Shoebill stork icon
> **Filename:** shoebill-stork.png
> **Author:** Delapouite
> **License:** CC BY 3.0
> **Source Link:** https://game-icons.net/1x1/delapouite/shoebill-stork.html#download

> **Name:** Tropical fish icon
> **Filename:** tropical-fish.png
> **Author:** Delapouite
> **License:** CC BY 3.0
> **Source Link:** https://game-icons.net/1x1/delapouite/tropical-fish.html#download

> **Name:** Hummingbird icon
> **Filename:** hummingbird.png
> **Author:** Delapouite
> **License:** CC BY 3.0
> **Source Link:** https://game-icons.net/1x1/delapouite/hummingbird.html#download
=====
[[include :scp-wiki:component:license-box-end]]
[[/iftags]]

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

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

Shoebill Theme

Module Styles

Inline Styles

Includes

CSS Classes

Page Source