NOT TOPSTYLE
rating: 0+–x
top wtf are you doing we said no more style themes

More by TopDownUnder!

ok so what is this????

Glad you asked, mx. "i always ask what something is because i didn't check the title or see the fact that this is a theme"!

Alright so y'all remember back in spring of 2021 we had a Three of them.shit ton of personal styling themes drop? yeah, that's what im doing rn. we're in the nostalgia milking phase for that mini-trend now.

To use this (please don't), paste the following:

[[include :scp-wiki:theme:not-topstyle]]

If you want to use this alongside the Plant Theme (for the super cool Reclamation Series), paste the following:

[[include :scp-wiki:theme:not-topstyle |plants= --]]

Obviously, since this is a personal styling theme, I don't really recommend using this theme unless you are:

  • TopDownUnderTopDownUnder
  • named top on scpd
  • Former President Barack Hussein Obama II (call me)

I'll be regularly updating this page, and additions I make to this page might end up breaking your pages. You've been warned, yaddi yaddi.

So, what exactly does NOT TOPSTYLE do? Simple:

it'll also unban akumeoy, but that's for a SOON.later update.

NOT TOPSTYLE
By: TopDownUnderTopDownUnder
Published on 01 Nov 2021 13:16

This is a working example of the authorbox. Consult the Sideboxes subsection for further info.

⮤ This is a flavorbox ⮥

To create one, copy the following div
and paste it inside your authorbox:

[[div class="flavorbox"]]


Rating:

rating: 0+–x

Rating w/ Info Pane:

Example Formatting

▷ Show Extra Features ◁

What Is This?

This is a theme created by Lt FlopsLt Flops. It is an aesthetic improvement and extension of Sigma-10 (the Wiki's main theme).

Only use this if you understand what you're doing.

This theme is incompatible with Black Highlighter, BASALT, and Sigma+.

Dark Mode Counterpart

Flopstyle: DARK

How to Use

To use this theme, please copy and paste this syntax onto the top of your page:

[[include :scp-wiki:theme:flopstyle]]

If you wish to use this theme with another Sigma theme, paste Flopstyle first and your chosen theme in the next line. Some fine-tuning may be necessary.

Please also note that this theme uses the following components:

  1. Croqstyle CSS by CroquemboucheCroquembouche
  2. Fade In (set at speed=1) by CroquemboucheCroquembouche
  3. Toggle Sidebar by EstrellaYoshteEstrellaYoshte

This theme was designed with the following component(s) in mind…

Centered Header Sigma

To use this component, please paste the following syntax after Flopstyle. If your page uses another custom Sigma theme, please paste the following syntax after the custom theme:

[[include :scp-wiki:component:centered-header-sigma-9]]

You may alter the header, sub-header, header colour, sub-header colour, and header logo as you see fit. Just paste this syntax after the Centered Header include, then style it accordingly:

[[module CSS]]
:root {
--header-title: "TITLE";
--header-subtitle: "SUBTITLE";
--titleColor: title_colour;
--subtitleColor: subtitle_colour;
--lgurl: url(URL_HERE);
}
[[/module]]

Flops Header

[[include :scp-wiki:component:flops-header
|item=
|containment=
|level=
|security=
|disruption=
|disruption-bg-color=
]]

Sideboxes

Adapted from Penumbra Theme by EstrellaYoshteEstrellaYoshte.

Sideboxes are built-in components that come in two types:

  1. authorbox
  2. sidebox

Usage instructions vary depending on the type.

  • The authorbox does not display on screens below width=1200px, which includes mobile screens. It can be set up to display page and author information.
  • The sidebox collapses into the page edge on screens below width=1200px. On those screens, it can be accessed by tapping your finger or hovering your cursor over it. It can be set up to display additional narrative information.

Please consider these conditions before setting up these items — a large percentage of SCP Wiki users browse via mobile devices.

1. Authorbox

(See Top Left)

By default, the authorbox is opt-out. It comes preloaded on all pages that include Flopstyle: LITE. If you wish to remove it, please replace this:

[[include :scp-wiki:theme:flopstyle]]

With this:

[[div style="display: none;"]]
[[include :scp-wiki:theme:flopstyle]]
[[/div]]

Alternative 1: After removing the authorbox, you can replace it with a custom version that displays any information you desire. This functionality can be especially useful for co-authored, rewritten, or translated pages. For your reference, this is the code that creates the authorbox:

[[div class="anchor"]]Sets authorbox's sticky position.
[[div class="authorbox"]]

[[module ListPages name="="]]
||~ %%title%% ||
||= **By:** %%created_by_linked%% ||
||~ Published on %%created_at|%d %b %Y%% ||
[[/module]]

|| Optional Flavor Text ||

[[/div]]
[[/div]]Sets the end limit of the anchor.

By default, the authorbox makes use of ListPages to automate the metadata displayed. You could theoretically copy the ListPages portion of the authorbox onto any Wiki page, and these fields would populate in a way unique to that page. You may, of course, change any of these fields as desired.

You may also edit your custom authorbox to display flavor text tailored to your page, such as a note to readers.

See the left side of the page for an authorbox example.

flavorbox is the only div you should use inside an authorbox.

Alternative 2: If you want, you can move the authorbox to the right-hand side of the page. To do so, copy this syntax and paste it inside a CSS module at the top of your page:

.authorbox {
right: unset;
left: 103.5%;
padding: 0 0 0 1em;
}

If you have a page that does this, I recommend against inserting any sideboxes in that same page, or it will prove rather messy.

If you are planning on inserting any sidecontainers onto your page, I strongly recommend using the default authorbox. The reason being, when a right-hand authorbox and sidecontainer are used in tandem, they will overlap and become visually messy. This has the potential to be very confusing for readers. So, it's better staying on the safe side.

2. Sidebox

The sidebox is opt-in. It is set up like this:

[[div class="limit"]] Sets the start limit of the anchor.
[[div class="anchor"]] Sets sidebox's sticky position.
[[div class="sidebox"]]
Desired sidebox text here.
[[/div]]
[[/div]]
Text that the sidebox associates with.
[[/div]] Sets the end limit of the anchor.

I recommend inserting a manual linebreak after sidebox-associated text. You can achieve this by encasing a space with two sets of @@ (one on each side). The sidebox will appear alongside this text as you scroll past.

▷ Show Example ◁

Remember the limit div. Without a limit, the anchor will remain present across the entire page content once you scroll past its starting position.

Misc. Changeable Portions

If necessary, you can also edit any of these CSS properties to better suit your page. This list does not cover all styles that Flopstyle offers — but it's a good place to start.

Change Info Bar Properties

.info-container {
/* = Recolour according to Site Theme = */
--barColour: bar_colour;
}

#u-author_block {
display: none;
}


Change Lite-Heading Subtitle Colour

.lite-heading h3 {
/* = Recolour according to Site Theme = */
color: lite_heading_colour;
}


Change Card-Block & Sidebox Border-Left Colour

:root {
--accentColor: accent_colour;
}


Change Simple Warning Header Logo

(The image must be transparent)

.warning-notice {
background-image: url(URL_HERE);
background-size: 400px;
}


Change Advanced Warning Header Logo

(The image must be transparent)

.council {
background-image: url(URL_HERE);
}


Change Series Navigation Background

.series-nav {
background:
linear-gradient(
to bottom right,
hsla(0, 0%, 100%, 1),
COLOUR_HERE);
}


Hide Page Title

#page-title {
display: none;
}


Hide Footnotes Footer

.footnotes-footer {
display: none;
}

Source Code

▷ Show Code ◁


[[include :scp-wiki:component:centered-header-sigma-9]] 
@import url('https://fonts.googleapis.com/css2?family=PT+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Azeret+Mono:wght@200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');
@import url('https://scp-wiki.wikidot.com/component:centered-header-sigma-9/code/1');
@import url('https://scp-wiki.wikidot.com/theme:flopstyle/code/1');
/*
    "NOT TOPSTYLE" theme
    [2021 Wikidot Theme]
    Created by TopDownUnder, with code from Azamo and stormbreath
    CC BY-SA 3.0
*/
 .footnotes-footer{
     display: none;
}
/*
 :root{
   --header-title: "this is a";
   --header-subtitle: "this is a placeholder";
   --lgurl: url(https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/microsoft/309/middle-finger_1f595.png);
}
*/
.hovsecret {
text-decoration: none;
    border-bottom: none;
    color:black;
}
.hovsecret:hover {
     text-decoration: none;
    border-bottom: none;
    color:#004c00;
}
.hovsecret span {    display: none;}
.hovsecret:hover span {
    position: absolute;
    display: inline;
    margin: 20px 0px;
    height: auto;
    width: auto;
    background: #FFF;
    border: 1px solid #000;
    color: black;
    padding: 0.5em;
}
.hovsecret:hover span span {
    position: relative;
    margin: auto;
    height: auto;
    width: auto;
    border: none;
    padding: 0;
}
.highsecret{
    color: transparent;
}
.highsecret::selection {
    color: black;
}
::-webkit-scrollbar {
    width: 9px;
    background: transparent;
}
div.terminal{
    border: 1px solid black;
    border: solid 3px #BBBBBB;
    border-radius: 16px;
    background-color: #131;
/* black shadow at the top of the terminal */
    background-image:
        radial-gradient(ellipse 1000% 100% at 50% 90%, transparent, #121);
    background-position: center;
    display: block;
/* shadow around the terminal */
    box-shadow: inset 0 0 10em 1em rgba(0,0,0,0.5);
/* prevents scanline from forming a scrollwheel */
    overflow:hidden;
}
div.terminal blockquote {
    background-color: black;
    border: double 3px #80FF80
}
div.scanline{
    margin-top: -40%;
    width: 100%;
    height: 60px;
    position: relative;
    pointer-events: none;
/* Safari 4.0 - 8.0 */
    -webkit-animation: scan 12s linear 0s infinite; /* You may need to change this. If the bar goes by too quickly, increase 5s. */
    animation: scan 12s linear 0s infinite; /* Same as above */
    background: linear-gradient(to bottom, rgba(56, 112, 82,0), rgba(56, 112, 82,0.1)) !important;
}
 
div.text{
    color: rgba(128,255,128,0.8);
    padding-left: 2em;
    padding-top: 40%;
    font-family: monospace;
    font-size: 1.2em;
    }
 
/* Safari 4.0 - 8.0 */
@-webkit-keyframes scan{
    from{ transform: translateY(-10%);}
    to{  transform: translateY(5000%);} /* You may need to change this depending on the length of your terminal. If the scanline stops halfway, increase the second number.*/
}
 
@keyframes scan{
    from{ transform: translateY(-10%);}
    to{  transform: translateY(5000%);} /* Same as above.*/
}
 
div.text a {
    color: #90EE90;
    text-decoration: none;
    background: transparent;
}
div.text a.newpage {
    color: #90EE90;
    text-decoration: none;
    background: transparent;
}
div.text a:hover {
    color: #131;
    text-decoration: underline;
    background-color: #80FF80;
    padding: 1px;
}
div.text a:hover::before{
content: "> ";
}
@media (prefers-reduced-motion) {
    span.blinky-boi {
        animation: blink 0.8s ease-in-out infinite alternate;
    }
}
@keyframes blink {
    0% { color: transparent; }
    50%, 100% { color: #333; }
}
.email {border: solid 2px #000000; width: 88%; padding: 1px 15px; margin: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.5)}
.email-example a.collapsible-block-link {font-weight: bold;}
.tofrom {margin-left: 10px; margin-top: 5px; padding: 1px 15px; border-left: solid 3px maroon}
/* anendlessusername's invaluable correction of the ACS octagon! */
#page-content .quadrants > div {
    top: 2.25%;
    left: 18.5%;
}
.metal-dept {
    border:solid 2px #000000;
    background:#D3D3D3;
    margin: auto;
    padding: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,.2); 
    width: 90%;
}
.metal-logo {
    border: 1px solid black;
    border-style: double;
    /* width: 50%; */
    /* float: none; */
    /* height: 50%; */
    background-color: white;
    display: inline-block;
    padding-left: 20px;
    padding-right: 20px;
}
.seventeen {
    font-family: 'Work Sans', sans-serif;
    font-weight: 700;
    color: #9977ee;
    font-size: 110%;
}
.seventeen a {
    color: #9977ee;
}
.reclaim {
    font-family: 'Work Sans', sans-serif;
    font-weight: 700;
    color: #006400;
    font-size: 110%;
}
.reclaim a {
    color: #006400;
}
.expand {
    font-family: 'Work Sans', sans-serif;
    font-weight: 700;
    color: #8B8000;
    font-size: 110%;
}
.expand a {
    color: #8B8000;
}
.liberate {
    font-family: 'Work Sans', sans-serif;
    font-weight: 700;
    color: #8B0000;
    font-size: 110%;
}
.liberate a {
    color: #8B0000;
}
.greed {
    font-family: 'Work Sans', sans-serif;
    font-weight: 700;
    color: #DAA520;
    font-size: 110%;
}
.greed a {
    color: #DAA520;
}
.metal-plate {
    display: block;
    overflow: hidden;
    font-family: 'Josefin Sans', sans-serif;
    margin-right: auto;
    margin-left: auto;
    font-size: 180%;
    width: 80%;
    margin-top: 17px;
    margin-bottom: 17px;
    padding: 8px 8px 8px 8px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
    border-radius: .5em;
    background-image: -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%, .1) 7.5%),
    -webkit-repeating-linear-gradient(left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   4%, hsla(0,0%,  0%,.03) 4.5%),
    -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%),
    linear-gradient(180deg, hsl(0,0%,78%)  0%,
        hsl(0,0%,90%) 47%,
        hsl(0,0%,78%) 53%,
        hsl(0,0%,70%)100%);
    font-weight: bold;
    text-align: center;
    color: hsla(0,0%,20%,1);
    text-shadow: hsla(0,0%,40%,.5) 0 -1px 0, hsla(0,0%,100%,.6) 0 2px 1px;
}
  span.pride {
    background: linear-gradient(45deg, rgba(0,0,255,1) 0%, rgba(255,165,0,1) 16%, rgba(255,255,0,1) 32%, rgba(255,0,0,1) 48%, rgba(0, 0, 255,1) 64%, rgba(75, 0, 130,1) 80%, rgba(128,0,128,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
  }
.page {
    display: block;
    overflow: hidden;
    font-family: "Monotype Corsiva", "Bradley Hand ITC", sans-serif;
    font-style: normal;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: linear-gradient(to top ,rgb(202, 219, 228) 0%, rgb(231, 233, 220) 8%);
    background-origin: padding-box;
    background-position: 0px 8px;
    background-repeat: repeat;
    background-size: 100% 20px;
    border: 1px solid #CCC;
    border-radius: 10px;
    padding: 10px 10px;
    margin-bottom: 10px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2)
}
.page p,
.page ul {
    line-height: 20px;
    margin: 0;
}
Footnotes
_toptheme
page revision: 29, last edited: 02 Nov 2021 14:48
Edit Rate (0) Tags Discuss History Files Print Site tools + Options
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License