Customize the look

Writerside builds a modern-looking web help with a fixed layout and dark mode support. The layout is adapted for a wide range of display sizes, from mobile devices to desktop monitors.

Writerside also provides some customization, such as the accent color, site logo, and favicon. You can customize the output in the build configuration file: /cfg/buildprofiles.xml in your help module root.

If you do not have this file yet, create it. Here is an example that you can use:

                <buildprofiles xsi:noNamespaceSchemaLocation="https://resources.jetbrains.com/writerside/1.0/build-profiles.xsd"
                   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
                    <variables>
                        <primary-color>aqua</primary-color>
                        <header-logo>my-logo.png</header-logo>
                        <product-web-url>https://help.example.com</product-web-url>
                        <custom-favicons>favicon.png</custom-favicons>
                    </variables>
                </buildprofiles>
        

Change accent color

The accent color is applied to various UI components, such as the focused items in the TOC, active tabs, and buttons.

Open /cfg/buildprofiles.xml.
Use the <primary-color> element under <variables> and choose from the following color palette:
The default accent color is frozen, which has a Hex code #307FFF.

You should be able to see the configured color in the local preview.

The header logo is displayed in the header next to the help instance name. In most cases, it is the logo of your company, product, or project.

Put the logo image into the images directory in your project.
Logo image requirements are:
- SVG or PNG format. We recommend using SVG for better quality on Retina and 4K displays.
- Height-to-width aspect ratio between 1.2 and 0.24. We recommend using square images.
- Image height more than 48px.
Open /cfg/buildprofiles.xml.
Use the <header-logo> element under <variables> to specify the logo filename.
<header-logo>my-logo.png</header-logo>
If necessary, use the <product-web-url> element to add a URL that should open when your readers click the header logo. This is usually the home page of your help website, but you can also reference your company website or your project repository.
<product-web-url>https://help.example.com</product-web-url>

Change favicon

Web browsers can display the favicon on tabs, in the address bar, browsing history, and bookmarks. Similar to the header logo, set the favicon to represent your company, product, or project.

By default, Writerside uses the JetBrains logo:

Put the favicon image into the images directory in your project or host it on some publicly accessible web server.
Supported formats are SVG, PNG, and ICO.
You can use up to five favicons in different sizes: 16x16, 32x32, 96x96, 300x300, 500x500.
Open /cfg/buildprofiles.xml.
Use the <custom-favicons> element under <variables> to specify the icons.
Single local favicon:
<custom-favicons>favicon.png</custom-favicons>
Single favicon as a URL:
<custom-favicons>https://www.jetbrains.com/icon.svg</custom-favicons>
Multiple favicons ordered by size:
<custom-favicons>icon16.png,icon32.png,icon96.png,icon300.png,icon500.png</custom-favicons>

Last modified: 04 December 2023

Writerside Help

Customize the look

Change accent color

Change header logo

Change favicon