سمة الهواء

موضوع
,
327

كيفية إضافة عمود “المشاهدات” إلى قائمة المواضيع.

أنا لست مطورًا أو مبرمجًا بأي شكل من الأشكال. قضيت بضع ساعات في العبث بكود CSS باستخدام ميزة “Inspect Element” في Google Chrome. تمكنت من جعل عمود المشاهدات يظهر بشكل صحيح، وقمت أيضًا بتغيير حجم كل عمود حسب رغبتي. يمكنك تعديل العرض في كود CSS أدناه بحرية. لقد أضفت أيضًا تعليقات في الكود حتى تتمكن من معرفة أي كود يخص أي عمود بسهولة. لكل عمود منطقتان (الرأس، والصف). يجب أن تتطابق هذه العروض.

آمل أن يساعد هذا الجميع: @daming @bksubhuti @eddy2

التعليمات

1. إنشاء مكون جديد.

2. انسخ هذا الـ CSS

استخدم كود CSS المحدث أدناه بدلاً من الكود الذي قدمه @jordan.vidrine أعلاه.

الخيار أ) إضافة عمود المشاهدات لسطح المكتب فقط (موصى به)

  • أضف كود CSS إلى علامة التبويب Desktop.

الخيار ب) إضافة عمود المشاهدات لكل من سطح المكتب والجوال.

  • أضف كود CSS إلى علامة التبويب Common.

الخيار ج) إضافة عمود المشاهدات للجوال فقط.

  • أضف كود CSS إلى علامة التبويب Mobile.

ملاحظة: إذا اخترت الخيار ب أو ج…

على الجوال، تشغل الأعمدة الثلاثة (الردود، المشاهدات، النشاط) مساحة كبيرة جدًا وتكون مضغوطة. إذا كنت بحاجة إلى ذلك للجوال، أقترح إزالة أحد الأعمدة الثلاثة. يمكنك القيام بذلك عن طريق إضافة Display: none إلى كلتا المنطقتين (الرأس، الصفوف) في كود CSS أدناه للعمود الذي تريد إخفاءه.

/* [Topic] */

    /* Topic Header */
    .full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.main-link {
        width: 66%;
    }
    
    /* Topic Row */
    .full-width .contents .topic-list .topic-list-header .topic-list-data.default {
        width: 66%;
    }

/* [Replies] */

    /* Replies Header */
    .full-width .contents .topic-list .topic-list-header .topic-list-data.posts {
        width: 7%;
        order: 2;
    }
    
    /* Replies Rows */
    .full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.posts {
        width: 7%;
        order: 2;
    }

/* [Views] */

    /* Views Header */
    .full-width .contents .topic-list .topic-list-header .topic-list-data.views {
        display: block;
        width: 7%;
        order: 3;
    }
    
    /* Views Rows */
    .full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.views {
        width: 7%;
        order: 3;
        display: flex;
        justify-content: center;
        align-items: center;
    }

/* [Activity] */

    /* Activity Header */
    .full-width .contents .topic-list .topic-list-header .topic-list-data.activity {
        display: block;
        width: 7%;
        order: 4;
    }
    
    /* Activity Rows */
    .full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.age {
        width: 7%;
        order: 4;
    }

@jordan.vidrine إذا كانت لديك أي مراجعات لكود CSS الذي كتبته، فيرجى إخباري. أنا لا أعرف تمامًا ما أفعله… ولكنه يعمل lol.

6 إعجابات