Creating Custom CSS for XarChat

WARNING: Custom CSS is completely unsupported, and any custom styles you create may break in future versions of XarChat. The structure of the DOM (including elements, styles, and components) in the XarChat interface is not guaranteed to remain the same between versions.

You can create custom CSS files to modify the XarChat interface in advanced ways. To do so, you will need to create one or more .css files within a customcss directory under your XarChat profile directory.

Your XarChat profile directory varies depending on your operating system. The directory you should use for each OS is as follows:

OS Location
Windows %LOCALAPPDATA%\XarChatz\customcss
Linux ~/.xarchat/customcss
MacOS ~/.xarchat/customcss

All files with a name ending in .css in this directory will be loaded by XarChat and applied to the interface. The files will be loaded in alphabetical order from this location, and are effectively all appended into one large CSS file, so if any one file has a syntax error, it may affect later files.

New, deleted, and updated files will automatically be discovered and loaded into XarChat on the fly, so you don't have to restart XarChat to see your changes.

Finding elements to style

Finding which elements you want to style is most easily done using the browser developer tools.

XarChat's user interface is a webpage running in your system's native browser control. On Windows, this is WebView2; on Linux, this is WebKitGTK; and on MacOS this is WebKit. Each browser's native developer tools can be made available to use (though the developer tools are not available by default).

To enable the use of the browser developer tools in XarChat, launch XarChat with the -d command line option. This will enable the developer tools, which can be opened in one of a few ways:

You can have the developer tools automatically open when XarChat is launched by passing the --devtoolsonlaunch command line option. You do not need to have the developer tools enabled to use custom CSS; it only makes it easy to write new custom CSS.

WARNING: The XarChat interface uses much more memory and runs much more slowly when the developer tools are open. It is not recommended to keep them open when you're not using them.

The XarChat interface makes use of HTML Components with Shadow DOM, which normally limits the scope of any included CSS. However, when you have custom CSS defined, XarChat will load your custom CSS into every component in the interface automatically.

Every component has a top-level element that has a class component-ClassName; which you can use in your CSS selector if you want to limit a CSS rule to a specific component.

Example Custom CSS

For example, if you wanted to remove the italicization from emotes in chat, you could use the following CSS:

.emote .messagetext {
    font-style: normal !important;
}

Or, for example, if you wanted to disable all use of the [color] BBCode tag, you could use:

.bbcode-color-blue,
.bbcode-color-red,
.bbcode-color-white,
.bbcode-color-black,
.bbcode-color-yellow,
.bbcode-color-green,
.bbcode-color-pink,
.bbcode-color-gray,
.bbcode-color-grey,
.bbcode-color-orange,
.bbcode-color-purple,
.bbcode-color-brown,
.bbcode-color-cyan {
    color: inherit !important;
    text-shadow: none !important;
}