FastComments.com
Menu Icon

Мова 🇺🇦 Українська
🇺🇸 English 🇧🇬 Български 🇨🇳 简体中文 🇹🇼 繁體中文 🇭🇷 Hrvatski 🇩🇰 Dansk 🇳🇱 Nederlands 🇺🇸 English (US) 🇨🇦 Français (Canada) 🇫🇷 Français (France) 🇩🇪 Deutsch 🇨🇾 Ελληνικά (Κύπρος) 🇬🇷 Ελληνικά 🇮🇱 עברית 🇮🇹 Italiano 🇯🇵 日本語 🇰🇷 한국어 🇵🇱 Polski 🇧🇷 Português (Brasil) 🇷🇺 Русский 🇺🇦 Русский (Украина) 🇧🇦 Српски (БиХ) 🇷🇸 Srpski (Latinica) 🇲🇪 Српски (Црна Гора) 🇷🇸 Српски 🇸🇮 Slovenščina 🇪🇸 Español 🇺🇦 Українська 🇹🇷 Türkçe

Початок роботи

Як налаштувати стилі

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

Довідник зі стилізації віджета коментарів (v2, остання версія)
Стилізація віджета останніх коментарів
Стилізація віджета найпопулярніших сторінок

Інші бібліотеки фронтенду

Інші бібліотеки фронтенду

Custom Styling Guide

Цей посібник надає повний CSS за замовчуванням, який використовується віджетом коментарів FastComments (v2), а також деякі інструкції щодо перевизначення стилів.

Розуміння CSS за замовчуванням дає змогу вам:

  • Налаштовувати зовнішній вигляд шляхом перевизначення конкретних стилів
  • Виправляти проблеми зі стилями бачачи, які класи та селектори доступні
  • Створювати власні теми, які працюють зі структурою віджета
  • Використовувати з асистентами ШІ для генерації власних змін CSS.

Як перевизначити стилі

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

Як налаштувати стилі Internal Link

Як налаштувати стилі віджета коментарів

Ви можете налаштувати стилі віджета коментарів двома способами:

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

Передайте свій кастомний CSS як рядок у параметр customCSS під час ініціалізації віджета:

window.FastCommentsUI(document.getElementById('fastcomments-widget'), {
    tenantId: 'your-tenant-id',
    customCSS: `
        .fast-comments .comment {
            background-color: #f0f0f0 !important;
            border-radius: 8px !important;
        }
    `
});

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

  1. Перейдіть на сторінку налаштування віджета у панелі адміністратора
  2. Прокрутіть до розділу "Custom CSS" під "Advanced"
  3. Введіть свій кастомний CSS
  4. Натисніть "Save"

Ваш кастомний CSS буде застосований до всіх віджетів коментарів на вашому сайті.

Поради

  • Використовуйте !important, щоб при потребі переважити стилі за замовчуванням
  • Орієнтуйтеся на конкретні селектори, щоб не впливати на інші частини сайту
  • Тестуйте свій CSS у різних браузерах для сумісності
  • Віджет використовує стандартний CSS - жодні спеціальні препроцесори не потрібні

Довідник зі стилізації віджета коментарів (v2, остання версія) Internal Link

Comment Widget Default CSS
Copy Copy
1
2body { margin: 0; padding: 0; }
3 d { display: block }
4 @keyframes pop-in { 0% { transform: scale(0.3); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }
5 @keyframes placeHolderShimmer { 0% { background-position: 0 0 } 100% { background-position: 100% 0 } }
6 .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%; }
7 @keyframes backgroundToNormal { from { background: lightblue } to { background: inherit } }
8 .fast-comments { position: relative; width: 100%; font-size: 13px }
9 .hidden { display: none }
10 .invisible { visibility: hidden }
11 .inline-block { display: inline-block }
12 .icon { display: inline-block; width: 24px; height: 24px; vertical-align: middle; image-rendering: -webkit-optimize-contrast; }
13 .icon.bubble { background: url("${FC_CDN}/images/svg/v2/text_bubble_dark.svg") no-repeat center; background-size: 22px 22px; }
14 .icon.bubble-white { background: url("${FC_CDN}/images/svg/v2/text_bubble_white.svg") no-repeat center; background-size: 22px 22px; }
15 .icon.cross { background: url("${FC_CDN}/images/svg/v2/close.svg") no-repeat center; background-size: 9px 9px; }
16 .icon.reply-arrow-inactive { background: url("${FC_CDN}/images/svg/v2/reply_inactive.svg") no-repeat center; background-size: 15px 15px; }
17 .icon.reply-arrow-active { background: url("${FC_CDN}/images/svg/v2/reply.svg") no-repeat center; background-size: 15px 15px; }
18 .icon.up { background: url("${FC_CDN}/images/svg/v2/thumbs_up_light.svg") no-repeat center; background-size: 12px 12px; }
19 .icon.up.active, .icon.up:hover { background: url("${FC_CDN}/images/svg/v2/thumbs_up_dark.svg") no-repeat center; background-size: 12px 12px; }
20 .icon.down { background: url("${FC_CDN}/images/svg/v2/thumbs_down_light.svg") no-repeat center; background-size: 12px 12px; }
21 .icon.down.active, .icon.down:hover { background: url("${FC_CDN}/images/svg/v2/thumbs_down_dark.svg") no-repeat center; background-size: 12px 12px; }
22 .icon.pin-small { background: url("${FC_CDN}/images/svg/v2/pin.svg") no-repeat center; background-size: 15px 15px; }
23 .icon.logo { width: 27px; height: 33px; background: url("${FC_CDN}/images/svg/v2/logo.svg") no-repeat center; background-size: 22px; }
24 .icon.edit-small { background: url("${FC_CDN}/images/svg/menu.svg") no-repeat center; background-size: 17px 17px; }
25 .icon.edit-big { background: url("${FC_CDN}/images/svg/v2/edit.svg") no-repeat center; background-size: 22px 22px; }
26 .icon.trash { background: url("${FC_CDN}/images/svg/v2/trash_thin.svg") no-repeat center; background-size: 22px 22px; }
27 .icon.eye { background: url("${FC_CDN}/images/svg/v2/view.svg") no-repeat center; background-size: 22px 22px; }
28 .icon.eye-slash { background: url("${FC_CDN}/images/svg/v2/view_hide.svg") no-repeat center; background-size: 22px 22px; }
29 .icon.replied { background: url("${FC_CDN}/images/svg/v2/replied.svg") no-repeat center; background-size: 22px 22px; }
30 .icon.bold { background: url("${FC_CDN}/images/svg/v2/editor_bold.svg") no-repeat center; background-size: 9px; }
31 .icon.ul { position: relative; top: 1px; background: url("${FC_CDN}/images/svg/v2/editor_underline.svg") no-repeat center; background-size: 10px; }
32 .icon.it { background: url("${FC_CDN}/images/svg/v2/editor_itallic.svg") no-repeat center; background-size: 7px; }
33 .icon.s { background: url("${FC_CDN}/images/svg/v2/editor_strike.svg") no-repeat center; background-size: 10px; }
34 .icon.code { background: url("${FC_CDN}/images/svg/v2/editor_embed.svg") no-repeat center; background-size: 16px; }
35 .icon.link { position: relative; top: -1px; background: url("${FC_CDN}/images/svg/v2/editor_link.svg") no-repeat center; background-size: 14px; }
36 .icon.img-up { background: url("${FC_CDN}/images/svg/v2/editor_image.svg") no-repeat center; background-size: 16px; }
37 .icon.img-btn-wrap { position: relative; }
38 .icon.return { background: url("${FC_CDN}/images/svg/return.svg") no-repeat center; background-size: 22px; margin-left: 6px; }
39 .icon.gif { width: auto; height: auto; font-size: 0; }
40 .icon.gif::before { content: "GIF"; font-size: 12px; }
41 .icon.gif::before, .t-btn.txt { display: inline-block; width: auto; height: auto; margin-right: 3px; text-align: center; vertical-align: middle; font-weight: 500; }
42 .icon.bell { background: url("${FC_CDN}/images/svg/v2/bell.svg") no-repeat center; background-size: 22px; }
43 .icon.bell-red { background: url("${FC_CDN}/images/svg/v2/bell-red.svg") no-repeat center; background-size: 22px; }
44 .divider { display: inline-block; height: 25px; margin: 0 10px; vertical-align: middle; border-right: 1px solid #c2c2c2; }
45 .icon.block { background: url("${FC_CDN}/images/svg/v2/ban.svg") no-repeat; background-size: 22px 22px; }
46 .icon.flag { background: url("${FC_CDN}/images/svg/flag.svg") no-repeat; background-size: 22px 22px; }
47 .icon.flag-small { background: url("${FC_CDN}/images/svg/flag.svg") no-repeat center; background-size: 15px 15px; }
48 .select-dir-wrapper { clear: both; text-align: right; border-bottom: 1px solid #afafaf; }
49 .select-dir-wrapper .comment-count { float: left; font-weight: 500; }
50 .select-dir-wrapper > * { margin: 9px; height: 16px }
51 .select-dir { display: inline-block }
52 .dropdown { position: relative; z-index: 3; text-align: right }
53 .dropdown .drop-label { padding: 0 0 7px 0; cursor: pointer; font-weight: 500 }
54 .dropdown .drop-label i { position: relative; display: inline-block; top: -2px; font-size: 7px }
55 .dropdown .items { position: absolute; display: none; top: 20px; right: 0; width: 150px; overflow: hidden; border-radius: 0 0 4px 4px; background: #fff; }
56 .dropdown:hover .items { position: absolute; display: block }
57 .dropdown .items > * { padding: 5px 9px; cursor: pointer; font-weight: 500; text-align: left; font-size: 13px }
58 .no-comments { clear: both; text-align: center; font-weight: 500; font-size: 16px; }
59 .new-comments-message { width: fit-content; margin: 20px auto 0; padding: 5px 10px; text-align: center; cursor: pointer; font-weight: 500 }
60 .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-right: 3px; border: 1px solid #a2a2a2; border-radius: 4px 0 4px 4px; }
61 .new-comments-message span { pointer-events: none; padding-bottom: 2px; border-bottom: 1px solid #a3a3a3; }
62 .comment .new-comments-message { margin: 10px auto 0; }
63 .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 #bfbfbf; border-radius: 0 11px 11px 11px; }
64 .sso-login-wrapper .message-text, .fastcomments-message-wrapper .message-text { display: inline; pointer-events: none; }
65 .fastcomments-message-wrapper .message-text a { color: #fff; pointer-events: all; }
66 .sso-login-wrapper .sso-login, .fastcomments-message-wrapper .fastcomments-message { display: inline-block; animation: pop-in 0.5s; animation-timing-function: ease; padding: 10px 17px 10px 27px; border-radius: 0 7px 7px 7px; background: #333; color: #fff; text-decoration: none; font-size: 17px; font-weight: 500; }
67 .fastcomments-message-wrapper .fastcomments-message { margin: 0 5%; cursor: default; }
68 .sso-login-wrapper .sso-login[href] { cursor: pointer; }
69 .sso-login-wrapper .sso-login .message-text, .fastcomments-message-wrapper .fastcomments-message .message-text { margin-right: 10px; }
70 .sso-login-wrapper .sso-login .icon, .fastcomments-message-wrapper .fastcomments-message .icon { pointer-events: none; }
71 .sso-login-wrapper .sso-login.clickable { cursor: pointer; }
72 .comment .sso-login-wrapper { padding: 7px 0; text-align: left }
73 .comment .sso-login-wrapper .sso-login { font-size: 16px }
74 .default-hidden { transition-duration: 300ms }
75 .comment-input:not(.show-default-hidden) .default-hidden { height: 0; margin: 0 !important; opacity: 0; pointer-events: none; transition-duration: 200ms }
76 .loading .pagination { opacity: 0.5; pointer-events: none; }
77 .card { border: 1px solid #d0d0d0; background: #fdfdfd; border-radius: 3px; box-shadow: 5px 5px 7px rgba(0,0,0,.1) }
78 button, .button { display: inline-block; margin-bottom: 10px; padding: 4px 10px; border-radius: 0 7px 7px 7px; font-size: 15px; background: #fbfbfb; color: #333; text-decoration: none; border: 1px solid #a2a2a2; cursor: pointer }
79 .fast-comments, textarea { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif }
80 textarea::placeholder { font-size: 13px; font-weight: 500; transition-duration: 150ms }
81 textarea:focus::placeholder { color: transparent }
82 .fc-red { display: inline-block; margin: 5px; color: #ff0000 }
83 .comment-error { padding: 10px }
84 input, textarea { padding: 12px 20px; border: 1px solid #bfbfbf; border-radius: 0 11px 11px 11px; box-sizing: border-box; outline: none; background: transparent; }
85 input { padding: 9px 12px; border-radius: 0 6px 6px 6px; }
86 input:focus, textarea:focus, textarea:focus + .horizontal-border-wrapper, .comment-input textarea:focus { border-color: #555 } /* .comment-reply textarea:focus for ssr */
87 .pagination { margin-top: 50px; line-height: 19px; text-align: center; user-select: none; }
88 .pagination > * { display: inline-block; cursor: pointer; font-weight: 700; }
89 .pagination > * > span { font-weight: normal; pointer-events: none; }
90 .pagination > * > span::before { content: "("; }
91 .pagination > * > span::after { content: ")"; }
92 .pagination .load-next-page { padding-right: 25px; }
93 .pagination .load-all { padding-left: 25px; border-left: 2px solid #555; } /* important that border is on the one to the right, as it doesn't always show */
94 .comments-toggle { display: block; width: fit-content; margin: 20px auto; cursor: pointer; padding: 10px 17px 10px 27px; border-radius: 7px; background: #333; color: #fff; text-decoration: none; font-size: 17px; font-weight: 500; user-select: none; }
95 .replying-to { margin-bottom: 5px }
96 .comment-reply { position: relative; width: 100%; margin: 10px 0 15px 0; }
97 .comment-reply.root { padding: 15px; box-sizing: border-box; }
98 @media(max-width: 500px) { .comment-reply.root { padding: 15px 5px 15px 5px; } }
99 .comment-reply .fast-comments-waiting { display: block; margin: 5px 0 }
100 .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 */
101 .comment-reply .comment-reply-top-bar .logged-in-info { display: inline-block; width: calc(100% - 60px); min-width: 150px; }
102 .comment-reply .comment-reply-top-bar .logged-in-info .avatar { display: inline-block; height: 25px; vertical-align: middle; margin-right: 5px; border-radius: 25px; overflow: hidden; box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.07); font-size: 0; }
103 .comment-reply .comment-reply-top-bar .logged-in-info .avatar .open-profile { cursor: pointer; }
104 .comment-reply .comment-reply-top-bar .logged-in-info .avatar.animated-background img { opacity: 0.1; }
105 .comment-reply .comment-reply-top-bar .logged-in-info .avatar img { width: 25px; height: 25px; object-fit: cover; }
106 .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; }
107 .comment-reply .comment-reply-top-bar .logged-in-info .badges { display: inline-block; margin-left: 5px; }
108 .comment-reply .comment-reply-top-bar .right { float: right; }
109 .comment-reply .comment-reply-top-bar .right > * { display: inline-block; }
110 .comment-reply .comment-reply-top-bar .right .menu { font-weight: 500; font-size: 11px; }
111 .comment-reply .comment-reply-top-bar .right .menu:hover { z-index: 9002; }
112 .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; }
113 .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 0 10px 10px; }
114 .comment-reply .comment-reply-top-bar .right .menu .items > * { font-weight: 700; }
115 .comment-reply .comment-reply-top-bar .right .notification-bell { position: relative; margin-left: 5px; cursor: pointer; }
116 .comment-reply .comment-reply-top-bar .right .notification-bell .count { position: absolute; top: -3px; left: 19px; min-width: 15px; height: 15px; text-align: center; font-size: 11px; pointer-events: none; color: red; display: none; }
117 .comment-reply .comment-reply-top-bar .right .notification-bell .icon.bell-red { display: none; }
118 .comment-reply .comment-reply-top-bar .right .notification-bell > * { pointer-events: none; }
119 .comment-reply .comment-reply-top-bar .right .notification-bell.has-notifications .icon.bell { display: none; }
120 .comment-reply .comment-reply-top-bar .right .notification-bell.has-notifications .icon.bell-red { display: inline-block; }
121 .comment-reply .comment-reply-top-bar .right .notification-bell.has-notifications .count { display: block; }
122 .toolbar { position: relative; display: inline-block; margin: 5px 0 0 0; font-size: 13px }
123 .toolbar .t-btn { display: inline-block; margin: 0 1px; vertical-align: middle; cursor: pointer; transition-duration: 200ms; user-select: none; }
124 .toolbar .t-btn:hover { opacity: 0.7; }
125 .toolbar .img-btn-wrap { display: inline-block; overflow: hidden }
126 .toolbar .t-btn input[type=file] { position: absolute; padding: 40px; font-size: 100px; top: 0; left: 0; opacity: 0; cursor: pointer }
127 .commenty-input:not(.show-default-hidden) .toolbar { width: 100%; margin-top: -50px; }
128 @media(max-width: 500px) { .toolbar { display: flex; width: 100%; padding-bottom: 12px; justify-content: space-evenly; } }
129 @media(max-width: 500px) { .comment-input .toolbar { margin-top: 50px; border-bottom: 1px solid #bfbfbf; } }
130 .comment-reply .auth-input, .comment-vote-auth.auth-input { margin: 10px 0; font-size: 13px }
131 .comment-reply .auth-input .fc-login { margin: 10px 0 0; }
132 .comment-reply .auth-input .reasoning, .comment-vote-auth.auth-input .reasoning { font-weight: 600; }
133 .comment-reply .auth-input .fc-red, .comment-vote-auth.auth-input .fc-red { display: block }
134 .comment-reply .auth-input input, .comment-vote-auth.auth-input input { width: 100%; margin-top: 10px; padding: 9px 12px; border-radius: 0 6px 6px 6px; font-size: 14px; border: 1px solid #a2a2a2; }
135 .comment-reply .auth-input .solicitation-info, .comment-vote-auth.auth-input .solicitation-info { margin-top: 10px; }
136 .comment-reply .auth-input .fast-comments-reply { margin-top: 10px; padding: 10px 45px; border-radius: 5px 0 5px 5px; background: #333; color: #fff; border: none; }
137 .comment-input, .comment-edit { position: relative; padding-bottom: 30px; border-radius: 0 11px 11px 11px; }
138 .comment-input textarea { display: block; width: 100%; height: 130px; padding: 15px 25px 15px 15px; resize: none; font-size: 16px; border-bottom: none; border-radius: 0 11px 0 0; }
139 .comment-input textarea::placeholder { font-size: 16px; font-weight: 400; }
140 .comment-input input { display: block; width: 100%; font-size: 14px; }
141 .comment-input .fastcomments-message-wrapper { border: 1px solid #bfbfbf; border-bottom: none; border-radius: 0 11px 0 0; }
142 .comment-input input[name=fastcomments-link] { display: block; width: 100%; margin: 10px 0; }
143 .comment-input .horizontal-border-wrapper { pointer-events: none; border-color: #bfbfbf; }
144 .comment-input .horizontal-border { position: absolute; height: 20px; border-bottom: 1px solid; border-color: inherit; }
145 .comment-input .horizontal-border-left { bottom: 0; left: 0; border-radius: 0 0 0 11px; }
146 .comment-input .horizontal-border-right { bottom: 0; right: 0; width: 20px; border-radius: 0 0 11px 0; }
147 .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; }
148 .comment-input .horizontal-border-top-right { top: 0; right: 0; border-radius: 0 11px 0 0; width: 20px; }
149 .comment-input .horizontal-border-top-left { top: 0; left: 0; }
150 .comment-input .horizontal-border-bottom-left { position: absolute; height: 30px; width: 15px; left: 0; bottom: 0; border-color: inherit; border-left-width: 1px; border-left-style: solid; border-radius: 0 0 0 11px; }
151 .comment-input .horizontal-border-bottom-right { position: absolute; height: 30px; width: 15px; right: 0; bottom: 0; border-color: inherit; border-right-width: 1px; border-right-style: solid; border-radius: 0 0 11px 0; }
152 .comment .comment-input .horizontal-border-top-left, .comment .comment-input .horizontal-border-top-right { display: block }
153 @media(max-width: 500px) { .comment-input textarea, .comment-input .fastcomments-message-wrapper { height: 130px; } }
154 .comment .reply-button-wrapper { position: relative; float: right; top: -19px; right: 26px; border-radius: 0 7px 7px 7px; }
155 .comment .fast-comments-reply, .comment .edit-save { padding: 10px 27px; border-radius: 0 7px 7px 7px; background: #333; color: #fff; text-decoration: none; }
156 .comment .cancel-button-wrapper { position: absolute; top: 9px; right: 25px; border-radius: 4px; }
157 .comment .comment-edit .cancel-button-wrapper { top: -13px }
158 .comment .fast-comments-reply-cancel { margin-bottom: 0; padding: 1px 1px; border-radius: 4px; }
159 .comment .fast-comments-reply-cancel .cross { pointer-events: none; }
160 .comment-reply.root .reply-button-wrapper { position: relative; float: right; top: -20px; right: 27px; margin-bottom: 10px; border-radius: 0 7px 7px 7px; }
161 .comment-reply.root button { margin-bottom: 0; padding: 7px 20px; font-weight: 600; }
162 .comment-reply.root button .bubble { margin-left: 10px; pointer-events: none; }
163 .comments { clear: both; padding: 15px 0; }
164 @media(max-width: 500px) { .comments { padding: 15px 5px; } }
165 .comment { position: relative; margin-top: 15px }
166 @media(max-width: 500px) { .comment { margin-top: 5px; } }
167 .comment .comment-text spoiler:not(:hover) { background: #eee; color: #eee; border: 1px dotted #a2a2a2; }
168 .comment .comment-text .inline-image { display: block; max-width: 500px; margin: 3px 0 3px 0 } /* must not select inline-image in wysiwyg */
169 .comment .comment-text .inline-image img { max-width: 100%; max-height: 400px } /* must not select inline-image in wysiwyg */
170 .disable-image-redirect .comment .inline-image { cursor: default; }
171 .comment.is-live > .inner { animation: backgroundToNormal 1.5s }
172 .comment.is-unread > .inner .avatar-wrapper { box-shadow: 0 0 20px #89f796; }
173 .comment.unverified > .commenter-name, .comment.unverified > .comment-content .commenter-name { opacity: 0.7 }
174 .comment.unverified > .comment-content > .comment-text { opacity: 0.7 }
175 .comment.is-spam > .comment-content { border: 1px solid red; } /* can be set when saving comment initially */
176 .comment.is-unapproved > .comment-content { border: 1px solid #ffa700; } /* can be set when saving comment initially */
177 .comment.is-blocked > .inner > .comment-content > .comment-text { max-height: 40px; overflow: hidden; }
178 .comment > .requires-verification-approval { margin: 3px 0 6px }
179 .comment > .inner > .spam-notice { margin: 0 0 10px 0; font-size: 12px; color: red }
180 @media(max-width: 500px) { .comment > .inner > .spam-notice { margin-top: 18px; } }
181 .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 0 15px 15px; vertical-align: top; }
182 .comment .avatar-wrapper.anon { border: 1px solid #3f3f3f; }
183 .comment .avatar-wrapper .open-profile { cursor: pointer; }
184 .comment .avatar-wrapper.animated-background img { opacity: 0.1; }
185 @media(max-width: 500px) { .comment .avatar-wrapper { width: 36px; height: 36px; } }
186 .comment .avatar { width: 100%; height: 100%; object-fit: cover; }
187 @media(max-width: 500px) { .comment .avatar { vertical-align: middle } }
188 .comment .commenter-name .badges { margin-bottom: 5px; }
189 .badges .badge { display: inline-block; vertical-align: middle; line-height: initial; margin: 3px 5px 3px 0; padding: 5px 7px; cursor: default; font-size: 12px; white-space: nowrap; border-radius: 4px; color: #000; }
190 .badges .badge img { max-width: 22px; }
191 .badges .badge.ib { padding: 0; }
192 .comment .commenter-name { font-size: 14px }
193 .comment > .commenter-name { display: none; vertical-align: middle; color: #000 }
194 @media(max-width: 500px) { .comment > .commenter-name { display: inline-block; margin-left: 5px; vertical-align: middle } }
195 .comment > .commenter-name a { display: block; color: #000; text-decoration: none }
196 .comment .commenter-name .website-url { color: #000; text-decoration: underline }
197 .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) */
198 .comment > .inner { position: relative; padding: 8px 8px 10px 8px; } /* relative is required for blocked message */
199 @media(max-width: 500px) { .comment > .inner { padding: 5px 5px 5px 5px; } }
200 .comment > .inner > .comment-content { position: relative; display: inline-block; width: calc(99% - 101px); margin-left: 15px; }
201 .hide-avatars .comment > .inner > .comment-content { margin-left: 0; }
202 .hide-avatars .comments > .comment > .inner > .comment-content > .commenter-name, .hide-avatars .comments > .comment > .inner > .comment-content > .comment-text { padding-left: 0; }
203 @media(max-width: 500px) { .comment > .inner > .comment-content { display: inline; margin-left: 3px; background: transparent } }
204 .comment > .inner > .comment-content .commenter-name { display: inline-block; max-width: 50%; vertical-align: middle; padding: 5px 0 0 2px; color: #171717 }
205 .comment > .inner > .comment-content .commenter-name > .username { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
206 @media(max-width: 500px) { .comment > .inner > .comment-content .commenter-name { padding: 5px 0 0 4px; } }
207 .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 }
208 .comment > .inner > .comment-content .comment-text ol, .comment > .inner > .comment-content .comment-text ul { white-space: normal; }
209 .comment > .inner > .comment-content .comment-text .react { display: inline; max-height: 20px; margin: 0 3px; vertical-align: text-top; }
210 .comment > .inner > .comment-content > .comment-text b > a { color: #000; text-decoration: none; }
211 .comment > .inner > .comment-content > .comment-text blockquote { margin: 15px 0; padding: 0 20px; border-left: 1px solid #e5e5e5; }
212 .comment > .inner > .comment-content .comment-text-edit { width: 100%; margin-top: 15px; }
213 @media(max-width: 500px) { .comment > .children .comment-text { margin-left: 27px; } }
214 .comment > .inner > .comment-content .comment-text br { line-height: 0.5em }
215 .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 }
216 .comment > .inner > .comment-content .edit-failure { display: block; margin: 10px 0; text-align: center }
217 .comment > .inner > .comment-content .comment-toolbar-vote { position: relative; margin-left: 8px }
218 @media(max-width: 500px) { .comment > .inner > .comment-content .comment-toolbar-vote { margin-left: 0 } }
219 .comment > .inner > .comment-content .comment-toolbar-vote .vote-awaiting-verification { padding: 5px 0; font-weight: 500 }
220 .comment > .inner > .comment-bottom { margin-top: 25px; border-bottom: 1px solid #e5e5e5; }
221 @media(max-width: 500px) { .comment > .inner > .comment-bottom { margin-top: 10px; } }
222 .children .comment > .inner > .comment-bottom { margin-left: 28px; }
223 @media(max-width: 500px) { .children .comment > .inner > .comment-bottom { margin-left: 21px; } }
224 @media(min-width: 500px) { .hide-avatars .children .comment > .inner > .comment-bottom { margin-left: 33px; } }
225 .comment > .inner > .comment-bottom > .comment-bottom-toolbar { position: relative; min-height: 36px; }
226 .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; }
227 .comment > .inner > .comment-bottom .comment-vote-options .votes-up { margin-right: 5px; }
228 .comment > .inner > .comment-bottom .comment-vote-options .votes-down { margin-left: 5px; }
229 .comment > .inner > .comment-bottom .comment-toolbar-vote .comment-votes .divider { height: 20px; }
230 .comment > .inner > .comment-bottom .comment-vote-options { display: inline-block; margin: 0 7px 0 2px; font-size: 12px; }
231 .comment > .inner > .comment-bottom .comment-vote-options > span { cursor: pointer }
232 .comment > .inner > .comment-bottom .comment-votes, .comment > .inner > .comment-bottom .comment-reply-start { display: inline-block; margin: 5px 2px; font-size: 12px }
233 .comment > .inner > .comment-bottom .comment-vote-options button { margin: 0 3px }
234 .comment > .inner > .comment-bottom .comment-vote-options .view-count { display: inline-flex; align-items: center; vertical-align: middle; gap: 3px; margin-left: 3px; color: #828282; }
235 .comment > .inner > .comment-bottom .comment-vote-options .view-count .icon { opacity: 0.7; }
236 .comment > .inner > .comment-bottom .comment-toolbar-reply { position: absolute; right: 0; top: -4px; }
237 .comment > .inner > .comment-bottom .comment-reply-start { border: none; background: none; font-weight: 600; }
238 .comment > .inner > .comment-bottom .comment-reply-start i { position: relative; top: -2px; pointer-events: none; }
239 .comment > .inner > .comment-bottom .comment-vote-auth { width: 100%; max-width: 400px }
240 .comment > .inner > .comment-bottom .comment-vote-auth .fast-comments-waiting { float: left }
241 .comment > .inner > .comment-bottom .comment-vote-auth .buttons { text-align: right }
242 .comment > .inner > .comment-bottom .comment-vote-auth button { margin: 5px 0 0 5px; padding: 10px 35px; background: #333; color: #fff; border: none; }
243 .comment > .inner > .comment-bottom .reply-form-wrapper { padding: 5px }
244 .comment > .toggle-replies { margin: 0 0 0 15px; line-height: 24px; font-weight: 500; font-size: 11px; color: #666; cursor: pointer; user-select: none; }
245 .children .comment > .toggle-replies { margin-left: 41px; }
246 @media(max-width: 500px) { .children .comment > .toggle-replies { margin-left: 12px; } }
247 .comment > .toggle-replies > * { vertical-align: middle; pointer-events: none; }
248 .comment > .toggle-replies > i { margin-right: 5px; }
249 .comment > .toggle-replies > span > .count { color: #1f1f1f; }
250 .comment > .toggle-replies > span > .count:before { content: "("; }
251 .comment > .toggle-replies > span > .count:after { content: ")"; }
252 .comment .prompt { position: absolute; top: -2px; left: 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 */
253 .comment .prompt p { font-weight: 500; }
254 .comment .prompt button { user-select: none; }
255 .comment .prompt button:not(:last-child) { margin-right: 10px }
256 .comment .comment-error p:before { padding-right: 5px; content: "❗" }
257 @media(max-width: 500px) { .comment .prompt { padding: 5px } }
258 @media(max-width: 500px) { .comment .prompt p { margin: 0 0 .4em 0 } }
259 .comment > .inner > .requires-verification-approval, .comment > .inner > .awaiting-approval-notice { margin: 15px 0; }
260 .comment .top-right { position: absolute; top: 0; right: 0; z-index: 2; }
261 .comment .top-right:hover { z-index: 9001; }
262 .comment .jump-link { padding-right: 5px; vertical-align: baseline; font-size: 12px; text-decoration: none; color: #4f4f4f }
263 .comment .jump-link .abs-date { margin-left: 5px; }
264 @media(max-width: 500px) { .comment > .inner > .top-right { top: -10px; } } /* if top is too low, will go above highlighting for admin actions */
265 .comment .top-right > * { display: inline-block; vertical-align: middle }
266 .comment > .inner > .replied { display: inline-block; margin: -7px 5px 0 0; vertical-align: top; }
267 .hide-avatars .comment > .inner > .replied { margin: 0 5px 0 0; }
268 .children > .comment:not(:first-child) > .replied { opacity: 0.5; }
269 .comment .menu { position: relative; padding: 10px 10px 10px 0; user-select: none }
270 .comment .menu .menu-btn { cursor: pointer }
271 .comment .menu .menu-btn i { display: inline-block; width: 4px; height: 4px; margin: 2px; background: #333; border-radius: 10px }
272 .comment .menu.empty .menu-btn { cursor: default; opacity: 0.5; }
273 .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 0 10px 10px; z-index: 9001; }
274 .menu-content div { padding: 3px; font-weight: 700; cursor: pointer; font-size: 13px }
275 .menu-content div > * { vertical-align: middle; pointer-events: none; }
276 .menu-content div > i { margin: 0 5px 0 0; }
277 .menu-content div > span { display: inline-block; width: calc(100% - 29px); padding: 7px 10px; box-sizing: border-box; }
278 .menu-content div:not(:last-child) > span { border-bottom: 1px solid #dcdcdc; }
279 .menu-content.corner-bottom-right { border-radius: 10px 10px 0 10px; }
280 @media(max-width: 500px) { .comment .menu { padding: 10px 5px 10px 0; } } /* if top is too low, will go above highlighting for admin actions */
281 .comment > .children { margin: 15px 0 0 15px }
282 .footer { height: 65px; margin-top: 25px; padding-top: 20px; text-align: center; font-size: 12px; }
283 .footer:not(.empty) { border-top: 1px solid #ccc }
284 .footer a, .footer .logo { vertical-align: top; text-decoration: none; color: #201600; font-weight: bold; font-size: 14px }
285 .footer .logo { margin-top: -2px; padding-right: 2px; }
286 .comment.readonly .comment-vote-options { display: none }
287 .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 #bfbfbf; }
288 .search-list .cross { position: absolute; top: -11px; right: 0; width: 20px; height: 20px; background-color: #fff; border: 1px solid #bfbfbf; border-right: 0; border-radius: 16px 0 0 16px; cursor: pointer; }
289 .search-list .search-entry { padding: 5px 10px; cursor: pointer; }
290 .search-list .search-entry.last { border-radius: 0 0 11px 11px }
291 .search-list .search-entry img { width: 20px; height: 20px; margin-right: 3px; vertical-align: middle; border-radius: 20px; }
292 .search-list .search-entry > * { pointer-events: none; }
293 .search-list .search-entry:hover, .search-list .search-entry.kb-select, .search-list .cross:hover { background-color: #eee; }
294 .comment-input.search-list-open .reply-button-wrapper { display: none; }
295 .avatar-wrapper .activity-icon { position: absolute; top: 4px; right: 4px; }
296 .activity-icon { width: 8px; height: 8px; border-radius: 10px; }
297 .username .activity-icon { position: relative; top: 2px; display: none; margin-right: 5px; }
298 .activity-icon.online { display: inline-block; background: lime; box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.2); }
299 .hide-avatars .activity-icon.online { top: -1px; }
300 @media(max-width: 500px) { .activity-icon { width: 5px; height: 5px; } }
301

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

Віджет «Останні коментарі» відображає список найновіших коментарів по всьому вашому сайту або для конкретної сторінки.

Цей віджет містить мінімальні стилі за замовчуванням і спроєктований так, щоб ним було легко налаштовувати за допомогою власного CSS.

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

Віджет виводить наступну HTML-структуру:

<div class="fastcomments-recent-comments">
    <div class="comment">
        <div class="user-details">
            <img src="..." alt="Avatar" class="avatar" />
            <span class="user-name">Username</span>
            <span class="reply-date-time">2 hours ago</span>
        </div>
        <div class="comment-text">Comment content...</div>
        <div class="link-wrapper">
            <a class="link" href="...">Page Title</a>
        </div>
    </div>
    <!-- More comments... -->
</div>

Стандартний CSS віджета «Останні коментарі»

Віджет містить такі мінімальні стилі за замовчуванням:

Стандартний CSS віджета «Останні коментарі»
Copy Copy
1
2.fastcomments-recent-comments {
3 font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
4 text-align: left;
5}
6.fastcomments-recent-comments .comment {
7 padding-top: 5px;
8}
9.fastcomments-recent-comments .comment .user-details img {
10 width: 20px;
11 margin-right: 5px;
12 vertical-align: middle;
13}
14.fastcomments-recent-comments .comment .user-details .user-name {
15 vertical-align: middle;
16 font-size: 12px;
17}
18.fastcomments-recent-comments .comment .user-details .reply-date-time {
19 vertical-align: middle;
20 padding-left: 5px;
21 font-size: 10px;
22}
23.fastcomments-recent-comments .comment .comment-text {
24 position: relative;
25 line-height: 22px;
26 font-size: 14px;
27 text-align: justify;
28 margin: 8px -1em 8px 0;
29 padding-right: 1em;
30}
31.fastcomments-recent-comments .comment .comment-text .inline-image {
32 display: block;
33 max-width: 500px;
34 margin: 3px 0 3px 0;
35}
36.fastcomments-recent-comments .comment .comment-text .inline-image img {
37 max-width: 100%;
38 max-height: 400px;
39}
40.fastcomments-recent-comments .comment .comment-text:before {
41 position: absolute;
42 content: "...";
43 right: 0;
44 bottom: 0;
45}
46.fastcomments-recent-comments .comment .comment-text:after {
47 position: absolute;
48 content: "";
49 right: 0;
50 width: 1em;
51 height: 1em;
52 margin-top: 0.2em;
53 background: #fff;
54}
55.fastcomments-recent-comments .comment > .link-wrapper {
56 margin: 5px 0 0 0;
57}
58.fastcomments-recent-comments .comment > .link-wrapper .link {
59 font-size: 13px;
60}
61

Приклади налаштування

Змінити розмір аватара

.fastcomments-recent-comments .comment .user-details img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50%;
}

Змінити обрізання тексту коментаря

Стилі за замовчуванням використовують CSS-трюки для скорочення довгих коментарів до "...". Щоб вимкнути:

.fastcomments-recent-comments .comment .comment-text:before,
.fastcomments-recent-comments .comment .comment-text:after {
    display: none !important;
}

Додати рамку до коментарів

.fastcomments-recent-comments .comment {
    border-bottom: 1px solid #eee !important;
    padding-bottom: 10px !important;
}

Стилізація віджета найпопулярніших сторінок Internal Link

Віджет Top Pages відображає список ваших сторінок із найбільшою кількістю коментарів.

Цей віджет містить мінімальне стилювання за замовчуванням і призначений для простого налаштування за допомогою власного CSS.

Widget Structure

Віджет рендериться з наступною HTML-структурою:

<div class="fastcomments-top-pages">
    <div class="page">
        <a class="title-link" href="...">Page Title (42)</a>
    </div>
    <!-- More pages... -->
</div>

Top Pages Default CSS Reference

Віджет включає наступне мінімальне стилювання за замовчуванням:

CSS за замовчуванням віджета Top Pages
Copy Copy
1
2.fastcomments-top-pages {
3 font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
4}
5.fastcomments-top-pages .page {
6 padding-top: 5px;
7}
8

Customization Examples

Додавання стилів до посилань

.fastcomments-top-pages .title-link {
    color: #0066cc !important;
    text-decoration: none !important;
    font-size: 14px !important;
}

.fastcomments-top-pages .title-link:hover {
    text-decoration: underline !important;
}

Додавання меж між сторінками

.fastcomments-top-pages .page {
    border-bottom: 1px solid #eee !important;
    padding: 10px 0 !important;
}

.fastcomments-top-pages .page:last-child {
    border-bottom: none !important;
}

Оформлення лічильника коментарів

.fastcomments-top-pages .title-link {
    display: flex !important;
    justify-content: space-between !important;
}

Інші бібліотеки фронтенду Internal Link

Всі офіційні фронтенд-бібліотеки FastComments для React, Angular, Vue тощо, приймають customCSS конфігураційний параметр і є оболонками над бібліотекою на чистому JavaScript з тією ж HTML-структурою.

Зробити внесок у цей посібник