enigma-bbs/art/themes.html

2539 lines
29 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" sizes="16x16" href="/enigma-bbs/assets/images/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/enigma-bbs/assets/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="32x32" href="/enigma-bbs/assets/images/favicon-32x32.png">
<link rel="stylesheet" href="/enigma-bbs/assets/css/style.css?v=">
<!-- Begin Jekyll SEO tag v2.7.1 -->
<title>Themes | ENiGMA½ BBS Software</title>
<meta name="generator" content="Jekyll v4.2.1" />
<meta property="og:title" content="Themes" />
<meta property="og:locale" content="en_US" />
<meta name="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." />
<meta property="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." />
<meta property="og:site_name" content="ENiGMA½ BBS Software" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2022-04-08T23:03:48+00:00" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="Themes" />
<script type="application/ld+json">
{"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-04-08T23:03:48+00:00","datePublished":"2022-04-08T23:03:48+00:00","mainEntityOfPage":{"@type":"WebPage","@id":"/enigma-bbs/art/themes.html"},"@context":"https://schema.org"}</script>
<!-- End Jekyll SEO tag -->
</head>
<body>
<div id="container">
<div class="sidebar" id="sidebar">
<hr class="mobile-divide">
<div class="container">
<a href="/enigma-bbs/"><img src="/enigma-bbs/assets/images/enigma-logo.png" class="logo" alt="Enigma logo"></a>
</div>
<ul>
<li>Installation</li>
<ul>
<li><a href="/enigma-bbs/installation/installation-methods.html">Installation Methods</a></li>
<li><a href="/enigma-bbs/installation/install-script.html">Install Script</a></li>
<li><a href="/enigma-bbs/installation/docker.html">Docker</a></li>
<li><a href="/enigma-bbs/installation/manual.html">Manual Installation</a></li>
<li>OS / Hardware Specific</li>
<ul>
<li><a href="/enigma-bbs/installation/hardware/rpi.html">Raspberry Pi</a></li>
<li><a href="/enigma-bbs/installation/hardware/windows.html">Installation Under Windows</a></li>
</ul>
<li><a href="/enigma-bbs/installation/network.html">Network Setup</a></li>
<li><a href="/enigma-bbs/installation/testing.html">Testing Your Installation</a></li>
<li><a href="/enigma-bbs/installation/production.html">Production Installation</a></li>
</ul>
<li>Configuration</li>
<ul>
<li><a href="/enigma-bbs/configuration/creating-config.html">Creating Initial Config Files</a></li>
<li><a href="/enigma-bbs/configuration/sysop-setup.html">SysOp Setup</a></li>
<li><a href="/enigma-bbs/configuration/config-files.html">Configuration Files</a></li>
<li><a href="/enigma-bbs/configuration/config-hjson.html">System Configuration</a></li>
<li><a href="/enigma-bbs/configuration/hjson.html">HJSON Config Files</a></li>
<li><a href="/enigma-bbs/configuration/menu-hjson.html">Menu HSJON</a></li>
<li><a href="/enigma-bbs/configuration/directory-structure.html">Directory Structure</a></li>
<li><a href="/enigma-bbs/configuration/external-binaries.html">External Support Binaries</a></li>
<li><a href="/enigma-bbs/configuration/archivers.html">Archivers</a></li>
<li><a href="/enigma-bbs/configuration/file-transfer-protocols.html">File Transfer Protocols</a></li>
<li><a href="/enigma-bbs/configuration/email.html">Email</a></li>
<li><a href="/enigma-bbs/configuration/colour-codes.html">Colour Codes</a></li>
<li><a href="/enigma-bbs/configuration/event-scheduler.html">Event Scheduler</a></li>
<li><a href="/enigma-bbs/configuration/acs.html">Access Condition System (ACS)</a></li>
<li><a href="/enigma-bbs/configuration/security.html">Security</a></li>
</ul>
<li>Miscellaneous</li>
<ul>
<li><a href="/enigma-bbs/misc/user-interrupt.html">User Interruptions</a></li>
</ul>
<li>File Base</li>
<ul>
<li><a href="/enigma-bbs/filebase/index.html">About File Areas</a></li>
<li><a href="/enigma-bbs/filebase/first-file-area.html">Configuring a File Base</a></li>
<li><a href="/enigma-bbs/filebase/acs.html">ACS</a></li>
<li><a href="/enigma-bbs/filebase/uploads.html">Uploads</a></li>
<li><a href="/enigma-bbs/filebase/web-access.html">Web Access</a></li>
<li><a href="/enigma-bbs/filebase/tic-support.html">TIC Support</a></li>
<li><a href="/enigma-bbs/filebase/network-mounts-and-symlinks.html">Network Mounts &amp; Symlinks</a></li>
</ul>
<li>Message Areas</li>
<ul>
<li><a href="/enigma-bbs/messageareas/configuring-a-message-area.html">Message Base</a></li>
<li><a href="/enigma-bbs/messageareas/message-networks.html">Message Networks</a></li>
<li><a href="/enigma-bbs/messageareas/bso-import-export.html">BSO Import / Export</a></li>
<li><a href="/enigma-bbs/messageareas/netmail.html">Netmail</a></li>
<li><a href="/enigma-bbs/messageareas/qwk.html">QWK Support</a></li>
<li><a href="/enigma-bbs/messageareas/ftn.html">FidoNet-Style Networks (FTN)</a></li>
</ul>
<li>Art</li>
<ul>
<li><a href="/enigma-bbs/art/general.html">General Art Information</a></li>
<li class="active-nav">Themes</li>
<li><a href="/enigma-bbs/art/mci.html">MCI Codes</a></li>
<li>Views</li>
<ul>
<li><a href="/enigma-bbs/art/views/button_view.html">Button View</a></li>
<li><a href="/enigma-bbs/art/views/edit_text_view.html">Edit Text View</a></li>
<li><a href="/enigma-bbs/art/views/full_menu_view.html">Full Menu View</a></li>
<li><a href="/enigma-bbs/art/views/horizontal_menu_view.html">Horizontal Menu View</a></li>
<li><a href="/enigma-bbs/art/views/mask_edit_text_view.html">Mask Edit Text View</a></li>
<li><a href="/enigma-bbs/art/views/multi_line_edit_text_view.html">Multi Line Edit Text View</a></li>
<li><a href="/enigma-bbs/art/views/predefined_label_view.html">Predefined Label View</a></li>
<li><a href="/enigma-bbs/art/views/spinner_menu_view.html">Spinner Menu View</a></li>
<li><a href="/enigma-bbs/art/views/text_view.html">Text View</a></li>
<li><a href="/enigma-bbs/art/views/toggle_menu_view.html">Toggle Menu View</a></li>
<li><a href="/enigma-bbs/art/views/vertical_menu_view.html">Vertical Menu View</a></li>
</ul>
</ul>
<li>Servers</li>
<ul>
<li>Login Servers</li>
<ul>
<li><a href="/enigma-bbs/servers/loginservers/telnet.html">Telnet Server</a></li>
<li><a href="/enigma-bbs/servers/loginservers/ssh.html">SSH Server</a></li>
<li><a href="/enigma-bbs/servers/loginservers/websocket.html">Web Socket / Web Interface Server</a></li>
</ul>
<li>Content Servers</li>
<ul>
<li><a href="/enigma-bbs/servers/contentservers/web-server.html">Web Server</a></li>
<li><a href="/enigma-bbs/servers/contentservers/gopher.html">Gopher Server</a></li>
<li><a href="/enigma-bbs/servers/contentservers/nntp.html">NNTP Server</a></li>
</ul>
</ul>
<li>Modding</li>
<ul>
<li><a href="/enigma-bbs/modding/local-doors.html">Local Doors</a></li>
<li><a href="/enigma-bbs/modding/door-servers.html">Door Servers</a></li>
<li><a href="/enigma-bbs/modding/telnet-bridge.html">Telnet Bridge</a></li>
<li><a href="/enigma-bbs/modding/existing-mods.html">Existing Mods</a></li>
<li><a href="/enigma-bbs/modding/file-area-list.html">File Area List</a></li>
<li><a href="/enigma-bbs/modding/last-callers.html">Last Callers</a></li>
<li><a href="/enigma-bbs/modding/whos-online.html">Who's Online</a></li>
<li><a href="/enigma-bbs/modding/user-list.html">User List</a></li>
<li><a href="/enigma-bbs/modding/msg-conf-list.html">Message Conference List</a></li>
<li><a href="/enigma-bbs/modding/msg-area-list.html">Message Area List</a></li>
<li><a href="/enigma-bbs/modding/bbs-list.html">BBS List</a></li>
<li><a href="/enigma-bbs/modding/rumorz.html">Rumorz</a></li>
<li><a href="/enigma-bbs/modding/file-transfer-protocol-select.html">File Transfer Protocol Select</a></li>
<li><a href="/enigma-bbs/modding/onelinerz.html">Onelinerz</a></li>
<li><a href="/enigma-bbs/modding/show-art.html">The Show Art Module</a></li>
<li><a href="/enigma-bbs/modding/file-base-download-manager.html">File Base Download Manager</a></li>
<li><a href="/enigma-bbs/modding/file-base-web-download-manager.html">File Base Web Download Manager</a></li>
<li><a href="/enigma-bbs/modding/set-newscan-date.html">Set Newscan Date Module</a></li>
<li><a href="/enigma-bbs/modding/node-msg.html">Node to Node Messaging</a></li>
<li><a href="/enigma-bbs/modding/top-x.html">TopX</a></li>
<li><a href="/enigma-bbs/modding/user-2fa-otp-config.html">2FA/OTP Config</a></li>
<li><a href="/enigma-bbs/modding/autosig-edit.html">Auto Signature Editor</a></li>
<li><a href="/enigma-bbs/modding/menu-modules.html">Menu Modules</a></li>
</ul>
<li>Administration</li>
<ul>
<li><a href="/enigma-bbs/admin/administration.html">Administration</a></li>
<li><a href="/enigma-bbs/admin/oputil.html">oputil</a></li>
<li><a href="/enigma-bbs/admin/updating.html">Updating</a></li>
</ul>
<li>Troubleshooting</li>
<ul>
<li><a href="/enigma-bbs/troubleshooting/monitoring-logs.html">Monitoring Logs</a></li>
</ul>
</ul>
</div>
<div class="main_area">
<div class="container">
<section id="main_content">
<div class="PageNavigation">
<a class="btn" style="float:left;margin-right: 20px;" href="/enigma-bbs/art/general.html">« General Art Information</a>
<a href="#sidebar" class="btn menu_button">MENU</a>
<a class="btn" style="float: right;margin-left: 20px" href="/enigma-bbs/art/mci.html">MCI Codes »</a>
<br clear="both">
</div>
<div class="page">
<h1 class="page-title">Themes</h1>
<h2 id="themes">Themes</h2>
<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>
<h2 id="general-information">General Information</h2>
<p>Themes live in <code class="language-plaintext highlighter-rouge">art/themes/</code>. Each theme (and thus its <em>theme ID</em>) is a directory within the <code class="language-plaintext highlighter-rouge">themes</code> directory. The theme itself is simply a collection of art files, and a <code class="language-plaintext highlighter-rouge">theme.hjson</code> file that further defines layout, colors &amp; formatting, etc.</p>
<p>ENiGMA½ comes with a default theme by <a href="http://blocktronics.org/tag/luciano-ayres/">Luciano Ayres</a> of <a href="http://blocktronics.org/">Blocktronics</a> called Mystery Skull. This theme is in <code class="language-plaintext highlighter-rouge">art/themes/luciano_blocktronics</code>, and thus its <em>theme ID</em> is <code class="language-plaintext highlighter-rouge">luciano_blocktronics</code>.</p>
<h2 id="art">Art</h2>
<p>For information on art files, see <a href="/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><img class="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: <code class="language-plaintext highlighter-rouge">FOO1.ANS</code>, <code class="language-plaintext highlighter-rouge">FOO2.ANS</code>, etc.!</p>
<h2 id="theme-sections">Theme Sections</h2>
<p>Themes are some important sections to be aware of:</p>
<table>
<thead>
<tr>
<th>Config Item</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="language-plaintext highlighter-rouge">info</code></td>
<td>This section describes the theme.</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">customization</code></td>
<td>The beef!</td>
</tr>
</tbody>
</table>
<h3 id="info-block">Info Block</h3>
<p>The <code class="language-plaintext highlighter-rouge">info</code> configuration block describes the theme itself.</p>
<table>
<thead>
<tr>
<th>Item</th>
<th>Required</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="language-plaintext highlighter-rouge">name</code></td>
<td><img class="emoji" title=":+1:" alt=":+1:" src="https://github.githubassets.com/images/icons/emoji/unicode/1f44d.png" height="20" width="20"></td>
<td>Name of the theme. Be creative!</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">author</code></td>
<td><img class="emoji" title=":+1:" alt=":+1:" src="https://github.githubassets.com/images/icons/emoji/unicode/1f44d.png" height="20" width="20"></td>
<td>Author of the theme/artwork.</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">group</code></td>
<td><img class="emoji" title=":-1:" alt=":-1:" src="https://github.githubassets.com/images/icons/emoji/unicode/1f44e.png" height="20" width="20"></td>
<td>Group/affils of author.</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">enabled</code></td>
<td><img class="emoji" title=":-1:" alt=":-1:" src="https://github.githubassets.com/images/icons/emoji/unicode/1f44e.png" height="20" width="20"></td>
<td>Boolean of enabled state. If set to <code class="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>
</tr>
</tbody>
</table>
<h3 id="customization-block">Customization Block</h3>
<p>The <code class="language-plaintext highlighter-rouge">customization</code> block in is itself broken up into major parts:</p>
<table>
<thead>
<tr>
<th>Item</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="language-plaintext highlighter-rouge">defaults</code></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>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">menus</code></td>
<td>The bulk of what you theme in the system will be here. Any menu (that is, anything you find in <code class="language-plaintext highlighter-rouge">menu.hjson</code>) can be tweaked.</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">prompts</code></td>
<td>Similar to <code class="language-plaintext highlighter-rouge">menus</code>, this section themes <code class="language-plaintext highlighter-rouge">prompts</code>.</td>
</tr>
</tbody>
</table>
<h4 id="defaults">Defaults</h4>
<p>Override system defaults.</p>
<table>
<thead>
<tr>
<th>Item</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="language-plaintext highlighter-rouge">passwordChar</code></td>
<td>Character to display in password fields. Defaults to <code class="language-plaintext highlighter-rouge">*</code>
</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">dateFormat</code></td>
<td>Sets the <a href="https://momentjs.com/docs/#/displaying/">moment.js</a> style <code class="language-plaintext highlighter-rouge">short</code> and/or <code class="language-plaintext highlighter-rouge">long</code> format for dates.</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">timeFormat</code></td>
<td>Sets the <a href="https://momentjs.com/docs/#/displaying/">moment.js</a> style <code class="language-plaintext highlighter-rouge">short</code> and/or <code class="language-plaintext highlighter-rouge">long</code> format for times.</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">dateTimeFormat</code></td>
<td>Sets the <a href="https://momentjs.com/docs/#/displaying/">moment.js</a> style <code class="language-plaintext highlighter-rouge">short</code> and/or <code class="language-plaintext highlighter-rouge">long</code> format for date/time combinations.</td>
</tr>
</tbody>
</table>
<p>Example:</p>
<pre><code class="language-hjson">defaults: {
dateTimeFormat: {
short: MMM Do h:mm a
}
}
</code></pre>
<h4 id="menus-block">Menus Block</h4>
<p>Each <em>key</em> in the <code class="language-plaintext highlighter-rouge">menus</code> block matches up with a key found in your <code class="language-plaintext highlighter-rouge">menu.hjson</code>. For example, consider a <code class="language-plaintext highlighter-rouge">matrix</code> menu defined in <code class="language-plaintext highlighter-rouge">menu.hjson</code>. In addition to perhaps providing a <code class="language-plaintext highlighter-rouge">MATRIX.ANS</code> in your themes directory, you can also theme other parts of the menu via a <code class="language-plaintext highlighter-rouge">matrix</code> entry in <code class="language-plaintext highlighter-rouge">theme.hjson</code>.</p>
<p>Major areas to override/theme:</p>
<ul>
<li>
<code class="language-plaintext highlighter-rouge">config</code>: Override and/or provide additional theme information over that found in the <code class="language-plaintext highlighter-rouge">menu.hjson</code>s entry. Common entries here are for further overriding date/time formats, and custom range info formats (<code class="language-plaintext highlighter-rouge">&lt;someFormName&gt;InfoFormat&lt;num&gt;</code>). See Entry Formatting in <a href="/enigma-bbs/art/mci.html">MCI Codes</a> and Custom Range Info Formatting below.</li>
<li>
<code class="language-plaintext highlighter-rouge">mci</code>: Set per-MCI code properties such as <code class="language-plaintext highlighter-rouge">height</code>, <code class="language-plaintext highlighter-rouge">width</code>, text styles, etc. See <a href="/enigma-bbs/art/mci.html">MCI Codes</a> for a more information.</li>
</ul>
<p>Two formats for <code class="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>
</ul>
<p>Example: Shorthand <code class="language-plaintext highlighter-rouge">mci</code> format:</p>
<pre><code class="language-hjson">matrix: {
mci: {
VM1: {
itemFormat: "|03{text}"
focusItemFormat: "|11{text!styleFirstLower}"
}
}
}
</code></pre>
<p>Example: Verbose <code class="language-plaintext highlighter-rouge">mci</code> with form IDs:</p>
<pre><code class="language-hjson">newUserFeedbackToSysOp: {
0: {
mci: {
TL1: { width: 19, textOverflow: "..." }
ET2: { width: 19, textOverflow: "..." }
ET3: { width: 19, textOverflow: "..." }
}
}
1: {
mci: {
MT1: { height: 14 }
}
}
}
</code></pre>
<h5 id="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 <code class="language-plaintext highlighter-rouge">msg_area_list</code> module: This module sets MCI codes 10+ (<code class="language-plaintext highlighter-rouge">%TL10</code>, <code class="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 <code class="language-plaintext highlighter-rouge">theme.hjson</code>:</p>
<pre><code class="language-hjson">messageAreaChangeCurrentArea: {
config: {
areaListInfoFormat10: "|15{name}|07: |03{desc}"
}
}
</code></pre>
<h2 id="creating-your-own">Creating Your Own</h2>
<p><img class="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 <code class="language-plaintext highlighter-rouge">/art/themes/luciano_blocktronics</code> to <code class="language-plaintext highlighter-rouge">art/themes/your_board_theme</code>
</li>
<li>Update the <code class="language-plaintext highlighter-rouge">info</code> block at the top of the theme.hjson file:
<pre><code class="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 <code class="language-plaintext highlighter-rouge">config.hjson</code> via <code class="language-plaintext highlighter-rouge">theme.default</code>. <code class="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 <code class="language-plaintext highlighter-rouge">*</code> if you want the system to randomly pick.
<pre><code class="language-hjson">theme: {
default: your_board_theme
preLogin: *
}
</code></pre>
</li>
</ol>
<h2 id="theming-example">Theming Example</h2>
<p>Lets run through an example!</p>
<p>Consider the following <code class="language-plaintext highlighter-rouge">menu.hjson</code> entry:</p>
<pre><code class="language-hjson">superFancyMenu: {
art: FANCY.ANS
// ...some other stuff...
}
</code></pre>
<p>With a file of <code class="language-plaintext highlighter-rouge">FANCY.ANS</code> in <code class="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 <code class="language-plaintext highlighter-rouge">theme.hjson</code> could look like this:</p>
<pre><code class="language-hjson">superFancyMenu: {
mci: {
TL1: {
// supply the full format of the TL1 View
text: |02ENiGMA|10½ |08v|03|VN
}
BN2: {
// Make Board Name l33t style
style: l33t
}
}
}
</code></pre>
</div>
<div class="PageNavigation">
<a class="btn" style="float:left;margin-right: 20px;" href="/enigma-bbs/art/general.html">« General Art Information</a>
<a class="btn" style="float: right;margin-left: 20px" href="/enigma-bbs/art/mci.html">MCI Codes »</a>
<br clear="both">
</div>
</section>
</div>
</div>
</div>
</body>
</html>