Legacy Themes (limited CSS)Monday, December 21, 2020 3:24 AM
Legacy CSS-based themes allow you to tweak the look and feel of a user interface. We recommend that new projects use Custom Themes which offer more flexibility, but the legacy themes engine will always keep working.
Legacy Themes let you change core design aspects of the UI with simple CSS properties. You can change the theme from inside the TalkJS dashboard. Go to the Settings page and click on 'Roles' in the top left hand corner. You should see all the user roles, if you haven't created one previously you'll need to create a new role. Select one, scroll down to "UI Theme" section and select "Legacy Theme", then "Edit theme". You will see a big text area with CSS and a little explanation on top. Scroll down inside the text area to get to the meat of the matter.
For detailed documentation on how to set up theming, please head to the dashboard. It's all documented inline as CSS comments.
Unfortunately you cannot actually add or remove CSS properties or CSS classes in a legacy theme - you can only modify the ones already given. This is because then TalkJS can use the settings from your theme to consistently apply styles to your chat, even when we make internal changes. For instance, when a new browser or browser version comes out with new bugs (this happens particularly frequently on iOS) then we may need to change the internals of the TalkJS UI to work around it. Similarly, when we add new optional features that involve a UI aspect, TalkJS can use your existing theme settings to automatically style that nicely.
The downside of this approach is that we cannot expose the full freedom of CSS to you to style the UI. If you're limited by this, consider switching to Custom Themes.
(Note: theming is only available on the TalkJS Standard plan and above.)