FastComments.com
Menu Icon

Sprog 🇩🇰 Dansk
🇺🇸 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

Kom godt i gang

Sådan tilpasser du stilarter

Widget-styling

Stylingreference for kommentar-widget (v2, nyeste)
Widget-styling for seneste kommentarer
Widget-styling for top-sider

Andre frontend-biblioteker

Andre frontend-biblioteker

Custom Styling Guide

Denne vejledning indeholder den komplette standard-CSS, som bruges af FastComments' kommentar-widget (v2), samt nogle instruktioner til at tilsidesætte stilarterne.

At forstå standard-CSS'en gør det muligt for dig at:

  • Tilpas udseendet ved at tilsidesætte specifikke stilarter
  • Fejlfind stylingproblemer ved at se, hvilke klasser og selectorer der er tilgængelige
  • Byg brugerdefinerede temaer der fungerer med widgetens struktur
  • Brug med AI-assistenter til at generere brugerdefinerede CSS-ændringer.

Sådan tilsidesætter du stilarter

Måden, du tilsidesætter stilarter på, varierer afhængigt af widgetten. For kommentars-widgetten skal du bruge konfigurationsparameteren customCSS for at sende CSS'en ind i iframe-en, eller angive CSS'en på Tilpasningssiden i administrationsdashboardet, som vil servere CSS'en fra vores CDN.

Sådan tilpasser du stilarter Internal Link

Sådan tilpasser du kommentar-widget-stil

Du kan tilpasse kommentar-widget-stilen på to måder:

Valgmulighed 1: Via customCSS-parameteren

Send dit tilpassede CSS som en streng til customCSS-parameteren, når du initialiserer widget'en:

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

Valgmulighed 2: Via administrationsdashboard

  1. Gå til Widget Customization-siden i dit admin-dashboard
  2. Rul ned til afsnittet "Tilpasset CSS" under "Avanceret"
  3. Indtast dit tilpassede CSS
  4. Klik på "Gem"

Dit tilpassede CSS bliver anvendt på alle kommentar-widgets på dit site.

Tips

  • Brug !important for at tilsidesætte standardstilarter, hvis nødvendigt
  • Mål specifikke selektorer for at undgå at påvirke andre dele af dit site
  • Test dit CSS i forskellige browsere for kompatibilitet
  • Widget'en bruger standard CSS - ingen særlige preprocessorer er nødvendige

Stylingreference for kommentar-widget (v2, nyeste) 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

Widget-styling for seneste kommentarer Internal Link

Widgeten Seneste kommentarer viser en liste over de nyeste kommentarer på dit site eller for en specifik side.

Denne widget indeholder minimal standardstyling og er designet til let at kunne tilpasses med dit eget CSS.

Widgetstruktur

Widgeten gengives med følgende HTML-struktur:

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

Standard CSS-reference for Seneste kommentarer

Widgeten inkluderer følgende minimale standardstyling:

Standard CSS til widgeten Seneste kommentarer
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

Tilpasningseksempler

Skift avatarstørrelse

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

Ændre afkortning af kommentartekst

Standardstylingen bruger CSS-tricks til at afkorte lange kommentarer med "...". For at deaktivere:

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

Tilføj kant til kommentarer

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

Widget-styling for top-sider Internal Link

Top Pages-widgeten viser en liste over dine mest kommenterede sider.

Denne widget indeholder minimal standardstyling og er designet til let at kunne tilpasses med din egen CSS.

Widget Structure

Widgeten gengives med følgende HTML-struktur:

<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

Widgeten indeholder følgende minimale standardstyling:

Top Pages-widget standard CSS
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;
}

Formatér kommentarantallet

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

Andre frontend-biblioteker Internal Link

Alle de officielle FastComments frontend-biblioteker til React, Angular, Vue, og så videre, accepterer customCSS konfiguration parameter og er wrappers omkring vanilla js-biblioteket med samme HTML-struktur.

Bidrag til denne guide