Custom Styling Guide

The Recent Comments 위젯은 사이트 전체 또는 특정 페이지에 대한 최신 댓글 목록을 표시합니다.

이 위젯은 최소한의 기본 스타일을 포함하며 사용자의 CSS로 쉽게 커스터마이즈할 수 있도록 설계되었습니다.

위젯 구조

이 위젯은 다음과 같은 HTML 구조로 렌더링됩니다:

<div class="fastcomments-recent-comments">
    <div class="comment">
        <div class="user-details">
            <img src="..." alt="Avatar" class="avatar" />
            <span class="user-name">Username</span>
            <span class="reply-date-time">2 hours ago</span>
        </div>
        <div class="comment-text">Comment content...</div>
        <div class="link-wrapper">
            <a class="link" href="...">Page Title</a>
        </div>
    </div>
    <!-- More comments... -->
</div>

Recent Comments 기본 CSS 참조

이 위젯은 다음과 같은 최소한의 기본 스타일을 포함합니다:

Recent Comments 위젯 기본 CSS

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

사용자 정의 예제

아바타 크기 변경

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

댓글 텍스트 잘림 변경

기본 스타일은 CSS 트릭을 사용하여 긴 댓글을 "..."로 잘라냅니다. 비활성화하려면:

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

댓글에 테두리 추가

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

상위 페이지 위젯은 댓글이 가장 많은 페이지 목록을 표시합니다.

이 위젯은 최소한의 기본 스타일링을 포함하며 사용자가 직접 CSS로 쉽게 커스터마이즈할 수 있도록 설계되어 있습니다.

위젯 구조

위젯은 다음과 같은 HTML 구조로 렌더링됩니다:

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

상위 페이지 기본 CSS 참고

이 위젯은 다음과 같은 최소한의 기본 스타일을 포함합니다:

상위 페이지 위젯 기본 CSS

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

사용자 지정 예제

링크에 스타일 추가

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

페이지 사이에 테두리 추가

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

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

댓글 수 스타일 지정

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

모든 공식 FastComments 프론트엔드 라이브러리(React, Angular, Vue 등)는 customCSS 구성 매개변수를 허용하며 동일한 HTML 구조를 가진 vanilla js 라이브러리의 래퍼입니다.