Optional features - Grombald/Common-Theme GitHub Wiki

What is an optional feature?

An optional feature is a feature that is supported by the Common Theme, but needs to be activated in other places. You do not per se need any of them, but some are quite practical. Preview images will be added to this guide soon™.

You can preview and try out all optional features on the Common Theme Demo page.

Topbar mods

Remember to make these changes to all your topbar variants, Desktop and mobile.

All these changes are made to your topbar article (usually nav:top)

Homebutton

  • Add (preferably as the first menu item) to your topbar:
    • [a href="/" title="Frontpage" class="homebutton"](/Grombald/Common-Theme/wiki/a-href="/"-title="Frontpage"-class="homebutton")x[/a](/Grombald/Common-Theme/wiki//a)
  • Translate the term "Frontpage"

Nested topbar

  • Use the example code below to add nested menus to your normal topbar structure
  • ► is a symbol of your choice; ▼ is suggested for the mobile topbar variants, as the nested menus open to the bottom instead of the right.
  • It is recommended to not nest the right-most menu(s).
  • More nesting levels are technically possible, but may require adjustments.
* Top-Level shown directly in the topbar
 * [[Links in the normal topbar](/Grombald/Common-Theme/wiki/[Links-in-the-normal-topbar)]
 * Nested menu title[span class="topbar_arrow"](/Grombald/Common-Theme/wiki/span-class="topbar_arrow")►[/span](/Grombald/Common-Theme/wiki//span)
  * [[Nested menu link](/Grombald/Common-Theme/wiki/[Nested-menu-link)]
  * [[Notice this level has two spaces in front of it](/Grombald/Common-Theme/wiki/[Notice-this-level-has-two-spaces-in-front-of-it)]
 * Another nested menu title[span class="topbar_arrow"](/Grombald/Common-Theme/wiki/span-class="topbar_arrow")►[/span](/Grombald/Common-Theme/wiki//span)
  * [[Nested menu link](/Grombald/Common-Theme/wiki/[Nested-menu-link)]

Images in Topbar

  • Add images to the beginning of your topbar items as in the example code below.
  • Scale the images properly
* Branches
 * [image http://scp-wiki-de.wdfiles.com/local--files/main/int.png](/Grombald/Common-Theme/wiki/image-http://scp-wiki-de.wdfiles.com/local--files/main/int.png) [http://scp-int.wikidot.com Translation Archive (INT)]
 * [image http://scp-wiki-de.wdfiles.com/local--files/main/us.png](/Grombald/Common-Theme/wiki/image-http://scp-wiki-de.wdfiles.com/local--files/main/us.png) [http://www.scp-wiki.net English (EN)]

More topbar variants

Adds more device-width-depending variants of the topbar. Useful if your topbar is too wide for some resolutions in the standard settings.

Changes to your topbar: Basically just copy one of your topbar variants and arrange it as you want. You need to change its class to an individual one though, as in the following example code used by the German branch for a topbar variant for very narrow screens. Here the class is called mini-top-bar but you can choose whatever class name you want (that is not taken yet):

[div class="mini-top-bar"](/Grombald/Common-Theme/wiki/div-class="mini-top-bar")
* Menu items
* ...
[/div](/Grombald/Common-Theme/wiki//div)

Changes to your theme: Change your component:theme in the section for your local edits as follows.

As this feature is very flexible, you will have to set it up more thoroughly as other features. In this example of the German branch, we want our mini-top-bar to be displayed on resolutions below 412px as it contains even fewer main menu items than the mobile topbar. Behold:

#top-bar .mini-top-bar {
    display: none;
    position: absolute;
    right: 1em;
    bottom: 0px;
    z-index: 0;
}
#top-bar div.mini-top-bar ul li ul li ul {
    left: 50px;
    top: 19px;
}
@media (max-width: 412px) {
    #top-bar .top-bar, #top-bar .mobile-top-bar {
        display: none;
    }
    #top-bar .mini-top-bar {
        display: block;
    }
}

The first two sections set up the new topbar and prepare it for use. The line starting with "@media" defines the display width to display the new variant.

  • Replace all mentions of mini-top-bar with your own classname (unless you want to use DE's mini-top-bar as well). The "." before the classname is important in CSS.
  • Adjust the max-width: 412px as you like. Use this syntax to select the desired width:
    • @media (max-width: 412px) displays the variant for all displays with a width up to 412 px.
    • @media (min-width: 420px) and (max-width: 760px) displays the variant for all displays with a width between 420px and 760px
    • @media (min-width: 760px) displays the variant for all displays with a width of 760px and above.
  • You can add more than one additional topbar variants, but explaining that would be a bit much for this article. Rather ask how to do that^^

Sidebar mods

Collapsibles in the sidebar

Basically the same as always.

  • Set the argument folded="yes" to load the collapsible closed.
  • And folded="no" to load it opened.
  • Shall not contain or be contained in [div class="heading"](/Grombald/Common-Theme/wiki/div-class="heading") elements.

Use code like this to create a collapsible menu:

[collapsible show="Collapsible title" hide="Collapsible title" folded="yes"](/Grombald/Common-Theme/wiki/collapsible-show="Collapsible-title"-hide="Collapsible-title"-folded="yes")
[div class="menu-item series"](/Grombald/Common-Theme/wiki/div-class="menu-item-series")
[[Link](/Grombald/Common-Theme/wiki/[Link)]
[/div](/Grombald/Common-Theme/wiki//div)
...
[/collapsible](/Grombald/Common-Theme/wiki//collapsible)
  • Go to your component:theme
  • Add this code to the code-block:
#side-bar .heading {
    font-size: 9pt;
}

Haven't found a way to automatize this yet.

Colmod in the sidebar

Works exactly as always:

[include component:coltop show=Colmod title](/Grombald/Common-Theme/wiki/hide=Colmod-title|folded=true)
[div class="menu-item "](/Grombald/Common-Theme/wiki/div-class="menu-item-")
[[Link](/Grombald/Common-Theme/wiki/[Link)]
[/div](/Grombald/Common-Theme/wiki//div)
...
[include component:coltop show=Show more...](/Grombald/Common-Theme/wiki/hide=Show-more...)
[div class="menu-item "](/Grombald/Common-Theme/wiki/div-class="menu-item-")
[[Link](/Grombald/Common-Theme/wiki/[Link)]
[/div](/Grombald/Common-Theme/wiki//div)
...
[include component:colend ](/Grombald/Common-Theme/wiki/nohide=true)
[include component:colend ](/Grombald/Common-Theme/wiki/nohide=true)