هيلبرنت | Helpernt - [XF 2.x] : طريقة اضافة اطار حول الصورة الرمزية لكاتب الموضوع لتصبح كما الموجودة بهيلبرنت

هيلبرنت | Helpernt (https://www.helpernt.com/vb/index.php)

- ركن شروحات الزين فورو XENFORO (https://www.helpernt.com/vb/forumdisplay.php?f=94)

طريقة اضافة اطار حول الصورة الرمزية لكاتب الموضوع لتصبح كما الموجودة بهيلبرنت

السلام عليكم ورحمه الله وبركاته

رغم انى كنت عزمت ان انسحب من عالم الزين فورو تدريجيا الا انى اجد بعض الاستفسارات لدى البعض من الاعضاء بركن المشاكل تطلب تعديل على القالب للوصل الى استايل يحاكى استايلات الفى بى ومنذ انطلاق هيلبرنت كانت فكره الاساسية المساعدة ولا نبخل على اى شخص اى معلومة كانت لدينا كلل هذا بدون الالتفات الى اى شى اخر لا ماديات ولا غيره عموما ندخل فى الدرس وهو عبار عن جعل الصورة الرمزية اكبر حجما مع انشاء اطار ومايحص تاطير القالب حتى يصبح مثل هيلبرنت.
[ توافق الدرس ]: الجيل الثانى XF2.0
[مقدمه الدرس]: الدرس حصرى لمعهد هيلبرنت
الصوره قبل

https://www.helpernt.com/vb/attachme...1&d=1528567481

الصوره بعد

https://www.helpernt.com/vb/attachme...1&d=1528567481

الخطوات
1- ادخل لوحة تحكم المنتدى ابحث عن قالبth_macros_lastPostAv ابحث بداخله عن هذا الكود

كود PHP:


		
			
        <div class="lastPostAv">
            <xf:avatar user="{$user}" size="xs" defaultname="{$defaultName}" />
        </div>

- استبداله بى

كود PHP:


		
			
        <div class="lastPostAv">
            <xf:avatar user="{$user}" size="xs" defaultname="{$defaultName}" />
        </div>
        <div class="Triangle"></div>
        <div class="TriangleAv"></div>

2- ايضا بلوحة التحكم ابحث عن th_lastPostAv.less قم بحذف مابداخله ثم قم بوضع هذا الكود

كود PHP:


		
			
.lastPostAv {
    float: left;
    margin-right: @xf-paddingMedium;
}
.Triangle {
    width: 0px;
    height: 0px;
    border-style: solid none solid solid;
    border-width: 7px;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 7px solid #B3D892;
    float: left;
    margin-top: 5px;
    margin-left: -6px;

}
.TriangleAv {
    float: left;
    height: 40px;
    margin-right: @xf-paddingMedium;
}
@media(max-width: @xf-responsiveMedium) {
    .lastPostAv ,.Triangle ,.TriangleAv {
        display: none;
    }
}

3- داخل قالب extra.less قم بوضع هذا الكود لتكبير الصوره الرمزية بالصفحة الرئيسية

كود:

.avatar.avatar--xs {

    width: 38px;

    height: 38px;

    font-size: 19.2px;

    background-color: #FFF;

    border: 1px solid #B3D892;

    float: right;

    text-align: center;

    padding: 2px;

    height: 40px;

    width: 40px;

    border-radius: 3px;



}

تم بحمد الله

رد: تاطير واضافة اطار حول الصورة الرمزية لكاتب الموضوع لتصبح كما الموجودة بهيلبرنت

كم أنت كريم يا أبوكريم دائما بخدمة أعضائك

عاشت أناملك الذهبية وربنا ميحرمناش من أبداعاتك

رد: تاطير واضافة اطار حول الصورة الرمزية لكاتب الموضوع لتصبح كما الموجودة بهيلبرنت

شرح رائع

شكرا لك .. سلمت الايادي

رد: تاطير واضافة اطار حول الصورة الرمزية لكاتب الموضوع لتصبح كما الموجودة بهيلبرنت

احسنت ابو كريم ..
بارك الله فيك

رد: تاطير واضافة اطار حول الصورة الرمزية لكاتب الموضوع لتصبح كما الموجودة بهيلبرنت

بارك الله فيك وجزيت خيرا
شرح راااااااااااائع

رد: تاطير واضافة اطار حول الصورة الرمزية لكاتب الموضوع لتصبح كما الموجودة بهيلبرنت

جزاك الله خيرا ولم الانسحاب من الزينفورو ؟؟؟

رد: تاطير واضافة اطار حول الصورة الرمزية لكاتب الموضوع لتصبح كما الموجودة بهيلبرنت

اقتباس:

المشاركة الأصلية كتبت بواسطة for sat (المشاركة 19761)

كم أنت كريم يا أبوكريم دائما بخدمة أعضائك

عاشت أناملك الذهبية وربنا ميحرمناش من أبداعاتك

اقتباس:

المشاركة الأصلية كتبت بواسطة ناصر (المشاركة 19777)

شرح رائع

شكرا لك .. سلمت الايادي

اقتباس:

المشاركة الأصلية كتبت بواسطة أبو_شهاب (المشاركة 19813)

احسنت ابو كريم ..
بارك الله فيك

اقتباس:

المشاركة الأصلية كتبت بواسطة mesterperfect (المشاركة 19826)

بارك الله فيك وجزيت خيرا
شرح راااااااااااائع

اشكركم جميعا اخوتى
كل احترامى لكم

رد: تاطير واضافة اطار حول الصورة الرمزية لكاتب الموضوع لتصبح كما الموجودة بهيلبرنت

اقتباس:

المشاركة الأصلية كتبت بواسطة maaidni (المشاركة 19868)

جزاك الله خيرا ولم الانسحاب من الزينفورو ؟؟؟

هههههه مش من الزين فورو فقط بلى من عالم النت ;)

رد: طريقة اضافة اطار حول الصورة الرمزية لكاتب الموضوع لتصبح كما الموجو

القوالب غير موجودة في اخر نسخة