FastComments.com
Menu Icon

Idioma 🇧🇷 Português (Brasil)
🇺🇸 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

Primeiros Passos

Como Personalizar Estilos

Estilização do Widget

Referência de Estilização do Widget de Comentários (v2, mais recente)
Estilização do Widget de Comentários Recentes
Estilização do Widget de Páginas Principais

Outras Bibliotecas de Frontend

Outras Bibliotecas de Frontend

Custom Styling Guide

Este guia fornece o CSS padrão completo usado pelo widget de comentários FastComments (v2) e algumas instruções para sobrescrever os estilos.

Entender o CSS padrão permite que você:

  • Personalize a aparência sobrescrevendo estilos específicos
  • Solucione problemas de estilo ao ver quais classes e seletores estão disponíveis
  • Crie temas personalizados que funcionem com a estrutura do widget
  • Use com assistentes de IA para gerar modificações CSS personalizadas.

Como sobrescrever estilos

Sobrescrever estilos varia conforme o widget. Para o widget de comentários, você deve usar o parâmetro de configuração customCSS para passar o CSS para o iframe, ou especificar o CSS na página de Personalização no painel de administração, que servirá o CSS a partir da nossa CDN.

Como Personalizar Estilos Internal Link

Como Personalizar os Estilos do Widget de Comentários

Você pode personalizar a aparência do widget de comentários de duas maneiras:

Opção 1: Via parâmetro customCSS

Passe seu CSS personalizado como uma string para o parâmetro customCSS ao inicializar o widget:

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

Opção 2: Via Painel de Administração

  1. Vá para a Página de Personalização do Widget no seu painel de administração
  2. Role até a seção "CSS Personalizado" em "Avançado"
  3. Digite seu CSS personalizado
  4. Clique em "Salvar"

Seu CSS personalizado será aplicado a todos os widgets de comentários no seu site.

Dicas

  • Use !important para sobrescrever estilos padrão, se necessário
  • Mire em seletores específicos para evitar afetar outras partes do seu site
  • Teste seu CSS em diferentes navegadores para compatibilidade
  • O widget usa CSS padrão — nenhum pré-processador especial é necessário

Referência de Estilização do Widget de Comentários (v2, mais recente) 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

Estilização do Widget de Comentários Recentes Internal Link

O widget Comentários Recentes exibe uma lista dos comentários mais recentes em todo o seu site ou de uma página específica.

Este widget inclui uma estilização padrão mínima e foi projetado para ser facilmente personalizado com seu próprio CSS.

Estrutura do Widget

O widget é renderizado com a seguinte estrutura 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>

Referência de CSS Padrão dos Comentários Recentes

O widget inclui a seguinte estilização padrão mínima:

CSS Padrão do Widget Comentários Recentes
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

Exemplos de Personalização

Alterar o Tamanho do Avatar

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

Alterar o Truncamento do Texto do Comentário

A estilização padrão usa truques de CSS para truncar comentários longos com "...". Para desabilitar:

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

Adicionar Borda aos Comentários

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

Estilização do Widget de Páginas Principais Internal Link

O widget Top Pages exibe uma lista das suas páginas mais comentadas.

Este widget inclui um estilo padrão mínimo e foi projetado para ser facilmente personalizado com seu próprio CSS.

Estrutura do Widget

O widget é renderizado com a seguinte estrutura HTML:

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

Referência de CSS Padrão do widget Top Pages

O widget inclui o seguinte estilo padrão mínimo:

CSS padrão do widget 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

Exemplos de Personalização

.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;
}

Adicionar Bordas Entre as Páginas

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

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

Estilizar a Contagem de Comentários

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

Outras Bibliotecas de Frontend Internal Link

Todas as bibliotecas front-end oficiais do FastComments para React, Angular, Vue, e assim por diante, aceitam o parâmetro de configuração customCSS e são wrappers em torno da biblioteca vanilla JS com a mesma estrutura HTML.

Contribuir para este guia