Style Developers: Migrating to 7.0.7

Home

Introduction

For a style to be fully compatible with version 7.0.7, some changes are required.
This knowledge base article describes these changes.

Templates

New Template Engine Version

To encourage style authors to adapt the newest features of Textual 7, the template engine version has changed.

To advertise support for the new template engine version, edit the style's styleSettings.plist file.

Modify the Template Engine Versions setting to include version 4.

Example

<key>Template Engine Versions</key>
<dict>
    <key>default</key>
    <integer>4</integer>
</dict>

New Attributes

Added data-appearance attribute to <body> which is either “dark” or “light”.
The value of this attribute is automatically calculated based on the background color of the style.

Renamed Attributes

Nearly all custom attributes have been renamed to provide greater consistency and easier access through JavaScript.
Below is a table of all attributes that have been renamed.

Old Name New Name
bgcolor-number data-background-color
channelname data-view-name
color-number data-foreground-color
coloroverride data-override-color
command data-command
customscroller data-custom-scroller
highlight data-highlight
ltype data-line-type
mtype data-member-type
selected data-selected
systemversion data-system-version
timestamp data-timestamp
viewtype data-view-type

Attribute Placement

All custom attributes that appeared in <html> have moved to <body>.

Nickname Colors

The logic that determines which color is assigned to a nickname has changed.
Nicknames are now assigned a consistent, unique color instead of picking from a pool of thirty possibilities.

Color Values

The new nickname colors are literal RGB or HSL values.
For example: hsl(293, 81%, 69%)

Templates

When rendering each template, the color of each nickname is set using a the style attribute.

A custom attribute (formally colornumber) is no longer used to set the color in a rendered template.

It is possible for a custom color to be assigned to a nickname using the setcolor command. To provide a style more context, the attribute data-override-color is added to a nickname when a custom color is set.

Variations In Color

The shade of colors assigned will vary depending on whether a style has a light background or dark background.
A light background will produce colors that are slightly darker whereas a dark background will produce the opposite.

A style's Underlying Window Color setting is used to infer which shade of colors to assign.

Optionally, a setting named Nickname Color Style can be set. This setting instructs Textual to use a specific shade of colors, regardless of the style's background.

Possible values:

Example

<key>Nickname Color Style</key>
<string>HSL-dark</string>

Inline Media

Textual is now capable of showing more than images inline with chat.

Styling

Each type of media that is shown inline with chat can be customized by adding rules to its CSS selector.
Selectors follow a common format: they begin with “inline” and a descriptor follows.

Examples

.inlineImage
.inlineVideo
.inlineGfycat
.inlineTwitchClips
.inlineTwitchLive
.inlineVimeo
.inlineYouTube
This list contains example selectors. This list is incomplete.
 
Last modified: January 17, 2018
The contents of this webpage are released into the Public Domain for unlimited distribution.