BASALT Theme




≡

BASALTLOGO.png

BASALT Theme

rating: +91+–x


BASALT THEME

VERSION 1.1.5

● WHAT IS THIS?

BASALT is an aesthetic theme, tied to no canon, series, or GoI, developed by AzamoAzamo and Placeholder McDPlaceholder McD as a fork of EstrellaYoshteEstrellaYoshte's Paperstack Theme.

Much like Black Highlighter, BASALT overhauls a large amount of the site's layout, and changes many UI elements typically glossed over by most themes in an effort to increase productivity and user accessibility. It also looks cool.

To use BASALT, simply paste the following code into your article:

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

● THEME SETTINGS

Theme Settings, sometimes called Variables, are extra strings of text which users may add to the BASALT include module to opt in or out of certain features.

In order to apply a Setting, insert one of the examples listed below after the main include, but before the two brackets at the end, like so:

[[include :scp-wiki:theme:basalt themesetting=a]]

Theme Settings can be easily combined together. To use multiple of them at once, follow the below formatting:

[[include :scp-wiki:theme:basalt firstthemesetting=a|secondthemesetting=a|thirdthemesetting=a]]

LIST OF THEME SETTINGS (AS OF VERSION 1.0)

hidetitle=a

 Removes page title.

acsanimation=a

 Disables the ACS Animation component, which is enabled by default.

darkmode=a

 Enables Dark Mode. (See: ONYX (Dark Mode))

redmode=a

 Enables Red Mode. Dark Mode is REQUIRED for this to function properly. (See: GARNET (Red Mode))

darksidebar=a

 Applies the Dark Mode sidebar styling to Light Mode articles.

● CUSTOMIZATION

CHANGE TITLE/SUBTITLE/LOGO

If you would like to change the title, subtitle, and/or logo displayed on the header, use the following code to do so:

:root {
--logo: url(<image link here>);
--title: "<title text here>";
--subtitle: "<subtitle text here>";
}

It is recommended to keep the --title property at about the same length as the default text (or shorter than it), to avoid encountering display issues on mobile devices.

By default, the logo and text shown on the sidebar matches that of the header. If you would like to change this, use the following code:

:root {
--sidelogo: url(<image link here>);
--sidesubtitle: "<text here>";
}

ONYX (DARK MODE)

BASALT_DARKMODE.png

ONYX

To enable Dark Mode, use the following Theme Setting, as detailed previously:

[[include :scp-wiki:theme:basalt darkmode=a]]

GARNET (RED MODE)

BASALT_APOLLYON.png

GARNET

To enable Red Mode, use the following Theme Setting, as detailed previously:

[[include :scp-wiki:theme:basalt darkmode=a|redmode=a]]

● INCLUDED WITH BASALT

COMPONENTS

BASALT comes pre-packaged with several community-made components:

…And makes some visual changes to these ones, should you include them:

THEMES

BASALT steals borrows elements from:

EXAMPLES


basalt_logotype_black.png

Image block

A horizontal rule can be created with 4 hyphens "----" and extends across the whole page if it's not placed inside anything (eg a blockquote). The lines separating sections of this document are horizontal rules.

A link you have likely visited

Titles can be created by putting between one and six plus "+" symbols at the start of each line.

+ Titles

This is a Big Text span. Use [[span class="bigtext"]] to create these.

This is a Special Text span. Use [[span class="st"]] to create these.
Special Text spans change color when placed inside colored table divs, as shown below. This is for you, Placeholder.

Why was the shovel so special?

Because it was a groundbreaking invention.


This is a blockquote, created by putting "> " at the start of each line.
More text

That's a horizontal rule

Nested blockquotes

This is a regular table
Text here

Tables are colorable by wrapping them in special divs. Image blocks and Special Text spans which are wrapped in these divs will also change color accordingly.

[[div class="table1"]]

This is a green table
Text here

[[div class="table2"]]

This is a blue table
Text here

[[div class="table3"]]

This is a yellow table
Text here

[[div class="table4"]]

This is an orange table
Text here

[[div class="table5"]]

This is a red table
Text here

[[div class="table6"]]

This is a purple table
Text here

You can also use the following div to create broken tables.

[[div class="tableb"]]

This is a broken table
Text here

This is a document div. Use [[div class="document"]] to create these. It is recommended not to enclose these inside other divs.

This is a dark document div. Use [[div class="darkdocument"]] to create these. It is recommended not to enclose these inside other divs.

This is a RAISA memo div. Use [[div class="raisa_memo"]] to create these.

+ Show extra memo/notice divs

This is a decorative div. Use [[div class="notation"]] to create these.

This is another decorative div. Use [[div class="modal"]] to create these.

This is slimmer modal div! Use [[div class="smallmodal"]] to create these.

This is a third decorative div! Use [[div class="jotting"]] to create these.

This is a fourth decorative div! Use [[div class="transcript"]] to create these.

This is a fifth decorative div! Use [[div class="papernote"]] to create these.

The body font is Roboto.
The header and title font is Work Sans.
The monospace font is Fira Code.


+ Show source code
Footnotes

‡ Licensing / Citation
theme
page revision: 120, last edited: 26 Jul 2021 17:02
Edit Rate (+91) Tags Discuss (16) History Files Print Site tools + Options
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License