Custom Styling Guide

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

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

Δομή του widget

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

Αναφορά προεπιλεγμένου CSS για το widget 'Πρόσφατα σχόλια'

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

Παραδείγματα προσαρμογής

Αλλαγή μεγέθους avatar

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

Το 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>
    <!-- Περισσότερες σελίδες... -->
</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 διαμόρφωσης παράμετρο και είναι περιτυλίγματα γύρω από τη βιβλιοθήκη vanilla js με την ίδια δομή HTML.