Custom Styling Guide

Bu kılavuz, FastComments yorum widget'ı (v2) tarafından kullanılan eksiksiz varsayılan CSS'i ve stilleri geçersiz kılmaya yönelik bazı talimatları sağlar.

Varsayılan CSS'i anlamak size şunları sağlar:

Görünümü özelleştirin belirli stilleri geçersiz kılarak
Stil sorunlarını giderin kullanılabilir sınıfları ve seçicileri görerek
Özel temalar oluşturun widget'ın yapısıyla uyumlu olacak şekilde
Yapay zeka asistanları ile kullanın özel CSS değişiklikleri oluşturmak için.

Stilleri Geçersiz Kılma

Stilleri geçersiz kılma, widget'a bağlı olarak değişir. Yorum widget'ı için, CSS'i iframe'e geçirmek için customCSS yapılandırma parametresini kullanmanız gerekir veya CSS'i yönetici panelindeki Özelleştirme sayfasında belirtebilirsiniz; bu sayfa CSS'i CDN'imizden sunacaktır.

Yorum widget stilini iki şekilde özelleştirebilirsiniz:

Seçenek 1: `customCSS` Parametresi ile

Widget'ı başlatırken özel CSS'inizi customCSS parametresine bir dize olarak iletin:

window.fcConfigs = [{
    target: '#fastcomments-widget',
    tenantId: 'your-tenant-id',
    customCSS: `
        .fast-comments .comment {
            background-color: #f0f0f0 !important;
            border-radius: 8px !important;
        }
    `
}];

Seçenek 2: Yönetici Paneli Üzerinden

Yönetici panelinizdeki Widget Özelleştirme sayfasına gidin
"Gelişmiş" altındaki "Özel CSS" bölümüne gidin
Özel CSS'inizi girin
"Kaydet"e tıklayın

Özel CSS'iniz sitenizdeki tüm yorum widget'larına uygulanacaktır.

İpuçları

!important gerektiğinde varsayılan stillerin üzerine yazmak için kullanın
Diğer site bölümlerini etkilememek için belirli seçicileri hedefleyin
Uyumluluk için CSS'inizi farklı tarayıcılarda test edin
Widget standart CSS kullanır - özel bir ön işlemci gerekmez

Yorum Widget Stil Referansı (v2, en son)

Comment Widget Default CSS

Copy

body { margin: 0; padding: 0; }
    d { display: block }
    @keyframes pop-in { 0% { transform: scale(0.3); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }
    @keyframes placeHolderShimmer { 0% { background-position: 0 0 } 100% { background-position: 100% 0 } }
    /* shimmer skeleton for in-flight saves and lazy avatar loads. To restyle the loading state, target .animated-background. */
    .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%; }
    .comment-reply .tos-checkbox { display: flex; align-items: center; gap: 8px; margin: 8px 0; cursor: pointer }
    .comment-reply .tos-checkbox a { color: inherit }
    .comment-reply > .tos-checkbox { margin: 8px }
    .comment-reply .tos-checkbox input[type=checkbox] { margin: 0; width: auto; box-shadow: none }
    @keyframes backgroundToNormal { from { background: lightblue } to { background: inherit } }
    /* widget root. Scope custom rules under .fast-comments. Config-driven modifier classes also land here: .readonly, .hide-avatars, .disable-image-redirect, .single-line-comment-input, .vote-style-1, .new-to-bottom -- use them as conditional ancestors. */
    .fast-comments { position: relative; width: 100%; font-size: 13px }
    .hidden { display: none }
    .invisible { visibility: hidden }
    .inline-block { display: inline-block }
    .icon { display: inline-block; width: 24px; height: 24px; vertical-align: middle; image-rendering: -webkit-optimize-contrast; }
    .icon.bubble { background: url("${FC_CDN}/images/svg/v2/text_bubble_dark.svg") no-repeat center; background-size: 22px 22px; }
    .icon.bubble-white { background: url("${FC_CDN}/images/svg/v2/text_bubble_white.svg") no-repeat center; background-size: 22px 22px; }
    .icon.cross { background: url("${FC_CDN}/images/svg/v2/close.svg") no-repeat center; background-size: 9px 9px; }
    .icon.reply-arrow-inactive { background: url("${FC_CDN}/images/svg/v2/reply_inactive.svg") no-repeat center; background-size: 15px 15px; }
    .icon.reply-arrow-active { background: url("${FC_CDN}/images/svg/v2/reply.svg") no-repeat center; background-size: 15px 15px; }
    .icon.up { background: url("${FC_CDN}/images/svg/v2/thumbs_up_light.svg") no-repeat center; background-size: 12px 12px; }
    .icon.up.active, .icon.up:hover { background: url("${FC_CDN}/images/svg/v2/thumbs_up_dark.svg") no-repeat center; background-size: 12px 12px; }
    .icon.down { background: url("${FC_CDN}/images/svg/v2/thumbs_down_light.svg") no-repeat center; background-size: 12px 12px; }
    .icon.down.active, .icon.down:hover { background: url("${FC_CDN}/images/svg/v2/thumbs_down_dark.svg") no-repeat center; background-size: 12px 12px; }
    .icon.pin-small { background: url("${FC_CDN}/images/svg/v2/pin.svg") no-repeat center; background-size: 15px 15px; }
    .icon.lock-small { background: url("${FC_CDN}/images/padlock.svg") no-repeat center; background-size: 15px 15px; }
    .icon.logo { width: 27px; height: 33px; background: url("${FC_CDN}/images/svg/v2/logo.svg") no-repeat center; background-size: 22px;  }
    .icon.edit-small { background: url("${FC_CDN}/images/svg/menu.svg") no-repeat center; background-size: 17px 17px; }
    .icon.edit-big { background: url("${FC_CDN}/images/svg/v2/edit.svg") no-repeat center; background-size: 22px 22px; }
    .icon.trash { background: url("${FC_CDN}/images/svg/v2/trash_thin.svg") no-repeat center; background-size: 22px 22px; }
    .icon.eye { background: url("${FC_CDN}/images/svg/v2/view.svg") no-repeat center; background-size: 22px 22px; }
    .icon.eye-slash { background: url("${FC_CDN}/images/svg/v2/view_hide.svg") no-repeat center; background-size: 22px 22px; }
    .icon.replied { background: url("${FC_CDN}/images/svg/v2/replied.svg") no-repeat center; background-size: 22px 22px; }
    .icon.bold { background: url("${FC_CDN}/images/svg/v2/editor_bold.svg") no-repeat center; background-size: 9px; }
    .icon.ul { position: relative; top: 1px; background: url("${FC_CDN}/images/svg/v2/editor_underline.svg") no-repeat center; background-size: 10px; }
    .icon.it { background: url("${FC_CDN}/images/svg/v2/editor_itallic.svg") no-repeat center; background-size: 7px; }
    .icon.s { background: url("${FC_CDN}/images/svg/v2/editor_strike.svg") no-repeat center; background-size: 10px; }
    .icon.code { background: url("${FC_CDN}/images/svg/v2/editor_embed.svg") no-repeat center; background-size: 16px; }
    .icon.link { position: relative; top: -1px; background: url("${FC_CDN}/images/svg/v2/editor_link.svg") no-repeat center; background-size: 14px; }
    .icon.img-up { background: url("${FC_CDN}/images/svg/v2/editor_image.svg") no-repeat center; background-size: 16px; }
    .icon.img-btn-wrap { position: relative; }
    .icon.return { background: url("${FC_CDN}/images/svg/return.svg") no-repeat center; background-size: 22px; margin-left: 6px; }
    .icon.gif { width: auto; height: auto; font-size: 0; }
    .icon.gif::before { content: "GIF"; font-size: 12px; }
    .icon.spoiler { font-size: 12px; }
    .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; }
    .icon.bell { background: url("${FC_CDN}/images/svg/v2/bell.svg") no-repeat center; background-size: 22px; }
    .icon.bell-red { background: url("${FC_CDN}/images/svg/v2/bell-red.svg") no-repeat center; background-size: 22px; }
    .divider { display: inline-block; height: 25px; margin: 0 10px; vertical-align: middle; border-right: 1px solid #c2c2c2; }
    .icon.block { background: url("${FC_CDN}/images/svg/v2/ban.svg") no-repeat; background-size: 22px 22px; }
    .icon.flag { background: url("${FC_CDN}/images/svg/flag.svg") no-repeat; background-size: 22px 22px; }
    .icon.flag-small { background: url("${FC_CDN}/images/svg/flag.svg") no-repeat center; background-size: 15px 15px; }
    .select-dir-wrapper { clear: both; text-align: right; border-bottom: 1px solid #afafaf; }
    .select-dir-wrapper .comment-count { float: left; font-weight: 500; }
    .select-dir-wrapper > * { margin: 9px; height: 16px }
    .select-dir { display: inline-block }
    .dropdown { position: relative; z-index: 3; text-align: right }
    .dropdown .drop-label { padding: 0 0 7px 0; cursor: pointer; font-weight: 500 }
    .dropdown .drop-label i { position: relative; display: inline-block; top: -2px; font-size: 7px }
    .dropdown .items { position: absolute; display: none; top: 20px; right: 0; width: 150px; overflow: hidden; border-radius: 0 0 4px 4px; background: #fff; }
    .dropdown:hover .items { position: absolute; display: block }
    .dropdown .items > * { padding: 5px 9px; cursor: pointer; font-weight: 500; text-align: left; font-size: 13px }
    .no-comments { clear: both; text-align: center; font-weight: 500; font-size: 16px; }
    .new-comments-message { width: fit-content; margin: 20px auto 0; padding: 5px 10px; text-align: center; cursor: pointer; font-weight: 500 }
    .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; }
    .new-comments-message span { pointer-events: none; padding-bottom: 2px; border-bottom: 1px solid #a3a3a3; }
    .comment .new-comments-message { margin: 10px auto 0; }
    .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; }
    .sso-login-wrapper .message-text, .fastcomments-message-wrapper .message-text { display: inline; pointer-events: none; }
    .fastcomments-message-wrapper .message-text a { color: #fff; pointer-events: all; }
    .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; }
    .fastcomments-message-wrapper .fastcomments-message { margin: 0 5%; cursor: default; }
    .sso-login-wrapper .sso-login[href] { cursor: pointer; }
    .sso-login-wrapper .sso-login .message-text, .fastcomments-message-wrapper .fastcomments-message .message-text { margin-right: 10px; }
    .sso-login-wrapper .sso-login .icon, .fastcomments-message-wrapper .fastcomments-message .icon { pointer-events: none; }
    .sso-login-wrapper .sso-login.clickable { cursor: pointer; }
    .comment .sso-login-wrapper { padding: 7px 0; text-align: left }
    .comment .sso-login-wrapper .sso-login { font-size: 16px }
    /* Toolbar, auth fields, and cancel button carry .default-hidden -- they're collapsed (height:0, opacity:0) until the user focuses the input, which adds .show-default-hidden to the .comment-reply form. When styling these elements, account for the collapsed state. */
    .default-hidden { transition-duration: 300ms }
    .comment-input:not(.show-default-hidden) .default-hidden { height: 0; margin: 0 !important; opacity: 0; pointer-events: none; transition-duration: 200ms }
    .loading .pagination { opacity: 0.5; pointer-events: none; }
    .card { border: 1px solid #d0d0d0; background: #fdfdfd; border-radius: 3px; box-shadow: 5px 5px 7px rgba(0,0,0,.1) }
    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 }
    .fast-comments, textarea { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif }
    textarea::placeholder { font-size: 13px; font-weight: 500; transition-duration: 150ms }
    textarea:focus::placeholder { color: transparent }
    .fc-red { display: inline-block; margin: 5px; color: #ff0000 }
    .comment-error { padding: 10px }
    /* Brand shape: square top-left, rounded other 3 corners (border-radius: 0 N N N). Match this when adding new buttons/inputs/cards to stay on-theme. */
    input, textarea { padding: 12px 20px; border: 1px solid #bfbfbf; border-radius: 0 11px 11px 11px; box-sizing: border-box; outline: none; background: transparent; }
    input { padding: 9px 12px; border-radius: 0 6px 6px 6px; }
    /* Focus state must be applied to BOTH the textarea border and the sibling .horizontal-border-wrapper (faux border around .comment-input -- see below). Override both selectors when changing focus color. */
    input:focus, textarea:focus, textarea:focus + .horizontal-border-wrapper, .comment-input textarea:focus { border-color: #555 } /* .comment-reply textarea:focus for ssr */
    .pagination { margin-top: 50px; line-height: 19px; text-align: center; user-select: none; }
    .pagination > * { display: inline-block; cursor: pointer; font-weight: 700; }
    .pagination > * > span { font-weight: normal; pointer-events: none; }
    .pagination > * > span::before { content: "("; }
    .pagination > * > span::after { content: ")"; }
    .pagination .load-next-page { padding-right: 25px; }
    .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 */
    .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; }
    .replying-to { margin-bottom: 5px }
    .comment-reply { position: relative; width: 100%; margin: 10px 0 15px 0; }
    .comment-reply.root { padding: 15px; box-sizing: border-box; }
    @media(max-width: 500px) { .comment-reply.root { padding: 15px 5px 15px 5px; } }
    .comment-reply .fast-comments-waiting { display: block; margin: 5px 0 }
    .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 */
    .comment-reply .comment-reply-top-bar .logged-in-info { display: inline-block; width: calc(100% - 60px); min-width: 150px; }
    .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; }
    .comment-reply .comment-reply-top-bar .logged-in-info .avatar .open-profile { cursor: pointer; }
    .comment-reply .comment-reply-top-bar .logged-in-info .avatar.animated-background img { opacity: 0.1; }
    .comment-reply .comment-reply-top-bar .logged-in-info .avatar img { width: 25px; height: 25px; object-fit: cover; }
    .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; }
    .comment-reply .comment-reply-top-bar .logged-in-info .badges { display: inline-block; margin-left: 5px; }
    .comment-reply .comment-reply-top-bar .right { float: right; }
    .comment-reply .comment-reply-top-bar .right > * { display: inline-block; }
    .comment-reply .comment-reply-top-bar .right .menu { font-weight: 500; font-size: 11px; }
    .comment-reply .comment-reply-top-bar .right .menu:hover { z-index: 9002; }
    .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; }
    .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; }
    .comment-reply .comment-reply-top-bar .right .menu .items > * { font-weight: 700; }
    .comment-reply .comment-reply-top-bar .right .notification-bell { position: relative; margin-left: 5px; cursor: pointer; }
    .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; }
    .comment-reply .comment-reply-top-bar .right .notification-bell .icon.bell-red { display: none; }
    .comment-reply .comment-reply-top-bar .right .notification-bell > * { pointer-events: none; }
    .comment-reply .comment-reply-top-bar .right .notification-bell.has-notifications .icon.bell { display: none; }
    .comment-reply .comment-reply-top-bar .right .notification-bell.has-notifications .icon.bell-red { display: inline-block; }
    .comment-reply .comment-reply-top-bar .right .notification-bell.has-notifications .count { display: block; }
    .toolbar { position: relative; display: inline-block; margin: 5px 0 0 0; font-size: 13px }
    .toolbar .t-btn { display: inline-block; margin: 0 1px; vertical-align: middle; cursor: pointer; transition-duration: 200ms; user-select: none; }
    .toolbar .t-btn:hover { opacity: 0.7; }
    .toolbar .img-btn-wrap { display: inline-block; overflow: hidden }
    .toolbar .t-btn input[type=file] { position: absolute; padding: 40px; font-size: 100px; top: 0; left: 0; opacity: 0; cursor: pointer }
    .commenty-input:not(.show-default-hidden) .toolbar { width: 100%; margin-top: -50px; }
    @media(max-width: 500px) { .toolbar { display: flex; width: 100%; padding-bottom: 12px; justify-content: space-evenly; } }
    @media(max-width: 500px) { .comment-input .toolbar { margin-top: 50px; border-bottom: 1px solid #bfbfbf; } }
    .comment-reply .auth-input, .comment-vote-auth.auth-input { margin: 10px 0; font-size: 13px }
    .comment-reply .auth-input .fc-login { margin: 10px 0 0; }
    .comment-reply .auth-input .reasoning, .comment-vote-auth.auth-input .reasoning { font-weight: 600; }
    .comment-reply .auth-input .fc-red, .comment-vote-auth.auth-input .fc-red { display: block }
    .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; }
    .comment-reply .auth-input .solicitation-info, .comment-vote-auth.auth-input .solicitation-info { margin-top: 10px; }
    .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; }
    /* padding-bottom reserves space for the absolute toolbar/submit button. Don't remove it without also repositioning those elements. */
    .comment-input, .comment-edit { position: relative; padding-bottom: 30px; border-radius: 0 11px 11px 11px; }
    /* The textarea has no bottom border or bottom radius -- the bottom edge is drawn by .horizontal-border-bottom-* divs. To restyle the bottom of the input, target those, not the textarea. */
    .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; }
    .comment-input textarea::placeholder { font-size: 16px; font-weight: 400; }
    .comment-input input { display: block; width: 100%; font-size: 14px; }
    .comment-input .fastcomments-message-wrapper { border: 1px solid #bfbfbf; border-bottom: none; border-radius: 0 11px 0 0; }
    .comment-input input[name=fastcomments-link] { display: block; width: 100%; margin: 10px 0; }
    /*
     * COMMENT INPUT BORDER: drawn by 6 absolutely-positioned divs inside .horizontal-border-wrapper (top-left, top-right, left, right, bottom-left, bottom-right), NOT by the textarea's border. To change the input's border color, width, or radius, target .horizontal-border-wrapper (sets border-color, inherited by all 6 pieces) and the individual .horizontal-border-* rules. The bottom-center is intentionally open so the submit button can overlap it. Top pieces are display:none on the root reply box and re-shown only for nested reply boxes (rule near end of block).
     */
    .comment-input .horizontal-border-wrapper { pointer-events: none; border-color: #bfbfbf; }
    .comment-input .horizontal-border { position: absolute; height: 20px; border-bottom: 1px solid; border-color: inherit; }
    .comment-input .horizontal-border-left { bottom: 0; left: 0; border-radius: 0 0 0 11px; }
    .comment-input .horizontal-border-right { bottom: 0; right: 0; width: 20px; border-radius: 0 0 11px 0; }
    .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; }
    .comment-input .horizontal-border-top-right { top: 0; right: 0; border-radius: 0 11px 0 0; width: 20px; }
    .comment-input .horizontal-border-top-left { top: 0; left: 0; }
    .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; }
    .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; }
    /* Re-shows top border pieces for nested reply boxes (input rendered inside a .comment) so the input gets a full frame. */
    .comment .comment-input .horizontal-border-top-left, .comment .comment-input .horizontal-border-top-right { display: block }
    @media(max-width: 500px) { .comment-input textarea, .comment-input .fastcomments-message-wrapper { height: 130px;  } }
    /* Submit button. Sits in the gap between the .horizontal-border-bottom-left/right pieces -- if you change the input's bottom border layout, retune top/right here too. */
    .comment .reply-button-wrapper { position: relative; float: right; top: -19px; right: 26px; border-radius: 0 7px 7px 7px; }
    .comment .fast-comments-reply, .comment .edit-save { padding: 10px 27px; border-radius: 0 7px 7px 7px; background: #333; color: #fff; text-decoration: none; }
    /* X cancel button. Only rendered for nested replies, not the root reply box. */
    .comment .cancel-button-wrapper { position: absolute; top: 9px; right: 25px; border-radius: 4px; }
    .comment .comment-edit .cancel-button-wrapper { top: -13px }
    .comment .fast-comments-reply-cancel { margin-bottom: 0; padding: 1px 1px; border-radius: 4px; }
    .comment .fast-comments-reply-cancel .cross { pointer-events: none; }
    .comment-reply.root .reply-button-wrapper { position: relative; float: right; top: -20px; right: 27px; margin-bottom: 10px; border-radius: 0 7px 7px 7px; }
    .comment-reply.root button { margin-bottom: 0; padding: 7px 20px; font-weight: 600; }
    .comment-reply.root button .bubble { margin-left: 10px; pointer-events: none; }
    .comments { clear: both; padding: 15px 0; }
    @media(max-width: 500px) { .comments { padding: 15px 5px; } }
    .comment { position: relative; margin-top: 15px }
    @media(max-width: 500px) { .comment { margin-top: 5px; } }
    .comment .comment-text spoiler:not(:hover) { background: #eee; color: #eee; border: 1px dotted #a2a2a2; }
    .comment .comment-text .inline-image { display: block; max-width: 500px; margin: 3px 0 3px 0 } /* must not select inline-image in wysiwyg */
    .comment .comment-text .inline-image img { max-width: 100%; max-height: 400px } /* must not select inline-image in wysiwyg */
    .disable-image-redirect .comment .inline-image { cursor: default; }
    /*
     * Comment state classes on .comment -- target these to restyle moderation/state visuals:
     *   .is-live       newly streamed-in comment (flash animation)
     *   .is-unread     not yet seen by current user (avatar glow)
     *   .unverified    commenter hasn't clicked email confirmation (dimmed)
     *   .is-spam       flagged as spam (red border)
     *   .is-unapproved awaiting moderation (orange border)
     *   .is-blocked    from a blocked user (text truncated to 40px)
     *   .is-deleted, .is-admin, .is-own, .24hr, .readonly are also added but not styled by default.
     */
    .comment.is-live > .inner { animation: backgroundToNormal 1.5s }
    .comment.is-unread > .inner .avatar-wrapper { box-shadow: 0 0 20px #89f796; }
    .comment.unverified > .commenter-name, .comment.unverified > .comment-content .commenter-name { opacity: 0.7 }
    .comment.unverified > .comment-content > .comment-text { opacity: 0.7 }
    .comment.is-spam > .comment-content { border: 1px solid red; } /* can be set when saving comment initially */
    .comment.is-unapproved > .comment-content { border: 1px solid #ffa700; } /* can be set when saving comment initially */
    .comment.is-blocked > .inner > .comment-content > .comment-text { max-height: 40px; overflow: hidden; }
    .comment > .requires-verification-approval { margin: 3px 0 6px }
    .comment > .inner > .spam-notice { margin: 0 0 10px 0; font-size: 12px; color: red }
    @media(max-width: 500px) { .comment > .inner > .spam-notice { margin-top: 18px; } }
    .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; }
    /* .anon = placeholder avatar (no custom default configured + anonymous user). Style this to change how unidentified commenters appear. */
    .comment .avatar-wrapper.anon { border: 1px solid #3f3f3f; }
    .comment .avatar-wrapper .open-profile { cursor: pointer; }
    .comment .avatar-wrapper.animated-background img { opacity: 0.1; }
    @media(max-width: 500px) { .comment .avatar-wrapper { width: 36px; height: 36px; } }
    .comment .avatar { width: 100%; height: 100%; object-fit: cover; }
    @media(max-width: 500px) { .comment .avatar { vertical-align: middle } }
    .comment .commenter-name .badges { margin-bottom: 5px; }
    .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; }
    .badges .badge img { max-width: 22px; }
    .badges .badge.ib { padding: 0; }
    .comment .commenter-name { font-size: 14px }
    .comment > .commenter-name { display: none; vertical-align: middle; color: #000 }
    @media(max-width: 500px) { .comment > .commenter-name { display: inline-block; margin-left: 5px; vertical-align: middle } }
    .comment > .commenter-name a { display: block; color: #000; text-decoration: none }
    .comment .commenter-name .website-url { color: #000; text-decoration: underline }
    .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) */
    .comment > .inner { position: relative; padding: 8px 8px 10px 8px; } /* relative is required for blocked message */
    @media(max-width: 500px) { .comment > .inner { padding: 5px 5px 5px 5px; } }
    .comment > .inner > .comment-content { position: relative; display: inline-block; width: calc(99% - 101px); margin-left: 15px; }
    .hide-avatars .comment > .inner > .comment-content { margin-left: 0; }
    .hide-avatars .comments > .comment > .inner > .comment-content > .commenter-name, .hide-avatars .comments > .comment > .inner > .comment-content > .comment-text { padding-left: 0; }
    @media(max-width: 500px) { .comment > .inner > .comment-content { display: inline; margin-left: 3px; background: transparent } }
    .comment > .inner > .comment-content .commenter-name { display: inline-block; max-width: 50%; vertical-align: middle; padding: 5px 0 0 2px; color: #171717 }
    .comment > .inner > .comment-content .commenter-name > .username { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    @media(max-width: 500px) { .comment > .inner > .comment-content .commenter-name { padding: 5px 0 0 4px; } }
    .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 }
    .comment > .inner > .comment-content .comment-text ol, .comment > .inner > .comment-content .comment-text ul { white-space: normal; }
    .comment > .inner > .comment-content .comment-text .react { display: inline; max-height: 20px; margin: 0 3px; vertical-align: text-top; }
    .comment > .inner > .comment-content > .comment-text b > a { color: #000; text-decoration: none; }
    .comment > .inner > .comment-content > .comment-text blockquote { margin: 15px 0; padding: 0 20px; border-left: 1px solid #e5e5e5; }
    .comment > .inner > .comment-content .comment-text-edit { width: 100%; margin-top: 15px; }
    @media(max-width: 500px) { .comment > .children .comment-text { margin-left: 27px; } }
    .comment > .inner > .comment-content .comment-text br { line-height: 0.5em }
    .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 }
    .comment > .inner > .comment-content .edit-failure { display: block; margin: 10px 0; text-align: center }
    .comment > .inner > .comment-content .comment-toolbar-vote { position: relative; margin-left: 8px }
    @media(max-width: 500px) { .comment > .inner > .comment-content .comment-toolbar-vote { margin-left: 0 } }
    .comment > .inner > .comment-content .comment-toolbar-vote .vote-awaiting-verification { padding: 5px 0; font-weight: 500 }
    .comment > .inner > .comment-bottom { margin-top: 25px; border-bottom: 1px solid #e5e5e5; }
    @media(max-width: 500px) { .comment > .inner > .comment-bottom { margin-top: 10px; } }
    .children .comment > .inner > .comment-bottom { margin-left: 28px; }
    @media(max-width: 500px) { .children .comment > .inner > .comment-bottom { margin-left: 21px; } }
    @media(min-width: 500px) { .hide-avatars .children .comment > .inner > .comment-bottom { margin-left: 33px; } }
    /* min-height reserves space for the absolutely-positioned reply button (.comment-toolbar-reply, top:-4px below). */
    .comment > .inner > .comment-bottom > .comment-bottom-toolbar { position: relative; min-height: 36px; }
    .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; }
    .comment > .inner > .comment-bottom .comment-vote-options .votes-up { margin-right: 5px; }
    .comment > .inner > .comment-bottom .comment-vote-options .votes-down { margin-left: 5px; }
    .comment > .inner > .comment-bottom .comment-toolbar-vote .comment-votes .divider { height: 20px; }
    .comment > .inner > .comment-bottom .comment-vote-options { display: inline-block; margin: 0 7px 0 2px; font-size: 12px; }
    .comment > .inner > .comment-bottom .comment-vote-options > span { cursor: pointer }
    .comment > .inner > .comment-bottom .comment-votes, .comment > .inner > .comment-bottom .comment-reply-start { display: inline-block; margin: 5px 2px; font-size: 12px }
    .comment > .inner > .comment-bottom .comment-vote-options button { margin: 0 3px }
    .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; }
    .comment > .inner > .comment-bottom .comment-vote-options .view-count .icon { opacity: 0.7; }
    .comment > .inner > .comment-bottom .comment-toolbar-reply { position: absolute; right: 0; top: -4px; }
    .comment > .inner > .comment-bottom .comment-reply-start { border: none; background: none; font-weight: 600; }
    .comment > .inner > .comment-bottom .comment-reply-start i { position: relative; top: -2px; pointer-events: none; }
    .comment > .inner > .comment-bottom .comment-vote-auth { width: 100%; max-width: 400px }
    .comment > .inner > .comment-bottom .comment-vote-auth .fast-comments-waiting { float: left }
    .comment > .inner > .comment-bottom .comment-vote-auth .buttons { text-align: right }
    .comment > .inner > .comment-bottom .comment-vote-auth button { margin: 5px 0 0 5px; padding: 10px 35px; background: #333; color: #fff; border: none; }
    .comment > .inner > .comment-bottom .reply-form-wrapper { padding: 5px }
    .comment > .toggle-replies { margin: 0 0 0 15px; line-height: 24px; font-weight: 500; font-size: 11px; color: #666; cursor: pointer; user-select: none; }
    .children .comment > .toggle-replies { margin-left: 41px; }
    @media(max-width: 500px) { .children .comment > .toggle-replies { margin-left: 12px; } }
    .comment > .toggle-replies > * { vertical-align: middle; pointer-events: none; }
    .comment > .toggle-replies > i { margin-right: 5px; }
    .comment > .toggle-replies > span > .count { color: #1f1f1f; }
    .comment > .toggle-replies > span > .count:before { content: "("; }
    .comment > .toggle-replies > span > .count:after { content: ")"; }
    .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 */
    .comment .prompt p { font-weight: 500; }
    .comment .prompt button { user-select: none; }
    .comment .prompt button:not(:last-child) { margin-right: 10px }
    .comment .comment-error p:before { padding-right: 5px; content: "❗" }
    @media(max-width: 500px) { .comment .prompt { padding: 5px } }
    @media(max-width: 500px) { .comment .prompt p { margin: 0 0 .4em 0 } }
    .comment > .inner > .requires-verification-approval, .comment > .inner > .awaiting-approval-notice { margin: 15px 0; }
    /* Date + flag/pin/lock icons + menu (3-dot/edit). On hover, z-index jumps so the open menu can overlap sibling comments. Match this when styling custom menu overlays. */
    .comment .top-right { position: absolute; top: 0; right: 0; z-index: 2; }
    .comment .top-right:hover { z-index: 9001; }
    .comment .jump-link { padding-right: 5px; vertical-align: baseline; font-size: 12px; text-decoration: none; color: #4f4f4f }
    .comment .jump-link .abs-date { margin-left: 5px; }
    @media(max-width: 500px) { .comment > .inner > .top-right { top: -10px; } } /* if top is too low, will go above highlighting for admin actions */
    .comment .top-right > * { display: inline-block; vertical-align: middle }
    .comment > .inner > .replied { display: inline-block; margin: -7px 5px 0 0; vertical-align: top; }
    .hide-avatars .comment > .inner > .replied { margin: 0 5px 0 0; }
    .children > .comment:not(:first-child) > .replied { opacity: 0.5; }
    .comment .menu { position: relative; padding: 10px 10px 10px 0; user-select: none }
    .comment .menu .menu-btn { cursor: pointer }
    .comment .menu .menu-btn i { display: inline-block; width: 4px; height: 4px; margin: 2px; background: #333; border-radius: 10px }
    /* .menu.empty rendered when no actions are available -- kept in DOM to preserve layout, dimmed and non-clickable. */
    .comment .menu.empty .menu-btn { cursor: default; opacity: 0.5; }
    .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; }
    .menu-content div { padding: 3px; font-weight: 700; cursor: pointer; font-size: 13px }
    .menu-content div > * { vertical-align: middle; pointer-events: none; }
    .menu-content div > i { margin: 0 5px 0 0; }
    .menu-content div > span { display: inline-block; width: calc(100% - 29px); padding: 7px 10px; box-sizing: border-box; }
    .menu-content div:not(:last-child) > span { border-bottom: 1px solid #dcdcdc; }
    .menu-content.corner-bottom-right { border-radius: 10px 10px 0 10px; }
    @media(max-width: 500px) { .comment .menu { padding: 10px 5px 10px 0; } } /* if top is too low, will go above highlighting for admin actions */
    .comment > .children { margin: 15px 0 0 15px }
    /* "Powered by FastComments" footer. White-labeled tenants get .empty (no content, no border). To restyle/hide the footer for white-label, scope via .footer.empty. */
    .footer { height: 65px; margin-top: 25px; padding-top: 20px; text-align: center; font-size: 12px; }
    .footer:not(.empty) { border-top: 1px solid #ccc }
    .footer a, .footer .logo { vertical-align: top; text-decoration: none; color: #201600; font-weight: bold; font-size: 14px } 
    .footer .logo { margin-top: -2px; padding-right: 2px; } 
    .comment.readonly .comment-vote-options { display: none }
    /* Autocomplete dropdown for @mentions and #hashtags inside the comment input. Anchored relative to .comment-input. */
    .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; }
    .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; }
    .search-list .search-entry { padding: 5px 10px; cursor: pointer; }
    .search-list .search-entry.last { border-radius: 0 0 11px 11px }
    .search-list .search-entry img { width: 20px; height: 20px; margin-right: 3px; vertical-align: middle; border-radius: 20px; }
    .search-list .search-entry > * { pointer-events: none; }
    .search-list .search-entry:hover, .search-list .search-entry.kb-select, .search-list .cross:hover { background-color: #eee; }
    .search-list .search-section-header { padding: 4px 10px; font-size: 11px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: 0.5px; pointer-events: none; user-select: none; }
    .search-list .search-section-loading { padding: 4px 10px; font-size: 11px; color: #888; font-style: italic; pointer-events: none; user-select: none; }
    /* .search-list-open is added to .comment-input while the @/# autocomplete is showing -- hides the submit button so it doesn't collide with the dropdown. */
    .comment-input.search-list-open .reply-button-wrapper { display: none; }
    .avatar-wrapper .activity-icon { position: absolute; top: 4px; right: 4px; }
    .activity-icon { width: 8px; height: 8px; border-radius: 10px; }
    .username .activity-icon { position: relative; top: 2px; display: none; margin-right: 5px; }
    .activity-icon.online {  display: inline-block; background: lime; box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.2);  }
    .hide-avatars .activity-icon.online { top: -1px;  }
    @media(max-width: 500px) { .activity-icon { width: 5px; height: 5px;  }  }

The Recent Comments Widget displays a list of the most recent comments across your site or for a specific page. It includes a heading, rounded avatars, comment previews, clickable dates that deep-link to the comment, and automatic dark mode detection.

Temel Kurulum

Son Yorumlar Bileşeni Kurulumu

Copy

Run

<script src="https://cdn.fastcomments.com/js/widget-recent-comments-v2.min.js"></script>
<div id="fastcomments-widget-recent-comments"></div>
<script>
    FastCommentsRecentCommentsV2(document.getElementById('fastcomments-widget-recent-comments'), {
        tenantId: 'demo'
    });
</script>

Yapılandırma Seçenekleri

tenantId (gerekli): FastComments tenant ID'niz
urlId (isteğe bağlı): Tek bir sayfaya filtre uygular. Tüm sayfalar için null bırakın
count (isteğe bağlı): Gösterilecek yorum sayısı. Varsayılan 10
hasDarkBackground (isteğe bağlı): Koyu mod stilini zorlar. Ayarlanmazsa sayfa arka planından otomatik algılanır

Bileşen Yapısı

Bileşen aşağıdaki HTML yapısıyla render edilir:

Son Yorumlar Bileşeni HTML Yapısı

Copy

<div class="fc-rc2">
    <div class="fc-rc2-heading">Recent Comments</div>
    <div class="fc-rc2-list">
        <div class="fc-rc2-card">
            <div class="fc-rc2-header">
                <img class="fc-rc2-avatar" src="..." alt="Avatar" />
                <div class="fc-rc2-meta">
                    <span class="fc-rc2-name">Username</span>
                    <a class="fc-rc2-date" href="...">2 hours ago</a>
                </div>
            </div>
            <div class="fc-rc2-body">Comment preview...</div>
            <a class="fc-rc2-page-link" href="...">Page Title</a>
        </div>
    </div>
</div>

Varsayılan CSS Referansı

Son Yorumlar Bileşeni Varsayılan CSS

Copy

.fc-rc2 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    text-align: left;
    line-height: 1.5;
    color: #1a1a1a;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 20px;
    background: #fff;
}
.fc-rc2-heading { font-size: 16px; font-weight: 700; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #eee; }
.fc-rc2-card { padding: 14px 0; border-bottom: 1px solid #f0f0f0; }
.fc-rc2-card:last-child { border-bottom: none; }
.fc-rc2-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.fc-rc2-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.fc-rc2-name { font-size: 13px; font-weight: 600; }
.fc-rc2-date { font-size: 11.5px; color: #999; text-decoration: none; }
.fc-rc2-body { font-size: 14px; line-height: 1.55; color: #444; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fc-rc2-page-link { display: inline-block; margin-top: 6px; font-size: 12px; color: #777; text-decoration: none; }
.fc-rc2-page-link:hover { color: #0066cc; text-decoration: underline; }

Özelleştirme Örnekleri

Avatar Boyutunu Değiştir

Özel Avatar Boyutu

Copy

.fc-rc2-avatar {
    width: 40px !important;
    height: 40px !important;
}

Yorum Metninin Daha Fazla Satırını Göster

Daha Fazla Yorum Satırı Göster

Copy

.fc-rc2-body {
    -webkit-line-clamp: 5 !important;
}

Kapsayıcı Kenarlığını Kaldır

Copy

.fc-rc2 {
    border: none !important;
    box-shadow: none !important;
}

The Most Discussed Pages Widget, en çok yorumlanan sayfalarınızın sıralı bir listesini görüntüler. Başlık, numaralandırılmış sıralar, simgeli yorum sayıları, son etkinlik tarihleri ve otomatik karanlık mod algılama içerir.

Temel Kurulum

Most Discussed Pages Widget Kurulumu

Copy

Run

<script src="https://cdn.fastcomments.com/js/widget-top-pages-v2.min.js"></script>
<div id="fastcomments-widget-top-pages"></div>
<script>
    FastCommentsTopPagesV2(document.getElementById('fastcomments-widget-top-pages'), {
        tenantId: 'demo'
    });
</script>

Yapılandırma Seçenekleri

tenantId (zorunlu): FastComments tenant ID'niz
hasDarkBackground (isteğe bağlı): Karanlık mod stilini zorla. Ayarlanmazsa sayfa arka planından otomatik algılanır

Widget aşağıdaki HTML yapısı ile render edilir:

Most Discussed Pages Widget HTML Yapısı

Copy

<div class="fc-tp2">
    <div class="fc-tp2-heading">Most Discussed Pages</div>
    <div class="fc-tp2-list">
        <div class="fc-tp2-item">
            <div class="fc-tp2-rank">1</div>
            <div class="fc-tp2-detail">
                <a class="fc-tp2-title" href="...">Page Title</a>
                <span class="fc-tp2-activity">Last activity Mar 21, 2026</span>
            </div>
            <div class="fc-tp2-count">42</div>
        </div>
    </div>
</div>

Varsayılan CSS Referansı

Most Discussed Pages Widget Varsayılan CSS

Copy

.fc-tp2 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    text-align: left;
    line-height: 1.5;
    color: #1a1a1a;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 20px;
    background: #fff;
}
.fc-tp2-heading { font-size: 16px; font-weight: 700; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #eee; }
.fc-tp2-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f0f0f0; }
.fc-tp2-item:last-child { border-bottom: none; }
.fc-tp2-rank { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 11px; font-weight: 700; background: #f0f0f0; color: #888; }
.fc-tp2-title { font-size: 13px; font-weight: 500; color: #1a1a1a; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-tp2-activity { font-size: 11px; color: #999; }
.fc-tp2-count { font-size: 12px; font-weight: 600; color: #666; }

Özelleştirme Örnekleri

Sıralama Rozetlerini Kaldır

Copy

.fc-tp2-rank {
    display: none !important;
}

Konteyner Kenarlığını Kaldır

Copy

.fc-tp2 {
    border: none !important;
    box-shadow: none !important;
}

Recent Discussions Widget, en son yorum etkinliğine göre sıralanmış bir sayfa listesi gösterir. Başlık, son etkinlik tarihleri, simgeli yorum sayıları ve otomatik karanlık mod algılama içerir.

Temel Kurulum

Recent Discussions Widget Kurulumu

Copy

Run

<script src="https://cdn.fastcomments.com/js/widget-recent-discussions-v2.min.js"></script>
<div id="fastcomments-widget-recent-discussions"></div>
<script>
    FastCommentsRecentDiscussionsV2(document.getElementById('fastcomments-widget-recent-discussions'), {
        tenantId: 'demo'
    });
</script>

Yapılandırma Seçenekleri

tenantId (gerekli): FastComments kiracı kimliğiniz
count (opsiyonel): Gösterilecek sayfa sayısı. Varsayılan 20, maksimum 100
hasDarkBackground (opsiyonel): Karanlık mod stilini zorlar. Ayarlanmazsa sayfa arka planından otomatik algılanır

Widget aşağıdaki HTML yapısıyla render edilir:

Recent Discussions Widget HTML Yapısı

Copy

<div class="fc-rd2">
    <div class="fc-rd2-heading">Recent Discussions</div>
    <div class="fc-rd2-list">
        <div class="fc-rd2-item">
            <div class="fc-rd2-detail">
                <a class="fc-rd2-title" href="...">Page Title</a>
                <span class="fc-rd2-activity">Last activity Mar 21, 2026</span>
            </div>
            <div class="fc-rd2-count">42</div>
        </div>
    </div>
</div>

Varsayılan CSS Referansı

Recent Discussions Widget Varsayılan CSS

Copy

.fc-rd2 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    text-align: left;
    line-height: 1.5;
    color: #1a1a1a;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 20px;
    background: #fff;
}
.fc-rd2-heading { font-size: 16px; font-weight: 700; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #eee; }
.fc-rd2-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f0f0f0; }
.fc-rd2-item:last-child { border-bottom: none; }
.fc-rd2-title { font-size: 13px; font-weight: 500; color: #1a1a1a; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-rd2-activity { font-size: 11px; color: #999; }
.fc-rd2-count { font-size: 12px; font-weight: 600; color: #666; }

Özelleştirme Örnekleri

Konteyner Kenarlığını Kaldırma

Konteyner Kenarlığını Kaldır

Copy

.fc-rd2 {
    border: none !important;
    box-shadow: none !important;
}

Özel Bağlantı Rengi

Copy

a.fc-rd2-title:hover {
    color: #e63946 !important;
}

Diğer Ön Uç Kütüphaneler

React, Angular, Vue ve benzeri için tüm resmi FastComments ön uç kütüphaneleri customCSS yapılandırma parametresini kabul eder ve aynı HTML yapısına sahip vanilla js kütüphanesinin etrafında birer sarmalayıcıdır.

Başlarken

Widget Stilleri

Diğer Ön Uç Kütüphaneler

Custom Styling Guide

Stilleri Geçersiz Kılma

Stiller Nasıl Özelleştirilir

Yorum Widget Stillerini Nasıl Özelleştirebilirsiniz

Seçenek 1: `customCSS` Parametresi ile

Seçenek 2: Yönetici Paneli Üzerinden

İpuçları

Yorum Widget Stil Referansı (v2, en son)

Son Yorumlar Widget Stilleri

Temel Kurulum

Yapılandırma Seçenekleri

Bileşen Yapısı

Varsayılan CSS Referansı

Özelleştirme Örnekleri

Avatar Boyutunu Değiştir

Yorum Metninin Daha Fazla Satırını Göster

Kapsayıcı Kenarlığını Kaldır

En Çok Tartışılan Sayfalar Widget Stilleri

Temel Kurulum

Yapılandırma Seçenekleri

Widget Yapısı

Varsayılan CSS Referansı

Özelleştirme Örnekleri

Sıralama Rozetlerini Kaldır

Konteyner Kenarlığını Kaldır

Son Tartışmalar Widget Stilleri

Temel Kurulum

Yapılandırma Seçenekleri

Widget Yapısı

Varsayılan CSS Referansı

Özelleştirme Örnekleri

Konteyner Kenarlığını Kaldırma

Özel Bağlantı Rengi

Diğer Ön Uç Kütüphaneler

Dil 🇹🇷 Türkçe

Başlarken

Widget Stilleri

Diğer Ön Uç Kütüphaneler

Custom Styling Guide

Stilleri Geçersiz Kılma

Stiller Nasıl Özelleştirilir

Yorum Widget Stillerini Nasıl Özelleştirebilirsiniz

Seçenek 1: customCSS Parametresi ile

Seçenek 2: Yönetici Paneli Üzerinden

İpuçları

Yorum Widget Stil Referansı (v2, en son)

Son Yorumlar Widget Stilleri

Temel Kurulum

Yapılandırma Seçenekleri

Bileşen Yapısı

Varsayılan CSS Referansı

Özelleştirme Örnekleri

Avatar Boyutunu Değiştir

Yorum Metninin Daha Fazla Satırını Göster

Kapsayıcı Kenarlığını Kaldır

En Çok Tartışılan Sayfalar Widget Stilleri

Temel Kurulum

Yapılandırma Seçenekleri

Widget Yapısı

Varsayılan CSS Referansı

Özelleştirme Örnekleri

Sıralama Rozetlerini Kaldır

Konteyner Kenarlığını Kaldır

Son Tartışmalar Widget Stilleri

Temel Kurulum

Yapılandırma Seçenekleri

Widget Yapısı

Varsayılan CSS Referansı

Özelleştirme Örnekleri

Konteyner Kenarlığını Kaldırma

Özel Bağlantı Rengi

Diğer Ön Uç Kütüphaneler

Seçenek 1: `customCSS` Parametresi ile