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.
The following is information related to styling Textual.
This documentation is targeted at version 2.1.1 of Textual and later.
Storage Location
All custom styles will be read from the folder:
[home folder] > Library > Containers > com.codeux.irc.textual > Data > Library > Application Support > Textual IRC > Styles
Bundled styles can be copied from the folder:
[Textual.app] > Contents > Resources > Styles
(This folder is read-only.)
Introduction
This introduction assumes that you, the reader, has a basic understanding of HTML & CSS and how to manipulate each.
Each style loaded by Textual is encapsulated within its own folder. The name of the folder is used as the official title of the style itself.
The internal structure of the folder is as follows:
– copyright.txt
– Data
\ – Resources (Custom resources: images, fonts, etc.)
\ – Documentation (Version information, changes, etc.)
\ – Templates (Custom templates.)
\ – Settings
\ – styleSettings.plist
\ - styleLocalizations.plist
– design.css
– scripts.jsIt is recommended to copy and paste the default styles bundled with Textual and modify those as necessary as the folder structure is well established for each.
copyright.txt
The copyright.txt file is actually never read by Textual. It is considered the de-facto file for inclusion of any license information that may accompany a file. It can be renamed to any filename that is desired.
design.css
This file is the CSS (Cascading Style Sheet) file that is used by Textual during the loading of each style. While other CSS files can be specified by editing templates (see below); this is generally the only file that is needed for a lightweight style. This file is required.
scripts.js
scripts.js is the main JavaScript file that is used by Textual when the style is loaded. This file is required.
Templates
Textual includes a powerful template engine which means a style can edit any part of the HTML rendered by Textual. These templates are opt-in. A style developer does not need to use any of them.
The default templates used by Textual can be found in the folder Textual.app –> Contents –> Resources –> Style Default Templates – copying the contents of this folder into a styles "Templates" folder will allow that style to override the HTML.
Templates are Mustache based.
styleSettings.plist
styleSettings.plist is a property list of settings that a style can define which will override those of the end user. Setting such as nickname format, timestamp format, font, etc. While these are generally asked to be avoided to allow the user the ability to define their own settings; there are situations where a style may be forced to use these due to constraints in their own design.
This property list supports the following options:
Nickname Format (String)
Timestamp Format (String)
Override Channel Font (Dictionary)
\ -- Font Name
\ -- Font Size
Underlying Window Color — Window color in HTML hex format to blend with background of style during scroll elasticity.
Force Invert Sidebars (BOOL), YES or NO — Force dark mode on server and user list.styleLocalizations.plist
Localization overrides.
These are generally discouraged to use. The file exists for legacy purposes.
Developer Mode
Developer Mode can be enabled in the help menu. It enables extra features that assist developers working on styles.
Right click in the channel view with Developer Mode enabled. Several new options are presented including "Force Reload Style," "Copy Log as HTML," and "Inspect Element." — "Copy Log as HTML" will copy the entire HTML content of the selected channel view so that the HTML being output by Textual can be understood for styling purposes.
"Inspect Element" will bring up WebKit own inspector which shows greater detail and allows editing of the style (does not save) in realtime so that changes can be seen without reloading the style every time.