درس XF-2.x شرح خاصية متواجد وغير متواجد في زاوية الصورة الرمزية للمنتديات Xenforo 2

الإهداءات
  • غزل من من قلب الغزل ..:
    ضياءٌ شعَّ من أرض المدينة و زُفَّت البشرى لرسول الله (ص) بولادة سبطه الأول الإمام المجتبى (ع).✨💚
  • غزل من قلب الغزل:
    "يارب دائمًا اعطنّي على قد نيتي وسخر لي الأشخاص اللي يشبهون قلبي🌿✨. .
  • غزل من قلب الغزل:
    مارس الرحمة قدر المُستطاع فكلما تلطفت مع خلق الله زاد الله لطفهُ حولك.💐
  • غزل من قلب الغزل:
    اللهم إنك عفوٌ كريمٌ تحب العفو فاعفو عنا ♥️😌
إصدار الزين فورو
XenForo 2.x
[اسم الشرح] : شرح خاصية متواجد وغير متواجد في زاوية الصورة الرمزية للمنتديات Xenforo 2 الزين فورو الجيل الثاني
[التوافق] : متوافق مع جميع النسخ الجيل الثاني حتى تاريخ النشر XF 2.0.9

المثال: حالة التواجد في منتديات شباب الرافدين

354

الشرح:

نبحث عن قالب : message_macros

داخل القالب نبحث عن الكود التالي :

HTML:
<span class="message-userArrow"></span>

اعلاها نضيف الكود التالي:

HTML:
 <xf:if is="$user.isOnline()">
    <div class="message-threadStarter"><span class="message-threadStarter--indicator">متصل</span></div>
<xf:else />
     <div class="message-threadStarter"><span class="message-threadStarter--indicatorOff">غير متصل</span></div>
</xf:if>

نسوي حفظ.

**

نبحث عن قالب :

كود:
EXTRA.less

اسفل القالب نضيف الكود التالي :

CSS:
position:absolute;
right:70px;
top:-5px;
z-index:1;
overflow:hidden;width:75px;
height:75px;
text-align:left
}
.message-threadStarter .message-threadStarter--indicator
{
font-size:9px;
color:#fefefe;
font-weight:700;
position:absolute;
top:10px;
left:-17px;
text-transform:uppercase;
text-align:center;
line-height:20px;
width:75px;
display:block;
background:#79A70A;
background: linear-gradient(#9bc90d 0%, #79a70a 100%);
box-shadow:0 3px 10px -5px #000;
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg)
}
.message-threadStarter .message-threadStarter--indicator:before,.message-threadStarter .message-threadStarter--indicator:after
{
content:"";
position:absolute;
top:100%;
z-index:-1;
border:3px solid;
border-top-color:#79a70a;
border-bottom-color:transparent
}
.message-threadStarter .message-threadStarter--indicator:before
{
left:0;
border-left-color:#79a70a;
border-right-color:transparent
}
.message-threadStarter .message-threadStarter--indicator:after{
right:0;
border-left-color:transparent;
border-right-color:#79a70a
}

.message-threadStarter .message-threadStarter--indicatorOff
{
font-size:10px;
color:#fefefe;
font-weight:700;
position:absolute;
top:10px;
left:-17px;
text-transform:uppercase;
text-align:center;
line-height:20px;
width:75px;
display:block;
background:#2577b1;
background:linear-gradient(#3492d5 0%, #2577b1 100%);
box-shadow:0 3px 10px -5px #000;
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg)
}
.message-threadStarter .message-threadStarter--indicatorOff:before,.message-threadStarter .message-threadStarter--indicatorOff:after
{
content:"";
position:absolute;
top:100%;
z-index:-1;
border:3px solid;border-top-color:#2577b1;
border-bottom-color:transparent
}
.message-threadStarter .message-threadStarter--indicatorOff:before
{
left:0;
border-left-color:#2577b1;
border-right-color:transparent
}
.message-threadStarter .message-threadStarter--indicatorOff:after{
right:0;
border-left-color:transparent;
border-right-color:#2577b1
}


.message-avatar-wrapper .message-avatar-online {
    border: 0;

}

@media (max-width: @xf-responsiveNarrow)
{
        .message-threadStarter
     {
    display: none;
        }
    }

انتهى الشرح
مودتي
 
بارك الله فيك خويا
سؤال
أظنك إن صح كلامي سهوت عن إضافة إسم القالب الأول
هل هو message_macros ?
 
  • بادئ الموضوع
  • #3
بارك الله فيك خويا
سؤال
أظنك إن صح كلامي سهوت عن إضافة إسم القالب الأول
هل هو message_macros ?
بالفعل ..
شكرا جزيلا على التنبيه
مودتي
 

أقسام الرافدين

عودة
أعلى أسفل