WP 게시물 하단 댓글 CSS 수정 도움 요청

제품 지원 WordPress
1

그래서 WP discourse 플러그인을 내 포럼에 연결했는데, 게시물 아래 댓글들이 좀 별로입니다.

예시:

image
image1068×846 106 KB

댓글이 깔끔하게 보이도록 CSS를 적절히 수정하는 방법에 대한 제안이 있다면 정말 감사하겠습니다!

2

이건 어떨까요?

.discourse-comments-area {
    padding-top: 15px;
}
.discourse-comments-title {
    font-size: 2em;
}
.comment {
    padding-top: 30px;
    min-height: 70px;
}
.comment-body {
    display: flex;
}
.comment-meta {
    display: flex;
    position: absolute;
    width: 100%;
    
}
.comment-metadata {
    margin-left: 5px;
    margin-top: 2px;
    color: #aaa;
    &:before {
        content: "/";
    }
}
.comment-author {
    display: flex;
    .fn {
        font-size: 1.4em;
        margin-left: 15px;
    }
}
.comment-content {    
    margin-left: 79px;
    margin-top: 30px;
    font-size: 1.15em;
    line-height: 1.5;
}

image
image1147×943 246 KB

3

대안:

.discourse-comments-area {
    padding-top: 15px;
}
.discourse-comments-title {
    font-size: 2em;
}
.comment {
    padding-top: 20px;
    min-height: 70px;
}
.comment-body {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 20px;
    border-bottom: 1px solid #ddd;
}
.comment-meta {
    display: flex;
    //position: absolute;
    align-items: center;
    width: 100%;
    
}
.comment-metadata {
    margin-left: 5px;
    margin-top: 2px;
    color: #aaa;
    &:before {
        content: "/";
    }
}
.comment-author {
    display: flex;
    align-items: center;
    .avatar {
        width: 40px;
        height: 40px;
    }
    .fn {
        font-size: 1.4em;
        margin-left: 15px;
    }
}
.comment-content {
    margin-top: 15px;
    font-size: 1.15em;
    line-height: 1.5;
}

image
image1152×1034 245 KB

4

정말 잘 됐네요. 감사합니다! 첫 번째 예시를 더 선호합니다.

아바타와 사용자 이름 사이의 간격만 수정하면 되고, 댓글 아래에 나오는 요소들도 수정해야 합니다:

image
image1201×1004 162 KB

또한 댓글 아래에 ‘토론 계속하기’ 링크가 표시되지 않는 이유도 모르겠습니다.

5

당신의 경우 Discourse를 사용하고 있지 않다는 걸 잊어버렸고, 제 코드는 SCSS를 사용했는데 CSS가 아니어서 일부가 작동하지 않았던 것 같습니다.

컴파일된 CSS는 다음과 같습니다:

.discourse-comments-area {
	 padding-top: 15px;
}
 .discourse-comments-title {
	 font-size: 2em;
}
 .comment {
	 padding-top: 30px;
	 min-height: 70px;
}
 .comment-body {
	 display: flex;
}
 .comment-meta {
	 display: flex;
	 position: absolute;
	 width: 100%;
}
 .comment-metadata {
	 margin-left: 5px;
	 margin-top: 2px;
	 color: #aaa;
}
 .comment-metadata:before {
	 content: "/";
}
 .comment-author {
	 display: flex;
}
 .comment-author .fn {
	 font-size: 1.4em;
	 margin-left: 15px;
}
 .comment-content {
	 margin-left: 79px;
	 margin-top: 30px;
	 font-size: 1.15em;
	 line-height: 1.5;
}

하단의 아바타에 대해서는 이렇게 할 수 있습니다:

#comments .comment-reply-title .avatar {
    display: inline-block;
    margin-right: 10px;
    margin-top: 15px;
}

image
아마도 위 두 문장의 크기를 조금 더 키워야 할 것 같지만, 브라우저 개발자 도구를 사용하여 올바른 HTML 클래스를 찾아 직접 조정할 수도 있습니다.

WP-Discourse 설정에서 옵션을 확인해 봐야 할 수도 있습니다.