نحتاج إلى مساعدة في إصلاح 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؟