FastComments.com
Menu Icon

Langue 🇨🇦 Français (Canada)
🇺🇸 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

Premiers pas

Comment personnaliser les styles

Style des widgets

Référence de style du widget de commentaires (v2, dernière version)
Style du widget des commentaires récents
Style du widget des pages populaires

Autres bibliothèques front-end

Autres bibliothèques front-end

Custom Styling Guide

Ce guide fournit le CSS par défaut complet utilisé par le widget de commentaires FastComments (v2) et quelques instructions pour surcharger les styles.

Comprendre le CSS par défaut vous permet de :

  • Personnaliser l'apparence en surchargeant des styles spécifiques
  • Résoudre les problèmes de style en voyant quelles classes et sélecteurs sont disponibles
  • Créer des thèmes personnalisés compatibles avec la structure du widget
  • Utiliser avec des assistants d'IA pour générer des modifications CSS personnalisées.

Comment surcharger les styles

La façon de surcharger les styles varie selon le widget. Pour le widget de commentaires, vous devez utiliser le paramètre de configuration customCSS pour transmettre le CSS dans l'iframe, ou spécifier le CSS dans la page de Personnalisation du tableau de bord administrateur qui servira le CSS depuis notre CDN.

Comment personnaliser les styles Internal Link

Comment personnaliser le style du widget de commentaires

Vous pouvez personnaliser le style du widget de commentaires de deux façons :

Option 1 : via le paramètre customCSS

Transmettez votre CSS personnalisé sous forme de chaîne au paramètre customCSS lors de l'initialisation du widget :

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

Option 2 : via le tableau de bord d'administration

  1. Accédez à la page de personnalisation du widget dans votre tableau de bord d'administration
  2. Faites défiler jusqu'à la section "CSS personnalisé" sous "Avancé"
  3. Entrez votre CSS personnalisé
  4. Cliquez sur "Enregistrer"

Votre CSS personnalisé sera appliqué à tous les widgets de commentaires sur votre site.

Conseils

  • Utilisez !important pour remplacer les styles par défaut si nécessaire
  • Ciblez des sélecteurs spécifiques pour éviter d'affecter d'autres parties de votre site
  • Testez votre CSS dans différents navigateurs pour assurer la compatibilité
  • Le widget utilise du CSS standard - aucun préprocesseur spécial n'est requis

Référence de style du widget de commentaires (v2, dernière version) 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

Style du widget des commentaires récents Internal Link

Le widget Recent Comments affiche une liste des commentaires les plus récents sur l’ensemble de votre site ou pour une page spécifique.

Ce widget inclut un style par défaut minimal et est conçu pour être facilement personnalisé avec votre propre CSS.

Structure du widget

Le widget est rendu avec la structure HTML suivante :

<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>

Référence du CSS par défaut du widget Commentaires récents

Le widget inclut le style par défaut minimal suivant :

CSS par défaut du widget Commentaires récents
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

Exemples de personnalisation

Modifier la taille de l'avatar

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

Modifier la troncation du texte du commentaire

Le style par défaut utilise des astuces CSS pour tronquer les longs commentaires avec "..." . Pour désactiver :

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

Ajouter une bordure aux commentaires

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

Style du widget des pages populaires Internal Link

Le widget Top Pages affiche une liste de vos pages les plus commentées.

Ce widget inclut un style par défaut minimal et est conçu pour être facilement personnalisé avec votre propre CSS.

Widget Structure

Le widget s'affiche avec la structure HTML suivante :

<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

Le widget comprend le style par défaut minimal suivant :

CSS par défaut du 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

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

Add Borders Between Pages

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

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

Style the Comment Count

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

Autres bibliothèques front-end Internal Link

Toutes les bibliothèques front-end officielles de FastComments pour React, Angular, Vue, et ainsi de suite, acceptent le paramètre de configuration customCSS et sont des wrappers autour de la bibliothèque vanilla js avec la même structure HTML.

Contribuer à ce guide