Руководство по пользовательской стилизации

Это руководство содержит полный набор стандартных CSS, используемых виджетом комментариев FastComments (v2), а также некоторые инструкции по переопределению стилей.

Понимание стандартного CSS позволяет вам:

Настраивать внешний вид путём переопределения отдельных стилей
Устранять проблемы со стилизацией, видя, какие классы и селекторы доступны
Создавать пользовательские темы, которые работают со структурой виджета
Использовать с AI-помощниками для генерации кастомных изменений CSS.

How to Override Styles

Переопределение стилей зависит от виджета. Для виджета комментариев нужно использовать параметр конфигурации customCSS чтобы передать CSS в iframe, или указать CSS на странице Customization в панели администрирования, которая будет отдавать CSS с нашего CDN.

Как настроить стили виджета комментариев

Вы можете настроить стили виджета комментариев двумя способами:

Вариант 1: Через параметр customCSS

Передайте ваш CSS в виде строки в параметр customCSS при инициализации виджета:

window.fcConfigs = [{
    target: '#fastcomments-widget',
    tenantId: 'your-tenant-id',
    customCSS: `
        .fast-comments .comment {
            background-color: #f0f0f0 !important;
            border-radius: 8px !important;
        }
    `
}];

Вариант 2: Через панель администратора

Перейдите на страницу настройки виджета в вашей панели администратора
Прокрутите до раздела "Custom CSS" в разделе "Advanced"
Введите ваш пользовательский CSS
Нажмите "Save"

Ваш пользовательский CSS будет применён ко всем виджетам комментариев на вашем сайте.

Советы

Используйте !important, чтобы при необходимости переопределять стили по умолчанию
Нацеливайте правила на конкретные селекторы, чтобы не влиять на другие части сайта
Тестируйте ваш CSS в разных браузерах для совместимости
Виджет использует стандартный CSS - специальные препроцессоры не требуются

Настройка границы окна комментариев

Рамка вокруг поля комментария состоит из собственной границы текстового поля и нескольких тонких линий, которые виджет рисует вокруг него. Чтобы изменить её цвет или скругление углов, задайте эти CSS-переменные вместо стилизации textarea напрямую. Переменные изменяют стиль всей рамки сразу, поэтому углы и цвета всегда совпадают.

Переменная	Что изменяет	Значение по умолчанию
`--fc-input-border-color`	Цвет рамки	`#bfbfbf`
`--fc-input-border-color-focus`	Цвет рамки во время ввода текста	`#555`
`--fc-input-border-radius`	Скругление скруглённых углов	`11px`
`--fc-input-border-start-start-radius`	Скругление квадратного левого верхнего угла (правого верхнего в языках с письмом справа налево)	`0`

Добавьте CSS в поле Custom CSS на странице настройки виджета или передайте его с помощью опции customCSS. Достаточно задать только те переменные, которые вы хотите изменить.

Вы также можете использовать помощник Comment box border прямо под полем Custom CSS, который напишет этот CSS за вас.

Изменение цвета рамки

Цвет рамки

Copy

:root {
    --fc-input-border-color: #d1d5db;
}

Изменение цвета рамки во время ввода

Цвет рамки во время ввода

Copy

:root {
    --fc-input-border-color-focus: #2563eb;
}

Скругление всех четырёх углов

По умолчанию левый верхний угол квадратный. Задайте обе переменные радиуса, чтобы скруглить все четыре угла одинаково:

Скругление всех четырёх углов

Copy

:root {
    --fc-input-border-radius: 12px;
    --fc-input-border-start-start-radius: 12px;
}

Квадратные углы

Copy

:root {
    --fc-input-border-radius: 0;
}

Соответствие вашему бренду

Цвета и углы бренда

Copy

:root {
    --fc-input-border-color: #c7d2fe;
    --fc-input-border-color-focus: #4f46e5;
    --fc-input-border-radius: 8px;
    --fc-input-border-start-start-radius: 8px;
}

Разные цвета в тёмном режиме

Когда виджет находится в тёмном режиме, он имеет класс dark, поэтому вы можете задать другие значения для тёмного режима:

Цвета рамки в тёмном режиме

Copy

:root {
    --fc-input-border-color: #d1d5db;
}
.dark {
    --fc-input-border-color: #444;
    --fc-input-border-color-focus: #aaa;
}

Почему не стилизовать текстовое поле напрямую?

Виджет рисует часть рамки поля комментария сам, вокруг текстового поля. Если вы зададите border-color или border-radius только для textarea, эти линии сохранят стиль по умолчанию, и рамка будет выглядеть несогласованно — например, квадратная линия, проходящая через скруглённый угол. Переменные выше изменяют и то, и другое одновременно.

Справочник по пользовательскому CSS для виджета комментариев (v2, последняя версия)

Comment Widget Default CSS

Copy

body { margin: 0; padding: 0; }
    d { display: block }
    @keyframes pop-in { 0% { transform: scale(0.3); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }
    @keyframes placeHolderShimmer { 0% { background-position: 0 0 } 100% { background-position: 100% 0 } }
    /* shimmer skeleton for in-flight saves and lazy avatar loads. To restyle the loading state, target .animated-background. */
    .comment-reply .comment-input.animated-background, .comment-reply input.animated-background, .animated-background { animation-duration: 1s; animation-iteration-count: infinite; animation-name: placeHolderShimmer; background: #f6f7f8; background: linear-gradient(to right, #eee 8%, #dddddd 18%, #eee 33%); background-size: 50% 50%; }
    .comment-reply .tos-checkbox { display: flex; align-items: center; gap: 8px; margin: 8px 0; cursor: pointer }
    .comment-reply .tos-checkbox a { color: inherit }
    .comment-reply > .tos-checkbox { margin: 8px }
    .comment-reply .tos-checkbox input[type=checkbox] { margin: 0; width: auto; box-shadow: none }
    @keyframes backgroundToNormal { from { background: lightblue } to { background: inherit } }
    /* widget root. Scope custom rules under .fast-comments. Config-driven modifier classes also land here: .readonly, .hide-avatars, .disable-image-redirect, .single-line-comment-input, .vote-style-1, .new-to-bottom -- use them as conditional ancestors. */
    /* flow-root: establishes a block formatting context so child margins (e.g. .pagination's margin-top) cannot collapse out through the root. Escaped margins are excluded from offset/client/scrollHeight, which makes broadcastHeight() under-report and the embedding iframe clip the bottom of the widget. */
    .fast-comments { position: relative; display: flow-root; width: 100%; font-size: 13px }
    .hidden { display: none }
    /* user-written text takes its direction from its own content, while margins and padding keep following the widget's direction */
    .comment-text, .commenter-name .username, [name="fastcomments-comment"], .comment-text-edit { unicode-bidi: plaintext; }
    /* unicode-bidi is not inherited, so blocks inside user text need it too; pre is left alone so code stays LTR */
    .comment-text :is(p, div, blockquote, li, h1, h2, h3, h4, h5, h6), [name="fastcomments-comment"] :is(p, div, blockquote, li) { unicode-bidi: plaintext; }
    .comment-text :is(pre, code), [name="fastcomments-comment"] :is(pre, code) { direction: ltr; unicode-bidi: isolate; }
    /* isolates each tag with its own direction so a Latin tag keeps its leading "#" inside Arabic text */
    .hash-tag { unicode-bidi: plaintext; }
    .invisible { visibility: hidden }
    .inline-block { display: inline-block }
    .icon { display: inline-block; width: 24px; height: 24px; vertical-align: middle; image-rendering: -webkit-optimize-contrast; }
    .icon.bubble { background: url("${FC_CDN}/images/svg/v2/text_bubble_dark.svg") no-repeat center; background-size: 22px 22px; }
    .icon.bubble-white { background: url("${FC_CDN}/images/svg/v2/text_bubble_white.svg") no-repeat center; background-size: 22px 22px; }
    .icon.cross { background: url("${FC_CDN}/images/svg/v2/close.svg") no-repeat center; background-size: 9px 9px; }
    .icon.reply-arrow-inactive { background: url("${FC_CDN}/images/svg/v2/reply_inactive.svg") no-repeat center; background-size: 15px 15px; }
    .icon.reply-arrow-active { background: url("${FC_CDN}/images/svg/v2/reply.svg") no-repeat center; background-size: 15px 15px; }
    .icon.up { background: url("${FC_CDN}/images/svg/v2/thumbs_up_light.svg") no-repeat center; background-size: 12px 12px; }
    .icon.up.active, .icon.up:hover { background: url("${FC_CDN}/images/svg/v2/thumbs_up_dark.svg") no-repeat center; background-size: 12px 12px; }
    .icon.down { background: url("${FC_CDN}/images/svg/v2/thumbs_down_light.svg") no-repeat center; background-size: 12px 12px; }
    .icon.down.active, .icon.down:hover { background: url("${FC_CDN}/images/svg/v2/thumbs_down_dark.svg") no-repeat center; background-size: 12px 12px; }
    .icon.pin-small { background: url("${FC_CDN}/images/svg/v2/pin.svg") no-repeat center; background-size: 15px 15px; }
    .icon.lock-small { background: url("${FC_CDN}/images/padlock.svg") no-repeat center; background-size: 15px 15px; }
    .icon.logo { width: 27px; height: 33px; background: url("${FC_CDN}/images/svg/v2/logo.svg") no-repeat center; background-size: 22px;  }
    .icon.edit-small { background: url("${FC_CDN}/images/svg/menu.svg") no-repeat center; background-size: 17px 17px; }
    .icon.edit-big { background: url("${FC_CDN}/images/svg/v2/edit.svg") no-repeat center; background-size: 22px 22px; }
    .icon.trash { background: url("${FC_CDN}/images/svg/v2/trash_thin.svg") no-repeat center; background-size: 22px 22px; }
    .icon.eye { background: url("${FC_CDN}/images/svg/v2/view.svg") no-repeat center; background-size: 22px 22px; }
    .icon.eye-slash { background: url("${FC_CDN}/images/svg/v2/view_hide.svg") no-repeat center; background-size: 22px 22px; }
    .icon.replied { background: url("${FC_CDN}/images/svg/v2/replied.svg") no-repeat center; background-size: 22px 22px; }
    :where([dir="rtl"]) .icon.reply-arrow-inactive, :where([dir="rtl"]) .icon.reply-arrow-active, :where([dir="rtl"]) .icon.replied, :where([dir="rtl"]) .icon.return { transform: scaleX(-1); }
    .icon.bold { background: url("${FC_CDN}/images/svg/v2/editor_bold.svg") no-repeat center; background-size: 9px; }
    .icon.ul { position: relative; top: 1px; background: url("${FC_CDN}/images/svg/v2/editor_underline.svg") no-repeat center; background-size: 10px; }
    .icon.it { background: url("${FC_CDN}/images/svg/v2/editor_itallic.svg") no-repeat center; background-size: 7px; }
    .icon.s { background: url("${FC_CDN}/images/svg/v2/editor_strike.svg") no-repeat center; background-size: 10px; }
    .icon.code { background: url("${FC_CDN}/images/svg/v2/editor_embed.svg") no-repeat center; background-size: 16px; }
    .icon.link { position: relative; top: -1px; background: url("${FC_CDN}/images/svg/v2/editor_link.svg") no-repeat center; background-size: 14px; }
    .icon.img-up { background: url("${FC_CDN}/images/svg/v2/editor_image.svg") no-repeat center; background-size: 16px; }
    .icon.img-btn-wrap { position: relative; }
    .icon.return { background: url("${FC_CDN}/images/svg/return.svg") no-repeat center; background-size: 22px; margin-inline-start: 6px; }
    .icon.gif { width: auto; height: auto; font-size: 0; }
    .icon.gif::before { content: "GIF"; font-size: 12px; }
    .icon.spoiler { font-size: 12px; }
    .icon.gif::before, .t-btn.txt { display: inline-block; width: auto; height: auto; margin-inline-end: 3px; text-align: center; vertical-align: middle; font-weight: 500; }
    .icon.bell { background: url("${FC_CDN}/images/svg/v2/bell.svg") no-repeat center; background-size: 22px; }
    .icon.bell-red { background: url("${FC_CDN}/images/svg/v2/bell-red.svg") no-repeat center; background-size: 22px; }
    .divider { display: inline-block; height: 25px; margin: 0 10px; vertical-align: middle; border-inline-end: 1px solid #c2c2c2; }
    .icon.block { background: url("${FC_CDN}/images/svg/v2/ban.svg") no-repeat; background-size: 22px 22px; }
    .icon.flag { background: url("${FC_CDN}/images/svg/flag.svg") no-repeat; background-size: 22px 22px; }
    .icon.flag-small { background: url("${FC_CDN}/images/svg/flag.svg") no-repeat center; background-size: 15px 15px; }
    .select-dir-wrapper { clear: both; text-align: end; border-bottom: 1px solid #afafaf; }
    .select-dir-wrapper .comment-count { /* physical-ok */ float: left; float: inline-start; font-weight: 500; }
    .select-dir-wrapper > * { margin: 9px; height: 16px }
    .select-dir { display: inline-block }
    .dropdown { position: relative; z-index: 3; text-align: end }
    .dropdown .drop-label { padding: 0 0 7px 0; cursor: pointer; font-weight: 500 }
    .dropdown .drop-label i { position: relative; display: inline-block; top: -2px; font-size: 7px }
    .dropdown .items { position: absolute; display: none; top: 20px; inset-inline-end: 0; width: 150px; overflow: hidden; border-radius: 0 0 4px 4px; background: #fff; }
    .dropdown:hover .items { position: absolute; display: block }
    .dropdown .items > * { padding: 5px 9px; cursor: pointer; font-weight: 500; text-align: start; font-size: 13px }
    .no-comments { clear: both; text-align: center; font-weight: 500; font-size: 16px; }
    .new-comments-message { width: fit-content; margin: 20px auto 0; padding: 5px 10px; text-align: center; cursor: pointer; font-weight: 500 }
    .new-comments-message .new-comments-count { pointer-events: none; position: relative; top: 1px; display: inline-block; min-width: 12px; padding: 2px 5px 4px 5px; margin-inline-end: 3px; border: 1px solid #a2a2a2; border-radius: 4px; border-start-end-radius: 0; }
    .new-comments-message span { pointer-events: none; padding-bottom: 2px; border-bottom: 1px solid #a3a3a3; }
    .comment .new-comments-message { margin: 10px auto 0; }
    .sso-login-wrapper, .fastcomments-message-wrapper { display: flex; height: fit-content; min-height: 130px; padding: 30px 0; box-sizing: border-box; align-items: center; justify-content: center; border: 1px solid var(--fc-input-border-color, #bfbfbf); border-radius: var(--fc-input-border-radius, 11px); border-start-start-radius: var(--fc-input-border-start-start-radius, 0); }
    .sso-login-wrapper .message-text, .fastcomments-message-wrapper .message-text { display: inline; pointer-events: none; }
    .fastcomments-message-wrapper .message-text a { color: #fff; pointer-events: all; }
    .sso-login-wrapper .sso-login, .fastcomments-message-wrapper .fastcomments-message { display: inline-block; animation: pop-in 0.5s; animation-timing-function: ease; padding-block: 10px; padding-inline: 27px 17px; border-radius: 7px; border-start-start-radius: 0; background: #333; color: #fff; text-decoration: none; font-size: 17px; font-weight: 500; }
    .fastcomments-message-wrapper .fastcomments-message { margin: 0 5%; cursor: default; }
    .sso-login-wrapper .sso-login[href] { cursor: pointer; }
    .sso-login-wrapper .sso-login .message-text, .fastcomments-message-wrapper .fastcomments-message .message-text { margin-inline-end: 10px; }
    .sso-login-wrapper .sso-login .icon, .fastcomments-message-wrapper .fastcomments-message .icon { pointer-events: none; }
    .sso-login-wrapper .sso-login.clickable { cursor: pointer; }
    .comment .sso-login-wrapper { padding: 7px 0; text-align: start }
    .comment .sso-login-wrapper .sso-login { font-size: 16px }
    /* Toolbar, auth fields, and cancel button carry .default-hidden -- they're collapsed (height:0, opacity:0) until the user focuses the input, which adds .show-default-hidden to the .comment-reply form. When styling these elements, account for the collapsed state. */
    .default-hidden { transition-duration: 300ms }
    .comment-input:not(.show-default-hidden) .default-hidden { height: 0; margin: 0 !important; opacity: 0; pointer-events: none; transition-duration: 200ms }
    .loading .pagination { opacity: 0.5; pointer-events: none; }
    .card { border: 1px solid #d0d0d0; background: #fdfdfd; border-radius: 3px; box-shadow: 5px 5px 7px rgba(0,0,0,.1) }
    button, .button { display: inline-block; margin-bottom: 10px; padding: 4px 10px; border-radius: 7px; border-start-start-radius: 0; font-size: 15px; background: #fbfbfb; color: #333; text-decoration: none; border: 1px solid #a2a2a2; cursor: pointer }
    .fast-comments, textarea { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif }
    textarea::placeholder { font-size: 13px; font-weight: 500; transition-duration: 150ms }
    textarea:focus::placeholder { color: transparent }
    .fc-red { display: inline-block; margin: 5px; color: #ff0000 }
    .comment-error { padding: 10px }
    /* Brand shape: square top-left, rounded other 3 corners (border-radius: 0 N N N). Match this when adding new buttons/inputs/cards to stay on-theme. */
    /*
     * INPUT BORDER VARIABLES: the easiest way to restyle the comment box border. Set them in custom CSS, e.g. :root { --fc-input-border-color: #d1d5db; --fc-input-border-radius: 8px; }
     * They keep the text area and the frame lines drawn around it (.horizontal-border-*) in sync; overriding border-color or border-radius on the textarea alone leaves the frame lines mismatched.
     *   --fc-input-border-color               border color (default #bfbfbf)
     *   --fc-input-border-color-focus         border color while the comment box has focus (default #555)
     *   --fc-input-border-radius              radius of the rounded corners (default 11px)
     *   --fc-input-border-start-start-radius  radius of the square top-left corner, top-right in RTL (default 0)
     */
    input, textarea { padding: 12px 20px; border: 1px solid var(--fc-input-border-color, #bfbfbf); border-radius: var(--fc-input-border-radius, 11px); border-start-start-radius: var(--fc-input-border-start-start-radius, 0); box-sizing: border-box; outline: none; background: transparent; }
    input { padding: 9px 12px; border-radius: 6px; border-start-start-radius: 0; }
    /* Focus state must be applied to BOTH the textarea border and the sibling .horizontal-border-wrapper (faux border around .comment-input -- see below). Set --fc-input-border-color-focus, or override both selectors, when changing focus color. */
    input:focus, textarea:focus, textarea:focus + .horizontal-border-wrapper, .comment-input textarea:focus { border-color: var(--fc-input-border-color-focus, #555) } /* .comment-reply textarea:focus for ssr */
    /* Focus anywhere inside the box (the textarea or content an extension rendered below it) colours the whole frame. */
    .comment-input:focus-within > textarea, .comment-input:focus-within > [contenteditable].comment-input, .comment-input:focus-within .horizontal-border-wrapper { border-color: var(--fc-input-border-color-focus, #555) }
    .pagination { margin-top: 50px; line-height: 19px; text-align: center; user-select: none; }
    .pagination > * { display: inline-block; cursor: pointer; font-weight: 700; }
    .pagination > * > span { font-weight: normal; pointer-events: none; }
    .pagination > * > span::before { content: "("; }
    .pagination > * > span::after { content: ")"; }
    .pagination .load-next-page { padding-inline-end: 25px; }
    .pagination .load-all { padding-inline-start: 25px; border-inline-start: 2px solid #555; } /* important that border is on the one to the right, as it doesn't always show */
    .comments-toggle { display: block; width: fit-content; margin: 20px auto; cursor: pointer; padding-block: 10px; padding-inline: 27px 17px; border-radius: 7px; background: #333; color: #fff; text-decoration: none; font-size: 17px; font-weight: 500; user-select: none; }
    .replying-to { margin-bottom: 5px }
    .comment-reply { position: relative; width: 100%; margin: 10px 0 15px 0; }
    .comment-reply.root { padding: 15px; box-sizing: border-box; }
    @media(max-width: 500px) { .comment-reply.root { padding: 15px 5px 15px 5px; } }
    .comment-reply .fast-comments-waiting { display: block; margin: 5px 0 }
    .comment-reply .comment-reply-top-bar { position: relative; min-height: 25px; margin: 0 26px 15px 26px; line-height: 25px; } /* relative positioned for things like notifications list */
    .comment-reply .comment-reply-top-bar .logged-in-info { display: inline-block; width: calc(100% - 60px); min-width: 150px; }
    .comment-reply .comment-reply-top-bar .logged-in-info .avatar { display: inline-block; height: 25px; vertical-align: middle; margin-inline-end: 5px; border-radius: 25px; overflow: hidden; box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.07); font-size: 0; }
    .comment-reply .comment-reply-top-bar .logged-in-info .avatar .open-profile { cursor: pointer; }
    .comment-reply .comment-reply-top-bar .logged-in-info .avatar.animated-background img { opacity: 0.1; }
    .comment-reply .comment-reply-top-bar .logged-in-info .avatar img { width: 25px; height: 25px; object-fit: cover; }
    .comment-reply .comment-reply-top-bar .logged-in-info .username { display: inline-block; max-width: calc(50% - 25px); overflow: hidden; vertical-align: middle; text-overflow: ellipsis; font-weight: 700; white-space: nowrap; }
    .comment-reply .comment-reply-top-bar .logged-in-info .username.open-profile { cursor: pointer; }
    .comment-reply .comment-reply-top-bar .logged-in-info .badges { display: inline-block; margin-inline-start: 5px; }
    .comment-reply .comment-reply-top-bar .right { /* physical-ok */ float: right; float: inline-end; }
    .comment-reply .comment-reply-top-bar .right > * { display: inline-block; }
    .comment-reply .comment-reply-top-bar .right .menu { font-weight: 500; font-size: 11px; }
    .comment-reply .comment-reply-top-bar .right .menu:hover { z-index: 9002; }
    .comment-reply .comment-reply-top-bar .right .menu .drop-label i { display: inline-block; width: 4px; height: 4px; background: #333; border-radius: 4px; margin: 0 2px; }
    .comment-reply .comment-reply-top-bar .right .menu .items { top: 25px; padding: 20px; box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.1); border-radius: 10px; border-start-end-radius: 0; }
    .comment-reply .comment-reply-top-bar .right .menu .items > * { font-weight: 700; }
    .comment-reply .comment-reply-top-bar .right .notification-bell { position: relative; margin-inline-start: 5px; cursor: pointer; }
    .comment-reply .comment-reply-top-bar .right .notification-bell .count { position: absolute; top: -3px; inset-inline-start: 19px; min-width: 15px; height: 15px; text-align: center; font-size: 11px; pointer-events: none; color: red; display: none; }
    .comment-reply .comment-reply-top-bar .right .notification-bell .icon.bell-red { display: none; }
    .comment-reply .comment-reply-top-bar .right .notification-bell > * { pointer-events: none; }
    .comment-reply .comment-reply-top-bar .right .notification-bell.has-notifications .icon.bell { display: none; }
    .comment-reply .comment-reply-top-bar .right .notification-bell.has-notifications .icon.bell-red { display: inline-block; }
    .comment-reply .comment-reply-top-bar .right .notification-bell.has-notifications .count { display: block; }
    .toolbar { position: relative; display: inline-block; margin: 5px 0 0 0; font-size: 13px }
    .toolbar .t-btn { display: inline-block; margin: 0 1px; vertical-align: middle; cursor: pointer; transition-duration: 200ms; user-select: none; }
    .toolbar .t-btn:hover { opacity: 0.7; }
    .toolbar .img-btn-wrap { display: inline-block; overflow: hidden }
    .toolbar .t-btn input[type=file] { position: absolute; padding: 40px; font-size: 100px; top: 0; inset-inline-start: 0; opacity: 0; cursor: pointer }
    .commenty-input:not(.show-default-hidden) .toolbar { width: 100%; margin-top: -50px; }
    @media(max-width: 500px) { .toolbar { display: flex; width: 100%; padding-bottom: 12px; justify-content: space-evenly; align-items: center; } }
    @media(max-width: 500px) { .comment-input .toolbar { margin-top: 50px; border-bottom: 1px solid var(--fc-input-border-color, #bfbfbf); } }
    .comment-reply .auth-input, .comment-vote-auth.auth-input { margin: 10px 0; font-size: 13px }
    .comment-reply .auth-input .fc-login { margin: 10px 0 0; }
    .comment-reply .auth-input .reasoning, .comment-vote-auth.auth-input .reasoning { font-weight: 600; }
    .comment-reply .auth-input .fc-red, .comment-vote-auth.auth-input .fc-red { display: block }
    .comment-reply .auth-input input, .comment-vote-auth.auth-input input { width: 100%; margin-top: 10px; padding: 9px 12px; border-radius: 6px; border-start-start-radius: 0; font-size: 14px; border: 1px solid #a2a2a2; }
    .comment-reply .auth-input .solicitation-info, .comment-vote-auth.auth-input .solicitation-info { margin-top: 10px; }
    .comment-reply .auth-input .fast-comments-reply { margin-top: 10px; padding: 10px 45px; border-radius: 5px; border-start-end-radius: 0; background: #333; color: #fff; border: none; }
    /* padding-bottom reserves space for the absolute toolbar/submit button. Don't remove it without also repositioning those elements. */
    .comment-input, .comment-edit { position: relative; padding-bottom: 30px; border-radius: var(--fc-input-border-radius, 11px); border-start-start-radius: var(--fc-input-border-start-start-radius, 0); }
    /* The textarea has no bottom border or bottom radius -- the bottom edge is drawn by .horizontal-border-bottom-* divs. To restyle the bottom of the input, target those, not the textarea. */
    .comment-input textarea { display: block; width: 100%; height: 130px; padding-block: 15px; padding-inline: 15px 25px; resize: none; font-size: 16px; border-bottom: none; border-radius: 0; border-start-start-radius: var(--fc-input-border-start-start-radius, 0); border-start-end-radius: var(--fc-input-border-radius, 11px); }
    .comment-input textarea::placeholder { font-size: 16px; font-weight: 400; }
    .comment-input input { display: block; width: 100%; font-size: 14px; }
    .comment-input .fastcomments-message-wrapper { border: 1px solid var(--fc-input-border-color, #bfbfbf); border-bottom: none; border-radius: 0; border-start-start-radius: var(--fc-input-border-start-start-radius, 0); border-start-end-radius: var(--fc-input-border-radius, 11px); }
    .comment-input input[name=fastcomments-link] { display: block; width: 100%; margin: 10px 0; }
    /*
     * COMMENT INPUT BORDER: drawn by 6 absolutely-positioned divs inside .horizontal-border-wrapper (top-left, top-right, left, right, bottom-left, bottom-right), NOT by the textarea's border. To change the input's border color or radius, prefer the --fc-input-border-* variables above, which restyle the textarea and all 6 pieces together. Otherwise target .horizontal-border-wrapper (sets border-color, inherited by all 6 pieces) and the individual .horizontal-border-* rules. The bottom-center is intentionally open so the submit button can overlap it. Top pieces are display:none on the root reply box and re-shown only for nested reply boxes (rule near end of block).
     */
    .comment-input .horizontal-border-wrapper { pointer-events: none; border-color: var(--fc-input-border-color, #bfbfbf); }
    .comment-input .horizontal-border { position: absolute; height: 20px; border-bottom: 1px solid; border-color: inherit; }
    .comment-input .horizontal-border-left { bottom: 0; inset-inline-start: 0; border-radius: 0; border-end-start-radius: var(--fc-input-border-radius, 11px); }
    .comment-input .horizontal-border-right { bottom: 0; inset-inline-end: 0; width: 20px; border-radius: 0; border-end-end-radius: var(--fc-input-border-radius, 11px); }
    .comment-input .horizontal-border-top-left, .comment-input .horizontal-border-top-right { display: none; position: absolute; top: 20px; border-bottom: 0; border-top: 1px solid; border-color: inherit; }
    .comment-input .horizontal-border-top-right { top: 0; inset-inline-end: 0; border-radius: 0; border-start-end-radius: var(--fc-input-border-radius, 11px); width: 20px; }
    .comment-input .horizontal-border-top-left { top: 0; inset-inline-start: 0; border-start-start-radius: var(--fc-input-border-start-start-radius, 0); }
    /* Side pieces span the whole box (top to bottom), so anything an extension renders below the textarea sits inside the frame with no borders of its own. Over the textarea they overlap its own side border pixel for pixel, so their top corners use the same radius variables as the textarea's. */
    .comment-input .horizontal-border-bottom-left { position: absolute; top: 0; bottom: 0; height: auto; width: 15px; inset-inline-start: 0; border-color: inherit; border-bottom: 0; border-inline-start-width: 1px; border-inline-start-style: solid; border-radius: 0; border-start-start-radius: var(--fc-input-border-start-start-radius, 0); border-end-start-radius: var(--fc-input-border-radius, 11px); }
    .comment-input .horizontal-border-bottom-right { position: absolute; top: 0; bottom: 0; height: auto; width: 15px; inset-inline-end: 0; border-color: inherit; border-bottom: 0; border-inline-end-width: 1px; border-inline-end-style: solid; border-radius: 0; border-start-end-radius: var(--fc-input-border-radius, 11px); border-end-end-radius: var(--fc-input-border-radius, 11px); }
    /* Re-shows top border pieces for nested reply boxes (input rendered inside a .comment) so the input gets a full frame. */
    .comment .comment-input .horizontal-border-top-left, .comment .comment-input .horizontal-border-top-right { display: block }
    @media(max-width: 500px) { .comment-input textarea, .comment-input .fastcomments-message-wrapper { height: 130px;  } }
    /* Submit button. Sits in the gap between the .horizontal-border-bottom-left/right pieces -- if you change the input's bottom border layout, retune top/right here too. */
    .comment .reply-button-wrapper { position: relative; /* physical-ok */ float: right; float: inline-end; top: -19px; inset-inline-end: 26px; border-radius: 7px; border-start-start-radius: 0; }
    .comment .fast-comments-reply, .comment .edit-save { padding: 10px 27px; border-radius: 7px; border-start-start-radius: 0; background: #333; color: #fff; text-decoration: none; }
    /* X cancel button. Only rendered for nested replies, not the root reply box. */
    .comment .cancel-button-wrapper { position: absolute; top: 9px; inset-inline-end: 25px; border-radius: 4px; }
    .comment .comment-edit .cancel-button-wrapper { top: -13px }
    .comment .fast-comments-reply-cancel { margin-bottom: 0; padding: 1px 1px; border-radius: 4px; }
    .comment .fast-comments-reply-cancel .cross { pointer-events: none; }
    .comment-reply.root .reply-button-wrapper { position: relative; /* physical-ok */ float: right; float: inline-end; top: -20px; inset-inline-end: 27px; margin-bottom: 10px; border-radius: 7px; border-start-start-radius: 0; }
    .comment-reply.root button { margin-bottom: 0; padding: 7px 20px; font-weight: 600; }
    .comment-reply.root button .bubble { margin-inline-start: 10px; pointer-events: none; }
    .comments { clear: both; padding: 15px 0; }
    @media(max-width: 500px) { .comments { padding: 15px 5px; } }
    .comment { position: relative; margin-top: 15px }
    @media(max-width: 500px) { .comment { margin-top: 5px; } }
    .comment .comment-text spoiler:not(:hover) { background: #eee; color: #eee; border: 1px dotted #a2a2a2; }
    .comment .comment-text spoiler:has(div, p) { display: block; }
    .comment .comment-text .inline-image { display: block; max-width: 500px; margin: 3px 0 3px 0 } /* must not select inline-image in wysiwyg */
    .comment .comment-text .inline-image img { max-width: 100%; max-height: 400px } /* must not select inline-image in wysiwyg */
    .disable-image-redirect .comment .inline-image { cursor: default; }
    /*
     * Comment state classes on .comment -- target these to restyle moderation/state visuals:
     *   .is-live       newly streamed-in comment (flash animation)
     *   .is-unread     not yet seen by current user (avatar glow)
     *   .unverified    commenter hasn't clicked email confirmation (dimmed)
     *   .is-spam       flagged as spam (red border)
     *   .is-unapproved awaiting moderation (orange border)
     *   .is-blocked    from a blocked user (text truncated to 40px)
     *   .is-deleted, .is-admin, .is-own, .24hr, .readonly are also added but not styled by default.
     */
    .comment.is-live > .inner { animation: backgroundToNormal 1.5s }
    .comment.is-unread > .inner .avatar-wrapper { box-shadow: 0 0 20px #89f796; }
    .comment.unverified > .commenter-name, .comment.unverified > .comment-content .commenter-name { opacity: 0.7 }
    .comment.unverified > .comment-content > .comment-text { opacity: 0.7 }
    .comment.is-spam > .comment-content { border: 1px solid red; } /* can be set when saving comment initially */
    .comment.is-unapproved > .comment-content { border: 1px solid #ffa700; } /* can be set when saving comment initially */
    .comment.is-blocked > .inner > .comment-content > .comment-text { max-height: 40px; overflow: hidden; }
    .comment > .requires-verification-approval { margin: 3px 0 6px }
    .comment > .inner > .spam-notice { margin: 0 0 10px 0; font-size: 12px; color: red }
    @media(max-width: 500px) { .comment > .inner > .spam-notice { margin-top: 18px; } }
    .comment .avatar-wrapper { position: relative; display: inline-block; width: 56px; height: 56px; overflow: hidden; box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.10); border-radius: 15px; border-start-end-radius: 0; vertical-align: top; }
    /* .anon = placeholder avatar (no custom default configured + anonymous user). Style this to change how unidentified commenters appear. */
    .comment .avatar-wrapper.anon { border: 1px solid #3f3f3f; }
    .comment .avatar-wrapper .open-profile { cursor: pointer; }
    .comment .avatar-wrapper.animated-background img { opacity: 0.1; }
    @media(max-width: 500px) { .comment .avatar-wrapper { width: 36px; height: 36px; } }
    .comment .avatar { width: 100%; height: 100%; object-fit: cover; }
    @media(max-width: 500px) { .comment .avatar { vertical-align: middle } }
    .comment .commenter-name .badges { margin-bottom: 5px; }
    .badges .badge { display: inline-block; vertical-align: middle; line-height: initial; margin-block: 3px; margin-inline: 0 5px; padding: 5px 7px; cursor: default; font-size: 12px; white-space: nowrap; border-radius: 4px; color: #000; }
    .badges .badge img { max-width: 22px; }
    .badges .badge.ib { padding: 0; }
    .comment .commenter-name { font-size: 14px }
    .comment > .commenter-name { display: none; vertical-align: middle; color: #000 }
    @media(max-width: 500px) { .comment > .commenter-name { display: inline-block; margin-inline-start: 5px; vertical-align: middle } }
    .comment > .commenter-name a { display: block; color: #000; text-decoration: none }
    .comment .commenter-name .website-url { color: #000; text-decoration: underline }
    .comment .commenter-name .label { font-size: 10px; text-transform: uppercase; font-weight: 500; color: #666666; } /* common label styling (unverified label, admin label, custom labels, etc) */
    .comment > .inner { position: relative; padding: 8px 8px 10px 8px; } /* relative is required for blocked message */
    @media(max-width: 500px) { .comment > .inner { padding: 5px 5px 5px 5px; } }
    .comment > .inner > .comment-content { position: relative; display: inline-block; width: calc(99% - 101px); margin-inline-start: 15px; }
    .hide-avatars .comment > .inner > .comment-content { margin-inline-start: 0; }
    .hide-avatars .comments > .comment > .inner > .comment-content > .commenter-name, .hide-avatars .comments > .comment > .inner > .comment-content > .comment-text { padding-inline-start: 0; }
    @media(max-width: 500px) { .comment > .inner > .comment-content { display: inline; margin-inline-start: 3px; background: transparent } }
    .comment > .inner > .comment-content .commenter-name { display: inline-block; max-width: 50%; vertical-align: middle; padding-block: 5px 0; padding-inline: 2px 0; color: #171717 }
    .comment > .inner > .comment-content .commenter-name > .username { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    @media(max-width: 500px) { .comment > .inner > .comment-content .commenter-name { padding-block: 5px 0; padding-inline: 4px 0; } }
    .comment > .inner > .comment-content .comment-text { padding: 5px 2px; color: #000; line-height: 22px; font-size: 14px; word-break: break-word; white-space: pre-line; overflow-y: auto }
    .comment > .inner > .comment-content .comment-text ol, .comment > .inner > .comment-content .comment-text ul { white-space: normal; }
    .comment > .inner > .comment-content .comment-text .react { display: inline; max-height: 20px; margin: 0 3px; vertical-align: text-top; }
    .comment > .inner > .comment-content > .comment-text b > a { color: #000; text-decoration: none; }
    .comment > .inner > .comment-content > .comment-text blockquote { margin: 15px 0; padding: 0 20px; border-inline-start: 1px solid #e5e5e5; }
    .comment > .inner > .comment-content .comment-text-edit { width: 100%; margin-top: 15px; }
    @media(max-width: 500px) { .comment > .children .comment-text { margin-inline-start: 27px; } }
    .comment > .inner > .comment-content .comment-text br { line-height: 0.5em }
    .comment > .inner > .comment-content textarea.comment-text, .comment > .inner > .comment-content input.comment-text { display: block; width: calc(100% - 20px); height: fit-content; margin: 10px 10px 0 10px; padding: 5px 11px; resize: vertical }
    .comment > .inner > .comment-content .edit-failure { display: block; margin: 10px 0; text-align: center }
    .comment > .inner > .comment-content .comment-toolbar-vote { position: relative; margin-inline-start: 8px }
    @media(max-width: 500px) { .comment > .inner > .comment-content .comment-toolbar-vote { margin-inline-start: 0 } }
    .comment > .inner > .comment-content .comment-toolbar-vote .vote-awaiting-verification { padding: 5px 0; font-weight: 500 }
    .comment > .inner > .comment-bottom { margin-top: 25px; border-bottom: 1px solid #e5e5e5; }
    @media(max-width: 500px) { .comment > .inner > .comment-bottom { margin-top: 10px; } }
    .children .comment > .inner > .comment-bottom { margin-inline-start: 28px; }
    @media(max-width: 500px) { .children .comment > .inner > .comment-bottom { margin-inline-start: 21px; } }
    @media(min-width: 500px) { .hide-avatars .children .comment > .inner > .comment-bottom { margin-inline-start: 33px; } }
    /* min-height reserves space for the absolutely-positioned reply button (.comment-toolbar-reply, top:-4px below). */
    .comment > .inner > .comment-bottom > .comment-bottom-toolbar { position: relative; min-height: 36px; }
    .comment > .inner > .comment-bottom .comment-vote-options .votes-up, .comment > .inner > .comment-bottom .comment-vote-options .votes-down { position: relative; top: 1px; vertical-align: middle; font-size: 12px; font-weight: 500; }
    .comment > .inner > .comment-bottom .comment-vote-options .votes-up { margin-inline-end: 5px; }
    .comment > .inner > .comment-bottom .comment-vote-options .votes-down { margin-inline-start: 5px; }
    .comment > .inner > .comment-bottom .comment-toolbar-vote .comment-votes .divider { height: 20px; }
    .comment > .inner > .comment-bottom .comment-vote-options { display: inline-block; margin-block: 0; margin-inline: 2px 7px; font-size: 12px; }
    .comment > .inner > .comment-bottom .comment-vote-options > span { cursor: pointer }
    .comment > .inner > .comment-bottom .comment-votes, .comment > .inner > .comment-bottom .comment-reply-start { display: inline-block; margin: 5px 2px; font-size: 12px }
    .comment > .inner > .comment-bottom .comment-vote-options button { margin: 0 3px }
    .comment > .inner > .comment-bottom .comment-vote-options .view-count { display: inline-flex; align-items: center; vertical-align: middle; gap: 3px; margin-inline-start: 3px; color: #828282; }
    .comment > .inner > .comment-bottom .comment-vote-options .view-count .icon { opacity: 0.7; }
    .comment > .inner > .comment-bottom .comment-toolbar-reply { position: absolute; inset-inline-end: 0; top: -4px; }
    .comment > .inner > .comment-bottom .comment-reply-start { border: none; background: none; font-weight: 600; }
    .comment > .inner > .comment-bottom .comment-reply-start i { position: relative; top: -2px; pointer-events: none; }
    .comment > .inner > .comment-bottom .comment-vote-auth { width: 100%; max-width: 400px }
    .comment > .inner > .comment-bottom .comment-vote-auth .fast-comments-waiting { /* physical-ok */ float: left; float: inline-start }
    .comment > .inner > .comment-bottom .comment-vote-auth .buttons { text-align: end }
    .comment > .inner > .comment-bottom .comment-vote-auth button { margin-block: 5px 0; margin-inline: 5px 0; padding: 10px 35px; background: #333; color: #fff; border: none; }
    .comment > .inner > .comment-bottom .reply-form-wrapper { padding: 5px }
    .comment > .toggle-replies { margin-block: 0; margin-inline: 15px 0; line-height: 24px; font-weight: 500; font-size: 11px; color: #666; cursor: pointer; user-select: none; }
    .children .comment > .toggle-replies { margin-inline-start: 41px; }
    @media(max-width: 500px) { .children .comment > .toggle-replies { margin-inline-start: 12px; } }
    .comment > .toggle-replies > * { vertical-align: middle; pointer-events: none; }
    .comment > .toggle-replies > i { margin-inline-end: 5px; }
    .comment > .toggle-replies > span > .count { color: #1f1f1f; }
    .comment > .toggle-replies > span > .count:before { content: "("; }
    .comment > .toggle-replies > span > .count:after { content: ")"; }
    .comment .prompt { position: absolute; top: -2px; inset-inline-start: 0; width: 100%; height: 100%; padding: 10px; box-sizing: border-box; background: rgba(255, 255, 255, 0.9); text-align: center } /* -2px to ensure covers up arrow */
    .comment .prompt p { font-weight: 500; }
    .comment .prompt button { user-select: none; }
    .comment .prompt button:not(:last-child) { margin-inline-end: 10px }
    .comment .comment-error p:before { padding-inline-end: 5px; content: "❗" }
    @media(max-width: 500px) { .comment .prompt { padding: 5px } }
    @media(max-width: 500px) { .comment .prompt p { margin: 0 0 .4em 0 } }
    .comment > .inner > .requires-verification-approval, .comment > .inner > .awaiting-approval-notice { margin: 15px 0; }
    /* Date + flag/pin/lock icons + menu (3-dot/edit). On hover, z-index jumps so the open menu can overlap sibling comments. Match this when styling custom menu overlays. */
    .comment .top-right { position: absolute; top: 0; inset-inline-end: 0; z-index: 2; }
    .comment .top-right:hover { z-index: 9001; }
    .comment .jump-link { padding-inline-end: 5px; vertical-align: baseline; font-size: 12px; text-decoration: none; color: #4f4f4f }
    .comment .jump-link .abs-date { margin-inline-start: 5px; }
    @media(max-width: 500px) { .comment > .inner > .top-right { top: -10px; } } /* if top is too low, will go above highlighting for admin actions */
    .comment .top-right > * { display: inline-block; vertical-align: middle }
    .comment > .inner > .replied { display: inline-block; margin-block: -7px 0; margin-inline: 0 5px; vertical-align: top; }
    .hide-avatars .comment > .inner > .replied { margin-block: 0; margin-inline: 0 5px; }
    .children > .comment:not(:first-child) > .replied { opacity: 0.5; }
    .comment .menu { position: relative; padding-block: 10px; padding-inline: 0 10px; user-select: none }
    .comment .menu .menu-btn { cursor: pointer }
    .comment .menu .menu-btn i { display: inline-block; width: 4px; height: 4px; margin: 2px; background: #333; border-radius: 10px }
    /* .menu.empty rendered when no actions are available -- kept in DOM to preserve layout, dimmed and non-clickable. */
    .comment .menu.empty .menu-btn { cursor: default; opacity: 0.5; }
    .menu-content { position: absolute; width: 130px; min-width: max-content; padding: 20px; background-color: #fff; box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.10); border-radius: 10px; border-start-end-radius: 0; z-index: 9001; }
    .menu-content div { padding: 3px; font-weight: 700; cursor: pointer; font-size: 13px }
    .menu-content div > * { vertical-align: middle; pointer-events: none; }
    .menu-content div > i { margin-block: 0; margin-inline: 0 5px; }
    .menu-content div > span { display: inline-block; width: calc(100% - 29px); padding: 7px 10px; box-sizing: border-box; }
    .menu-content div:not(:last-child) > span { border-bottom: 1px solid #dcdcdc; }
    .menu-content.corner-bottom-right { border-radius: 10px; border-end-end-radius: 0; }
    @media(max-width: 500px) { .comment .menu { padding-block: 10px; padding-inline: 0 5px; } } /* if top is too low, will go above highlighting for admin actions */
    .comment > .children { margin-block: 15px 0; margin-inline: 15px 0 }
    /* "Powered by FastComments" footer. White-labeled tenants get .empty (no content) - hidden entirely, like the live chat widget does. Custom tenant CSS can still restore it via .footer.empty. */
    .footer { height: 65px; margin-top: 25px; padding-top: 20px; text-align: center; font-size: 12px; }
    .footer:not(.empty) { border-top: 1px solid #ccc }
    .footer.empty { display: none; }
    .footer a, .footer .logo { vertical-align: top; text-decoration: none; color: #201600; font-weight: bold; font-size: 14px } 
    .footer .logo { margin-top: -2px; padding-inline-end: 2px; } 
    .comment.readonly .comment-vote-options { display: none }
    /* Autocomplete dropdown for @mentions and #hashtags inside the comment input. Anchored relative to .comment-input. */
    .search-list { position: absolute; z-index: 4; width: 100%; margin-top: -9px; box-sizing: border-box; border-radius: 0 0 11px 11px; background: #fff; border: 1px solid var(--fc-input-border-color, #bfbfbf); }
    .search-list .cross { position: absolute; top: -11px; inset-inline-end: 0; width: 20px; height: 20px; background-color: #fff; border: 1px solid var(--fc-input-border-color, #bfbfbf); border-inline-end: 0; border-radius: 16px; border-start-end-radius: 0; border-end-end-radius: 0; cursor: pointer; }
    .search-list .search-entry { padding: 5px 10px; cursor: pointer; }
    .search-list .search-entry.last { border-radius: 0 0 11px 11px }
    .search-list .search-entry img { width: 20px; height: 20px; margin-inline-end: 3px; vertical-align: middle; border-radius: 20px; }
    .search-list .search-entry > * { pointer-events: none; }
    .search-list .search-entry:hover, .search-list .search-entry.kb-select, .search-list .cross:hover { background-color: #eee; }
    .search-list .search-section-header { padding: 4px 10px; font-size: 11px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: 0.5px; pointer-events: none; user-select: none; }
    .search-list .search-section-loading { padding: 4px 10px; font-size: 11px; color: #888; font-style: italic; pointer-events: none; user-select: none; }
    /* .search-list-open is added to .comment-input while the @/# autocomplete is showing -- hides the submit button so it doesn't collide with the dropdown. */
    .comment-input.search-list-open .reply-button-wrapper { display: none; }
    .avatar-wrapper .activity-icon { position: absolute; top: 4px; inset-inline-end: 4px; }
    .activity-icon { width: 8px; height: 8px; border-radius: 10px; }
    .username .activity-icon { position: relative; top: 2px; display: none; margin-inline-end: 5px; }
    .activity-icon.online {  display: inline-block; background: lime; box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.2);  }
    .hide-avatars .activity-icon.online { top: -1px;  }
    @media(max-width: 500px) { .activity-icon { width: 5px; height: 5px;  }  }

Виджет последних комментариев отображает список самых последних комментариев по всему вашему сайту или для конкретной страницы. Он включает заголовок, округлённые аватары, превью комментариев, кликабельные даты с глубокими ссылками на комментарий и автоматическое определение тёмной темы.

Базовая установка

Установка виджета последних комментариев

Copy

Run

<script src="https://cdn.fastcomments.com/js/widget-recent-comments-v2.min.js"></script>
<div id="fastcomments-widget-recent-comments"></div>
<script>
    FastCommentsRecentCommentsV2(document.getElementById('fastcomments-widget-recent-comments'), {
        tenantId: 'demo'
    });
</script>

Параметры конфигурации

tenantId (required): Ваш идентификатор арендатора FastComments
urlId (optional): Фильтрация по одной странице. Оставьте null для всех страниц
count (optional): Количество отображаемых комментариев. По умолчанию 10
hasDarkBackground (optional): Принудительное применение стилей тёмной темы. Если не указано, определяется автоматически по фону страницы

Структура виджета

Виджет отображается со следующей HTML-структурой:

HTML-структура виджета последних комментариев

Copy

<div class="fc-rc2">
    <div class="fc-rc2-heading">Recent Comments</div>
    <div class="fc-rc2-list">
        <div class="fc-rc2-card">
            <div class="fc-rc2-header">
                <img class="fc-rc2-avatar" src="..." alt="Avatar" />
                <div class="fc-rc2-meta">
                    <span class="fc-rc2-name">Username</span>
                    <a class="fc-rc2-date" href="...">2 hours ago</a>
                </div>
            </div>
            <div class="fc-rc2-body">Comment preview...</div>
            <a class="fc-rc2-page-link" href="...">Page Title</a>
        </div>
    </div>
</div>

CSS по умолчанию

CSS по умолчанию для виджета последних комментариев

Copy

.fc-rc2 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    text-align: left;
    line-height: 1.5;
    color: #1a1a1a;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 20px;
    background: #fff;
}
.fc-rc2-heading { font-size: 16px; font-weight: 700; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #eee; }
.fc-rc2-card { padding: 14px 0; border-bottom: 1px solid #f0f0f0; }
.fc-rc2-card:last-child { border-bottom: none; }
.fc-rc2-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.fc-rc2-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.fc-rc2-name { font-size: 13px; font-weight: 600; }
.fc-rc2-date { font-size: 11.5px; color: #999; text-decoration: none; }
.fc-rc2-body { font-size: 14px; line-height: 1.55; color: #444; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fc-rc2-page-link { display: inline-block; margin-top: 6px; font-size: 12px; color: #777; text-decoration: none; }
.fc-rc2-page-link:hover { color: #0066cc; text-decoration: underline; }

Примеры настройки

Изменение размера аватара

Copy

.fc-rc2-avatar {
    width: 40px !important;
    height: 40px !important;
}

Показать больше строк текста комментария

Показать больше строк комментария

Copy

.fc-rc2-body {
    -webkit-line-clamp: 5 !important;
}

Удалить границу контейнера

Copy

.fc-rc2 {
    border: none !important;
    box-shadow: none !important;
}

Виджет «Самые обсуждаемые страницы» отображает ранжированный список ваших страниц с наибольшим количеством комментариев. Он включает заголовок, нумерованные позиции, количество комментариев с иконками, даты последней активности и автоматическое определение тёмного режима.

Базовая установка

Установка виджета «Самые обсуждаемые страницы»

Copy

Run

<script src="https://cdn.fastcomments.com/js/widget-top-pages-v2.min.js"></script>
<div id="fastcomments-widget-top-pages"></div>
<script>
    FastCommentsTopPagesV2(document.getElementById('fastcomments-widget-top-pages'), {
        tenantId: 'demo'
    });
</script>

Параметры конфигурации

tenantId (обязательно): ID вашего тенанта FastComments
hasDarkBackground (необязательно): Принудительно включает тёмное оформление. Если не задано, определяется автоматически по фону страницы

Структура виджета

Виджет отображается со следующей HTML-структурой:

HTML-структура виджета «Самые обсуждаемые страницы»

Copy

<div class="fc-tp2">
    <div class="fc-tp2-heading">Most Discussed Pages</div>
    <div class="fc-tp2-list">
        <div class="fc-tp2-item">
            <div class="fc-tp2-rank">1</div>
            <div class="fc-tp2-detail">
                <a class="fc-tp2-title" href="...">Page Title</a>
                <span class="fc-tp2-activity">Last activity Mar 21, 2026</span>
            </div>
            <div class="fc-tp2-count">42</div>
        </div>
    </div>
</div>

Справочник CSS по умолчанию

CSS по умолчанию виджета «Самые обсуждаемые страницы»

Copy

.fc-tp2 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    text-align: left;
    line-height: 1.5;
    color: #1a1a1a;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 20px;
    background: #fff;
}
.fc-tp2-heading { font-size: 16px; font-weight: 700; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #eee; }
.fc-tp2-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f0f0f0; }
.fc-tp2-item:last-child { border-bottom: none; }
.fc-tp2-rank { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 11px; font-weight: 700; background: #f0f0f0; color: #888; }
.fc-tp2-title { font-size: 13px; font-weight: 500; color: #1a1a1a; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-tp2-activity { font-size: 11px; color: #999; }
.fc-tp2-count { font-size: 12px; font-weight: 600; color: #666; }

Примеры настройки

Удалить значки позиций

Удаление значков позиций

Copy

.fc-tp2-rank {
    display: none !important;
}

Удалить рамку контейнера

Удаление рамки контейнера

Copy

.fc-tp2 {
    border: none !important;
    box-shadow: none !important;
}

The Recent Discussions Widget отображает список страниц, отсортированных по самой последней активности комментариев. Он включает заголовок, даты последней активности, количество комментариев с иконками и автоматическое определение темного режима.

Базовая установка

Настройка стилей виджета Recent Discussions

Copy

Run

<script src="https://cdn.fastcomments.com/js/widget-recent-discussions-v2.min.js"></script>
<div id="fastcomments-widget-recent-discussions"></div>
<script>
    FastCommentsRecentDiscussionsV2(document.getElementById('fastcomments-widget-recent-discussions'), {
        tenantId: 'demo'
    });
</script>

Параметры конфигурации

tenantId (required): Ваш идентификатор арендатора FastComments
count (optional): Количество страниц для отображения. По умолчанию 20, максимум 100
hasDarkBackground (optional): Принудительное применение стилей темного режима. Автоматически определяется из фона страницы, если не задано

Структура виджета

Виджет рендерится со следующей HTML-структурой:

HTML-структура виджета Recent Discussions

Copy

<div class="fc-rd2">
    <div class="fc-rd2-heading">Recent Discussions</div>
    <div class="fc-rd2-list">
        <div class="fc-rd2-item">
            <div class="fc-rd2-detail">
                <a class="fc-rd2-title" href="...">Page Title</a>
                <span class="fc-rd2-activity">Last activity Mar 21, 2026</span>
            </div>
            <div class="fc-rd2-count">42</div>
        </div>
    </div>
</div>

Справка по CSS по умолчанию

CSS по умолчанию виджета Recent Discussions

Copy

.fc-rd2 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    text-align: left;
    line-height: 1.5;
    color: #1a1a1a;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 20px;
    background: #fff;
}
.fc-rd2-heading { font-size: 16px; font-weight: 700; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #eee; }
.fc-rd2-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f0f0f0; }
.fc-rd2-item:last-child { border-bottom: none; }
.fc-rd2-title { font-size: 13px; font-weight: 500; color: #1a1a1a; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-rd2-activity { font-size: 11px; color: #999; }
.fc-rd2-count { font-size: 12px; font-weight: 600; color: #666; }

Примеры настройки

Удалить границу контейнера

Copy

.fc-rd2 {
    border: none !important;
    box-shadow: none !important;
}

Пользовательский цвет ссылки

Copy

a.fc-rd2-title:hover {
    color: #e63946 !important;
}

Другие фронтенд-библиотеки

Все официальные фронтенд-библиотеки FastComments для React, Angular, Vue и т. д. принимают параметр конфигурации customCSS и являются обертками вокруг библиотеки vanilla js с той же HTML-структурой.

Язык 🇷🇺 Русский

Начало работы

Стилизация виджетов

Другие фронтенд-библиотеки

Руководство по пользовательской стилизации

How to Override Styles

Как настроить стили

Как настроить стили виджета комментариев

Вариант 1: Через параметр customCSS

Вариант 2: Через панель администратора

Советы

Настройка границы окна комментариев

Изменение цвета рамки

Изменение цвета рамки во время ввода

Скругление всех четырёх углов

Квадратные углы

Соответствие вашему бренду

Разные цвета в тёмном режиме

Почему не стилизовать текстовое поле напрямую?

Справочник по пользовательскому CSS для виджета комментариев (v2, последняя версия)

Стилизация виджета последних комментариев

Базовая установка

Параметры конфигурации

Структура виджета

CSS по умолчанию

Примеры настройки

Изменение размера аватара

Показать больше строк текста комментария

Удалить границу контейнера

Стилизация виджета самых обсуждаемых страниц

Базовая установка

Параметры конфигурации

Структура виджета

Справочник CSS по умолчанию

Примеры настройки

Удалить значки позиций

Удалить рамку контейнера

Стилизация виджета последних обсуждений

Базовая установка

Параметры конфигурации

Структура виджета

Справка по CSS по умолчанию

Примеры настройки

Удалить границу контейнера

Пользовательский цвет ссылки

Другие фронтенд-библиотеки