Custom Styling Guide

Το widget Πρόσφατα Σχόλια εμφανίζει μία λίστα με τα πιο πρόσφατα σχόλια σε όλο τον ιστότοπό σας ή για μια συγκεκριμένη σελίδα.

Αυτό το widget περιλαμβάνει ελάχιστο προεπιλεγμένο στυλ και έχει σχεδιαστεί ώστε να προσαρμόζεται εύκολα με το δικό σας CSS.

Widget Structure

Το widget αποδίδεται με την ακόλουθη δομή 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 Default CSS Reference

Το widget περιλαμβάνει το ακόλουθο ελάχιστο προεπιλεγμένο στυλ:

Προεπιλεγμένο CSS του Widget Πρόσφατα Σχόλια

Copy

1

2.fastcomments-recent-comments {

3 font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;

4 text-align: left;

5}

6.fastcomments-recent-comments .comment {

7 padding-top: 5px;

8}

9.fastcomments-recent-comments .comment .user-details img {

10 width: 20px;

11 margin-right: 5px;

12 vertical-align: middle;

13}

14.fastcomments-recent-comments .comment .user-details .user-name {

15 vertical-align: middle;

16 font-size: 12px;

17}

18.fastcomments-recent-comments .comment .user-details .reply-date-time {

19 vertical-align: middle;

20 padding-left: 5px;

21 font-size: 10px;

22}

23.fastcomments-recent-comments .comment .comment-text {

24 position: relative;

25 line-height: 22px;

26 font-size: 14px;

27 text-align: justify;

28 margin: 8px -1em 8px 0;

29 padding-right: 1em;

30}

31.fastcomments-recent-comments .comment .comment-text .inline-image {

32 display: block;

33 max-width: 500px;

34 margin: 3px 0 3px 0;

35}

36.fastcomments-recent-comments .comment .comment-text .inline-image img {

37 max-width: 100%;

38 max-height: 400px;

39}

40.fastcomments-recent-comments .comment .comment-text:before {

41 position: absolute;

42 content: "...";

43 right: 0;

44 bottom: 0;

45}

46.fastcomments-recent-comments .comment .comment-text:after {

47 position: absolute;

48 content: "";

49 right: 0;

50 width: 1em;

51 height: 1em;

52 margin-top: 0.2em;

53 background: #fff;

54}

55.fastcomments-recent-comments .comment > .link-wrapper {

56 margin: 5px 0 0 0;

57}

58.fastcomments-recent-comments .comment > .link-wrapper .link {

59 font-size: 13px;

60}

61

Customization Examples

Change Avatar Size

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

Change Comment Text Truncation

Το προεπιλεγμένο στυλ χρησιμοποιεί τεχνάσματα CSS για να συντομεύει τα μακροσκελή σχόλια με "...". Για να το απενεργοποιήσετε:

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

Add Border to Comments

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

Το widget Top Pages εμφανίζει μια λίστα με τις σελίδες σας που έχουν τα περισσότερα σχόλια.

Αυτό το widget περιλαμβάνει ελάχιστο προεπιλεγμένο στυλ και έχει σχεδιαστεί ώστε να μπορεί να προσαρμοστεί εύκολα με το δικό σας CSS.

Widget Structure

Το widget αποδίδεται με την ακόλουθη δομή HTML:

<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

Το widget περιλαμβάνει το ακόλουθο ελάχιστο προεπιλεγμένο στυλ:

Προεπιλεγμένο CSS του widget Top Pages

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

Add Styling to Links

.fastcomments-top-pages .title-link {
    color: #0066cc !important;
    text-decoration: none !important;
    font-size: 14px !important;
}

.fastcomments-top-pages .title-link:hover {
    text-decoration: underline !important;
}

Add Borders Between Pages

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

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

Style the Comment Count

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

Όλες οι επίσημες frontend βιβλιοθήκες του FastComments για React, Angular, Vue και ούτω καθεξής, δέχονται την παράμετρο διαμόρφωσης customCSS και λειτουργούν ως wrappers γύρω από τη βιβλιοθήκη vanilla js με την ίδια δομή HTML.