Basic installation

Step 1: Prerequisites

Make sure you read the Description so you know what you are embarking on.

Step 2: Installation

Go to your branch's theme page component:theme
Make a backup of the page's source code to a text file on your computer
Delete its content (not the page itself, just the content)
- Name the edit something like "Switching to the Common Theme :D" so in case things go sideways you can return to that revision without a long search.
Replace it with the code below
- Change YOURWIKI in the second import-line with your wiki's URL prefix
- The credits are not required but it is a matter of courtesy to put them in
Below the credits, add your own branches' edits if you have any
- If you have made many edits to your theme, you may wish to test this before you start
- It is advised to have someone who knows CSS look over your edits and harmonize them with the Common Theme, e.g. by using its variables
Activate the optional features and Extensions that you like.

The code

[[code type="css"]]
@import url('https://grombald.github.io/Common-Theme/css/min/Sigma-9-Common-Theme-1.3.min.css');
@import url('http://YOURWIKI.wdfiles.com/local--code/credit:style/1');
 
 /*
    SCP Sigma 9 - Common Theme 1.3
    [2021 Wikidot Theme - CC BY-SA 3.0]
    Based on the SCP Sigma 9 theme by Aelanna, Crayne, Dr Devan, anqxyr, DrMagnus and psdnbluesoul
    Common Theme by Dr_Grom
    https://github.com/Grombald/Common-Theme
    
    Extensions:
    - Font Awesome 4.3.0 by @davegandy under SIL OFL 1.1 (Font) and MIT License (CSS)
    - Support for Asian languages by Nanimono Demonai
    - Interwiki-module by Resure
    - Credit-module by C-take, physicslike, sinazugawa Nanimono Demonai, improved by Dr Devan and Boyu12, and adapted Dr_Grom
    - Colmod by Boyu12
    - Dark Mode switch by Vizlox
    - SVGs url-ified with 7happy7's http://smlt.wikidot.com/7happy7:svg-replace
*/
 
[[/code]]

The 1.3 in the first import-line is the version number. This will be incremented with a new release, or get a subversion with release of a hotfix. Look in the Readme to see the current version number, in case this guide have not been updated after a new release!

Autoupdating

Not advised if you have many customizations or strong use of the Black Highlighter Theme in your wiki, as you will not get to test changes before they are applied, and the BHL compatibilizer is updated with a lower priority than the rest of the theme.
If you are sure, replace the first import-line in the above code with one of the following:

Stable build: Always loads the last major release.

@import url('https://grombald.github.io/Common-Theme/css/min/Sigma-9-Common-Theme-STABLE.css');

Latest build: Loads the latest stable release, plus the current WIP version of the next release. May bring new developments earlier, but may also fuck up your wiki.

@import url('https://grombald.github.io/Common-Theme/css/min/Sigma-9-Common-Theme-LATEST.css');

Step 3: Edits to your sidebar

Fixing the mobile sidebar

This is not optional. Your mobile sidebar won't work properly without this fix. Make sure you follow this instructions precisely. The correct placement of the added lines is crucial!

Go to the page containing your sidebar (usually nav:side).
Find the first line [[div class="side-block"]] from the top.
- Above it add the line [[div class="side-bar-container"]]
Find the line [[a href="#" class="close-menu"]] at the bottom.
- Above it add the line [[/div]]

Should look somewhat like this:

[[div class="side-bar-container"]]
[[div class="side-block"]]

[...]

[[/div]]

[[a href="#" class="close-menu"]]
[[image black.png style="z-index:-1; opacity: 0.3;"]]
[[/a]]

Switch to vector icons

While not crucial, it is strongly recommended to apply this modification to use vector images as icons in your sidebar instead of PNG images. Vector images are sharp and crisp in every resolution and look cleaner, also they may reduce loading lag. As Wikidot ist too old to support vector graphics properly we have to go through applying them with CSS.

Go to your nav:side page.
In front of each menu item is an embedded image. Take the image's name with out the .png
Insert the name in the class declaration, separated by a space.
Remove the image.

So this:

[[div class="menu-item"]]
[[image main.png]][[[joke-scps|Witz-SCPs]]]
[[/div]]

Becomes this:

[[div class="menu-item main"]]
[[[joke-scps|Witz-SCPs]]]
[[/div]]

If you want to keep certain images or use custom images, you can use both without problem. Just don't add an icon class to the respective item then. You can also create own classes in your theme if you like.

Switch to color classes

Some branches use colored sidebar boxes. For better flexibilty it is strongly advised to switch from styling the box directly in the nav:side article, to use color classes.

Go to your nav:side page.
Locate the first line of each respective box.
Remove the whole style="..." expression.
Add the desired color (red, green, blue or yellow) to the boxes' classes.

So for a blue box, this:

[[div class="side-block" style="background-color: #e5e5ff;"]]

Becomes this:

[[div class="side-block blue"]]

Unify social media icon size

Instead of setting the size of each social media icon separately, use a CSS variable to do so. The standard icon size is 30px, you can change this via variables.

Go to your nav:side page.
Locate the social media block
Remove the following expression from each icon's code (in this example with 30px):
- style="width:30px; height:30px;"
Remove this from above each icon:

[[div class="menu-item"]]
[[=]]

Remove this from below each icon:

[[/=]]
[[/div]]

Add the class side-links To the Block's class. It should look somewhat like this afterwards (note that this example is a blue box):

[[div class="side-block side-links blue"]]
[[image discord_icon.png link="http://scp-wiki-de.wikidot.com/chat" title="Chat"]][[image Insta-Icon.png link="https://www.instagram.com/scp_wiki_de/" title="Instagram"]][[image http://scpsandboxde.wdfiles.com/local--files/component%3Atheme/logo.png link="http://scpsandboxde.wikidot.com/" title="Sandbox"]]
[[/div]]

There shall be no line breaks and no spaces between the icons.

Step 4: Updating your Sandbox Theme

Your Sandbox should have the exact same features that your main Wiki has, so users can try their code properly. Therefore you need to import your theme, then make some adjustments like another logo and header background.

Repeat Step 2 and 3 of this guide in your Sandbox, with the exception to insert the code below into your Sandbox's component:theme page.
Replace YOURWIKI in the first import-line with your wiki's URL prefix
Add any credits and further customizations below the import lines.
- You do not need to repeat the customizations of your main Wiki's theme here, as you import them in the first line.

[[code type="css"]]
@import url('http://YOUR-WIKI.wdfiles.com/local--code/component:theme/1');
@import url('https://grombald.github.io/Common-Theme/css/min/Sigma-9-Common-Sandbox-Theme-1.1.min.css');
[[/code]]

Step 5: After installing

Check if everything works correctly. If not, complain to Grom. Seriously, tell me so I can fix it! :D
Have someone who knows CSS harmonize the several custom themes on your wiki to the CT
Check the avialable optional features and extensions if you haven't already.
Read all pages of this wiki! All of them!
Tell Grom you installed the CT! Then you will be asked about your thoughts for new releases, and if you want you will be pinged on Discord when there are new releases.

Step 6: Updating

If there is a new release, you are going to be notified about what to change the import-link to. Just change the import-link in your common:theme page accordingly. Done.
If you subscribe to the stable or latest build, you do not have to do anything but check for bugs after a new release.
- Unless an update requires you to do more changes to your wiki, like updating from 1.2 to 1.3.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly