Customize comments

Typlog has a built-in comment system. In your item.j2 file, if you include a <div id="comment_thread"></div>, our typlog.js script will render the comment automatically. Most of the time, you don't have to configure anything for the comment system. But if the style does not fit your design, you can customize the fonts and colors.

All CSS variables are prefixed with --tc, which means "Typlog Comment". Our rules of the naming:

• --tc-f: define for font family
• --tc-fs: define for font size
• --tc-c: define for color
• --tc-s: define for size, e.g. width, height, padding, margin

Basic

Here are the basic settings:

• --tc-f-base: Base font family, default to inherit.
• --tc-fs-base: Base font size, default to 14px.
• --tc-c-primary: Highlight color of the active tab and moderator badge, default to a green color.
• --tc-c-divider: Border color of the divider.
• --tc-c-meta: A lighter color for meta data. e.g. time.
• --tc-f-meta: Font family for meta data, default to a serial of sans fonts.
• --tc-fs-meta, Font size for meta data, default to 12px.

Tabs

Tab is located at the top of the comment system. It contains Comments, Likes, and Reposts.

• --tc-c-tab: Color of the text in tabs. Default to inherit.
• --tc-f-tab: Font family of the text in tabs.
• --tc-fs-tab: Font size of the text in tabs, default to 14px.

Reply Form

This section contains the input area and the "Reply" button.

• --tc-f-input: Font family for <input> and <textarea>, default to a serial of sans fonts.
• --tc-fs-input: Font size for <input> and <textarea>, default to 15px.
• --tc-c-input: Text color in <input> and <textarea>, default to inherit.
• --tc-c-input-bg: Background color of <input> and <textarea>, default to transparent.
• --tc-c-input-border: Border color of <input> and <textarea>, default to #ccc.
• --tc-f-reply: Font family for the reply button, default to a serial of sans fonts.
• --tc-fs-reply: Font size for the reply button, default to 14px.
• --tc-c-reply: Text color of the reply button, default to white.
• --tc-c-reply-bg: Background color of the reply button, default to black.
• --tc-s-reply-padding: Padding of the reply button, default to 6px 12px.

Comment

CSS variables for the content of the comment.

• --tc-f-content: Font family for the content <div>, default to inherit.
• --tc-fs-content: Font size for the content, default to 16px.
• --tc-c-content: Text color for the content, no default value.
• --tc-c-link: Color for the links, default to a blue color.
• --tc-c-link-hover: Color of the links when hovering, default to a darken blue color.
• --tc-c-quote: Text color for quote of a reply, no default value.
• --tc-c-quote-bg: Background color for quote of a reply, default to a darker color.
• --tc-c-source: Text color for webmention source.
• --tc-c-source-bg: Background color for webmention source.