<metaname="description"content="Themes ENiGMA½ comes with an advanced theming system allowing system operators to highly customize the look and feel of their boards. A given installation can have as many themes as you like for your users to choose from."/>
<metaproperty="og:description"content="Themes ENiGMA½ comes with an advanced theming system allowing system operators to highly customize the look and feel of their boards. A given installation can have as many themes as you like for your users to choose from."/>
{"publisher":{"@type":"Organization","logo":{"@type":"ImageObject","url":"/enigma-bbs/assets/images/enigma-logo.png"}},"description":"Themes ENiGMA½ comes with an advanced theming system allowing system operators to highly customize the look and feel of their boards. A given installation can have as many themes as you like for your users to choose from.","url":"/enigma-bbs/art/themes.html","@type":"BlogPosting","headline":"Themes","dateModified":"2022-06-10T23:29:26+00:00","datePublished":"2022-06-10T23:29:26+00:00","mainEntityOfPage":{"@type":"WebPage","@id":"/enigma-bbs/art/themes.html"},"@context":"https://schema.org"}</script>
<p>ENiGMA½ comes with an advanced theming system allowing system operators to highly customize the look and feel of their boards. A given installation can have as many themes as you like for your users to choose from.</p>
<p>Themes live in <codeclass="language-plaintext highlighter-rouge">art/themes/</code>. Each theme (and thus it’s <em>theme ID</em>) is a directory within the <codeclass="language-plaintext highlighter-rouge">themes</code> directory. The theme itself is simply a collection of art files, and a <codeclass="language-plaintext highlighter-rouge">theme.hjson</code> file that further defines layout, colors & formatting, etc.</p>
<p>ENiGMA½ comes with a default theme by <ahref="http://blocktronics.org/tag/luciano-ayres/">Luciano Ayres</a> of <ahref="http://blocktronics.org/">Blocktronics</a> called Mystery Skull. This theme is in <codeclass="language-plaintext highlighter-rouge">art/themes/luciano_blocktronics</code>, and thus it’s <em>theme ID</em> is <codeclass="language-plaintext highlighter-rouge">luciano_blocktronics</code>.</p>
<h2id="art">Art</h2>
<p>For information on art files, see <ahref="/enigma-bbs/art/general.html">General Art Information</a>. In general, to theme a piece of art, create a version of it in your themes directory.</p>
<p><imgclass="emoji"title=":memo:"alt=":memo:"src="https://github.githubassets.com/images/icons/emoji/unicode/1f4dd.png"height="20"width="20"> Remember that by default, the system will allow for randomly selecting art (in one of the directories mentioned above) by numbering it: <codeclass="language-plaintext highlighter-rouge">FOO1.ANS</code>, <codeclass="language-plaintext highlighter-rouge">FOO2.ANS</code>, etc.!</p>
<h2id="theme-sections">Theme Sections</h2>
<p>Themes are some important sections to be aware of:</p>
<td>Boolean of enabled state. If set to <codeclass="language-plaintext highlighter-rouge">false</code>, this theme will not be available to your users. If a user currently has this theme selected, the system default will be selected for them at next login.</td>
<td>Default values to use when this theme is active. These values override system defaults, but can still be overridden themselves in specific areas of your theme.</td>
<td>The bulk of what you theme in the system will be here. Any menu (that is, anything you find in <codeclass="language-plaintext highlighter-rouge">menu.hjson</code>) can be tweaked.</td>
<td>Similar to <codeclass="language-plaintext highlighter-rouge">menus</code>, this section themes <codeclass="language-plaintext highlighter-rouge">prompts</code>.</td>
<td>Sets the <ahref="https://momentjs.com/docs/#/displaying/">moment.js</a> style <codeclass="language-plaintext highlighter-rouge">short</code> and/or <codeclass="language-plaintext highlighter-rouge">long</code> format for dates.</td>
<td>Sets the <ahref="https://momentjs.com/docs/#/displaying/">moment.js</a> style <codeclass="language-plaintext highlighter-rouge">short</code> and/or <codeclass="language-plaintext highlighter-rouge">long</code> format for times.</td>
<td>Sets the <ahref="https://momentjs.com/docs/#/displaying/">moment.js</a> style <codeclass="language-plaintext highlighter-rouge">short</code> and/or <codeclass="language-plaintext highlighter-rouge">long</code> format for date/time combinations.</td>
</tr>
</tbody>
</table>
<p>Example:</p>
<pre><codeclass="language-hjson">defaults: {
dateTimeFormat: {
short: MMM Do h:mm a
}
}
</code></pre>
<h4id="menus-block">Menus Block</h4>
<p>Each <em>key</em> in the <codeclass="language-plaintext highlighter-rouge">menus</code> block matches up with a key found in your <codeclass="language-plaintext highlighter-rouge">menu.hjson</code>. For example, consider a <codeclass="language-plaintext highlighter-rouge">matrix</code> menu defined in <codeclass="language-plaintext highlighter-rouge">menu.hjson</code>. In addition to perhaps providing a <codeclass="language-plaintext highlighter-rouge">MATRIX.ANS</code> in your themes directory, you can also theme other parts of the menu via a <codeclass="language-plaintext highlighter-rouge">matrix</code> entry in <codeclass="language-plaintext highlighter-rouge">theme.hjson</code>.</p>
<p>Major areas to override/theme:</p>
<ul>
<li>
<codeclass="language-plaintext highlighter-rouge">config</code>: Override and/or provide additional theme information over that found in the <codeclass="language-plaintext highlighter-rouge">menu.hjson</code>’s entry. Common entries here are for further overriding date/time formats, and custom range info formats (<codeclass="language-plaintext highlighter-rouge"><someFormName>InfoFormat<num></code>). See Entry Formatting in <ahref="/enigma-bbs/art/mci.html">MCI Codes</a> and Custom Range Info Formatting below.</li>
<li>
<codeclass="language-plaintext highlighter-rouge">mci</code>: Set per-MCI code properties such as <codeclass="language-plaintext highlighter-rouge">height</code>, <codeclass="language-plaintext highlighter-rouge">width</code>, text styles, etc. See <ahref="/enigma-bbs/art/mci.html">MCI Codes</a> for a more information.</li>
</ul>
<p>Two formats for <codeclass="language-plaintext highlighter-rouge">mci</code> blocks are allowed:</p>
<ul>
<li>Shorthand if only a single/first form is needed.</li>
<li>Verbose where a form ID(s) are supplied (required if multiple forms are used)</li>
<h5id="custom-range-info-formatting">Custom Range Info Formatting</h5>
<p>Many modules support “custom range” MCI items. These are MCI codes that are left to the user to define using a format object specific to the module. For example, consider the <codeclass="language-plaintext highlighter-rouge">msg_area_list</code> module: This module sets MCI codes 10+ (<codeclass="language-plaintext highlighter-rouge">%TL10</code>, <codeclass="language-plaintext highlighter-rouge">%TL11</code>, etc.) as “custom range”. When theming you can place these MCI codes in your artwork then define the format in <codeclass="language-plaintext highlighter-rouge">theme.hjson</code>:</p>
<p><imgclass="emoji"title=":warning:"alt=":warning:"src="https://github.githubassets.com/images/icons/emoji/unicode/26a0.png"height="20"width="20"><strong><em>IMPORTANT!</em></strong> Do not make any customizations to the included `luciano_blocktronics’ theme. Instead, create your own and make changes to that instead:</p>
<ol>
<li>Copy <codeclass="language-plaintext highlighter-rouge">/art/themes/luciano_blocktronics</code> to <codeclass="language-plaintext highlighter-rouge">art/themes/your_board_theme</code>
</li>
<li>Update the <codeclass="language-plaintext highlighter-rouge">info</code> block at the top of the theme.hjson file:
<pre><codeclass="language-hjson">info: {
name: Awesome Theme
author: Cool Artist
group: Sick Group
enabled: true // default
}
</code></pre>
</li>
<li>If desired, you may make this the default system theme in <codeclass="language-plaintext highlighter-rouge">config.hjson</code> via <codeclass="language-plaintext highlighter-rouge">theme.default</code>. <codeclass="language-plaintext highlighter-rouge">theme.preLogin</code> may be set if you want this theme used for pre-authenticated users. Both of these values also accept <codeclass="language-plaintext highlighter-rouge">*</code> if you want the system to randomly pick.
<pre><codeclass="language-hjson">theme: {
default: your_board_theme
preLogin: *
}
</code></pre>
</li>
</ol>
<h2id="theming-example">Theming Example</h2>
<p>Let’s run through an example!</p>
<p>Consider the following <codeclass="language-plaintext highlighter-rouge">menu.hjson</code> entry:</p>
<p>With a file of <codeclass="language-plaintext highlighter-rouge">FANCY.ANS</code> in <codeclass="language-plaintext highlighter-rouge">art/themes/fancy_theme</code> containing the following MCI codes:</p>
<ul>
<li>TL1 (Generic text label)</li>
<li>BN2 (Predefined: Board Name)</li>
</ul>
<p>An entry in your <codeclass="language-plaintext highlighter-rouge">theme.hjson</code> could look like this:</p>
