Legacy themes (limited CSS)

Legacy themes have been deprecated in favor of custom themes, which offer more flexibility. The legacy themes engine will always keep working.

With legacy themes you can tweak the look and feel of a user interface. Legacy themes let you change core design aspects of the UI with simple CSS properties.

Three examples of edited legacy themes Examples of edited legacy themes

Edit a legacy theme

You can edit a legacy theme directly from your TalkJS dashboard. To edit a legacy theme, take the following steps:

  1. Login to your dashboard and go to the Chat UI page.
  2. In the 'Theme' section, under 'Theme version', make sure you have selected Legacy Theme (limited CSS).
  3. In the Mode dropdown selector, choose Edit theme.
  4. Select your preferences on whether, and if so, when and how, to show avatars next to messages.
  5. In the editable code area, edit the CSS for the legacy theme.

Dashboard area for editing legacy themes. At the top is a header with 'Theme version', followed by a radio button selector with the options 'Custom Theme (edit HTML + CSS UI) components' and 'Legacy Theme (limited CSS)'. Following that an option 'Mode' with a dropdown-selector with the option 'Edit theme', and a checkbox with the text 'Show avatars besides messages'. Next, the text 'Show avatars besides' with the dropdown option 'Messages sent by other users only' selected. The final dropdown selection menu has the text 'When a user writes multiple messages in sequence, show an avatar besides', with the option 'Each message' selected. At the bottom of the image is an area with code comments and the heading 'TaklJS Default Theme'. Options for editing a legacy theme in the TalkJS dashboard

Different legacy themes for different user groups

If you would like to have different legacy themes for different user groups, then create a separate role for each user group and adjust legacy theme per role.

Limitations

Legacy themes have some limitations. In a legacy theme, you can only modify the currently available CSS properties or CSS classes. Any new CSS class or property you add will get ignored. If you remove an existing CSS class or property, the legacy theme will fail to work and TalkJS will revert to the default theme.

If you need more flexibility in customizing your theme than legacy themes allow, switch to using custom themes instead.