• أعضاء وزوار معهد زين العربية، نود أن نعلمكم أن المعهد سيشهد في الفترة القادمة الكثير من التغيرات سواءا على المستوى الاداري او مستوى الاقسام، لذا نرجو منكم التعاون، وأي ملاحظات او استفسارات يرجى التواصل معنا عبر قسم الشكاوي و الإقتراحات و الطلبات ونشكركم على حسن تفهمكم وتعاونكم ،مع خالص الشكر والتقدير والاحترام من إدارة زين العربية.

التنسيق الداخلي لأقسام المنتدى و الوصف الخاص بها

أبو غَيْث

:: الإدارة العامة ::
طاقم الإدارة
23 يناير 2019
5,377
45
3,433
113
زين العربية
xenarabia.com
أهلا وسهلا برواد و أعضاء زين العربية الكرام ،
ها نحن نعود إليكم من جديد مع بعض التعديلات الجمالية لمنتداك.

وفي درسنا اليوم سنتعرف على كيفية تنسيق عناوين أقسام المنتدى الداخلية و كذا وصفها ..

و هذا مثال حتى أقرب لكم الفكرة قبل تطبيقها

full


من أجل ذلك سيتم إضافة الكود إلى قالب extra.less

الكود الأول : في حالة أردت تنسيق جميع عناوين الأقسام و أوصافها الداخلية

CSS:
/* تنسيق كافة الأقسام الداخلية و الوصف الخاص بها  */
[data-container-key="forum_view"] {
    .p-body-header {
        background: #794044; /*لون الخلفية  */
        color: #f4e628; /*لون القسم الرئيسي   */
        padding: 10px;
        border-radius: 4px;
        border-left: 20px solid #ee9a49; /*لون الإطار في اليمين  */
    }
    .p-title-value:before {
        .m-faBase();
        content: "\f085"; /*قبل عنوان القسم Font-awesome ايقونة */
           padding-right: 5px;
    }
    .p-description {
        color: #f8eef6; /* لون وصف القسم*/
    }
    .p-description a {
        color: #f8eef6; /* لون الروابط إذا وجدت*/
    }
}
/**********/


الكود الثاني : في حالة أردت تنسيق قسم معين من أقسام المنتدى ، طبعا تكرر العملية لكل قسم
CSS:
/* تنسيق قسم من أقسام المنتدى الداخلي و الوصف الخاص به  */
[data-container-key="node-37"] {     /*قم بتغير فقط رقم القسم 37*/
    .p-body-header {
        background: #794044; /*لون الخلفية  */
        color: #f4e628; /*لون القسم الرئيسي   */
        padding: 10px;
        border-radius: 4px;
        border-left: 20px solid #ee9a49; /*لون الإطار في اليمين  */
    }
    .p-title-value:before {
        .m-faBase();
        content: "\f085"; /*قبل عنوان القسم Font-awesome ايقونة */
           padding-right: 5px;
    }
    .p-description {
        color: #f8eef6; /* لون وصف القسم*/
    }
    .p-description a {
        color: #f8eef6; /* لون الروابط إذا وجدت*/
    }
}

/**********/

أرجو أن يكون الشرح واضح
و أي إستفسار لا تترددو بطرحه ;)

🙂ودمتم سالمين 🙂
 

إحصائيات المنتدى

المواضيع
1,580
المشاركات
17,817
الأعضاء
1,149
آخر عضو مسجل
hoxty
أعلى