Flopstyle CSS
Flopstyle CSS
Author: Lt FlopsLt Flops
Published on 23 May 2020 04:51

This is a working example of the authorbox.

For further information and how to edit this on your own page, please consult the Sideboxes subsection.

To create this box, paste the following div inside your authorbox:

[[div class="flavourText"]]
Text
[[/div]]

I do not recommend placing any other div inside your authorbox.

whoever gave me the power to edit CSS made a grave mistake

Flopstyle CSS

Sigma-9 Themes » Flopstyle CSS

Rating:

rating: +45+x

Rating w/ Info Pane:

rating: +45+x

Example Formatting

What Is This?


This is a theme style created by Lt FlopsLt Flops for use in her articles.

It is an aesthetic improvement over Sigma-9 (the Wiki's main theme) and exists so that it can be easily updated, independent of the pages that use it. Expect the CSS to change over time.

Please, only use this if you understand what you're doing.

This theme is incompatible with Black Highlighter. This theme supplies no improvement over Black Highlighter. If your page uses Black Highlighter, do not import this theme, or it will introduce new errors.


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-9 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:

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

Centered Header Sigma-9


To use this component, please paste the following syntax after Flopstyle. If your page uses another custom Sigma-9 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 a built-in component that comes in two types:

  1. authorbox
  2. sidebox

Each type has its own usage instructions.

Note: The authorbox does not display on screens of width=1079px and smaller, which includes mobile screens. The sidebox collapses into the page edge on screens of width=1079px and smaller, and on those screens, can be accessed by tapping your finger/hovering your cursor on it.

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 appears on every page that uses Flopstyle. 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 reference, this is the code that creates the authorbox:

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

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

|| Optional Flavour 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 those fields will 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 flavour text tailored to your page, such as a note to readers.

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

Alternative 2: If you wish, you can choose to have authorbox displayed on the right side of the page. If you would like this, paste this into a CSS module on your page:

.authorbox{
right: unset;
left: 103.5%;
}

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


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.



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

Misc. Changeable Portions


If necessary, you may 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

body{ /* -- Recolour according to Site Theme -- */
--barColour: bar_colour;
}
#u-author_block{
display: none;
}
.translation_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;
}


Flops' Personal To-Do List (Please Ignore)


  1. Defeat the nefarious forces of Skeuomorphism. [COMPLETED]
  2. Update theme page layout. [COMPLETED]
  3. Finish combing through all my articles for CSS I can add to Flopstyle.
    • “Related Articles” box. [COMPLETED]
    • “Hazard Warning” box.
  4. Finish updating all my articles with Flopstyle.

Source Code

/* 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: +45+x

What this is

A bunch of miscellaneous CSS 'improvements' that I, CroquemboucheCroquembouche, use on a bunch of pages because I think it makes them easier to deal with.

The changes this component makes are bunch of really trivial modifications to ease the writing experience and to make documenting components/themes a bit easier (which I do a lot). It doesn't change anything about the page visually for the reader — the changes are for the writer.

I wouldn't expect translations of articles that use this component to also use this component, unless the translator likes it and would want to use it anyway.

This component probably won't conflict with other components or themes, and even if it does, it probably won't matter too much.

Usage

On any wiki:

[[include :scp-wiki:component:croqstyle]]

This component is designed to be used on other components. When using on another component, be sure to add this inside the component's [[iftags]] block, so that users of your component are not forced into also using Croqstyle.

Related components

Other personal styling components (which change just a couple things):

Personal styling themes (which are visual overhauls):

CSS changes

Reasonably-sized footnotes

Stops footnotes from being a million miles wide, so that you can actually read them.

.hovertip { max-width: 400px; }

Monospace edit/code

Makes the edit textbox monospace, and also changes all monospace text to Fira Code, the obviously superior monospace font.

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');
 
:root { --mono-font: "Fira Code", Cousine, monospace; }
#edit-page-textarea, .code pre, .code p, .code, tt, .page-source { font-family: var(--mono-font); }
.code pre * { white-space: pre; }
.code *, .pre * { font-feature-settings: unset; }

Teletype backgrounds

Adds a light grey background to <tt> elements ({{text}}), so code snippets stand out more.

tt {
  background-color: var(--swatch-something-bhl-idk-will-fix-later, #f4f4f4);
  font-size: 85%;
  padding: 0.2em 0.4em;
  margin: 0;
  border-radius: 6px;
}

No more bigfaces

Stops big pictures from appearing when you hover over someone's avatar image, because they're stupid and really annoying and you can just click on them if you want to see the big version.

.avatar-hover { display: none !important; }

Breaky breaky

Any text inside a div with class nobreak has line-wrapping happen between every letter.

.nobreak { word-break: break-all; }

Code colours

Add my terminal's code colours as variables. Maybe I'll change this to a more common terminal theme like Monokai or something at some point, but for now it's just my personal theme, which is derived from Tomorrow Night Eighties.

Also, adding the .terminal class to a fake code block as [[div class="code terminal"]] gives it a sort of pseudo-terminal look with a dark background. Doesn't work with [[code]], because Wikidot inserts a bunch of syntax highlighting that you can't change yourself without a bunch of CSS. Use it for non-[[code]] code snippets only.

Quick tool to colourise a 'standard' Wikidot component usage example with the above vars: link

:root {
  --c-bg: #393939;
  --c-syntax: #e0e0e0;
  --c-comment: #999999;
  --c-error: #f2777a;
  --c-value: #f99157;
  --c-symbol: #ffcc66;
  --c-string: #99cc99;
  --c-operator: #66cccc;
  --c-builtin: #70a7df;
  --c-keyword: #cc99cc;
}
 
.terminal, .terminal > .code {
  color: var(--c-syntax);
  background: var(--c-bg);
  border: 0.4rem solid var(--c-comment);
  border-radius: 1rem;
}

Debug mode

Draw lines around anything inside .debug-mode. The colour of the lines is red but defers to CSS variable --debug-colour.

You can also add div.debug-info.over and div.debug-info.under inside an element to annotate the debug boxes — though you'll need to make sure to leave enough vertical space that the annotation doesn't overlap the thing above or below it.

…like this!

.debug-mode, .debug-mode *, .debug-mode *::before, .debug-mode *::after {
  outline: 1px solid var(--debug-colour, red);
  position: relative;
}
.debug-info {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Fira Code', monospace;
  font-size: 1rem;
  white-space: nowrap;
}
.debug-info.over { top: -2.5rem; }
.debug-info.under { bottom: -2.5rem; }
.debug-info p { margin: 0; }
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License