Theme customization
The software described herein is deprecated and is no longer updated. We recommend using CKEditor 5 with collaboration features instead.
Visit the collaboration samples repository for practical solutions. Also, visit the Online builder if you would rather prepare a custom CKEditor 5 build with collaboration enabled.
Similarly to CKEditor 5, Letters is using PostCSS and CSS Variables to handle design customization.
# Typography
By default Letters is using three types of fonts:
:root {
/* Letters article content: paragraphs, lists, block quotes... */
--ltrs-font-family-article: Georgia, serif-sans;
/* Letters article content: heading 1, heading 2, title... */
--ltrs-font-family-headers: Helvetica Neue, Helvetica, Arial, sans-serif;
/* Letters UI elements like top bar, sidebar. */
--ltrs-font-family-system: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
You can easily change the fonts by overriding them in your custom stylesheet (or in the <head> element of your web page).
Modifying font-family is not the only way you can play with typography in Letters. Every component like paragraphs or headings is using em values for font-size, so changing the default size will scale them down or up (except collaboration plugins like presence list or comments — see the section below).
:root {
/* Default font-size for Letters content. */
--ltrs-font-size-base: 19px;
/* Handling collaboration plugins font-size (and other CKEditor 5 components). */
--ck-font-size-base: 13px;
}
# Letters container
Letters is wrapped by the ltrs-editor class. Inside it you can find the ltrs-topbar and ltrs-content classes. You can control the width of content and sidebar thanks to CSS Variables.
:root {
/* Default height of Letters with an empty document. */
--ltrs-content-min-height: 450px;
--ltrs-content-width: 1140px;
--ltrs-textarea-width: 700px;
--ltrs-sidebar-width: 320px;
--ltrs-topbar-height: 54px;
/* Padding around Letters content. */
--ltrs-content-padding: 50px;
--ltrs-padding-bottom: 100px;
}
# Letters components
# Blockquote
You can see a different <blockquote> appearance than in the default CKEditor 5 default. We decided to get rid of the popular left border in the quote and change it into an image background. Its size is also controlled with a CSS Variable.
:root {
/* Handling the size of the block quote icon background is easy. */
--ltrs-blockquote-icon-size: 3.5em;
}
.ltrs-editor blockquote {
/* You can change the background or disable it . */
background-image: url(data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23edf2f7%22%20d%3D%22M3%2010.423a6.5%206.5%200%200%201%206.056-6.408l.038.67C6.448%205.423%205.354%207.663%205.22%2010H9c.552%200%20.5.432.5.986v4.511c0%20.554-.448.503-1%20.503h-5c-.552%200-.5-.449-.5-1.003v-4.574zm8%200a6.5%206.5%200%200%201%206.056-6.408l.038.67c-2.646.739-3.74%202.979-3.873%205.315H17c.552%200%20.5.432.5.986v4.511c0%20.554-.448.503-1%20.503h-5c-.552%200-.5-.449-.5-1.003v-4.574z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
}
# Top bar and its plugins
You can customize not only the height but also the color of the top bar:
:root {
--ltrs-color-topbar-background: rgba(235, 241, 247, 0.9);
}
# Finish editing button
You can change the Finish editing button background color in the default and warning state (in case with unsaved comment or content).
For example, change var(--ltrs-color-green) to a HEX, RGB(A) or HSL(A) color format or globally modify this variable to keep one hue of green in every component of Letters.
:root {
--ltrs-color-finish-background-default: var(--ltrs-color-green);
--ltrs-color-finish-background-warning: var(--ltrs-color-red);
}
# Notification center
Like with the Finish editing button, you can override CSS Variables and modify the color of the notification center icon and headings in the balloon panel.
:root {
--ltrs-color-notification-default: var(--ltrs-color-blue);
--ltrs-color-notification-success: var(--ltrs-color-green);
--ltrs-color-notification-danger: var(--ltrs-color-red);
}
# CKEditor 5 overrides
# Global overrides
Letters is using the CKEditor 5 Lark theme with a few overrides which makes its design a little bit different from the default CKEditor 5 appearance. Some elements have changed button backgrounds and the icon color inside them. You can find the full set of customized variables below:
:root {
/* Change the default color of icons in the toolbar. */
--ck-color-text: var(--ltrs-color-white);
--ck-color-base-foreground: var(--ltrs-color-gray-blue);
--ck-balloon-arrow-height: 11px;
--ck-balloon-arrow-half-width: 7px;
--ck-color-toolbar-border: var(--ltrs-color-gray-blue);
--ck-color-panel-border: var(--ltrs-color-gray-blue);
--ck-color-panel-background: var(--ltrs-color-gray-blue);
/* Change the default button colors for all states. */
--ck-color-button-default-background: var(--ltrs-color-gray-blue);
--ck-color-button-default-active-background: hsl(213, 17%, 42%);
--ck-color-button-default-active-shadow: hsl(213, 17%, 42%);
--ck-color-button-default-focus-background: hsl(213, 15%, 42%);
--ck-color-button-default-disabled-background: var(--ck-color-button-default-background);
--ck-color-button-on-background: hsl(213, 15%, 29%);
--ck-color-button-on-active-background: hsl(213, 15%, 29%);
--ck-color-button-on-active-shadow: hsl(213, 15%, 29%);
--ck-color-button-on-focus-background: hsl(213, 15%, 33%);
}
However, there are even more changed CKEditor 5 styles. Below you can find additional overriddes with a stronger CSS Specificity than :root. They are nested in classes, so if you want to edit them, you need to use at least an even or stronger specificity.
# Link and alternative text form
The default CKEditor 5 colors of the save and cancel icon in inline forms were changed to achieve better accessibility.
.ck-text-alternative-form,
.ck-link-form {
--ck-color-button-save: hsl(150, 100%, 70%);
--ck-color-button-cancel: hsl(0, 100%, 80%);
}
.ck-link-actions {
--ck-color-link-default: var(--ltrs-color-blue-light); /* which is hsl(190, 100%, 50%) */
}
# Collaboration plugins
In Letters you can find real-time collaboration plugins that enable collaborative editing and provide such features as the user presence list, comments or the user selection in the content. In the snippets below you can find a few Letters overrides that change the default appearance of some UI elements.
# Comments sidebar
In Letters you can notice the changed design of one of the collaboration plugins: the comments sidebar.
.ltrs-editor {
/* Overwrite default CKEditor 5 styles for the comments sidebar. */
--ck-color-comments-icon: hsl(213, 15%, 50%);
--ck-color-comments-count: var(--ltrs-color-blue); /* which is hsl(208, 73%, 60%) */
--ck-color-comments-background: hsl(210, 50%, 97%);
--ck-color-comments-separator: hsl(210, 50%, 95%);
--ck-color-comments-info: var(--ltrs-color-text-dark-hint); /* which is hsla(212, 79%, 9%, .38) */
--ck-color-comments-remove-background: hsl(0, 83%, 93%);
}
.ltrs-editor .ck.ck-sidebar {
/* Revert default button styles in the comments sidebar like in CKEditor 5. */
--ck-color-button-default-background: transparent;
--ck-color-button-default-focus-background: hsl(0, 0%, 90%);
--ck-color-button-default-active-background: hsl(0, 0%, 85%);
--ck-color-button-default-active-shadow: hsl(0, 0%, 75%);
--ck-color-button-default-disabled-background: transparent;
--ck-color-button-on-background: hsl(0, 0%, 87%);
--ck-color-button-on-focus-background: hsl(0, 0%, 77%);
--ck-color-button-on-active-background: hsl(0, 0%, 73%);
--ck-color-button-on-active-shadow: hsl(0, 0%, 63%);
--ck-color-button-on-disabled-background: hsl(0, 0%, 87%);
}
# Presence list
By default in the presence list dropdown, with more than 5 users connected, the avatars are the same size as in the top bar. We decided to reduce them a bit and there are styles responsible for this:
.ltrs .ck-presence-list__balloon {
--ck-user-avatar-size: 32px;
}
# Users avatar
And finally here is the last overridden component of the collaboration plugins — namely a different background for the user avatar.
.ltrs {
--ck-user-avatar-background: var(--ltrs-color-gray-blue) /* which is hsl(213, 15%, 35%) */
}