ما الجديد
مرحبا بك زائرنا الكريم في موقع شقاوي للتصميم والبرمجة اذا كانت هذه زيارتك اﻻولى فنتشرف بانضمامك لنا وان كنت احد كوكبة اعضائنا فأهلا بعودتك مرة أخرى​

شرح طريقة تحديد اخر مشاركة مثل استايل ترايدنت

بسم الله الرحمن الرحيم الحمد لله والصلاة والسلام على اشرف خلق الله نبينا محمد وعلى آله وصحبة أجمعين. اللهم لا علم لنا إلا ما علمتنا، إنك أنت العليم...

shqawe

shqawe

.:: تركي الودعاني ::.
طاقم الإدارة
إنضم
23 يوليو 2023
المشاركات
527
الحلول
2
مستوى التفاعل
227
النقاط
43
بسم الله الرحمن الرحيم

الحمد لله والصلاة والسلام على اشرف خلق الله نبينا محمد وعلى آله وصحبة أجمعين.

اللهم لا علم لنا إلا ما علمتنا، إنك أنت العليم الحكيم، اللهم علمنا ما ينفعنا، وانفعنا بما علمتنا، وزدنا علما..

اقدم لكم اليوم طريقة تحديد اخر مشاركة في رئيسية المنتدى مثل ماهو معمول به في استايل ترايدنت والموضوع في الصورة التالية:

1732730521103.png

بسم الله نبدأ الشرح:


بداية نقوم بفتج قالب node_list_forum ونقوم بالبحث عن هذا الكود

HTML: 
<div class="node-extra">

ونضيف تحته هذا الكود

HTML: 
<div class="node-extra-inner">

ونبحث في نفس القالب عن هذا الكود:

HTML: 
<xf:else />
                    <span class="node-extra-placeholder">{{ phrase('none') }}</span>
                </xf:if>
            </div>

ونضيف تحته هذا الكود

HTML: 
</div>

بعدها قم بحفظ العمل وانتقل الى قالب extra.less وقم باضافة هالكود بداخله وقم بتغييره حسب حاجتك:

CSS: 
.node-extra-inner {
    padding: 1rem;
    border-radius: 5px;
    border: 1px solid @xf-borderColor;
}


ليصبح الناتج النهائي كالتالي:

1732731315452.png


والى هنا ينتهي الشرح اتمنى ان اكون قد استطعت الى توصيل المعلومة بشكل واضح واي سؤال انا تحت اﻻمر

احترامي وتقديري
اخوكم
شقاوي
 
بارك الله فيك أخي تركي وتم التركيب والتجربة بنجاح

2024-11-28_105611.png

ومن باب التغيير تم التعديل الكود اللى يوضع على قالب extra.less
وأضافة خيار تغيير الخلفية
2024-11-28_112758.png

CSS: 
.node-extra-inner {
    background: @xf-paletteColor1;
    padding: 1rem;
    border-radius: 5px;
    border: 1px solid @xf-borderColor;
}
 
حياك الله اخوي @أبوفاطمة والحمد لله ان الشرح كان واضح

بالنسبة لموضوع المشاركات والمواضيع فيمكن التعديل عليها عن طريق نفس القالب ولكن ابحث عن هذا الكود

HTML: 
<div class="node-stats">
    <dl class="pairs pairs--rows">
        <dt>{{ phrase('threads') }}</dt>
        <dd>{$extras.discussion_count|number_short(1)}</dd>
    </dl>
    <dl class="pairs pairs--rows">
        <dt>{{ phrase('messages') }}</dt>
        <dd>{$extras.message_count|number_short(1)}</dd>
    </dl>
</div>

واستبدله بهذا الكود

HTML: 
<div class="node-stats">
    <div class="node-stats-inner">
        <dl class="pairs pairs--rows">
            <dt>{{ phrase('threads') }}</dt>
            <dd>{$extras.discussion_count|number_short(1)}</dd>
        </dl>
        <dl class="pairs pairs--rows">
            <dt>{{ phrase('messages') }}</dt>
            <dd>{$extras.message_count|number_short(1)}</dd>
        </dl>
    </div>
</div>


واضف هذا الكود في قالب extra.less

CSS: 
.node-body {
    .node-stats {
        .node-stats-inner {
            .pairs {
                border: 1px solid @xf-borderColor;
                border-radius: 5px;
            }
        }
    }
}

مع تغيير ما يلزم حسب رغبتك
 
طيب يا ابو فاطمة جرب كود css هذا بدل السابق وبلغني بالنتيجة:

CSS: 
.node-body {
    .node-stats {
        .node-stats-inner {
            display: flex;
            justify-content: space-around;
            .pairs {
                border: 1px solid @xf-borderColor;
                border-radius: 5px;
                flex: 1;
            }
        }
    }
}
 
بعد الكود الثاني النتيجه الاستايل الافتراضي
2024-11-29_004746.png
الاستايل الثاني
2024-11-29_005801.png
 
التعديل الأخير:
بالنسبة للاستايل الافتراضي تأكد ان node-stats لم يتم اضافة حدود لها

اما بالنسبة للاستايل الثاني اتوقع ان هذا هو المطلوب واﻻ انا غلطان؟ 🤔
 
أخي شقاوي تم تجربة وضع أيقونات أعتقد ماضبطك صغيرة
 

المرفقات

  • 2024-11-29_204407.png
    2024-11-29_204407.png
    1 KB · المشاهدات: 3
والله يا ابو فاطمة انا ما ادري انت كيف ضفت الايقونات هل ضفتها عن طريق html ام عن طريق css

لكن على العموم باي طريقة كانت تقدر تكبر الخط تبع الايقونة اللي هو font-size مع شوية padding باذن الله تضبط اﻻمور معاك
 
اللهم امين واياك يالغالي وتحت امرك باي وقت
 
يجب تسجيل الدخول أو التسجيل كي تتمكن من الرد هنا.
عودة
أعلى