Update 1.3 to 1.4 - Grombald/Common-Theme GitHub Wiki

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"](/Grombald/Common-Theme/wiki/div-class="top-bar")

Becomes this:

[div class="top-bar common"](/Grombald/Common-Theme/wiki/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"](/Grombald/Common-Theme/wiki/div-class="open-menu")
[#side-bar ≡]
[/div](/Grombald/Common-Theme/wiki//div)

becomes this:

[div_ class="open-menu masked"](/Grombald/Common-Theme/wiki/div_-class="open-menu-masked")
[#side-bar ≡]
[/div](/Grombald/Common-Theme/wiki//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"](/Grombald/Common-Theme/wiki/a-href="/"-title="Frontpage"-class="homebutton")x[/a](/Grombald/Common-Theme/wiki//a)

becomes this:

* [a href="/" title="Frontpage" class="homebutton masked"](/Grombald/Common-Theme/wiki/a-href="/"-title="Frontpage"-class="homebutton-masked")[span class="homebutton-mask"](/Grombald/Common-Theme/wiki/span-class="homebutton-mask")x[/span](/Grombald/Common-Theme/wiki//span)[/a](/Grombald/Common-Theme/wiki//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"](/Grombald/Common-Theme/wiki/div-class="side-bar-container")

Becomes this:

[div class="side-bar-container common"](/Grombald/Common-Theme/wiki/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"](/Grombald/Common-Theme/wiki/div-class="menu-item-scp")
[[scp-series](/Grombald/Common-Theme/wiki/SCP-Series-1)]
[/div](/Grombald/Common-Theme/wiki//div)

[div class="menu-item random"](/Grombald/Common-Theme/wiki/div-class="menu-item-random")
[[random:random-scp](/Grombald/Common-Theme/wiki/Random-SCP)]
[/div](/Grombald/Common-Theme/wiki//div)

[div class="menu-item news"](/Grombald/Common-Theme/wiki/div-class="menu-item-news")
[[News](/Grombald/Common-Theme/wiki/[News)]
[/div](/Grombald/Common-Theme/wiki//div)

[div class="menu-item user"](/Grombald/Common-Theme/wiki/div-class="menu-item-user")
[[members-pages](/Grombald/Common-Theme/wiki/Authors)]
[/div](/Grombald/Common-Theme/wiki//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"](/Grombald/Common-Theme/wiki/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](/Grombald/Common-Theme/wiki//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"](/Grombald/Common-Theme/wiki/ul_-class="ct-inline-theme-switch")
[li class="ct-theme-switch inline-switch"](/Grombald/Common-Theme/wiki/li-class="ct-theme-switch-inline-switch")
[module listPages pagetype="*" category="-nav -forum" limit="1" range="."](/Grombald/Common-Theme/wiki/module-listPages-pagetype="*"-category="-nav--forum"-limit="1"-range=".")
[div_ class="dark-mode"](/Grombald/Common-Theme/wiki/div_-class="dark-mode")
[a href="%%link%%/theme_fullname/theme:ct_dark-testing" class="fa fa-lightbulb-o"](/Grombald/Common-Theme/wiki/a-href="%%link%%/theme_fullname/theme:ct_dark-testing"-class="fa-fa-lightbulb-o")@@@@[/a](/Grombald/Common-Theme/wiki//a)
[/div](/Grombald/Common-Theme/wiki//div)
[div_ class="light-mode"](/Grombald/Common-Theme/wiki/div_-class="light-mode")
[a href="%%link%%/#" class="fa fa-lightbulb-o"](/Grombald/Common-Theme/wiki/a-href="%%link%%/#"-class="fa-fa-lightbulb-o")@@@@[/a](/Grombald/Common-Theme/wiki//a)
[/div](/Grombald/Common-Theme/wiki//div)
[/module](/Grombald/Common-Theme/wiki//module)
[/li](/Grombald/Common-Theme/wiki//li)
[/ul](/Grombald/Common-Theme/wiki//ul)

Round button variant

  • Replace the button's code with this code:
[module css](/Grombald/Common-Theme/wiki/module-css)
#login-status {right: 60px;}
[/module](/Grombald/Common-Theme/wiki//module)
[div_ class="ct-theme-switch"](/Grombald/Common-Theme/wiki/div_-class="ct-theme-switch")
[module listPages pagetype="*" category="-nav -forum" limit="1" range="."](/Grombald/Common-Theme/wiki/module-listPages-pagetype="*"-category="-nav--forum"-limit="1"-range=".")
[div_ class="dark-mode"](/Grombald/Common-Theme/wiki/div_-class="dark-mode")
[a href="%%link%%/theme_fullname/theme:ct-dark-testing" class="fa fa-lightbulb-o"](/Grombald/Common-Theme/wiki/a-href="%%link%%/theme_fullname/theme:ct-dark-testing"-class="fa-fa-lightbulb-o")@@@@[/a](/Grombald/Common-Theme/wiki//a)
[/div](/Grombald/Common-Theme/wiki//div)
[div_ class="light-mode"](/Grombald/Common-Theme/wiki/div_-class="light-mode")
[a href="%%link%%/#" class="fa fa-lightbulb-o"](/Grombald/Common-Theme/wiki/a-href="%%link%%/#"-class="fa-fa-lightbulb-o")@@@@[/a](/Grombald/Common-Theme/wiki//a)
[/div](/Grombald/Common-Theme/wiki//div)
[/module](/Grombald/Common-Theme/wiki//module)
[/div](/Grombald/Common-Theme/wiki//div)