Update 1.3 to 1.4

For instructions how to install the Common Theme see here.

All new features can be seen on the demo page

Update the theme links

• Go to your common:theme
• Replace the import link of the theme with this:

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

Update your Sandbox Theme

• Modiy your Sandbox' component:theme with the following line to import the new version of the Sandbox theme:

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

• Apply the above changes to your Sandbox's sidebar as well

Edits to your topbar

Add compatibility class (required)

• Go to your nav:top page.
• To every topbar variant, add the class common

So this

[[div class="top-bar"]]

Becomes this:

[[div class="top-bar common"]]

Update your mobile-sidebar-button (required)

• Go to your nav:top page.
• Replace the [[div... of your sidebar-button with [[div_...
• While you are at it, add the class masked to make it used a CSS mask (recommended)

So that this:

[[div class="open-menu"]]
[#side-bar ≡]
[[/div]]

becomes this:

[[div_ class="open-menu masked"]]
[#side-bar ≡]
[[/div]]

Use SVG mask on Home-Button

To make your Home-Button be able to change its color it needs to use an SVG mask. A complex process that you can shorten by:

• Go to your nav:top page.
• Add the class masked.
• Put the x in a new span as described below.

So that this

* [[a href="/" title="Frontpage" class="homebutton"]]x[[/a]]

becomes this:

* [[a href="/" title="Frontpage" class="homebutton masked"]][[span class="homebutton-mask"]]x[[/span]][[/a]]

Edits to your sidebar

Add compatibility class (required)

• Go to your nav:side page.
• Add the class common to your side-bar-container

So this

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

Becomes this:

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

Use new side bar icons

There are four new icons for the sidebar: SCP, Random, News, User which can be seen in the demo page. They are used as described in the update to vector icons:

• Go to your nav:side page.
• Add the new icons like in these examples:

[[div class="menu-item scp"]]
[[[scp-series|SCP-Series 1]]]
[[/div]]

[[div class="menu-item random"]]
[[[random:random-scp|Random SCP]]]
[[/div]]

[[div class="menu-item news"]]
[[[News]]]
[[/div]]

[[div class="menu-item user"]]
[[[members-pages|Authors]]]
[[/div]]

Enhanced social media icons

The Common Theme can insert icons to your social media automatically, all you need to do is basically to list the links.

• Go to your nav:side page.
• Add the classes side-links and svg-icons to your social media block plus an optional color class.
• Add a list of links to your social media. No line breaks required, no spaces, no images, like in this example from DE.
• The following are supported: Sandboxes, INT, ULI, Discord, Facebook, Instagram, Twitter, Blogger, DeviantArt, GitHub, Reddit, Steam, Telegram, Tumblr, Twitch and Youtube. If you feel something is missing, please report to Grom.

[[div class="side-block side-links svg-icons blue"]]
[http://scp-wiki-de.wikidot.com/chat Chat][https://www.youtube.com/c/SCPFoundationDE Youtube][https://www.facebook.com/SCPFoundationDeutschland Facebook][https://twitter.com/SCPWikiDE Twitter][https://www.deviantart.com/scpwikide DeviantArt][https://www.instagram.com/scp_wiki_de/ Instagram][https://www.reddit.com/r/SCPWikiDE/ Reddit][http://scpsandboxde.wikidot.com/ Sandbox]
[[/div]]

Update your Dark Mode

These changes are required for the Dark Mode to work in version 1.4

Update your Dark Mode

• Modiy your Wiki's theme:ct-dark with the following line to import the new version of the Dark Mode:

@import url('https://grombald.github.io/Common-Theme/css/min/Common-Theme-Dark-Mode-1.1.min.css');

Update your Sandbox' Dark Mode

• Modiy your Sandbox' theme:ct-dark with the following lines to import the Sandbox version of the Dark Mode:

@import url('https://grombald.github.io/Common-Theme/css/Common-Theme-Dark-Mode-1.1.css');
@import url('https://grombald.github.io/Common-Theme/css/Common-Theme-Dark-Mode-Sandbox-1.0.css'); 

Edits to your topbar

• Go to your nav:top page.

Menu button variant

• Remove the code of the existing menu button.
• Add the follwing code at the end of that menu variant:

[[ul_ class="ct-inline-theme-switch"]]
[[li class="ct-theme-switch inline-switch"]]
[[module listPages pagetype="*" category="-nav -forum" limit="1" range="."]]
[[div_ class="dark-mode"]]
[[a href="%%link%%/theme_fullname/theme:ct_dark-testing" class="fa fa-lightbulb-o"]]@@@@[[/a]]
[[/div]]
[[div_ class="light-mode"]]
[[a href="%%link%%/#" class="fa fa-lightbulb-o"]]@@@@[[/a]]
[[/div]]
[[/module]]
[[/li]]
[[/ul]]

Round button variant

• Replace the button's code with this code:

[[module css]]
#login-status {right: 60px;}
[[/module]]
[[div_ class="ct-theme-switch"]]
[[module listPages pagetype="*" category="-nav -forum" limit="1" range="."]]
[[div_ class="dark-mode"]]
[[a href="%%link%%/theme_fullname/theme:ct-dark-testing" class="fa fa-lightbulb-o"]]@@@@[[/a]]
[[/div]]
[[div_ class="light-mode"]]
[[a href="%%link%%/#" class="fa fa-lightbulb-o"]]@@@@[[/a]]
[[/div]]
[[/module]]
[[/div]]