Custom Styling Guide
Deze gids geeft de volledige standaard-CSS die wordt gebruikt door de FastComments reactie-widget (v2) en enkele instructies voor het overschrijven van de stijlen.
Begrijpen van de standaard-CSS stelt je in staat om:
- Het uiterlijk aan te passen door specifieke stijlen te overschrijven
- Stylingproblemen op te lossen door te zien welke klassen en selectors beschikbaar zijn
- Aangepaste thema's te bouwen die werken met de structuur van de widget
- Te gebruiken met AI-assistenten om aangepaste CSS-wijzigingen te genereren.
Hoe stijlen te overschrijven
Het overschrijven van stijlen verschilt per widget. Voor de comment-widget moet je de customCSS config-parameter gebruiken om
de CSS in het iframe te plaatsen, of de CSS opgeven op de Customization-pagina in het beheerdersdashboard die de CSS
van ons CDN zal serveren.
Hoe stijlen aan te passen 
Hoe de stijlen van de commentaarwidget aan te passen
Je kunt de opmaak van de commentaarwidget op twee manieren aanpassen:
Optie 1: Via customCSS-parameter
Geef je aangepaste CSS als een string door aan de customCSS-parameter bij het initialiseren van de widget:
window.fcConfigs = [{
target: '#fastcomments-widget',
tenantId: 'your-tenant-id',
customCSS: `
.fast-comments .comment {
background-color: #f0f0f0 !important;
border-radius: 8px !important;
}
`
}];Optie 2: Via Admin-dashboard
- Ga naar de Pagina 'Widget aanpassen' in je admin-dashboard
- Scrol naar de "Aangepaste CSS"-sectie onder "Geavanceerd"
- Voer je aangepaste CSS in
- Klik op "Opslaan"
Je aangepaste CSS wordt toegepast op alle commentaarwidgets op je site.
Tips
- Gebruik
!importantom standaardstijlen te overschrijven indien nodig - Richt je op specifieke selectors om te voorkomen dat andere delen van je site worden beïnvloed
- Test je CSS in verschillende browsers voor compatibiliteit
- De widget gebruikt standaard CSS - geen speciale preprocessors vereist
Referentie voor styling van de Reacties-widget (v2, nieuwste)
Comment Widget Default CSS
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 ; 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
Styling van de widget Recente reacties
De Recent Comments-widget toont een lijst met de meest recente reacties op uw site of voor een specifieke pagina.
Deze widget bevat minimale standaardstyling en is ontworpen om eenvoudig aangepast te kunnen worden met uw eigen CSS.
Widgetstructuur
De widget wordt gerenderd met de volgende HTML-structuur:
<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>Standaard CSS-referentie voor Recent Comments
De widget bevat de volgende minimale standaardstyling:
Standaard CSS voor Recent Comments-widget
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
Voorbeelden van aanpassingen
Avatargrootte wijzigen
.fastcomments-recent-comments .comment .user-details img {
width: 32px !important;
height: 32px !important;
border-radius: 50%;
}Afkappen van reactietekst wijzigen
De standaardstyling gebruikt CSS-trucs om lange reacties af te kappen met "...". Om dit uit te schakelen:
.fastcomments-recent-comments .comment .comment-text:before,
.fastcomments-recent-comments .comment .comment-text:after {
display: none !important;
}Rand toevoegen aan reacties
.fastcomments-recent-comments .comment {
border-bottom: 1px solid #eee !important;
padding-bottom: 10px !important;
}Styling van de widget Toppagina's
De Top Pages-widget toont een lijst van uw meest becommentarieerde pagina's.
Deze widget bevat minimale standaardstyling en is ontworpen om eenvoudig met uw eigen CSS aangepast te worden.
Widgetstructuur
De widget wordt weergegeven met de volgende HTML-structuur:
<div class="fastcomments-top-pages">
<div class="page">
<a class="title-link" href="...">Page Title (42)</a>
</div>
<!-- More pages... -->
</div>Standaard CSS-referentie voor Top Pages
De widget bevat de volgende minimale standaardstyling:
Standaard CSS van Top Pages-widget
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
Aanpassingsvoorbeelden
Stijl toevoegen aan links
.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;
}Randen toevoegen tussen pagina's
.fastcomments-top-pages .page {
border-bottom: 1px solid #eee !important;
padding: 10px 0 !important;
}
.fastcomments-top-pages .page:last-child {
border-bottom: none !important;
}Stijl het aantal reacties
.fastcomments-top-pages .title-link {
display: flex !important;
justify-content: space-between !important;
}Andere frontend-bibliotheken
Alle officiële FastComments frontend-bibliotheken voor React, Angular, Vue en dergelijke accepteren de configuratieparameter customCSS en zijn wrappers rond de vanilla js-bibliotheek met dezelfde HTML-structuur.