So i connected the WP discourse plugin with my forum but the comments below posts look pretty ugly.
Example:
Any suggestions on how to modify the CSS properly so the comments look decent would be well appreciated!
So i connected the WP discourse plugin with my forum but the comments below posts look pretty ugly.
Example:
Any suggestions on how to modify the CSS properly so the comments look decent would be well appreciated!
What about this?
.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;
}
Alternative:
.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;
}
That looks great. Thanks! I prefer the 1st example.
Just need to fix the spacing between avatar and the username, and also the stuff that comes below the comments:
Also not sure why the link to Continue Discussion is not displayed below comments.
I forgot we weren’t on Discourse in your case and my code used SCSS, not CSS, that’s why there is some stuff that didn’t work.
Here’s the compiled 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;
}
For the bottom avatars, you can do this:
#comments .comment-reply-title .avatar {
display: inline-block;
margin-right: 10px;
margin-top: 15px;
}
You just need to make, I guess, the two sentences above a bit bigger, but you can also do it yourself, just find the right HTML classes using your browser dev tools.
Maybe you need to check a setting in WP-Discourse?